// Tickets page — lists e-tickets in /tickets folder, tap to open full-screen viewer.
// To add a ticket: drop the PDF/PNG in /tickets/ and add an entry to TICKETS_LIST below.

const TICKETS_LIST = [
  {
    id: "tk-aquarium",
    name: "Monterey Bay Aquarium",
    eyebrow: "Day 2 · General Admission",
    day: 2,
    dateNum: "24",
    dateMonth: "May",
    dateLabel: "Sun, May 24",
    time: "Any time",
    conf: "Order #16845197",
    file: "tickets/tickets-monterey-aquarium.png",
    type: "image",
  },
  {
    id: "tk-hearst",
    name: "Hearst Castle",
    eyebrow: "Day 4 · Grand Rooms + Upstairs Suites",
    day: 4,
    dateNum: "26",
    dateMonth: "May",
    dateLabel: "Tue, May 26",
    time: "9:00 AM + 11:00 AM",
    conf: "Conf #29098335",
    file: "tickets/tickets-hearst-castle.pdf",
    type: "pdf",
  },
  {
    id: "tk-warner",
    name: "Warner Bros Studio Tour",
    eyebrow: "Day 6 · English tour",
    day: 6,
    dateNum: "28",
    dateMonth: "May",
    dateLabel: "Thu, May 28",
    time: "9:30 – 10:00 AM",
    conf: "Order #1874925",
    file: "tickets/tickets-warner-bros.pdf",
    type: "pdf",
  },
];

let _pdfJsLoader = null;
function ensurePdfJs() {
  if (window.pdfjsLib) return Promise.resolve(window.pdfjsLib);
  if (_pdfJsLoader) return _pdfJsLoader;
  _pdfJsLoader = new Promise((resolve, reject) => {
    const s = document.createElement('script');
    s.src = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js';
    s.async = true;
    s.onload = () => {
      if (!window.pdfjsLib) return reject(new Error('PDF.js failed to load'));
      window.pdfjsLib.GlobalWorkerOptions.workerSrc =
        'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
      resolve(window.pdfjsLib);
    };
    s.onerror = () => reject(new Error('Could not load PDF.js script'));
    document.head.appendChild(s);
  });
  return _pdfJsLoader;
}

function PdfTicketViewer({ file }) {
  const [scale, setScale] = React.useState(1.2);
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [numPages, setNumPages] = React.useState(0);
  const canvasRefs = React.useRef([]);

  React.useEffect(() => {
    let cancelled = false;
    let pdfDoc = null;

    async function loadAndRender() {
      setLoading(true);
      setError(null);
      try {
        const pdfjsLib = await ensurePdfJs();
        if (cancelled) return;
        pdfDoc = await pdfjsLib.getDocument(file).promise;
        if (cancelled) return;
        setNumPages(pdfDoc.numPages);
      } catch (e) {
        if (cancelled) return;
        setError('Could not load PDF preview.');
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    loadAndRender();
    return () => { cancelled = true; };
  }, [file]);

  React.useEffect(() => {
    let cancelled = false;
    let pdfDoc = null;

    async function renderPages() {
      try {
        const pdfjsLib = await ensurePdfJs();
        if (cancelled) return;
        pdfDoc = await pdfjsLib.getDocument(file).promise;
        if (cancelled) return;

        for (let i = 1; i <= pdfDoc.numPages; i++) {
          if (cancelled) return;
          const page = await pdfDoc.getPage(i);
          const viewport = page.getViewport({ scale });
          const canvas = canvasRefs.current[i - 1];
          if (!canvas) continue;
          const ctx = canvas.getContext('2d');
          canvas.width = viewport.width;
          canvas.height = viewport.height;
          await page.render({ canvasContext: ctx, viewport }).promise;
        }
      } catch (e) {
        if (!cancelled) setError('Could not render PDF pages.');
      }
    }

    if (numPages > 0) renderPages();
    return () => { cancelled = true; };
  }, [file, scale, numPages]);

  return (
    <div className="pdf-viewer">
      <div className="pdf-toolbar">
        <button className="pdf-btn" onClick={() => setScale(s => Math.max(0.7, +(s - 0.15).toFixed(2)))}>−</button>
        <span className="pdf-zoom">{Math.round(scale * 100)}%</span>
        <button className="pdf-btn" onClick={() => setScale(s => Math.min(2.5, +(s + 0.15).toFixed(2)))}>+</button>
        <a className="pdf-open" href={file} target="_blank" rel="noopener">Open file</a>
      </div>
      <div className="pdf-scroll">
        {loading && <div className="pdf-state">Loading PDF…</div>}
        {error && <div className="pdf-state">{error}</div>}
        {!loading && !error && (
          <div className="pdf-pages">
            {Array.from({ length: numPages }).map((_, idx) => (
              <canvas
                key={idx}
                ref={(el) => { canvasRefs.current[idx] = el; }}
                className="pdf-canvas"
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function TicketViewerModal({ ticket, onClose }) {
  if (!ticket) return null;

  // Close on ESC
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [onClose]);

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>
        {ticket.type === 'image' ? (
          <img src={ticket.file} alt={ticket.name} />
        ) : (
          <PdfTicketViewer file={ticket.file} />
        )}
      </div>
    </div>
  );
}

function TicketsPage() {
  const [open, setOpen] = React.useState(null);

  return (
    <>
      {window.PageHeader && <window.PageHeader title="E-Tickets" />}
      <section id="tickets" data-screen-label="Tickets">
      <div className="page-head no-safe">
        <h1 className="ph-title">Show at the gate</h1>
        <p className="ph-sub">Tap any ticket to open it full-screen. Save them to Apple Wallet for offline access too.</p>
      </div>

      <div className="page-body">
        <div className="tickets-grid">
          {TICKETS_LIST.length === 0 ? (
            <div className="tickets-empty">
              <div className="te-title">No tickets yet</div>
              <div>Drop PDFs or images in <code>tickets/</code> and add them to <code>tickets.jsx</code>.</div>
            </div>
          ) : TICKETS_LIST.map(t => (
            <a
              key={t.id}
              className="ticket-card"
              onClick={(e) => { e.preventDefault(); setOpen(t); }}
              href={t.file}
            >
              <div className="ticket-stub">
                <div className="ts-day">DAY {t.day}</div>
                <div className="ts-date">{t.dateNum}</div>
                <div className="ts-month">{t.dateMonth}</div>
              </div>
              <div className="ticket-info">
                <div className="ti-eyebrow">{t.eyebrow}</div>
                <div className="ti-name">{t.name}</div>
                <div className="ti-meta">{t.dateLabel} · {t.time}</div>
                <div className="ti-conf">{t.conf}</div>
              </div>
              <div className="ticket-arrow">›</div>
            </a>
          ))}
        </div>
      </div>

      <TicketViewerModal ticket={open} onClose={() => setOpen(null)} />
    </section>
    </>
  );
}

window.TicketsPage = TicketsPage;