"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { Toggle } from "@/components/ui/Toggle";
import { Card, CardHeader, CardTitle } from "@/components/ui/Card";
import {
  createDomesticCategory,
  toggleDomesticCategory,
} from "@/lib/actions/admin-domestic";
import { swalToast } from "@/lib/utils/swal";
import type { DomesticCategoryRow } from "@/lib/queries/domestic-admin-queries";

export function DomesticCategoryManager({
  categories,
}: {
  categories: DomesticCategoryRow[];
}) {
  const router = useRouter();
  const [name, setName] = useState("");
  const [busy, setBusy] = useState<string | null>(null);

  async function handleCreate() {
    setBusy("create");
    const result = await createDomesticCategory({ name });
    setBusy(null);
    if (!result.success) {
      void swalToast.fire({ icon: "error", title: result.error });
      return;
    }
    setName("");
    router.refresh();
  }

  async function handleToggle(id: string) {
    setBusy(id);
    const result = await toggleDomesticCategory(id);
    setBusy(null);
    if (!result.success) {
      void swalToast.fire({ icon: "error", title: result.error });
      return;
    }
    router.refresh();
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Categories</CardTitle>
      </CardHeader>
      <ul className="divide-y divide-border">
        {categories.map((c) => (
          <li key={c.id} className="flex items-center justify-between gap-3 px-5 py-2.5">
            <div className="min-w-0">
              <div className="truncate text-[13px] font-semibold">{c.name}</div>
              <div className="text-[11.5px] text-muted">
                {c.questionCount} question{c.questionCount === 1 ? "" : "s"}
                {!c.isActive && " · hidden from feeds"}
              </div>
            </div>
            <Toggle
              checked={c.isActive}
              disabled={busy === c.id}
              onChange={() => handleToggle(c.id)}
            />
          </li>
        ))}
        {categories.length === 0 && (
          <li className="px-5 py-3 text-[13px] text-muted">No categories yet.</li>
        )}
      </ul>
      <div className="flex gap-2 border-t border-border p-4">
        <Input
          placeholder="New category name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <Button
          type="button"
          size="sm"
          loading={busy === "create"}
          disabled={name.trim().length < 2}
          onClick={handleCreate}
        >
          Add
        </Button>
      </div>
    </Card>
  );
}