"use client";

import { FormEvent, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  CheckboxField,
  FormCard,
  SelectField,
  TextArea,
  TextInput,
} from "@/components/admin/form-fields";
import { apiFetch } from "@/lib/admin-api";

type Category = { id: string; name: string };

export type CategoryFormValues = {
  name: string;
  slug: string;
  description: string;
  icon: string;
  banner: string;
  parentId: string;
  sortOrder: string;
  isActive: boolean;
  metaTitle: string;
  metaDescription: string;
};

const empty: CategoryFormValues = {
  name: "",
  slug: "",
  description: "",
  icon: "",
  banner: "",
  parentId: "",
  sortOrder: "0",
  isActive: true,
  metaTitle: "",
  metaDescription: "",
};

export function CategoryForm({
  initial,
  categoryId,
}: {
  initial?: Partial<CategoryFormValues>;
  categoryId?: string;
}) {
  const router = useRouter();
  const [values, setValues] = useState<CategoryFormValues>({ ...empty, ...initial });
  const [parents, setParents] = useState<Category[]>([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    apiFetch<Category[]>("/api/categories?admin=1")
      .then((list) => setParents(list.filter((c) => c.id !== categoryId)))
      .catch(() => undefined);
  }, [categoryId]);

  function set<K extends keyof CategoryFormValues>(key: K, value: CategoryFormValues[K]) {
    setValues((v) => ({ ...v, [key]: value }));
  }

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const payload = {
        name: values.name,
        slug: values.slug || undefined,
        description: values.description || null,
        icon: values.icon || null,
        banner: values.banner || null,
        parentId: values.parentId || null,
        sortOrder: Number(values.sortOrder || 0),
        isActive: values.isActive,
        metaTitle: values.metaTitle || null,
        metaDescription: values.metaDescription || null,
      };
      if (categoryId) {
        await apiFetch(`/api/categories/${categoryId}`, { method: "PUT", json: payload });
      } else {
        await apiFetch("/api/categories", { method: "POST", json: payload });
      }
      router.push("/admin/categories");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6">
      <FormCard>
        <div className="grid gap-4 md:grid-cols-2">
          <TextInput label="Name" name="name" required value={values.name} onChange={(e) => set("name", e.target.value)} />
          <TextInput label="Slug" name="slug" value={values.slug} onChange={(e) => set("slug", e.target.value)} />
          <TextInput label="Icon" name="icon" value={values.icon} onChange={(e) => set("icon", e.target.value)} hint="Lucide icon name" />
          <TextInput label="Banner URL" name="banner" value={values.banner} onChange={(e) => set("banner", e.target.value)} />
          <SelectField
            label="Parent"
            name="parentId"
            value={values.parentId}
            onChange={(e) => set("parentId", e.target.value)}
            options={[{ value: "", label: "— None —" }, ...parents.map((p) => ({ value: p.id, label: p.name }))]}
          />
          <TextInput label="Sort order" name="sortOrder" type="number" value={values.sortOrder} onChange={(e) => set("sortOrder", e.target.value)} />
          <TextArea className="md:col-span-2" label="Description" name="description" value={values.description} onChange={(e) => set("description", e.target.value)} />
          <TextInput label="Meta title" name="metaTitle" value={values.metaTitle} onChange={(e) => set("metaTitle", e.target.value)} />
          <TextInput label="Meta description" name="metaDescription" value={values.metaDescription} onChange={(e) => set("metaDescription", e.target.value)} />
          <CheckboxField label="Active" name="isActive" checked={values.isActive} onChange={(e) => set("isActive", e.target.checked)} />
        </div>
      </FormCard>
      {error ? <p className="text-sm text-danger">{error}</p> : null}
      <div className="flex gap-2">
        <Button type="submit" disabled={loading}>{loading ? "Saving…" : "Save"}</Button>
        <Button type="button" variant="secondary" href="/admin/categories">Cancel</Button>
      </div>
    </form>
  );
}