"use client";

import { Pencil, Check, Banknote, Eye } from "lucide-react";
import { cn } from "@/lib/utils";
import type { CostType } from "@/lib/types/api";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

interface CostFormatSelectorProps {
  value: CostType;
  isEditing: boolean;
  canEdit: boolean;
  onEdit: () => void;
  onChange: (value: CostType) => void;
  onCloseEdit: () => void;
}

const COST_FORMATS: { value: CostType; label: string; icon: typeof Banknote }[] = [
  { value: "fixed", label: "Фикс", icon: Banknote },
  { value: "cpm", label: "CPM", icon: Eye },
];

export function CostFormatSelector({
  value,
  isEditing,
  canEdit,
  onEdit,
  onChange,
  onCloseEdit,
}: CostFormatSelectorProps) {
  const currentFormat = COST_FORMATS.find((f) => f.value === value) || COST_FORMATS[0];
  const Icon = currentFormat.icon;

  if (isEditing) {
    return (
      <Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            className="h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm"
          >
            <div className="flex items-center gap-1.5">
              <Icon className="h-3.5 w-3.5" />
              <span>{currentFormat.label}</span>
            </div>
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-40 p-1" align="start">
          <div className="flex flex-col gap-0.5">
            {COST_FORMATS.map((format) => {
              const FormatIcon = format.icon;
              const isSelected = format.value === value;
              return (
                <button
                  key={format.value}
                  type="button"
                  className={cn(
                    "flex items-center gap-2 px-2 py-1.5 text-xs rounded-md transition-colors",
                    isSelected
                      ? "bg-muted font-medium"
                      : "hover:bg-muted/50"
                  )}
                  onClick={() => {
                    onChange(format.value);
                    onCloseEdit();
                  }}
                >
                  <FormatIcon className="h-3.5 w-3.5" />
                  <span className="flex-1 text-left">{format.label}</span>
                  {isSelected && <Check className="h-3 w-3" />}
                </button>
              );
            })}
          </div>
        </PopoverContent>
      </Popover>
    );
  }

  return (
    <button
      type="button"
      disabled={!canEdit}
      className={cn(
        "group h-7 w-full rounded-md border px-2 text-xs font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-default flex items-center justify-between gap-2"
      )}
      onClick={onEdit}
    >
      <div className="flex items-center gap-1.5">
        <Icon className="h-3.5 w-3.5" />
        <span>{currentFormat.label}</span>
      </div>
      {canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
    </button>
  );
}