import { db } from "@/lib/db";
import { getPublicConference, regState } from "@/lib/conference";
import { getCurrentUser } from "@/lib/auth";
import { formatMoney, fmtDate } from "@/lib/utils";
import { Card, Field, input } from "@/components/ui";
import { registerAction } from "./actions";

export const metadata = { title: "Register" };

export default async function RegisterPage({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ error?: string }>;
}) {
  const { slug } = await params;
  const { error } = await searchParams;
  const conf = await getPublicConference(slug);
  const user = await getCurrentUser();
  const reg = regState(conf);
  const tickets = await db.ticketType.findMany({
    where: { conferenceId: conf.id, active: true },
    orderBy: { price: "asc" },
    include: { _count: { select: { registrations: { where: { status: { not: "CANCELLED" } } } } } },
  });
  const action = registerAction.bind(null, slug);

  if (reg !== "open") {
    return (
      <main className="mx-auto max-w-xl px-4 py-20 text-center">
        <h1 className="text-2xl font-bold text-zinc-100">Registration {reg === "not_open" ? "hasn’t opened yet" : "is closed"}</h1>
        <p className="mt-2 text-sm text-zinc-500">
          {reg === "not_open" && conf.regOpensAt
            ? `Registration opens on ${fmtDate(conf.regOpensAt)}.`
            : "Contact the organizers if you believe this is a mistake."}
        </p>
      </main>
    );
  }

  return (
    <main className="mx-auto max-w-3xl px-4 py-10">
      <h1 className="text-2xl font-bold text-zinc-100">Register for {conf.name}</h1>
      <p className="mt-1 text-sm text-zinc-500">
        Pick a pass and fill in your details — your QR ticket is issued instantly.
        {conf.regClosesAt && ` Registration closes ${fmtDate(conf.regClosesAt)}.`}
      </p>
      {error && (
        <div className="mt-5 rounded-lg border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-600">{error}</div>
      )}

      <form action={action} className="mt-6 space-y-6">
        <section>
          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-zinc-500">1 · Choose your pass</h2>
          <div className="grid gap-3 sm:grid-cols-2">
            {tickets.map((t, i) => {
              const soldOut = t.quantity != null && t._count.registrations >= t.quantity;
              const left = t.quantity != null ? t.quantity - t._count.registrations : null;
              return (
                <label
                  key={t.id}
                  className={`relative flex cursor-pointer flex-col rounded-xl border p-4 transition ${
                    soldOut ? "cursor-not-allowed border-zinc-800 opacity-50" : "border-zinc-800 bg-zinc-900/50 hover:border-zinc-600 has-checked:border-indigo-500 has-checked:bg-indigo-500/5"
                  }`}
                >
                  <input type="radio" name="ticketTypeId" value={t.id} defaultChecked={i === 0 && !soldOut} disabled={soldOut} required className="absolute right-4 top-4 accent-indigo-500" />
                  <div className="pr-8 font-semibold text-zinc-100">{t.name}</div>
                  <div className="mt-1 text-lg font-bold" style={{ color: conf.primaryColor }}>{formatMoney(t.price, t.currency)}</div>
                  {t.description && <div className="mt-1 text-xs text-zinc-500">{t.description}</div>}
                  <div className="mt-2 text-[11px] text-zinc-600">
                    {soldOut ? "Sold out" : left != null && left <= 20 ? `${left} left` : t.saleEndsAt ? `On sale until ${fmtDate(t.saleEndsAt)}` : ""}
                  </div>
                </label>
              );
            })}
          </div>
        </section>

        <section>
          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-zinc-500">2 · Your details</h2>
          <Card className="grid gap-4 p-5 sm:grid-cols-2">
            <Field name="name" title="Full name *">
              <input id="name" name="name" required defaultValue={user?.name ?? ""} className={input} placeholder="Priya Sharma" />
            </Field>
            <Field name="email" title="Email *">
              <input id="email" name="email" type="email" required defaultValue={user?.email ?? ""} className={input} placeholder="you@example.com" />
            </Field>
            <Field name="phone" title="Phone">
              <input id="phone" name="phone" className={input} placeholder="+91 98xxxxxx" />
            </Field>
            <Field name="city" title="City">
              <input id="city" name="city" className={input} placeholder="New Delhi" />
            </Field>
            <Field name="organization" title="Organization">
              <input id="organization" name="organization" defaultValue={user?.organization ?? ""} className={input} placeholder="Company / Institution" />
            </Field>
            <Field name="designation" title="Designation">
              <input id="designation" name="designation" className={input} placeholder="e.g. Research Scholar" />
            </Field>
            {conf.type === "HYBRID" && (
              <Field name="mode" title="How will you attend? *">
                <select id="mode" name="mode" className={input} defaultValue="PHYSICAL">
                  <option value="PHYSICAL">In person — {conf.city ?? conf.venueName}</option>
                  <option value="VIRTUAL">Online</option>
                </select>
              </Field>
            )}
            <Field name="coupon" title="Coupon code">
              <input id="coupon" name="coupon" className={`${input} uppercase`} placeholder="Optional" />
            </Field>
          </Card>
        </section>

        <button
          type="submit"
          className="w-full rounded-lg py-3 text-sm font-semibold text-white transition hover:opacity-90"
          style={{ background: conf.primaryColor }}
        >
          Continue →
        </button>
        <p className="text-center text-xs text-zinc-600">
          By registering you agree to the conference terms & privacy policy.
          {!user && " Have an account? Sign in first to see this ticket under My Conferences."}
        </p>
      </form>
    </main>
  );
}