"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import type { CategoryRow } from "@/lib/types";

export default function CategoryManager({ initial }: { initial: CategoryRow[] }) {
  const router = useRouter();
  const [rows, setRows] = useState<CategoryRow[]>(initial);
  const [name, setName] = useState("");
  const [color, setColor] = useState("#1f9d7a");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function add(e: React.FormEvent) {
    e.preventDefault();
    if (!name.trim()) return;
    setBusy(true);
    setError(null);
    const res = await fetch("/api/admin/categories", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: name.trim(), color, sortOrder: rows.length + 1 }),
    });
    const data = await res.json();
    setBusy(false);
    if (!res.ok) {
      setError(data.error ?? "Could not add category");
      return;
    }
    setRows([...rows, data as CategoryRow]);
    setName("");
    router.refresh();
  }

  async function remove(id: string) {
    const prev = rows;
    setRows(rows.filter((r) => r.id !== id));
    const res = await fetch(`/api/admin/categories/${id}`, { method: "DELETE" });
    if (!res.ok) {
      setError("Could not delete category");
      setRows(prev);
      return;
    }
    router.refresh();
  }

  async function rename(id: string, newName: string) {
    setRows(rows.map((r) => (r.id === id ? { ...r, name: newName } : r)));
    await fetch(`/api/admin/categories/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name: newName }),
    });
    router.refresh();
  }

  return (
    <div className="space-y-6">
      <div className="grid gap-2">
        {rows.map((r) => (
          <div
            key={r.id}
            className="flex items-center gap-3 rounded-lg border border-be-border bg-be-surface p-3"
          >
            <span
              className="h-5 w-5 shrink-0 rounded"
              style={{ backgroundColor: r.color }}
              aria-hidden
            />
            <input
              defaultValue={r.name}
              onBlur={(e) => e.target.value !== r.name && rename(r.id, e.target.value)}
              className="flex-1 bg-transparent text-sm font-medium outline-none"
            />
            <span className="text-xs text-be-muted">{r.slug}</span>
            <button
              onClick={() => remove(r.id)}
              className="text-xs font-medium text-red-600 hover:text-red-700"
            >
              Delete
            </button>
          </div>
        ))}
        {!rows.length && <p className="text-sm text-be-muted">No categories yet.</p>}
      </div>

      <form onSubmit={add} className="rounded-lg border border-be-border bg-be-surface p-4">
        <p className="text-sm font-medium mb-3">Add category</p>
        <div className="flex items-center gap-3">
          <input
            type="color"
            value={color}
            onChange={(e) => setColor(e.target.value)}
            className="h-9 w-9 cursor-pointer rounded border border-be-border"
            aria-label="Category color"
          />
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="e.g. Gospel"
            className="input flex-1"
          />
          <button
            type="submit"
            disabled={busy}
            className="rounded-md bg-brand-green px-4 py-2 text-sm font-medium text-white hover:bg-brand-green-deep disabled:opacity-50"
          >
            Add
          </button>
        </div>
        {error && <p className="mt-2 text-sm text-red-600">{error}</p>}
      </form>
    </div>
  );
}