"use client";

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

export type FaqFormValues = {
  question: string;
  answer: string;
  sortOrder: string;
  isActive: boolean;
};

const empty: FaqFormValues = {
  question: "",
  answer: "",
  sortOrder: "0",
  isActive: true,
};

export function FaqForm({
  initial,
  faqId,
}: {
  initial?: Partial<FaqFormValues>;
  faqId?: string;
}) {
  const router = useRouter();
  const [values, setValues] = useState<FaqFormValues>({ ...empty, ...initial });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

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

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const payload = {
        question: values.question,
        answer: values.answer,
        sortOrder: Number(values.sortOrder || 0),
        isActive: values.isActive,
      };
      if (faqId) {
        await apiFetch(`/api/faqs/${faqId}`, { method: "PUT", json: payload });
      } else {
        await apiFetch("/api/faqs", { method: "POST", json: payload });
      }
      router.push("/admin/faqs");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6">
      <FormCard>
        <div className="space-y-4">
          <TextInput label="Question" name="question" required value={values.question} onChange={(e) => set("question", e.target.value)} />
          <TextArea label="Answer" name="answer" rows={6} required value={values.answer} onChange={(e) => set("answer", e.target.value)} />
          <TextInput label="Sort order" name="sortOrder" type="number" value={values.sortOrder} onChange={(e) => set("sortOrder", 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/faqs">Cancel</Button>
      </div>
    </form>
  );
}