/* screens/Knockout.jsx — single-elimination board. window.KnockoutScreen */
const { useLayoutEffect, useRef: useRefKO, useState: useStateKO } = React;
const useRef = useRefKO, useState = useStateKO;

function useViewport() {
  const { useState, useEffect } = React;
  const [w, setW] = useState(() => window.innerWidth);
  useEffect(() => { const f = () => setW(window.innerWidth); window.addEventListener('resize', f); return () => window.removeEventListener('resize', f); }, []);
  return w;
}

function BracketTree({ bracket, ko, onPick, locked }) {
  const wrapRef = useRef(null);
  const els = useRef({});
  const [segs, setSegs] = useState([]);
  const [box, setBox] = useState({ w: 0, h: 0 });
  const L = window.WCLogic;
  const order = ['R32', 'R16', 'QF', 'SF', 'F'];
  const labels = { R32: 'Round of 32', R16: 'Round of 16', QF: 'Quarter-finals', SF: 'Semi-finals', F: 'Final' };

  const actualWinner = (key) => locked ? window.WCLogic.ACTUAL_KO[key] : null;

  useLayoutEffect(() => {
    const wrap = wrapRef.current; if (!wrap) return;
    const compute = () => {
      const base = wrap.getBoundingClientRect();
      const next = [];
      order.forEach((rk) => {
        if (rk === 'R32') return;
        bracket.rounds[rk].forEach((m) => {
          const self = els.current[m.key], a = els.current[m.fromA], b = els.current[m.fromB];
          if (!self || !a || !b) return;
          const sb = self.getBoundingClientRect();
          const x2 = sb.left - base.left, y2 = sb.top - base.top + sb.height / 2;
          [a, b].forEach((c) => {
            const cb = c.getBoundingClientRect();
            const x1 = cb.right - base.left, y1 = cb.top - base.top + cb.height / 2;
            const midX = (x1 + x2) / 2;
            next.push(`M${x1},${y1} H${midX} V${y2} H${x2}`);
          });
        });
      });
      setSegs(next);
      setBox({ w: wrap.scrollWidth, h: wrap.scrollHeight });
    };
    compute();
    const ro = new ResizeObserver(compute); ro.observe(wrap);
    return () => ro.disconnect();
  }, [bracket, ko]);

  return (
    <div className="bkt-scroll">
      <div className="bkt" ref={wrapRef}>
        <svg className="bkt__lines" width={box.w} height={box.h}>
          {segs.map((d, i) => <path key={i} d={d} fill="none" stroke="var(--navy-600)" strokeWidth="2" />)}
        </svg>
        {order.map((rk) => (
          <div className={`bkt__col bkt__col--${rk}`} key={rk}>
            <div className="bkt__coltitle">{labels[rk]}</div>
            {bracket.rounds[rk].map((m) => (
              <div className="bkt__cell" key={m.key} ref={(e) => (els.current[m.key] = e)}>
                <BracketNode match={m} pickedWinner={ko[m.key]} onPick={onPick}
                  locked={locked} actualWinner={actualWinner(m.key)} />
              </div>
            ))}
          </div>
        ))}
        <div className="bkt__col bkt__col--champ">
          <div className="bkt__coltitle">Champion</div>
          <div className="bkt__cell">
            <ChampPlate code={bracket.champ} locked={locked} />
          </div>
        </div>
      </div>
    </div>
  );
}

function ChampPlate({ code, locked }) {
  const t = code ? window.WC.team(code) : null;
  const real = locked ? window.WCLogic.ACTUAL_KO['F-1'] : null;
  const correct = real && code ? real === code : null;
  return (
    <div className="champ-plate" data-has={t ? 1 : 0}>
      <div className="champ-plate__trophy"><IconTrophy size={26} /></div>
      {t ? (
        <>
          <span className="champ-plate__flag">{t.flag}</span>
          <span className="champ-plate__name display">{t.name}</span>
          {correct !== null && <span style={{ marginTop: 6 }}><Verdict ok={correct} size={20} /></span>}
        </>
      ) : <span className="champ-plate__tbd">Pick your final</span>}
    </div>
  );
}

function BracketColumns({ bracket, ko, onPick, locked }) {
  const { useState } = React;
  const order = ['R32', 'R16', 'QF', 'SF', 'F', 'TP'];
  const labels = { R32: 'Round of 32', R16: 'Round of 16', QF: 'Quarter-finals', SF: 'Semi-finals', F: 'Final', TP: '3rd place' };
  const [round, setRound] = useState('R32');
  const actualWinner = (key) => locked ? window.WCLogic.ACTUAL_KO[key] : null;
  return (
    <div className="kcol">
      <div className="kcol__tabs">
        {order.map((rk) => (
          <button key={rk} className="chip" data-on={round === rk ? 1 : 0} onClick={() => setRound(rk)}>
            {rk === 'TP' ? '3rd' : rk}
          </button>
        ))}
      </div>
      {bracket.champ && round === 'F' && <ChampPlate code={bracket.champ} locked={locked} />}
      <div className="kcol__title">{labels[round]}</div>
      <div className="kcol__list">
        {bracket.rounds[round].map((m) => (
          <BracketNode key={m.key} match={m} pickedWinner={ko[m.key]} onPick={onPick}
            locked={locked} actualWinner={actualWinner(m.key)} header={`Match ${m.idx + 1}`} />
        ))}
      </div>
    </div>
  );
}

function KnockoutScreen({ store, go }) {
  const w = useViewport();
  const { results, ko } = store.state;
  const bracket = window.WCLogic.buildBracket(results, ko);
  const groupsDone = window.WC.groupOrder.filter((g) => bracket.st[g].complete).length;
  const picks = Object.keys(ko).filter((k) => ko[k]).length;

  return (
    <div className="page">
      <header className="phead">
        <div>
          <div className="eyebrow">Step 02 · Knockout stage</div>
          <h1 className="section-h">Build the bracket</h1>
          <p className="muted phead__sub">Slots auto-fill from your group predictions — the 12 winners, 12 runners-up and 8 best third-placed teams. Click a team to advance it through each round to the final.</p>
        </div>
        <div className="phead__side">
          <div className="kstat"><span className="muted">Groups decided</span><b className="tnum">{groupsDone}/12</b></div>
          <div className="row" style={{ gap: 8 }}>
            <Btn variant="quiet" size="sm" onClick={store.autoKO}>Auto-advance favourites</Btn>
            <Btn size="sm" onClick={() => go('summary')}>My bracket <IconArrow size={14} /></Btn>
          </div>
        </div>
      </header>

      {groupsDone < 12 && (
        <div className="notice">
          <IconInfo size={16} />
          <span>{12 - groupsDone} group{groupsDone === 11 ? '' : 's'} still have unpredicted matches — finish them in the <button className="linklike" onClick={() => go('group')}>group stage</button> to lock every slot.</span>
        </div>
      )}

      {w >= 1080
        ? <BracketTree bracket={bracket} ko={ko} onPick={store.pickWinner} />
        : <BracketColumns bracket={bracket} ko={ko} onPick={store.pickWinner} />}
    </div>
  );
}
window.KnockoutScreen = KnockoutScreen;
window.BracketTree = BracketTree; window.BracketColumns = BracketColumns; window.ChampPlate = ChampPlate;