"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 };

const TYPES = [
  "TOP_UP",
  "VOUCHER",
  "MEMBERSHIP",
  "DIGITAL",
  "ACCOUNT",
  "SOFTWARE",
  "LICENSE",
].map((v) => ({ value: v, label: v }));

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

export type ProductFormValues = {
  name: string;
  slug: string;
  sku: string;
  type: string;
  status: string;
  shortDescription: string;
  description: string;
  features: string;
  price: string;
  compareAtPrice: string;
  discountPercent: string;
  stock: string;
  thumbnail: string;
  categoryId: string;
  isFeatured: boolean;
  isTrending: boolean;
  isBestSeller: boolean;
  metaTitle: string;
  metaDescription: string;
};

const empty: ProductFormValues = {
  name: "",
  slug: "",
  sku: "",
  type: "DIGITAL",
  status: "DRAFT",
  shortDescription: "",
  description: "",
  features: "",
  price: "0",
  compareAtPrice: "",
  discountPercent: "0",
  stock: "0",
  thumbnail: "",
  categoryId: "",
  isFeatured: false,
  isTrending: false,
  isBestSeller: false,
  metaTitle: "",
  metaDescription: "",
};

export function ProductForm({
  initial,
  productId,
}: {
  initial?: Partial<ProductFormValues>;
  productId?: string;
}) {
  const router = useRouter();
  const [values, setValues] = useState<ProductFormValues>({ ...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 ProductFormValues>(key: K, value: ProductFormValues[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,
        sku: values.sku,
        type: values.type,
        status: values.status,
        shortDescription: values.shortDescription || null,
        description: values.description || null,
        features: values.features
          ? values.features
              .split("\n")
              .map((f) => f.trim())
              .filter(Boolean)
          : [],
        price: Number(values.price),
        compareAtPrice: values.compareAtPrice ? Number(values.compareAtPrice) : null,
        discountPercent: Number(values.discountPercent || 0),
        stock: Number(values.stock || 0),
        thumbnail: values.thumbnail || null,
        categoryId: values.categoryId || null,
        isFeatured: values.isFeatured,
        isTrending: values.isTrending,
        isBestSeller: values.isBestSeller,
        metaTitle: values.metaTitle || null,
        metaDescription: values.metaDescription || null,
      };

      if (productId) {
        await apiFetch(`/api/products/${productId}`, { method: "PUT", json: payload });
      } else {
        await apiFetch("/api/products", { method: "POST", json: payload });
      }
      router.push("/admin/products");
      router.refresh();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6">
      <FormCard title="Basic">
        <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="SKU" name="sku" required value={values.sku} onChange={(e) => set("sku", e.target.value)} />
          <TextInput label="Slug" name="slug" value={values.slug} onChange={(e) => set("slug", e.target.value)} hint="Optional — auto from name" />
          <SelectField label="Type" name="type" options={TYPES} value={values.type} onChange={(e) => set("type", 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 }))]}
          />
        </div>
      </FormCard>

      <FormCard title="Pricing & stock">
        <div className="grid gap-4 md:grid-cols-4">
          <TextInput label="Price" name="price" type="number" min={0} required value={values.price} onChange={(e) => set("price", e.target.value)} />
          <TextInput label="Compare at" name="compareAtPrice" type="number" min={0} value={values.compareAtPrice} onChange={(e) => set("compareAtPrice", e.target.value)} />
          <TextInput label="Discount %" name="discountPercent" type="number" min={0} max={100} value={values.discountPercent} onChange={(e) => set("discountPercent", e.target.value)} />
          <TextInput label="Stock" name="stock" type="number" min={0} value={values.stock} onChange={(e) => set("stock", e.target.value)} />
        </div>
      </FormCard>

      <FormCard title="Content">
        <div className="space-y-4">
          <TextInput label="Thumbnail URL" name="thumbnail" value={values.thumbnail} onChange={(e) => set("thumbnail", e.target.value)} />
          <TextArea label="Short description" name="shortDescription" rows={2} value={values.shortDescription} onChange={(e) => set("shortDescription", e.target.value)} />
          <TextArea label="Description" name="description" rows={6} value={values.description} onChange={(e) => set("description", e.target.value)} />
          <TextArea label="Features (one per line)" name="features" rows={4} value={values.features} onChange={(e) => set("features", e.target.value)} />
          <div className="flex flex-wrap gap-4">
            <CheckboxField label="Featured" name="isFeatured" checked={values.isFeatured} onChange={(e) => set("isFeatured", e.target.checked)} />
            <CheckboxField label="Trending" name="isTrending" checked={values.isTrending} onChange={(e) => set("isTrending", e.target.checked)} />
            <CheckboxField label="Best seller" name="isBestSeller" checked={values.isBestSeller} onChange={(e) => set("isBestSeller", e.target.checked)} />
          </div>
        </div>
      </FormCard>

      <FormCard title="SEO">
        <div className="grid gap-4 md:grid-cols-2">
          <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 product"}
        </Button>
        <Button type="button" variant="secondary" href="/admin/products">
          Cancel
        </Button>
      </div>
    </form>
  );
}