import Image from "next/image";
import QRCode from "qrcode";
import { notFound } from "next/navigation";
import { ApiError } from "@/lib/api/server";
import { getMyTicketDetail } from "@/lib/api/tickets";
import { formatCurrency, formatDate } from "@/lib/format";
import { QrStatusBadge } from "@/components/tickets/QrStatusBadge";
import { InfoField } from "@/components/tickets/InfoField";

export default async function ETicketPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

  const ticket = await getMyTicketDetail(id)
    .then((res) => res.data)
    .catch((error) => {
      if (error instanceof ApiError && (error.status === 404 || error.status === 403)) {
        notFound();
      }
      throw error;
    });

  const qrDataUrl = ticket.qr ? await QRCode.toDataURL(ticket.qr.token, { width: 200, margin: 1 }) : null;

  return (
    <div className="mx-auto max-w-3xl overflow-hidden rounded-3xl border border-kolabora-neutral-dark/10">
      {/* Header */}
      <div className="flex items-center justify-between border-b border-dashed border-kolabora-neutral-dark/20 px-6 py-4">
        <Image src="/kolabora-mark.svg" alt="Kolaborativ" width={36} height={28} priority />
        <a
          href={`/api/dashboard/tickets/${ticket.id}/pdf`}
          className="flex items-center gap-1.5 text-sm font-medium text-kolabora-primary hover:opacity-80"
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <path d="M12 3v12m0 0-4-4m4 4 4-4M4 21h16" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          E-Ticket
        </a>
      </div>

      {/* Boarding-pass body: main stub + tear-off stub, split by a dashed divider */}
      <div className="grid grid-cols-1 sm:grid-cols-[1fr_auto_220px]">
        <div className="p-6">
          {ticket.event.banner ?? ticket.event.thumbnail ? (
            // eslint-disable-next-line @next/next/no-img-element -- organizer-uploaded file, not on next/image allowlist
            <img
              src={ticket.event.banner ?? ticket.event.thumbnail ?? undefined}
              alt={ticket.event.title}
              className="h-48 w-full rounded-xl object-cover"
            />
          ) : (
            <div className="flex h-48 w-full items-center justify-center rounded-xl bg-kolabora-neutral-dark/5 text-sm text-kolabora-neutral-dark/40">
              {ticket.event.title}
            </div>
          )}

          <div className="mt-6 grid grid-cols-2 gap-x-4 gap-y-5 border-t border-dashed border-kolabora-neutral-dark/20 pt-5 sm:grid-cols-3">
            <InfoField label="Transaction Number" value={ticket.order.order_number} />
            <InfoField label="Name" value={ticket.holder_name} />
            <InfoField label="Date" value={formatDate(ticket.event.start_date)} />
            <InfoField label="Price" value={formatCurrency(ticket.ticket_type.price)} />
            <InfoField label="Category" value={ticket.ticket_type.name} />
            <InfoField label="Location" value={ticket.event.location ?? "-"} />
          </div>
        </div>

        {/* Perforated tear line */}
        <div className="hidden border-l border-dashed border-kolabora-neutral-dark/20 sm:block" />

        {/* Tear-off stub: QR + ticket code */}
        <div className="flex flex-col items-center gap-4 border-t border-dashed border-kolabora-neutral-dark/20 p-6 sm:border-t-0">
          <div className="flex h-[200px] w-[200px] items-center justify-center rounded-xl bg-kolabora-neutral-dark/5">
            {qrDataUrl ? (
              // eslint-disable-next-line @next/next/no-img-element -- data URL, not an optimizable remote asset
              <img src={qrDataUrl} alt="Ticket QR Code" width={200} height={200} className="rounded-lg" />
            ) : (
              <p className="p-4 text-center text-xs text-kolabora-neutral-dark/60">
                QR code will be available once the ticket is active.
              </p>
            )}
          </div>

          <div className="w-full rounded-xl bg-kolabora-neutral-dark/5 px-4 py-3 text-center">
            <p className="font-mono text-sm font-semibold text-kolabora-tertiary">{ticket.ticket_code}</p>
          </div>

          {ticket.qr && <QrStatusBadge status={ticket.qr.status} />}
        </div>
      </div>

      <p className="border-t border-dashed border-kolabora-neutral-dark/20 py-3 text-center text-xs text-kolabora-neutral-dark/40">
        Powered by Kolaborativ
      </p>
    </div>
  );
}