"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import type { PetugasAssignment } from "@/types/organizer";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useConfirmDialog } from "@/components/ui/confirm-dialog";
import { useToast } from "@/components/ui/toast";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";
import { clientFetch } from "@/lib/api/client";

export function PetugasManager({
  eventId,
  assignments,
}: {
  eventId: number;
  assignments: PetugasAssignment[];
}) {
  const router = useRouter();
  const [petugasUserId, setPetugasUserId] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [removingId, setRemovingId] = useState<number | null>(null);
  const { confirm, dialog } = useConfirmDialog();
  const { toast } = useToast();

  async function handleAdd(formEvent: FormEvent<HTMLFormElement>) {
    formEvent.preventDefault();
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch(`/api/admin/events/${eventId}/petugas`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ petugas_user_id: Number(petugasUserId) }),
    });

    setIsSubmitting(false);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const message = body?.errors?.petugas_user_id?.[0] ?? body?.message ?? "Failed to add staff.";
      setError(message);
      toast(message, "error");
      return;
    }

    setPetugasUserId("");
    toast("Staff added successfully.", "success");
    router.refresh();
  }

  async function handleRemove(assignmentId: number) {
    if (!(await confirm("Remove this staff member from the event?"))) return;

    setError(null);
    setRemovingId(assignmentId);
    const res = await clientFetch(`/api/admin/events/${eventId}/petugas/${assignmentId}`, {
      method: "DELETE",
    });
    setRemovingId(null);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const message = body?.message ?? "Failed to remove staff.";
      setError(message);
      toast(message, "error");
      return;
    }
    toast("Staff removed successfully.", "success");
    router.refresh();
  }

  return (
    <div>
      {dialog}
      {error && <p className="mb-3 text-sm text-red-600">{error}</p>}

      <div className={cn("flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
        {assignments.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
            No staff assigned yet.
          </p>
        )}
        {assignments.map((a) => (
          <div key={a.id} className="flex flex-wrap items-center justify-between gap-4 px-4 py-3">
            <div className="min-w-0">
              <p className="font-medium">{a.petugas.name}</p>
              <p className="text-sm text-kolabora-neutral-dark/70">{a.petugas.email}</p>
            </div>
            <Button
              type="button"
              variant="danger"
              size="sm"
              onClick={() => handleRemove(a.id)}
              loading={removingId === a.id}
            >
              Delete
            </Button>
          </div>
        ))}
      </div>

      <form onSubmit={handleAdd} className="mt-4 flex items-end gap-2">
        <label className="flex flex-1 flex-col gap-1 text-sm font-medium">
          Staff User ID
          <Input
            type="number"
            required
            value={petugasUserId}
            onChange={(e) => setPetugasUserId(e.target.value)}
            placeholder="Example: 12"
          />
        </label>
        <Button type="submit" loading={isSubmitting}>
          Add
        </Button>
      </form>
      <p className="mt-2 text-xs text-kolabora-neutral-dark/70">
        The target account must already be registered with the Staff role. Check the User ID under
        Admin &gt; User if you don&apos;t know it.
      </p>
    </div>
  );
}