import { prisma } from '@/lib/prisma';
import { getCurrentCustomer } from '@/lib/auth';
import { createCustomRequest } from './actions';
import Turnstile from '@/components/Turnstile';

export default async function CustomRequestPage() {
  const [products, customer] = await Promise.all([
    prisma.product.findMany({ orderBy: { name: 'asc' } }),
    getCurrentCustomer(),
  ]);

  return (
    <div className="mx-auto max-w-2xl px-6 py-12">
      <p className="tag-label text-splash-pink">Custom request</p>
      <h1 className="mt-2 font-display text-3xl">Send us your photo</h1>
      <p className="mt-2 text-sm text-muted">
        Have a photo or artwork you'd like turned into something we can print? Send it over and
        we'll get back to you with a finished design to review.
      </p>

      <form action={createCustomRequest} className="mt-10 space-y-6">
        {customer && <input type="hidden" name="customerId" value={customer.id} />}

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label htmlFor="customerName" className="tag-label mb-2 block">
              Your name
            </label>
            <input
              id="customerName"
              name="customerName"
              required
              defaultValue={customer?.name ?? ''}
              className="w-full border border-line px-3 py-2 text-sm"
            />
          </div>
          <div>
            <label htmlFor="customerEmail" className="tag-label mb-2 block">
              Email
            </label>
            <input
              id="customerEmail"
              name="customerEmail"
              type="email"
              required
              defaultValue={customer?.email ?? ''}
              className="w-full border border-line px-3 py-2 text-sm"
            />
          </div>
        </div>

        <div>
          <label htmlFor="customerPhone" className="tag-label mb-2 block">
            Phone (optional)
          </label>
          <input
            id="customerPhone"
            name="customerPhone"
            type="tel"
            placeholder="For a faster reply via WhatsApp"
            className="w-full border border-line px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="productId" className="tag-label mb-2 block">
            What should we put it on?
          </label>
          <select
            id="productId"
            name="productId"
            required
            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>
          <label htmlFor="image" className="tag-label mb-2 block">
            Your photo
          </label>
          <input
            id="image"
            name="image"
            type="file"
            accept="image/*"
            required
            className="w-full border border-line px-3 py-2 text-sm"
          />
        </div>

        <div>
          <label htmlFor="note" className="tag-label mb-2 block">
            Anything we should know? (optional)
          </label>
          <textarea
            id="note"
            name="note"
            rows={3}
            className="w-full border border-line px-3 py-2 text-sm"
            placeholder="Colors, sizing, where you'd like it placed..."
          />
        </div>

        <Turnstile />

        <button
          type="submit"
          className="bg-clay px-6 py-3 text-sm font-medium text-paper hover:bg-clay-dark disabled:cursor-not-allowed disabled:opacity-50"
        >
          Send it over
        </button>
      </form>
    </div>
  );
}
