"use client";

import { useState } from "react";
import { toast } from "sonner";
import {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { STATUS_LABELS, STATUS_ICONS } from "@/components/cases/status-badge";
import { useUpdateCase } from "@/lib/api/cases";
import { CASE_STATUSES, type CaseStatus } from "@/lib/api/case-status";

/*
 * Dropdown for manually overriding the case status — skip a step
 * or revert to an earlier stage. Calls PUT /api/cases/:caseNumber
 * with { status: newValue }. The option list is the SSoT lifecycle.
 */

const ALL_STATUSES: readonly CaseStatus[] = CASE_STATUSES;

export function StatusChanger({
  caseNumber,
  currentStatus,
}: {
  caseNumber: string;
  currentStatus?: CaseStatus;
}) {
  const [selected, setSelected] = useState<CaseStatus | "">(currentStatus ?? "");
  const mutate = useUpdateCase(caseNumber);

  const handleSave = async () => {
    if (!selected || selected === currentStatus) return;
    try {
      await mutate.mutateAsync({ status: selected });
      toast.success(`הסטטוס עודכן ל${STATUS_LABELS[selected]}`);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "שגיאה בעדכון הסטטוס");
    }
  };

  return (
    <div className="mt-4 border-t border-rule pt-3 space-y-2">
      <label className="text-[0.72rem] text-ink-muted block">שינוי סטטוס ידני</label>
      <div className="flex items-center gap-2">
        <Select
          value={selected || "__current__"}
          onValueChange={(v) => setSelected(v === "__current__" ? "" : v as CaseStatus)}
          dir="rtl"
        >
          <SelectTrigger className="text-[0.75rem] h-8">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {ALL_STATUSES.map((s) => {
              const Icon = STATUS_ICONS[s];
              return (
                <SelectItem key={s} value={s} className="text-[0.75rem]">
                  <span className="inline-flex items-center gap-1.5">
                    <Icon className="w-3 h-3 shrink-0" />
                    {STATUS_LABELS[s]}
                  </span>
                </SelectItem>
              );
            })}
          </SelectContent>
        </Select>
        <Button
          size="sm"
          variant="outline"
          className="h-8 text-[0.72rem] px-3 shrink-0"
          disabled={!selected || selected === currentStatus || mutate.isPending}
          onClick={handleSave}
        >
          {mutate.isPending ? "שומר…" : "עדכן"}
        </Button>
      </div>
    </div>
  );
}