"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import {
  Card,
  Button,
  Modal,
  Field,
  Input,
  Textarea,
  SectionTitle,
  ErrorNote,
} from "@/app/adminx/ui";

interface Category {
  id: number;
  name: string;
  slug: string;
  description: string;
  seoTitle: string;
  seoDescription: string;
  sortOrder: number;
  postCount?: number;
}

const empty: Category = {
  id: 0,
  name: "",
  slug: "",
  description: "",
  seoTitle: "",
  seoDescription: "",
  sortOrder: 0,
};

export function CategoriesSection() {
  const [items, setItems] = useState<Category[]>([]);
  const [editing, setEditing] = useState<Category | null>(null);
  const [error, setError] = useState("");

  const load = useCallback(async () => {
    const data = await api.get("categories");
    setItems(data.categories);
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  async function save() {
    if (!editing) return;
    setError("");
    try {
      if (editing.id) await api.put(`categories?id=${editing.id}`, editing);
      else await api.post("categories", editing);
      setEditing(null);
      await load();
    } catch (e: any) {
      setError(e.message);
    }
  }

  async function remove(c: Category) {
    if (!confirm(`Delete category "${c.name}"?`)) return;
    await api.del(`categories?id=${c.id}`);
    await load();
  }

  return (
    <div>
      <SectionTitle
        title="Categories"
        action={<Button onClick={() => setEditing({ ...empty, sortOrder: items.length + 1 })}>+ New Category</Button>}
      />
      <ErrorNote message={error} />

      <Card className="overflow-hidden">
        <table className="w-full text-left text-sm">
          <thead className="border-b border-slate-100 bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
            <tr>
              <th className="px-4 py-3">Name</th>
              <th className="px-4 py-3">Slug</th>
              <th className="px-4 py-3">Posts</th>
              <th className="px-4 py-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody>
            {items.map((c) => (
              <tr key={c.id} className="border-b border-slate-50 hover:bg-slate-50/50">
                <td className="px-4 py-3 font-medium text-slate-800">{c.name}</td>
                <td className="px-4 py-3 text-slate-500">/category/{c.slug}</td>
                <td className="px-4 py-3 text-slate-500">{c.postCount ?? 0}</td>
                <td className="px-4 py-3">
                  <div className="flex justify-end gap-1">
                    <Button variant="ghost" onClick={() => setEditing(c)}>Edit</Button>
                    <Button variant="ghost" onClick={() => remove(c)} className="text-red-600 hover:bg-red-50">Delete</Button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <Modal open={!!editing} onClose={() => setEditing(null)} title={editing?.id ? "Edit Category" : "New Category"}>
        {editing && (
          <div className="space-y-4">
            <Field label="Name">
              <Input value={editing.name} onChange={(e) => setEditing({ ...editing, name: e.target.value })} />
            </Field>
            <Field label="Slug">
              <Input value={editing.slug} onChange={(e) => setEditing({ ...editing, slug: e.target.value })} />
            </Field>
            <Field label="Description">
              <Textarea rows={2} value={editing.description} onChange={(e) => setEditing({ ...editing, description: e.target.value })} />
            </Field>
            <Field label="SEO title">
              <Input value={editing.seoTitle} onChange={(e) => setEditing({ ...editing, seoTitle: e.target.value })} />
            </Field>
            <Field label="SEO description">
              <Textarea rows={2} value={editing.seoDescription} onChange={(e) => setEditing({ ...editing, seoDescription: e.target.value })} />
            </Field>
            <div className="flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setEditing(null)}>Cancel</Button>
              <Button onClick={save} disabled={!editing.name}>Save</Button>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}