/* Fixtures, Ladder, Teams — PlayHQ-backed with off-season fallback */

// Shared PlayHQ data context — fetched once at app boot
const PHQContext = React.createContext(null);

function PHQProvider({ children }) {
  const [state, setState] = React.useState({ loading: true, data: null, error: null });

  React.useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const data = await window.PlayHQ.fetchAll();
        const fixtures = window.PlayHQ.normaliseFixtures(data);
        const teams = window.PlayHQ.normaliseTeams(data);
        const ladder = window.PlayHQ.normaliseLadder(data);
        const hasData = !!(fixtures?.recent?.length || teams?.length || ladder?.rows?.length);
        if (!cancelled) setState({ loading: false, data: hasData ? { fixtures, teams, ladder, syncedAt: data.syncedAt } : null, error: null });
      } catch (err) {
        if (!cancelled) setState({ loading: false, data: null, error: err.message });
      }
    })();
    return () => { cancelled = true; };
  }, []);

  return <PHQContext.Provider value={state}>{children}</PHQContext.Provider>;
}

function LiveTag({ loading, data, error }) {
  let label, tone;
  if (loading) { label = 'SYNCING WITH PLAYHQ…'; tone = 'syncing'; }
  else if (data) { label = `LIVE · PLAYHQ · ${window.PlayHQ.formatSyncTime(data.syncedAt)}`; tone = 'live'; }
  else { label = 'OFF-SEASON · LAST SEASON ARCHIVE'; tone = 'archive'; }
  return <span className={`live-tag ${tone}`}><span className="dot"></span>{label}</span>;
}

// Fallback / off-season mock data (still reasonable to show)
const FALLBACK = {
  fixtures: [
    { date: "OCT 04 2025", match: "Sunbury Utd @ Romsey", grade: "1st XI · McIntyre", status: "loss", label: "L -1" },
    { date: "OCT 11 2025", match: "Sunbury Utd vs Macedon", grade: "1st XI · McIntyre", status: "win", label: "W +42" },
    { date: "OCT 18 2025", match: "Sunbury Utd vs Gisborne", grade: "1st XI · McIntyre", status: "win", label: "W +87" },
    { date: "OCT 25 2025", match: "Sunbury Utd @ Kyneton", grade: "U17 Boys", status: "win", label: "W +54" },
    { date: "NOV 01 2025", match: "Sunbury Utd vs Diggers Rest", grade: "2nd XI · McIntyre", status: "win", label: "W +6 wkts" },
    { date: "NOV 08 2025", match: "Sunbury Utd vs Woodend", grade: "U15 Boys", status: "loss", label: "L -22" },
  ],
  teams: [
    { num: "01", cat: "Senior · McIntyre", name: "1st XI · McIntyre", p: 14, w: 5, l: 6, d: 3, pos: "6th" },
    { num: "02", cat: "Senior · Johnstone", name: "1st XI · Johnstone", p: 14, w: 8, l: 5, d: 1, pos: "3rd" },
    { num: "03", cat: "Senior · McIntyre", name: "2nd XI · McIntyre", p: 14, w: 7, l: 6, d: 1, pos: "5th" },
    { num: "04", cat: "Senior · Johnstone", name: "2nd XI · Johnstone", p: 14, w: 9, l: 4, d: 1, pos: "2nd" },
    { num: "05", cat: "Senior · Jensen", name: "Jensen Shield", p: 14, w: 8, l: 5, d: 1, pos: "3rd" },
    { num: "06", cat: "Junior · Boys", name: "U17 Boys", p: 12, w: 10, l: 2, d: 0, pos: "1st" },
    { num: "07", cat: "Junior · Boys", name: "U15 Boys", p: 12, w: 7, l: 5, d: 0, pos: "4th" },
    { num: "08", cat: "Junior · Boys", name: "U13 Boys", p: 12, w: 6, l: 6, d: 0, pos: "5th" },
    { num: "09", cat: "Woolworths · 5-10", name: "Blasters", p: "—", w: "—", l: "—", d: "—", pos: "All in" },
  ],
  ladder: [{
    gradeId: 'fb-mcintyre-1',
    gradeName: "1st XI · McIntyre",
    fullName: "McIntyre Cup - Firsts",
    rows: [
      { pos: 1, team: "Woodend", p: 14, w: 9, l: 2, d: 0, pts: 96.040 },
      { pos: 2, team: "Gisborne", p: 14, w: 9, l: 2, d: 0, pts: 93.180 },
      { pos: 3, team: "Romsey", p: 14, w: 7, l: 5, d: 0, pts: 79.220 },
      { pos: 4, team: "Rupertswood", p: 14, w: 6, l: 5, d: 0, pts: 75.360 },
      { pos: 5, team: "Sunbury United", p: 14, w: 5, l: 6, d: 0, pts: 66.680, ours: true },
      { pos: 6, team: "Macedon", p: 14, w: 5, l: 7, d: 0, pts: 65.290 },
      { pos: 7, team: "Wallan", p: 14, w: 3, l: 8, d: 0, pts: 52.350 },
      { pos: 8, team: "Broadford", p: 14, w: 2, l: 11, d: 0, pts: 40.060 },
    ],
    form: [],
  }, {
    gradeId: 'fb-mcintyre-2',
    gradeName: "2nd XI · McIntyre",
    fullName: "McIntyre Cup - Seconds",
    rows: [
      { pos: 1, team: "Rupertswood", p: 14, w: 12, l: 1, d: 0, pts: 75.000 },
      { pos: 2, team: "Woodend", p: 14, w: 10, l: 3, d: 0, pts: 63.000 },
      { pos: 3, team: "Romsey", p: 14, w: 7, l: 3, d: 0, pts: 54.000 },
      { pos: 4, team: "Sunbury United", p: 14, w: 8, l: 4, d: 0, pts: 54.000, ours: true },
      { pos: 5, team: "Broadford", p: 14, w: 4, l: 7, d: 0, pts: 33.000 },
      { pos: 6, team: "Gisborne", p: 14, w: 3, l: 8, d: 0, pts: 27.000 },
      { pos: 7, team: "Wallan", p: 14, w: 3, l: 10, d: 0, pts: 21.000 },
      { pos: 8, team: "Macedon", p: 14, w: 0, l: 11, d: 0, pts: 9.000 },
    ],
    form: [],
  }, {
    gradeId: 'fb-jensen',
    gradeName: "3rd XI · Jensen",
    fullName: "Jensen Shield",
    rows: [
      { pos: 1, team: "Riddell - 1st XI", p: 15, w: 12, l: 1, d: 0, pts: 78.000 },
      { pos: 2, team: "Rupertswood - 3rd XI", p: 15, w: 10, l: 2, d: 0, pts: 69.000 },
      { pos: 3, team: "Romsey - 3rd XI", p: 15, w: 10, l: 2, d: 0, pts: 63.000 },
      { pos: 4, team: "Hanging Rock - 1st XI", p: 15, w: 8, l: 3, d: 0, pts: 60.000 },
      { pos: 5, team: "Gisborne - 3rd XI", p: 15, w: 8, l: 5, d: 0, pts: 54.000 },
      { pos: 6, team: "Wallan - 3rd XI", p: 15, w: 6, l: 6, d: 0, pts: 45.000 },
      { pos: 7, team: "Trentham - 1st XI", p: 15, w: 5, l: 7, d: 1, pts: 39.000 },
      { pos: 8, team: "Woodend - 3rd XI", p: 15, w: 5, l: 8, d: 0, pts: 36.000 },
      { pos: 9, team: "Malmsbury - 1st XI", p: 15, w: 5, l: 9, d: 0, pts: 33.000 },
      { pos: 10, team: "Sunbury United - 3rd XI", p: 15, w: 3, l: 10, d: 0, pts: 24.000, ours: true },
      { pos: 11, team: "Blackwood - 1st XI", p: 15, w: 1, l: 8, d: 1, pts: 21.000 },
      { pos: 12, team: "Macedon - 3rd XI", p: 15, w: 1, l: 12, d: 0, pts: 12.000 },
    ],
    form: [],
  }, {
    gradeId: 'fb-club-sth',
    gradeName: "Club Sth",
    fullName: "Club Grade - South",
    rows: [
      { pos: 1, team: "Melton Centrals", p: 15, w: 9, l: 3, d: 0, pts: 63.000 },
      { pos: 2, team: "Sunbury United", p: 15, w: 7, l: 2, d: 1, pts: 60.000, ours: true },
      { pos: 3, team: "Rupertswood", p: 15, w: 8, l: 3, d: 0, pts: 60.000 },
      { pos: 4, team: "Melton South", p: 15, w: 8, l: 3, d: 0, pts: 57.000 },
      { pos: 5, team: "Melton", p: 15, w: 7, l: 4, d: 0, pts: 54.000 },
      { pos: 6, team: "Bacchus Marsh", p: 15, w: 7, l: 5, d: 0, pts: 51.000 },
      { pos: 7, team: "East Sunbury", p: 15, w: 6, l: 5, d: 1, pts: 48.000 },
      { pos: 8, team: "Woodend", p: 15, w: 5, l: 6, d: 0, pts: 39.000 },
      { pos: 9, team: "Sunbury", p: 15, w: 3, l: 6, d: 1, pts: 36.000 },
      { pos: 10, team: "Diggers Rest Bulla Village", p: 15, w: 3, l: 8, d: 1, pts: 30.000 },
      { pos: 11, team: "Gisborne", p: 15, w: 2, l: 8, d: 0, pts: 24.000 },
      { pos: 12, team: "Eynesbury", p: 15, w: 1, l: 10, d: 0, pts: 18.000 },
    ],
    form: [],
  }],
};

function Fixtures() {
  const { loading, data } = React.useContext(PHQContext) || {};
  const fx = data?.fixtures;
  const rows = (fx?.recent && fx.recent.length ? fx.recent : FALLBACK.fixtures).slice(0, 6);

  // Determine "next match" source
  const next = fx?.next;
  const nextDate = next?.rawDate || null;
  const nextMatchTime = nextDate ? nextDate.getTime() : null;
  const hasNext = !!next && nextMatchTime && nextMatchTime > Date.now();

  return (
    <section className="section-pad" id="fixtures">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 01 / FIXTURES</div>
            <h2>The <span className="gold">Matchday</span><br/>Diary</h2>
            <div style={{marginTop:14}}><LiveTag loading={loading} data={data} /></div>
          </div>
          <p className="desc">
            Every run, every wicket, every result — synced directly from the GDCA via PlayHQ. Four senior grades and eight junior sides strong.
          </p>
        </div>

        <div className="fixtures-grid">
          <div className="next-match">
            <div className="eyebrow">{hasNext ? `NEXT FIXTURE · ${next.grade}` : 'SEASON STARTS OCTOBER · PRE-SEASON UPDATE'}</div>
            <div className="vs">
              <div className="team">
                <div className="crest hornet-crest"><img src="assets/hornet.png" alt="" /></div>
                <div className="name">Sunbury<br/>United</div>
                <div className="grade">HORNETS{hasNext ? (next.home ? ' · HOME' : ' · AWAY') : ''}</div>
              </div>
              <div className="divider">VS</div>
              <div className="team">
                <div className="crest opp-crest" style={{color:'var(--cream-dim)'}}>
                  {hasNext ? (next.opponent || '?').slice(0, 2).toUpperCase() : '26'}
                </div>
                <div className="name">
                  {hasNext ? next.opponent : <>Season<br/>25/26</>}
                </div>
                <div className="grade">{hasNext ? 'VISITORS' : 'COMING SOON'}</div>
              </div>
            </div>
            <div className="match-meta">
              <div className="it"><div className="k">Ground</div><div className="v">{hasNext ? (next.venue || 'Langama Park') : 'Langama Park'}</div></div>
              <div className="it"><div className="k">Grade</div><div className="v">{hasNext ? next.grade : 'GDCA Premier'}</div></div>
              <div className="it"><div className="k">Format</div><div className="v">{hasNext ? 'One-day' : 'TBC'}</div></div>
              <div className="it"><div className="k">First Ball</div><div className="v">{hasNext ? (next.time?.slice(0,5) || 'TBC') : 'TBC'}</div></div>
            </div>
            {hasNext && nextMatchTime ? (
              <Countdown target={nextMatchTime} />
            ) : (
              <div className="off-season-banner">
                <div className="eyebrow" style={{color:'var(--gold)'}}>OFF-SEASON</div>
                <div>Pre-season training resumes August. Fixtures drop September. Get the rego in now.</div>
              </div>
            )}
          </div>

          <div className="fixture-list">
            {rows.map((f, i) => (
              <div className="fixture-row" key={i}>
                <div className="date">{f.date}</div>
                <div className="mt">
                  {f.match}
                  <span className="grade">{f.grade}</span>
                </div>
                <div className={`result ${f.status}`}>{f.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Teams() {
  const { loading, data } = React.useContext(PHQContext) || {};
  const teams = (data?.teams && data.teams.length ? data.teams : FALLBACK.teams);

  return (
    <section className="section-pad" id="teams" style={{background:'var(--ink-2)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 02 / TEAMS</div>
            <h2>The <span className="gold">Swarm</span>.<br/>Every grade, every weekend.</h2>
            <div style={{marginTop:14}}><LiveTag loading={loading} data={data} /></div>
          </div>
          <p className="desc">
            From five-year-olds smashing their first tennis ball to the 1st XI chasing silverware — Sunbury United has a jersey for every Hornet.
          </p>
        </div>
        <div className="teams-grid">
          {teams.map(t => (
            <div className="team-card" key={t.num}>
              <div className="num">{t.num}</div>
              <div className="cat">{t.cat}</div>
              <h3>{t.name}</h3>
              <div className="stats">
                <div className="it"><div className="k">Played</div><div className="v">{t.p}</div></div>
                <div className="it"><div className="k">W-L-D</div><div className="v">{t.w}-{t.l}-{t.d}</div></div>
                <div className="it"><div className="k">Ladder</div><div className="v" style={{color:'var(--gold)'}}>{t.pos}</div></div>
              </div>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Ladder() {
  const { loading, data } = React.useContext(PHQContext) || {};
  const ladders = (data?.ladder && data.ladder.length) ? data.ladder : FALLBACK.ladder;
  const [activeId, setActiveId] = React.useState(ladders[0]?.gradeId);
  const active = ladders.find(l => l.gradeId === activeId) || ladders[0];
  const rows = active?.rows || [];
  const form = active?.form || [];
  const ours = rows.find(r => r.ours);

  // Keep selection valid when data arrives
  React.useEffect(() => {
    if (!ladders.find(l => l.gradeId === activeId)) setActiveId(ladders[0]?.gradeId);
  }, [ladders, activeId]);

  return (
    <section className="section-pad" id="ladder">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-index">§ 03 / LADDER</div>
            <h2>On the <span className="gold">Table</span>.</h2>
            <div style={{marginTop:14}}><LiveTag loading={loading} data={data} /></div>
          </div>
          <p className="desc">
            Final 2025/26 standings across every senior grade the Hornets fielded. Live sync with PlayHQ resumes matchday one, October 2026.
          </p>
        </div>

        <div className="grade-switcher">
          {ladders.map(l => (
            <button
              key={l.gradeId}
              className={"grade-pill" + (l.gradeId === active?.gradeId ? ' active' : '')}
              onClick={() => setActiveId(l.gradeId)}
            >
              {l.gradeName}
            </button>
          ))}
        </div>

        <div className="ladder-wrap">
          <div className="ladder">
            <div className="ladder-row head">
              <div>#</div><div>Team</div><div>P</div><div>W</div><div>L</div><div>D</div><div style={{textAlign:'right'}}>PTS</div>
            </div>
            {rows.map(r => (
              <div key={r.pos} className={"ladder-row" + (r.ours ? " ours" : "")}>
                <div className="pos">{String(r.pos).padStart(2,'0')}</div>
                <div className="tname">{r.team}</div>
                <div>{r.p}</div>
                <div>{r.w}</div>
                <div>{r.l}</div>
                <div>{r.d}</div>
                <div className="pts">{r.pts}</div>
              </div>
            ))}
          </div>

          <div>
            <div className="stat-block">
              <div className="k">Grade</div>
              <div className="v" style={{fontSize: 28, lineHeight: 1.1}}>{active?.gradeName}</div>
              <div className="sub">{active?.fullName}</div>
            </div>
            <div className="stat-block">
              <div className="k">Form (Last 5)</div>
              <div className="form-pills" style={{marginTop:14}}>
                {(form.length ? form : ['—','—','—','—','—']).map((f, i) => (
                  <span key={i} className={f}>{f}</span>
                ))}
              </div>
            </div>
            {ours && (
              <div className="stat-block">
                <div className="k">Our Season</div>
                <div className="v">{ours.w}<span style={{fontSize:28, color:'var(--cream-dim)'}}>-{ours.l}-{ours.d}</span></div>
                <div className="sub">Position {ours.pos}{['st','nd','rd'][ours.pos-1]||'th'} · {ours.p} played · {ours.pts} pts</div>
              </div>
            )}
            <div className="stat-block">
              <div className="k">Data Source</div>
              <div className="v" style={{fontSize: 28, lineHeight: 1.1}}>PlayHQ<br/><span style={{fontSize:14, color:'var(--cream-dim)'}}>GDCA · Cricket Australia</span></div>
              <div className="sub">Auto-synced every 24 hours during the season.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Fixtures, Teams, Ladder, PHQContext, PHQProvider, LiveTag });