"use client";

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

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

export type ArticleFormValues = {
  title: string;
  slug: string;
  excerpt: string;
  content: string;
  thumbnail: string;
  status: string;
  categoryId: string;
  tags: string;
  metaTitle: string;
  metaDescription: string;
};

const empty: ArticleFormValues = {
  title: "",
  slug: "",
  excerpt: "",
  content: "",
  thumbnail: "",
  status: "DRAFT",
  categoryId: "",
  tags: "",
  metaTitle: "",
  metaDescription: "",
};

const STATUSES = ["DRAFT", "SCHEDULED", "PUBLISHED", "ARCHIVED"].map((v) => ({
  value: v,
  label: v,
}));

export function ArticleForm({
  initial,
  articleId,
}: {
  initial?: Partial<ArticleFormValues>;
  articleId?: string;
}) {
  const router = useRouter();
  const [values, setValues] = useState<ArticleFormValues>({ ...empty, ...initial });
  const [categories, setCategories] = useState<Category[]>([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    apiFetch<Category[]>("/api/categories?admin=1").then(setCategories).catch(() => undefined);
  }, []);

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

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const payload = {
        title: values.title,
        slug: values.slug || undefined,
        excerpt: values.excerpt || null,
        content: values.content,
        thumbnail: values.thumbnail || null,
        status: values.status,
        categoryId: values.categoryId || null,
        tags: values.tags
          ? values.tags
              .split(",")
              .map((t) => t.trim())
              .filter(Boolean)
          : [],
        metaTitle: values.metaTitle || null,
        metaDescription: values.metaDescription || null,
      };
      if (articleId) {
        await apiFetch(`/api/articles/${articleId}`, { method: "PUT", json: payload });
      } else {
        await apiFetch("/api/articles", { method: "POST", json: payload });
      }
      router.push("/admin/articles");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6">
      <FormCard title="Article">
        <div className="grid gap-4 md:grid-cols-2">
          <TextInput className="md:col-span-2" label="Title" name="title" required value={values.title} onChange={(e) => set("title", e.target.value)} />
          <TextInput label="Slug" name="slug" value={values.slug} onChange={(e) => set("slug", e.target.value)} />
          <SelectField label="Status" name="status" options={STATUSES} value={values.status} onChange={(e) => set("status", e.target.value)} />
          <SelectField
            label="Category"
            name="categoryId"
            value={values.categoryId}
            onChange={(e) => set("categoryId", e.target.value)}
            options={[{ value: "", label: "— None —" }, ...categories.map((c) => ({ value: c.id, label: c.name }))]}
          />
          <TextInput label="Thumbnail URL" name="thumbnail" value={values.thumbnail} onChange={(e) => set("thumbnail", e.target.value)} />
          <TextInput label="Tags (comma separated)" name="tags" value={values.tags} onChange={(e) => set("tags", e.target.value)} />
          <TextArea className="md:col-span-2" label="Excerpt" name="excerpt" rows={2} value={values.excerpt} onChange={(e) => set("excerpt", e.target.value)} />
          <TextArea className="md:col-span-2" label="Content" name="content" rows={14} required value={values.content} onChange={(e) => set("content", e.target.value)} hint="HTML or plain text supported" />
          <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)} />
        </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 article"}</Button>
        <Button type="button" variant="secondary" href="/admin/articles">Cancel</Button>
      </div>
    </form>
  );
}