// views/pickem.jsx — Pick'em. Make a 1/X/2 prediction on every match, grouped by
// matchday. Locked once a match has kicked off (live) or finished, or when teams
// are not yet known (knockout TBD).
function PickemView({ onRoute, clock }) {
  const ck = clock || window.WCL_CLOCK.compute('live');

  // matchday fixtures with lock state. 'ft'/'live' lock; 'soon' is pickable; 'tbd' = NA.
  const days = [
    { day: 'Yesterday · Jun 21', sub: 'Matchday 1 finished', rows: [
      { id: 'y1', group: 'Group B', home: 'CAN', away: 'SUI', state: 'ft', score: [1,1], odds: [2.6,3.1,2.7] },
      { id: 'y2', group: 'Group C', home: 'BRA', away: 'MAR', state: 'ft', score: [2,2], odds: [1.5,4.1,6.0] },
      { id: 'y3', group: 'Group E', home: 'GER', away: 'ECU', state: 'ft', score: [3,0], odds: [1.6,3.8,5.5] },
      { id: 'y4', group: 'Group H', home: 'ESP', away: 'URU', state: 'ft', score: [1,0], odds: [1.7,3.5,5.0] },
    ]},
    { day: 'Today · Jun 22', sub: '2 live · 4 to pick', rows: window.WCL_TODAY.map(t => ({ ...t, odds: [1.82,3.45,4.20] })) },
    { day: 'Tomorrow · Jun 23', sub: 'Matchday 2 continues', rows: [
      { id: 'd1', group: 'Group I', home: 'FRA', away: 'SEN', state: 'soon', ko: '12:00 ET', odds: [1.5,4.0,6.5] },
      { id: 'd2', group: 'Group J', home: 'ARG', away: 'ALG', state: 'soon', ko: '15:00 ET', odds: [1.3,4.8,9.0] },
      { id: 'd3', group: 'Group K', home: 'POR', away: 'COL', state: 'soon', ko: '18:00 ET', odds: [2.0,3.3,3.7] },
      { id: 'd4', group: 'Group L', home: 'ENG', away: 'CRO', state: 'soon', ko: '21:00 ET', odds: [1.9,3.3,4.2] },
    ]},
    { day: 'Round of 32 · Jul 4', sub: 'Teams not yet decided', rows: [
      { id: 'k1', group: 'R32 · Match 73', home: null, away: null, state: 'tbd' },
      { id: 'k2', group: 'R32 · Match 74', home: null, away: null, state: 'tbd' },
    ]},
  ];

  const allRows = days.flatMap(d => d.rows);
  const pickable = allRows.filter(r => r.state === 'soon');
  const [picks, setPicks] = React.useState({});
  const [submitted, setSubmitted] = React.useState(false);

  const made = Object.keys(picks).length;
  function setPick(id, v) { if (!submitted) setPicks(p => ({ ...p, [id]: v })); }

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="eyebrow">Pick&rsquo;em · {ck.dateLabel} 2026</div>
          <h1 className="type-h1">Make your picks</h1>
          <div className="sub">Predict 1 / X / 2 on every match. Picks lock at kick-off · scored against the model · climb the leaderboard.</div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn btn-secondary btn-sm" onClick={() => onRoute('leaderboard')}><I.Crown size={14} /> Leaderboard</button>
          <button className="btn btn-primary btn-sm" disabled={made === 0 || submitted} onClick={() => setSubmitted(true)}>
            {submitted ? 'Locked in \u2713' : `Lock in ${made}/${pickable.length}`}
          </button>
        </div>
      </div>

      {/* progress */}
      <section className="panel" style={{ marginBottom: 16, padding: '14px 18px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
              <span className="eyebrow">Open matches picked</span>
              <span className="mono strong">{made} / {pickable.length}</span>
            </div>
            <div style={{ height: 8, background: 'var(--muted)', borderRadius: 999, overflow: 'hidden', border: '1px solid var(--border)' }}>
              <div style={{ height: '100%', width: (pickable.length ? made / pickable.length * 100 : 0) + '%', background: 'var(--pitch)', transition: 'width var(--dur-base) var(--ease-out)' }} />
            </div>
          </div>
          <div style={{ display: 'flex', gap: 18, fontSize: 12 }}>
            <span><span className="eyebrow">Locked</span> <span className="mono strong" style={{ marginLeft: 6 }}>{allRows.filter(r => r.state === 'live' || r.state === 'ft').length}</span></span>
            <span><span className="eyebrow">Not yet open</span> <span className="mono strong" style={{ marginLeft: 6 }}>{allRows.filter(r => r.state === 'tbd').length}</span></span>
          </div>
        </div>
      </section>

      {days.map(d => (
        <section key={d.day} className="panel" style={{ marginBottom: 16 }}>
          <div className="panel-head"><h3>{d.day}</h3><span className="subtle" style={{ fontSize: 11 }}>{d.sub}</span></div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {d.rows.map(m => <PickemRow key={m.id} m={m} pick={picks[m.id]} onPick={(v) => setPick(m.id, v)} submitted={submitted} />)}
          </div>
        </section>
      ))}
    </div>
  );
}

function PickemRow({ m, pick, onPick, submitted }) {
  const locked = m.state === 'live' || m.state === 'ft';
  const tbd = m.state === 'tbd';
  const disabled = locked || tbd || submitted;
  const odds = m.odds || [2.0, 3.2, 3.6];

  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--radius-md)', background: 'var(--surface)', padding: '12px 14px', opacity: tbd ? 0.6 : 1 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
        <span className="subtle" style={{ fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 600 }}>
          {m.state === 'live' && <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: 'var(--live-red)', marginRight: 6, animation: 'pulseDot 1.6s ease-out infinite' }} />}
          {m.group}
          {m.state === 'live' && ' · ' + m.minute + "'"}
          {m.state === 'ft' && ' · FT ' + (m.score ? m.score.join('-') : '')}
          {m.state === 'soon' && ' · ' + m.ko}
        </span>
        {locked ? <span className="badge neutral">Locked</span> : tbd ? <span className="badge preview">Not yet open</span> : submitted ? <span className="badge live"><span className="badge-dot" style={{ background: 'var(--success)' }} /> Picked</span> : null}
      </div>
      {tbd ? (
        <div className="subtle" style={{ fontSize: 13, padding: '8px 2px' }}>Match becomes available to pick once the group stage decides the bracket.</div>
      ) : (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6 }}>
          {[
            { k: 0, label: m.home, code: m.home },
            { k: 1, label: 'Draw' },
            { k: 2, label: m.away, code: m.away },
          ].map(opt => (
            <button key={opt.k} disabled={disabled} onClick={() => onPick(opt.k)} style={pickBtn(pick === opt.k, disabled)}>
              {opt.code && <Flag code={opt.code} />}
              <span className="strong">{opt.code || opt.label}</span>
              <span className="mono subtle" style={{ marginLeft: 'auto', fontSize: 11 }}>{odds[opt.k].toFixed(2)}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function pickBtn(active, disabled) {
  return {
    display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px',
    background: active ? 'color-mix(in oklch, var(--brand) 18%, var(--card))' : 'var(--card)',
    border: '1px solid ' + (active ? 'var(--brand)' : 'var(--border)'),
    borderRadius: 'var(--radius-md)', color: 'var(--foreground)', fontFamily: 'var(--font-sans)', fontSize: 13,
    cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled && !active ? 0.5 : 1,
    transition: 'all 120ms var(--ease-out)',
  };
}
Object.assign(window, { PickemView, PickemRow });