import Image from "next/image";
import { notFound } from "next/navigation";
import { SiteHeader } from "@/components/SiteHeader";
import { SiteFooter } from "@/components/SiteFooter";
import { PassActions } from "@/components/PassActions";
import { getVisitorByPass, type VisitorRow } from "@/lib/visitors";
import { maskMobile } from "@/lib/aadhaar";
import { KUMBH_IMAGES } from "@/lib/constants";
import { EVENT } from "@/lib/event";

type Props = {
  params: Promise<{ passNo: string }>;
  searchParams: Promise<{ new?: string }>;
};

function formatArrival(d: string | Date) {
  const iso =
    typeof d === "string" ? d.slice(0, 10) : new Date(d).toISOString().slice(0, 10);
  const date = new Date(iso + "T00:00:00");
  return date.toLocaleDateString("en-IN", {
    day: "numeric",
    month: "short",
    year: "numeric",
  });
}

function homeAddress(v: VisitorRow) {
  return [
    v.address_line1,
    v.address_line2,
    v.city,
    v.district,
    v.state,
    v.pincode,
  ]
    .map((x) => (typeof x === "string" ? x.trim() : x))
    .filter(Boolean)
    .join(", ");
}

export default async function PassPage({ params, searchParams }: Props) {
  const { passNo } = await params;
  const sp = await searchParams;
  const visitor = await getVisitorByPass(passNo.toUpperCase());
  if (!visitor) notFound();

  const site = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
  const qrUrl = `${site}/api/v1/registration/pass/${visitor.pass_no}/qr`;
  const address = homeAddress(visitor);

  return (
    <main className="pass-page min-h-screen bg-[var(--bg)]">
      <div className="no-print">
        <SiteHeader solid />
      </div>
      <div className="pass-page-inner mx-auto max-w-3xl px-5 py-10">
        {sp.new === "1" && (
          <div className="alert alert-ok no-print mb-6">
            Congratulations. Your registration is complete. A confirmation has
            been queued for SMS and WhatsApp.
          </div>
        )}

        <article className="pass-print panel-surface overflow-hidden rounded-2xl">
          <header className="pass-banner relative h-24 md:h-28">
            <Image
              src={KUMBH_IMAGES.aarti}
              alt=""
              fill
              className="object-cover"
              sizes="768px"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-[var(--bg-elevated)] via-[rgba(28,39,54,0.35)] to-transparent" />
            <div className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 px-5 pb-3">
              <div>
                <p className="text-[10px] font-semibold uppercase tracking-[0.16em] text-[var(--gold)]">
                  ॐ {EVENT.shortName} {EVENT.year}
                </p>
                <h1 className="font-display text-2xl font-semibold leading-tight md:text-[1.75rem]">
                  Devotee Pass / Receipt
                </h1>
              </div>
              <p className="hidden text-right text-[10px] text-[var(--muted)] sm:block">
                {EVENT.dateRangeEn}
                <br />
                {EVENT.city}
              </p>
            </div>
          </header>

          <div className="pass-body grid gap-5 p-5 md:grid-cols-[1fr_140px] md:gap-6 md:p-6">
            <div>
              <p className="text-xs text-[var(--muted)]">Pass number</p>
              <p className="font-display text-2xl font-semibold tracking-wide text-[var(--gold)]">
                {visitor.pass_no}
              </p>

              <dl className="pass-fields mt-4 grid grid-cols-2 gap-x-4 gap-y-2.5 text-sm">
                <div>
                  <dt className="text-xs text-[var(--muted)]">Name</dt>
                  <dd className="font-medium leading-snug">{visitor.name}</dd>
                </div>
                <div>
                  <dt className="text-xs text-[var(--muted)]">Mobile</dt>
                  <dd className="font-medium">{maskMobile(visitor.mobile)}</dd>
                </div>
                <div>
                  <dt className="text-xs text-[var(--muted)]">Arrival</dt>
                  <dd className="font-medium">
                    {formatArrival(visitor.arrival_date)}
                  </dd>
                </div>
                <div>
                  <dt className="text-xs text-[var(--muted)]">Status</dt>
                  <dd className="font-medium text-[var(--ok)]">
                    {visitor.status}
                  </dd>
                </div>
                <div>
                  <dt className="text-xs text-[var(--muted)]">Travel</dt>
                  <dd className="font-medium">{visitor.transport_mode}</dd>
                </div>
                <div>
                  <dt className="text-xs text-[var(--muted)]">Stay</dt>
                  <dd className="font-medium">{visitor.stay_type}</dd>
                </div>
                {address ? (
                  <div className="col-span-2">
                    <dt className="text-xs text-[var(--muted)]">
                      Registered home address
                    </dt>
                    <dd className="font-medium leading-snug">{address}</dd>
                  </div>
                ) : null}
                {visitor.post_office ? (
                  <div className="col-span-2">
                    <dt className="text-xs text-[var(--muted)]">Post office</dt>
                    <dd className="font-medium">{visitor.post_office}</dd>
                  </div>
                ) : null}
              </dl>

              <p className="pass-note mt-4 text-xs leading-snug text-[var(--muted)]">
                Carry Aadhaar with this pass. Home address is for emergency
                coordination with local authorities if required during the event.
              </p>
            </div>

            <div className="pass-qr flex flex-col items-center justify-start md:justify-center">
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={qrUrl}
                alt={`QR for ${visitor.pass_no}`}
                width={140}
                height={140}
                className="rounded-md bg-white p-1.5"
              />
              <p className="mt-1.5 text-center text-[10px] text-[var(--muted)]">
                Scan at entry
              </p>
            </div>
          </div>
        </article>

        <PassActions />
      </div>
      <div className="no-print">
        <SiteFooter />
      </div>
    </main>
  );
}