"use client";

import { useState, type FormEvent } from "react";
import { useRouter } from "next/navigation";
import type { EventCategory } from "@/types/event";
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 CategoryManager({ categories }: { categories: EventCategory[] }) {
  const router = useRouter();
  const [showCreate, setShowCreate] = useState(false);
  const [createName, setCreateName] = useState("");
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editName, setEditName] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [deletingId, setDeletingId] = useState<number | null>(null);
  const { confirm, dialog } = useConfirmDialog();
  const { toast } = useToast();

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

    const res = await clientFetch("/api/admin/categories", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: createName }),
    });

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

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

    setShowCreate(false);
    setCreateName("");
    toast("Category created successfully.", "success");
    router.refresh();
  }

  async function handleUpdate(formEvent: FormEvent<HTMLFormElement>, id: number) {
    formEvent.preventDefault();
    setError(null);
    setIsSubmitting(true);

    const res = await clientFetch(`/api/admin/categories/${id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: editName }),
    });

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

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

    setEditingId(null);
    toast("Category updated successfully.", "success");
    router.refresh();
  }

  async function handleDelete(id: number) {
    if (!(await confirm("Delete this category?"))) return;

    setError(null);
    setDeletingId(id);
    const res = await clientFetch(`/api/admin/categories/${id}`, { method: "DELETE" });
    setDeletingId(null);
    const body = await res.json().catch(() => null);

    if (!res.ok) {
      const message = body?.errors?.category?.[0] ?? body?.message ?? "Failed to delete category.";
      setError(message);
      toast(message, "error");
      return;
    }
    toast("Category deleted 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())}>
        {categories.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">
            No categories yet.
          </p>
        )}
        {categories.map((category) =>
          editingId === category.id ? (
            <form
              key={category.id}
              onSubmit={(e) => handleUpdate(e, category.id)}
              className="flex items-center gap-2 px-4 py-3"
            >
              <Input size="sm" required value={editName} onChange={(e) => setEditName(e.target.value)} className="flex-1" />
              <Button type="submit" size="sm" loading={isSubmitting}>
                Save
              </Button>
              <Button
                type="button"
                variant="secondary"
                size="sm"
                onClick={() => setEditingId(null)}
                disabled={isSubmitting}
              >
                Cancel
              </Button>
            </form>
          ) : (
            <div key={category.id} className="flex items-center justify-between px-4 py-3">
              <span className="font-medium">{category.name}</span>
              <div className="flex gap-2">
                <Button
                  type="button"
                  variant="secondary"
                  size="sm"
                  onClick={() => {
                    setEditingId(category.id);
                    setEditName(category.name);
                  }}
                >
                  Edit
                </Button>
                <Button
                  type="button"
                  variant="danger"
                  size="sm"
                  onClick={() => handleDelete(category.id)}
                  loading={deletingId === category.id}
                >
                  Delete
                </Button>
              </div>
            </div>
          ),
        )}
      </div>

      {showCreate ? (
        <form onSubmit={handleCreate} className="mt-4 flex items-end gap-2">
          <label className="flex flex-1 flex-col gap-1 text-sm font-medium">
            Category Name
            <Input required value={createName} onChange={(e) => setCreateName(e.target.value)} />
          </label>
          <Button type="submit" loading={isSubmitting}>
            Save
          </Button>
          <Button type="button" variant="secondary" onClick={() => setShowCreate(false)} disabled={isSubmitting}>
            Cancel
          </Button>
        </form>
      ) : (
        <Button type="button" onClick={() => setShowCreate(true)} className="mt-4">
          + Add Category
        </Button>
      )}
    </div>
  );
}