"use client";

import { Pencil, Check } from "lucide-react";
import { cn } from "@/lib/utils";
import type { PlacementStatus } from "@/lib/types/api";
import {
  PLACEMENT_DEAL_STATUSES,
  getPlacementStatusIcon,
  getPlacementStatusColor,
} from "@/lib/config/placement-columns";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

interface PlacementStatusSelectorProps {
  status: PlacementStatus;
  isEditing: boolean;
  canEdit: boolean;
  onEdit: () => void;
  onChange: (status: PlacementStatus) => void;
  onCloseEdit: () => void;
}

export function PlacementStatusSelector({
  status,
  isEditing,
  canEdit,
  onEdit,
  onChange,
  onCloseEdit,
}: PlacementStatusSelectorProps) {
  const StatusIcon = getPlacementStatusIcon(status);
  const statusColor = getPlacementStatusColor(status);

  if (isEditing) {
    return (
      <Popover open={isEditing} onOpenChange={(open) => !open && onCloseEdit()}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            className={cn(
              "h-7 w-full justify-between px-2 text-xs font-medium border shadow-sm",
              statusColor
            )}
          >
            <div className="flex items-center gap-1.5">
              <StatusIcon className="h-3.5 w-3.5" />
              <span>{status}</span>
            </div>
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-64 p-1" align="start">
          <div className="flex flex-col gap-0.5">
            {PLACEMENT_DEAL_STATUSES.map((s) => {
              const Icon = getPlacementStatusIcon(s);
              const color = getPlacementStatusColor(s);
              const isSelected = s === status;
              return (
                <button
                  key={s}
                  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(s);
                    onCloseEdit();
                  }}
                >
                  <Icon className={cn("h-3.5 w-3.5", color)} />
                  <span className="flex-1 text-left">{s}</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",
        statusColor
      )}
      onClick={onEdit}
    >
      <div className="flex items-center gap-1.5">
        <StatusIcon className="h-3.5 w-3.5" />
        <span>{status}</span>
      </div>
      {canEdit && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
    </button>
  );
}