"use client";

import { Pencil } from "lucide-react";
import { cn } from "@/lib/utils";
import type { PlacementPostStatus } from "@/lib/types/api";
import {
  PLACEMENT_POST_STATUSES,
  getPlacementPostStatusIcon,
  getPlacementPostStatusColor,
  canEditPostStatus,
} from "@/lib/config/placement-columns";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "@/components/ui/button";

interface PlacementPostStatusSelectorProps {
  status: PlacementPostStatus | null;
  isEditing: boolean;
  canEdit: boolean;
  onEdit: () => void;
  onChange: (status: PlacementPostStatus) => void;
  onCloseEdit: () => void;
}

export function PlacementPostStatusSelector({
  status,
  isEditing,
  canEdit,
  onEdit,
  onChange,
  onCloseEdit,
}: PlacementPostStatusSelectorProps) {
  if (!status) {
    return <span className="text-muted-foreground text-xs">—</span>;
  }

  const canEditThisStatus = canEdit && canEditPostStatus(status);
  const StatusIcon = getPlacementPostStatusIcon(status);
  const statusColor = getPlacementPostStatusColor(status);

  if (isEditing && canEditThisStatus) {
    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-72 p-1" align="start">
          <div className="flex flex-col gap-0.5">
            {PLACEMENT_POST_STATUSES.map((s) => {
              const Icon = getPlacementPostStatusIcon(s);
              const color = getPlacementPostStatusColor(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 shrink-0", color)} />
                  <span className="flex-1 text-left">{s}</span>
                </button>
              );
            })}
          </div>
        </PopoverContent>
      </Popover>
    );
  }

  return (
    <button
      type="button"
      disabled={!canEditThisStatus}
      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>
      {canEditThisStatus && <Pencil className="h-3 w-3 opacity-0 group-hover:opacity-70 transition-opacity" />}
    </button>
  );
}