"use client";

import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { toast } from "sonner";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  assignTicketAction,
  setTicketStatusAction,
} from "@/lib/support/staff-actions";
import type { TicketStatus } from "@/lib/support/types";

const UNASSIGNED = "__unassigned__";

const STATUSES: { value: TicketStatus; label: string }[] = [
  { value: "open", label: "Ouvert" },
  { value: "in_progress", label: "En cours" },
  { value: "resolved", label: "Résolu" },
];

export function StaffTicketActions({
  ticketId,
  status,
  assignedTo,
  staff,
}: {
  ticketId: string;
  status: TicketStatus;
  assignedTo: string | null;
  staff: { id: string; name: string; email: string }[];
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const assignee = staff.find((s) => s.id === assignedTo);

  function assign(value: string) {
    const staffId = value === UNASSIGNED ? null : value;
    startTransition(async () => {
      try {
        await assignTicketAction(ticketId, staffId);
        router.refresh();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Erreur");
      }
    });
  }

  function changeStatus(value: TicketStatus) {
    startTransition(async () => {
      try {
        await setTicketStatusAction(ticketId, value);
        router.refresh();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : "Erreur");
      }
    });
  }

  return (
    <div className="flex flex-wrap items-end gap-4 rounded-lg border bg-muted/30 p-4">
      <div className="space-y-1.5">
        <span className="text-xs font-medium text-muted-foreground">
          Assigné à
        </span>
        <Select
          value={assignedTo ?? UNASSIGNED}
          disabled={pending}
          onValueChange={assign}
        >
          <SelectTrigger className="w-52">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value={UNASSIGNED}>Non assigné</SelectItem>
            {staff.map((s) => (
              <SelectItem key={s.id} value={s.id}>
                {s.name || s.email}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-1.5">
        <span className="text-xs font-medium text-muted-foreground">
          Statut
        </span>
        <Select
          value={status}
          disabled={pending}
          onValueChange={(v) => changeStatus(v as TicketStatus)}
        >
          <SelectTrigger className="w-40">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            {STATUSES.map((s) => (
              <SelectItem key={s.value} value={s.value}>
                {s.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      {!assignee && (
        <p className="text-xs text-muted-foreground">
          Ce ticket n'est assigné à personne.
        </p>
      )}
    </div>
  );
}