"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import { PageHeader, AdminButton } from "@/components/admin/ui";
import ProductForm, {
  DUPLICATE_STORAGE_KEY,
  type ProductFormValues,
} from "@/components/admin/ProductForm";

function NewProductForm() {
  const searchParams = useSearchParams();
  const [initialValues, setInitialValues] = useState<ProductFormValues | undefined>();

  useEffect(() => {
    if (searchParams.get("duplicate") !== "1") return;
    try {
      const raw = sessionStorage.getItem(DUPLICATE_STORAGE_KEY);
      if (!raw) return;
      setInitialValues(JSON.parse(raw) as ProductFormValues);
      sessionStorage.removeItem(DUPLICATE_STORAGE_KEY);
    } catch {
      // ignore bad duplicate payload
    }
  }, [searchParams]);

  return <ProductForm mode="create" initialValues={initialValues} />;
}

export default function AdminNewProductPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        title="Add Product"
        description="Create a new catalog item with pricing, inventory, media, and SEO."
        actions={<AdminButton href="/admin/products" variant="secondary">Back to products</AdminButton>}
      />
      <Suspense fallback={<p className="text-sm text-muted-foreground">Loading form…</p>}>
        <NewProductForm />
      </Suspense>
    </div>
  );
}