// views/Bracket.jsx
function BracketView({ onRoute }) {
  const B = window.WCL_BRACKET;
  const cols = [
    { key: 'r16',  label: 'Round of 16', games: B.r16 },
    { key: 'qf',   label: 'Quarter-finals', games: B.qf },
    { key: 'sf',   label: 'Semi-finals', games: B.sf },
    { key: 'f',    label: 'Final',       games: [B.f] },
  ];

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Knockout · projection</div>
          <h1 className="type-h1">Bracket simulator</h1>
          <div className="sub">Live model · re-runs every minute · click any match to view the path</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <div className="seg">
            <button className="active">Model</button>
            <button>Market</button>
            <button>Random</button>
          </div>
          <button className="btn btn-secondary btn-sm">Re-roll 10,000 sims</button>
        </div>
      </div>

      <section className="panel" style={{ padding: 20 }}>
        <div className="bracket">
          {cols.map(c => (
            <div key={c.key} className="col">
              <h4>{c.label}</h4>
              {c.games.map(g => (
                <BracketCard key={g.id} g={g} isFinal={c.key === 'f'} onClick={() => onRoute('match')} />
              ))}
            </div>
          ))}
          <div className="col" style={{ justifyContent: 'center' }}>
            <h4 style={{ color: 'var(--trophy)' }}>Predicted winner</h4>
            <div style={{
              padding: 24,
              border: '1px solid color-mix(in oklch, var(--trophy) 40%, transparent)',
              borderRadius: 'var(--radius-lg)',
              background: 'linear-gradient(135deg, color-mix(in oklch, var(--trophy) 18%, var(--card)), var(--card))',
              textAlign: 'center',
            }}>
              <I.Trophy size={32} style={{ color: 'var(--trophy)' }} />
              <div style={{ margin: '12px 0 4px' }}><Flag code="ARG" size="xl" /></div>
              <div className="strong" style={{ fontSize: 18, fontWeight: 700 }}>Argentina</div>
              <div className="mono" style={{ color: 'var(--trophy)', fontSize: 13, marginTop: 4 }}>14.2% · model lead</div>
            </div>
          </div>
        </div>
      </section>

      <div className="col3" style={{ marginTop: 16 }}>
        <section className="panel">
          <div className="panel-head"><h3>Cinderella odds</h3><span className="subtle" style={{ fontSize: 11 }}>seed ≥ 16</span></div>
          <table className="table">
            <tbody>
              {[['JPN','Final 4', 0.18],['MAR','Quarter-final', 0.26],['USA','Quarter-final', 0.22],['SEN','Round of 16', 0.31]].map(([t, stage, p]) => (
                <tr key={t}>
                  <td className="strong"><TeamRow code={t} /></td>
                  <td>{stage}</td>
                  <td className="mono" style={{ textAlign: 'right', color: 'var(--pitch)' }}>{(p*100).toFixed(0)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Path of least resistance</h3><span className="subtle" style={{ fontSize: 11 }}>easiest projected QF</span></div>
          <table className="table">
            <tbody>
              {[['NED','vs USA · vs ARG winner', 0.21],['ESP','vs MAR · vs JPN winner', 0.34],['POR','vs KOR · vs BRA winner', 0.19]].map(([t, path, p]) => (
                <tr key={t}>
                  <td className="strong"><TeamRow code={t} /></td>
                  <td className="subtle" style={{ fontSize: 12 }}>{path}</td>
                  <td className="mono" style={{ textAlign: 'right' }}>{(p*100).toFixed(0)}%</td>
                </tr>
              ))}
            </tbody>
          </table>
        </section>

        <section className="panel">
          <div className="panel-head"><h3>Final matchup distribution</h3><span className="subtle" style={{ fontSize: 11 }}>top 6 of 1,128</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              ['ARG', 'BRA', 0.142],
              ['ARG', 'FRA', 0.094],
              ['BRA', 'ESP', 0.063],
              ['FRA', 'ENG', 0.058],
              ['ARG', 'ESP', 0.041],
              ['BRA', 'POR', 0.032],
            ].map(([a, b, p], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '90px 14px 90px 1fr 50px', gap: 10, alignItems: 'center', fontSize: 12 }}>
                <TeamRow code={a} />
                <span className="subtle">vs</span>
                <TeamRow code={b} />
                <div className="probbar model"><span style={{ width: (p/0.15)*100 + '%' }} /></div>
                <span className="mono" style={{ textAlign: 'right' }}>{(p*100).toFixed(1)}%</span>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}

function BracketCard({ g, isFinal, onClick }) {
  const homeProb = g.prob;
  const awayProb = 1 - g.prob;
  return (
    <div className={'bracket-match' + (isFinal ? ' final' : '')} onClick={onClick} style={{ cursor: 'pointer' }}>
      <div className={'side ' + (homeProb >= 0.5 ? 'fav' : '')}>
        <Flag code={g.home} />
        <span className="name">{window.WCL_TEAMS[g.home]?.name || g.home}</span>
        <span className="pct">{(homeProb * 100).toFixed(0)}%</span>
      </div>
      <div className={'side ' + (awayProb >= 0.5 ? 'fav' : '')}>
        <Flag code={g.away} />
        <span className="name">{window.WCL_TEAMS[g.away]?.name || g.away}</span>
        <span className="pct">{(awayProb * 100).toFixed(0)}%</span>
      </div>
    </div>
  );
}
Object.assign(window, { BracketView });