"use client";

import { QRCodeSVG } from "qrcode.react";

function Field({ label, value, align }: { label: string; value: string; align?: "right" }) {
  return (
    <div className={align === "right" ? "text-right" : ""}>
      <p className="text-[10px] uppercase tracking-wide text-neutral-500">{label}</p>
      <p className="text-sm font-medium text-neutral-900 whitespace-pre-line">{value}</p>
    </div>
  );
}

export default function TicketCard({
  index,
  code,
  signature,
  attendeeName,
  attendeePhone,
  ticketTypeName,
  eventTitle,
  coverImageUrl,
  startsAt,
  endsAt,
  storefront,
  location,
}: {
  index: number;
  code: string;
  signature: string | null;
  attendeeName: string | null;
  attendeePhone: string | null;
  ticketTypeName: string | null;
  eventTitle: string;
  coverImageUrl: string | null;
  startsAt: Date;
  endsAt: Date | null;
  storefront: string | null;
  location: string | null;
}) {
  const payload = signature ? `${code}.${signature}` : code;

  const dateFmt = new Intl.DateTimeFormat("en-US", {
    weekday: "long",
    month: "long",
    day: "2-digit",
    year: "numeric",
  });
  const timeFmt = new Intl.DateTimeFormat("en-US", { hour: "2-digit", minute: "2-digit" });

  return (
    <div className="rounded-2xl border border-neutral-200 bg-neutral-50 overflow-hidden max-w-sm mx-auto sm:mx-0">
      <div className="p-5 flex justify-between gap-4">
        <div className="space-y-4">
          <Field label="Attendee" value={attendeeName || "Guest"} />
          {attendeePhone && <Field label="Phone Number" value={attendeePhone} />}
          <div className="flex gap-8">
            <Field label="Start Date" value={`${dateFmt.format(startsAt)}\n${timeFmt.format(startsAt)}`} />
          </div>
        </div>
        <div className="flex flex-col items-end gap-4 text-right shrink-0">
          {coverImageUrl && (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={coverImageUrl} alt={eventTitle} className="w-20 h-20 rounded-md object-cover" />
          )}
          {endsAt && <Field align="right" label="End Date" value={`${dateFmt.format(endsAt)}\n${timeFmt.format(endsAt)}`} />}
        </div>
      </div>

      <div className="px-5 pb-4 flex justify-between gap-4">
        {storefront && <Field label="Storefront" value={storefront} />}
        {ticketTypeName && <Field align="right" label="Ticket" value={ticketTypeName} />}
      </div>

      {location && (
        <div className="px-5 pb-5">
          <Field label="Location" value={location} />
        </div>
      )}

      <div className="border-t border-dashed border-neutral-300" />

      <div className="p-5 flex flex-col items-center">
        <div className="bg-black text-white text-xs font-semibold tracking-wide px-4 py-1.5 rounded-sm mb-4 uppercase">
          Ticket {index}
        </div>
        <div className="bg-white p-3 rounded-md">
          <QRCodeSVG value={payload} size={180} />
        </div>
        <p className="text-xs text-neutral-500 font-mono mt-3 break-all text-center">{code}</p>
      </div>
    </div>
  );
}