"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import { PageHeader } from "@/components/admin/page-header";
import { ProductForm, type ProductFormValues } from "@/components/admin/product-form";
import { apiFetch } from "@/lib/admin-api";
import { parseJsonArray } from "@/lib/utils";

type Product = {
  id: string;
  name: string;
  slug: string;
  sku: string;
  type: string;
  status: string;
  shortDescription?: string | null;
  description?: string | null;
  features?: string[] | string | null;
  price: number;
  compareAtPrice?: number | null;
  discountPercent: number;
  stock: number;
  thumbnail?: string | null;
  categoryId?: string | null;
  isFeatured: boolean;
  isTrending: boolean;
  isBestSeller: boolean;
  metaTitle?: string | null;
  metaDescription?: string | null;
};

export default function EditProductPage() {
  const params = useParams<{ id: string }>();
  const [initial, setInitial] = useState<Partial<ProductFormValues> | null>(null);
  const [error, setError] = useState("");

  useEffect(() => {
    apiFetch<Product>(`/api/products/${params.id}`)
      .then((p) => {
        const features = Array.isArray(p.features)
          ? p.features
          : parseJsonArray(typeof p.features === "string" ? p.features : null);
        setInitial({
          name: p.name,
          slug: p.slug,
          sku: p.sku,
          type: p.type,
          status: p.status,
          shortDescription: p.shortDescription || "",
          description: p.description || "",
          features: features.join("\n"),
          price: String(p.price),
          compareAtPrice: p.compareAtPrice != null ? String(p.compareAtPrice) : "",
          discountPercent: String(p.discountPercent || 0),
          stock: String(p.stock),
          thumbnail: p.thumbnail || "",
          categoryId: p.categoryId || "",
          isFeatured: p.isFeatured,
          isTrending: p.isTrending,
          isBestSeller: p.isBestSeller,
          metaTitle: p.metaTitle || "",
          metaDescription: p.metaDescription || "",
        });
      })
      .catch((err) => setError(err instanceof Error ? err.message : "Failed to load"));
  }, [params.id]);

  if (error) return <p className="text-danger">{error}</p>;
  if (!initial) return <p className="text-muted">Loading…</p>;

  return (
    <div>
      <PageHeader title="Edit product" description={initial.name} />
      <ProductForm initial={initial} productId={params.id} />
    </div>
  );
}