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

export default async function NewPromotionPage() {
  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">Add a promotion</h1>
      <p className="mt-2 text-sm text-muted">
        Shown as a banner at the top of every page while its date window is active, and actually
        discounts the price of whatever it covers — every item, or specific ones you pick.
      </p>

      <form action={createPromotion} className="mt-10 space-y-6">
        <div>
          <label htmlFor="message" className="tag-label mb-2 block">
            Banner message
          </label>
          <textarea
            id="message"
            name="message"
            required
            rows={2}
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
            placeholder="20% off everything this weekend!"
          />
        </div>

        <div>
          <label htmlFor="discountPercent" className="tag-label mb-2 block">
            Discount (%)
          </label>
          <input
            id="discountPercent"
            name="discountPercent"
            type="number"
            min={1}
            max={100}
            required
            className="w-full border border-line bg-paper px-3 py-2 text-sm"
            placeholder="20"
          />
        </div>

        <PromotionScopePicker products={products} />

        <div className="grid grid-cols-2 gap-4">
          <div>
            <label htmlFor="startsAt" className="tag-label mb-2 block">
              Starts (optional)
            </label>
            <input
              id="startsAt"
              name="startsAt"
              type="date"
              className="w-full border border-line bg-paper px-3 py-2 text-sm"
            />
            <p className="mt-1 text-xs text-muted">Leave blank to start immediately.</p>
          </div>
          <div>
            <label htmlFor="endsAt" className="tag-label mb-2 block">
              Ends (optional)
            </label>
            <input
              id="endsAt"
              name="endsAt"
              type="date"
              className="w-full border border-line bg-paper px-3 py-2 text-sm"
            />
            <p className="mt-1 text-xs text-muted">Leave blank for no end date.</p>
          </div>
        </div>

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