/* Show landing — one page per date. Venue logistics, ticket tiers with prices, lineup, likely set list.
   All times, prices, capacities, addresses and support acts are placeholder values (dotted-flagged). */
const {Button, Window, Tag, Transit} = window.ArcadiaDesignSystem_90e8f6;
function findShow(id){
  const u = EST.shows.upcoming.find(s=>s.id===id); if(u) return [u, true];
  const p = EST.shows.past.find(s=>s.id===id); if(p) return [p, false];
  return [null, false];
}
function Fact({label, children}){
  return <div className="est-fact"><span className="micro-text">{label}</span><span className="chrome-text">{children}</span></div>;
}
function ShowPage({id, go, stub}){
  const [show, upcoming] = findShow(id);
  if(!show) return <div style={{paddingTop:16}}>
    <h1 className="heading-1" style={{margin:"0 0 20px"}}>No such show</h1>
    <EmptyState line="That date isn't on the calendar." actionLabel="All shows" onAction={()=>go("shows")}/>
  </div>;
  const tiers = show.tiers || [];
  const nums = tiers.filter(t=>!t.pkg).map(t=>parseInt(String(t.price).replace(/\D/g,""),10)).filter(n=>!isNaN(n));
  const low = nums.length ? Math.min(...nums) : null, high = nums.length ? Math.max(...nums) : null;
  const set = EST.setlist;
  const hasSupport = show.opener && show.opener !== "None";
  const songs = upcoming ? set.likely : (show.played || set.likely);
  return <div style={{paddingTop:16}}>
    <a href="#/shows" className="est-back" onClick={(e)=>{e.preventDefault(); go("shows");}}>All shows</a>
    <section className="est-showhero">
      <div className="est-showhero-text">
        <div className="micro-text">{upcoming ? "Upcoming" : "Played"}</div>
        <h1 className="display-planet est-showtitle">{show.city.split(",")[0]}</h1>
        <p className="chrome-text est-showmeta">
          <span>{show.date}</span><span className="est-dot">·</span><span>{show.venue}</span><span className="est-dot">·</span><span>{show.city}</span>
        </p>
        {upcoming && <div className="est-showcta">
          {show.soldOut
            ? <><Tag>Sold out</Tag><span className="chrome-text" style={{color:"var(--text-secondary)"}}>Returns are released at the box office on show day.</span></>
            : <><Button onClick={()=>stub("Ticket link routes out — URL TBD.")}>Get tickets</Button>
               <span className="chrome-text" style={{color:"var(--text-secondary)"}}>
                 <Tbd note="prices TBD">{low===high ? "$"+low : "$"+low+" to $"+high}</Tbd>, plus fees
               </span></>}
        </div>}
        {!upcoming && <p className="chrome-text" style={{color:"var(--text-secondary)", margin:"20px 0 0", maxWidth:"46ch"}}>{show.note}</p>}
      </div>
      <div className="est-showhero-plate"><Window aspect="4/5" placeholder={"visit still — "+show.venue+", "+show.city.split(",")[0]} caption={show.venue}/></div>
    </section>
    {upcoming && tiers.length>0 && <section className="est-showsec">
      <h2 className="heading-2 est-sech">Tickets</h2>
      <div className="est-tiers">
        {tiers.map((t,i)=><div key={i} className={"est-tier"+(show.soldOut?" est-tier--gone":"")}>
          <div className="est-tier-main">
            <span className="chrome-text est-tier-name">{t.name}</span>
            <span className="chrome-text est-tier-line">{t.line}</span>
          </div>
          <span className="chrome-text est-tier-price"><Tbd note="price TBD">{t.price}</Tbd></span>
          {show.soldOut
            ? <span className="chrome-text est-tier-gone">Sold out</span>
            : <a href="#" onClick={(e)=>{e.preventDefault(); stub("Ticket link routes out — URL TBD.");}}>Get tickets</a>}
        </div>)}
      </div>
      <p className="chrome-text est-sechnote">Prices are before fees, which the ticket seller adds at checkout. The door price is a few dollars over advance at every stop on this run. The early-entry package is priced separately and sits above the ticket range.</p>
    </section>}
    <section className="est-showsec">
      <h2 className="heading-2 est-sech">The venue</h2>
      <div className="est-facts">
        <Fact label="Address"><Tbd note="address TBD">{show.address}</Tbd></Fact>
        <Fact label="Room">{show.room}</Fact>
        <Fact label="Capacity"><Tbd note="capacity TBD">{show.capacity}</Tbd></Fact>
        <Fact label="Ages">{show.ages}</Fact>
        <Fact label="Doors"><Tbd note="times TBD">{show.doors}</Tbd></Fact>
        {hasSupport && <Fact label="Support on">{show.support}</Fact>}
        <Fact label="Ruti on">{show.headline}</Fact>
        <Fact label="Out by">{show.curfew}</Fact>
      </div>
      <div className="est-venuenotes">
        <Collapse title="Getting there and parking"><p className="body-text est-cnote">{show.getting}</p></Collapse>
        <Collapse title="Accessibility"><p className="body-text est-cnote">{show.access}</p></Collapse>
        {show.box && <Collapse title="Box office"><p className="body-text est-cnote">{show.box}</p></Collapse>}
      </div>
    </section>
    <section className="est-showsec">
      <h2 className="heading-2 est-sech">The lineup</h2>
      <div className="est-lineup">
        <div className="est-act">
          <div className="est-act-plate"><Window aspect="1/1" placeholder="visit still — Ruti, live"/></div>
          <div>
            <span className="micro-text">Headline</span>
            <h3 className="chrome-text est-act-name">Planet Ruti</h3>
            <p className="chrome-text est-act-line">{show.band}</p>
            {!hasSupport && <p className="chrome-text est-act-line" style={{marginTop:6}}>{show.openerLine}</p>}
          </div>
        </div>
        {hasSupport && <div className="est-act">
          <div className="est-act-plate"><Window aspect="1/1" placeholder={"press still — "+show.opener}/></div>
          <div>
            <span className="micro-text">Support</span>
            <h3 className="chrome-text est-act-name"><Tbd note="support act TBD">{show.opener}</Tbd></h3>
            <p className="chrome-text est-act-line">{show.openerLine}</p>
          </div>
        </div>}
      </div>
      {upcoming && <p className="chrome-text est-sechnote">{show.note}</p>}
    </section>
    <section className="est-showsec est-showsec--last">
      <h2 className="heading-2 est-sech">{upcoming ? "Songs you'll probably hear" : "What was played"}</h2>
      <p className="chrome-text est-sechnote" style={{marginTop:0, marginBottom:24}}>{upcoming ? set.line : (set.pastLine||"The set that night, in order.")}</p>
      <ol className="est-songs">{songs.map((s,i)=><li key={i}><Tbd note="set list TBD">{s}</Tbd></li>)}</ol>
      {upcoming && <p className="chrome-text est-sechnote">Opens with {set.opener}. Ends with {set.closer}. {set.coverLine}</p>}
    </section>
    <section className="est-shownext">
      <span className="micro-text">Rest of the run</span>
      <div className="est-shownext-list">
        {EST.shows.upcoming.filter(s=>s.id!==show.id).map(s=><a key={s.id} href={"#/show/"+s.id} className="est-shownext-item" onClick={(e)=>{e.preventDefault(); go("show/"+s.id);}}>
          <span className="chrome-text est-shownext-city">{s.city.split(",")[0]}</span>
          <span className="micro-text">{s.date}</span>
        </a>)}
      </div>
    </section>
  </div>;
}
Object.assign(window, {ShowPage, findShow});