import { prisma } from '@/lib/prisma';
import AdminNav from '@/components/AdminNav';
import PurchaseForm from '@/components/PurchaseForm';

export default async function NewPurchasePage() {
  const rows = await prisma.product.findMany({ orderBy: { name: 'asc' } });
  const products = rows.map((p) => ({
    id: p.id,
    name: p.name,
    colors: JSON.parse(p.colors) as string[],
    sizes: p.sizes ? (JSON.parse(p.sizes) as string[]) : [],
  }));

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Record a purchase</h1>
      <p className="mt-2 text-sm text-muted">
        A supplier invoice — blanks, materials, anything you bought for the business. Attach the
        invoice file and it&apos;s stored with the purchase. Lines matched to a product add straight to
        its stock count.
      </p>

      <PurchaseForm products={products} />
    </div>
  );
}
