/* global React, Star, Icon, SHOWS */
const { useState: useStateT } = React;

/* In production, these come from your Thundertix Event Manager —
   each event/date has a unique embed link you copy from the Code column. */
const THUNDERTIX = {
  frozen: {
    link: "https://foothilltheatreworkshop1.thundertix.com/events/266513",
    embed: `<iframe src="https://foothilltheatreworkshop1.thundertix.com/events/266513" width="100%" height="900" scrolling="auto" frameborder="0"></iframe>`,
  },
  butterknife: {
    link: "https://foothilltheatreworkshop1.thundertix.com/events/266514",
    embed: `<iframe src="https://foothilltheatreworkshop1.thundertix.com/events/266514" width="100%" height="900" scrolling="auto" frameborder="0"></iframe>`,
  },
};

const PERFORMANCES = {
  frozen: [
    { id: "f1", label: "Fri Jul 24 · 7:30 PM", tag: "Opening night" },
    { id: "f2", label: "Sat Jul 25 · 2:00 PM",  tag: "Matinee" },
    { id: "f3", label: "Sat Jul 25 · 7:30 PM",  tag: "Evening" },
    { id: "f4", label: "Sun Jul 26 · 5:00 PM",  tag: "Closing" },
  ],
  butterknife: [
    { id: "b1", label: "Fri Jul 24 · 5:00 PM",  tag: "Opening night" },
    { id: "b2", label: "Sun Jul 26 · 2:00 PM",  tag: "Closing matinee" },
  ],
};

function TicketsPage({ navigate }) {
  const [showId, setShowId] = useStateT("frozen");

  const show = SHOWS.find(s => s.id === showId);
  const perfs = PERFORMANCES[showId];
  const ttx = THUNDERTIX[showId];

  const setShow = (id) => { setShowId(id); };

  return (
    <div className="wrap" style={{ paddingBlock: "clamp(36px,6vw,72px)", maxWidth: 1040 }}>
      <div className="row between" style={{ flexWrap: "wrap", gap: 14, marginBottom: 28 }}>
        <div>
          <span className="kicker"><Star size={13} fill="var(--gold-deep)" /> Box office open</span>
          <h1 style={{ fontSize: "clamp(30px,4.5vw,48px)", marginTop: 10 }}>Get your tickets</h1>
        </div>
        <span className="tag tag--teal" style={{ alignSelf: "center" }}>
          <Icon name="pin" size={13} stroke={2.4} /> The School of Arts + Enterprise, Pomona
        </span>
      </div>

      {/* Show selector */}
      <div className="card" style={{ padding: 20, marginBottom: 20 }}>
        <h3 style={{ fontSize: 17, marginBottom: 14 }}>Choose a show</h3>
        <div className="form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          {SHOWS.map(s => {
            const sel = showId === s.id;
            return (
              <button key={s.id} onClick={() => setShow(s.id)}
                style={{ textAlign: "left", border: sel ? "var(--bd-ink)" : "2px solid var(--paper-2)",
                  borderRadius: "var(--r-md)", cursor: "pointer",
                  background: sel ? s.tint : "var(--white)", padding: 0, overflow: "hidden",
                  boxShadow: sel ? "var(--shadow-sm)" : "none" }}>
                <img src={s.img} alt={s.title}
                  style={{ width: "100%", aspectRatio: "16 / 7", objectFit: "cover", display: "block",
                    borderBottom: sel ? "var(--bd-ink)" : "2px solid var(--paper-2)" }} />
                <div style={{ padding: "14px 16px" }}>
                  <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 20 }}>{s.short}</div>
                  <div className="muted" style={{ fontSize: 13 }}>{s.tag} · {s.dates}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* Performances + CTA */}
      <div className="tix-grid" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 22, alignItems: "start" }}>
        <div className="card" style={{ padding: 22 }}>
          <h3 style={{ fontSize: 17, marginBottom: 14 }}>Upcoming performances</h3>
          <div style={{ display: "grid", gap: 10, marginBottom: 22 }}>
            {perfs.map(p => {
              return (
                <div key={p.id} className="row between" style={{ padding: "14px 16px",
                  border: "2px solid var(--paper-2)", borderRadius: "var(--r-md)", gap: 12, flexWrap: "wrap",
                  background: "var(--paper)" }}>
                  <div>
                    <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 16 }}>{p.label}</div>
                    <div className="muted" style={{ fontSize: 13 }}>{p.tag}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* CTA to Thundertix */}
          <div className="card" style={{ padding: 20, background: show.tint, marginBottom: 0 }}>
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 16, marginBottom: 6 }}>
              Select seats & buy on Thundertix
            </div>
            <p className="muted" style={{ fontSize: 13.5, marginBottom: 16 }}>
              Our box office is powered by Thundertix — click below to pick your seats,
              choose your performance, and complete checkout securely.
            </p>
            <div className="row gap-12" style={{ flexWrap: "wrap" }}>
              <a href={ttx.link} target="_blank" rel="noopener"
                className="btn btn--ink"
                style={{ textDecoration: "none" }}>
                <Icon name="ticket" size={18} /> Buy {show.short} tickets
                <Icon name="arrow" size={16} stroke={2.6} />
              </a>
            </div>
            {showId === "frozen" && (
              <p style={{ fontSize: 11.5, color: "var(--ink-soft)", marginTop: 16, lineHeight: 1.6, opacity: .75 }}>
                <em>Disney's Frozen</em> is presented through special arrangement with Music Theatre
                International (MTI). All authorized performance materials are also supplied by MTI.{" "}
                <a href="https://www.mtishows.com" target="_blank" rel="noopener"
                  style={{ color: "inherit" }}>www.mtishows.com</a>
              </p>
            )}
          </div>

        </div>

        {/* Info sidebar */}
        <div style={{ display: "grid", gap: 16, position: "sticky", top: 90 }}>
          <div className="card" style={{ padding: 22, overflow: "hidden" }}>
            <img src={show.img} alt={show.title + " poster"}
              style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover",
                borderRadius: "var(--r-sm)", marginBottom: 14, border: "var(--bd-ink)" }} />
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 20 }}>{show.title}</div>
            <div className="muted" style={{ fontSize: 13.5, marginTop: 4 }}>{show.dates}</div>
          </div>

          <div className="card" style={{ padding: 22, background: "var(--sky-tint)" }}>
            <div className="row gap-8" style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 15, marginBottom: 6 }}>
              <Star size={16} fill="var(--gold)" /> Cast & crew tickets
            </div>
            <p className="muted" style={{ fontSize: 13.5 }}>
              Tickets are on sale now and the same price today as at the door. Head to the Family Hub to grab yours.
            </p>
            <button className="btn btn--sky btn--sm" style={{ marginTop: 12 }} onClick={() => navigate("hub")}>
              Go to Family Hub
            </button>
          </div>

          <div className="card" style={{ padding: 22, background: "var(--paper-2)" }}>
            <div className="row gap-8" style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 15, marginBottom: 8 }}>
              <Icon name="heart" size={16} color="var(--coral)" /> Support FTW
            </div>
            <p className="muted" style={{ fontSize: 13 }}>
              Every ticket sold funds a student's summer. As a 501(c)(3) non-profit we depend on audience support to keep tuition accessible.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TicketsPage });