import { prisma } from '@/lib/prisma';
import { createProof } from './actions';
import AdminNav from '@/components/AdminNav';

export default async function NewProofPage({
  searchParams,
}: {
  searchParams: { productId?: string; customerName?: string; customerEmail?: string };
}) {
  const products = await prisma.product.findMany({ orderBy: { name: 'asc' } });

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <AdminNav />
      <h1 className="font-display text-3xl">Upload a design for approval</h1>
      <p className="mt-2 text-sm text-muted">
        Upload a finished mockup for one customer. We&apos;ll give you a link to send them — they view
        it, approve it, and it goes straight to their cart.
      </p>

      <form action={createProof} className="mt-10 space-y-6">
        <div>
          <label htmlFor="productId" className="tag-label mb-2 block">
            Product template
          </label>
          <select
            id="productId"
            name="productId"
            required
            defaultValue={searchParams.productId}
            className="w-full border border-line px-3 py-2 text-sm"
          >
            {products.map((p) => (
              <option key={p.id} value={p.id}>
                {p.name}
              </option>
            ))}
          </select>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label htmlFor="customerName" className="tag-label mb-2 block">
              Customer name (optional)
            </label>
            <input
              id="customerName"
              name="customerName"
              defaultValue={searchParams.customerName}
              className="w-full border border-line px-3 py-2 text-sm"
              placeholder="Jane Doe"
            />
          </div>
          <div>
            <label htmlFor="customerEmail" className="tag-label mb-2 block">
              Customer email
            </label>
            <input
              id="customerEmail"
              name="customerEmail"
              type="email"
              required
              defaultValue={searchParams.customerEmail}
              className="w-full border border-line px-3 py-2 text-sm"
              placeholder="jane@example.com"
            />
          </div>
        </div>

        <div className="grid grid-cols-3 gap-4">
          <div>
            <label htmlFor="color" className="tag-label mb-2 block">
              Color shown
            </label>
            <div className="flex items-center gap-2">
              <input
                id="color"
                name="color"
                type="color"
                required
                defaultValue="#17181C"
                className="h-10 w-14 cursor-pointer border border-line bg-paper p-0"
              />
            </div>
          </div>
          <div>
            <label htmlFor="quantity" className="tag-label mb-2 block">
              Quantity
            </label>
            <input
              id="quantity"
              name="quantity"
              type="number"
              min={1}
              defaultValue={1}
              className="w-full border border-line px-3 py-2 text-sm"
            />
          </div>
          <div>
            <label htmlFor="price" className="tag-label mb-2 block">
              Price override (£)
            </label>
            <input
              id="price"
              name="price"
              type="number"
              step="0.01"
              min={0}
              placeholder="Uses template price"
              className="w-full border border-line px-3 py-2 text-sm"
            />
          </div>
        </div>

        <div>
          <label htmlFor="image" className="tag-label mb-2 block">
            Finished design image
          </label>
          <input
            id="image"
            name="image"
            type="file"
            accept="image/*"
            required
            className="w-full border border-line px-3 py-2 text-sm"
          />
          <p className="mt-1 text-xs text-muted">
            Upload the actual finished mockup — this is shown to the customer exactly as-is.
          </p>
        </div>

        <div>
          <label htmlFor="note" className="tag-label mb-2 block">
            Note to customer (optional)
          </label>
          <textarea
            id="note"
            name="note"
            rows={3}
            className="w-full border border-line px-3 py-2 text-sm"
            placeholder="Here's the design we talked about — let me know if you'd like anything changed."
          />
        </div>

        <button type="submit" className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark">
          Create approval link
        </button>
      </form>
    </div>
  );
}
