/* soccerarena.ai — award detail page body (winner / golden boot / ball / glove). */
function preLabel(startDate) {
  const days = Math.ceil((new Date(startDate + 'T00:00:00Z') - Date.now()) / 86400000);
  return days > 0 ? `T-${days}` : 'PRE-TOURNAMENT';
}

const ALL_AWARDS = [
  { key: 'winner',      label: 'Tournament Winner', emoji: '🏆', slug: 'winner' },
  { key: 'goldenBoot',  label: 'Golden Boot',       emoji: '⚽', slug: 'golden-boot' },
  { key: 'goldenBall',  label: 'Golden Ball',       emoji: '🌟', slug: 'golden-ball' },
  { key: 'goldenGlove', label: 'Golden Glove',      emoji: '🧤', slug: 'golden-glove' },
];

function AwardPage({ awardKey }) {
  const award = ARENA.awards[awardKey];
  const isMobile = useIsMobile();
  const isWinner = awardKey === 'winner';
  const n = award.models.length;

  const pickChip = (p, size = 14, link = null) => {
    const inner = (
      <React.Fragment>
        {p && p.flag && <span style={{ fontSize: size, lineHeight: 1 }}>{p.flag}</span>}
        <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: size, color: SA.white }}>{p ? p.name : '—'}</span>
      </React.Fragment>
    );
    return link
      ? <a href={link} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none' }}>{inner}</a>
      : <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>{inner}</span>;
  };
  const teamHref = (pick) => pick && pick.name && pick.name !== '—'
    ? SA_ROOT + 'teams/' + toSlug(pick.name) + '.html'
    : null;

  const modelCols = isWinner
    ? (isMobile ? '1.4fr 1fr 80px' : '1.4fr 1.2fr 96px')
    : (isMobile ? '1.4fr 1fr' : '1.4fr 1fr');

  const withFlips = isWinner ? award.models.filter(m => m.history && m.history.length > 1) : [];

  return (
    <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '12px 12px 16px' : '28px 28px 16px' }}>

      {/* hero */}
      <div style={{ border: `1px solid ${SA.line}`, background: SA.surface, borderLeft: `2px solid ${SA.lime}`, padding: isMobile ? '16px 14px' : '22px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <span style={{ fontSize: 30, lineHeight: 1 }}>{award.emoji}</span>
          <div>
            <div style={{ fontFamily: SA.mono, fontSize: 9.5, letterSpacing: '0.08em', color: SA.faint, marginBottom: 5 }}>TRACK 1 · {preLabel(ARENA.tournament.startDate)}</div>
            <h1 style={{ margin: 0, fontFamily: SA.sans, fontWeight: 800, fontSize: isMobile ? 20 : 26, color: SA.white, letterSpacing: '-0.02em' }}>{award.label}</h1>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 14 : 28, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {award.topPick.flag && <span style={{ fontSize: isMobile ? 28 : 40, lineHeight: 1 }}>{award.topPick.flag}</span>}
            {isWinner && award.topPick.name && award.topPick.name !== '—'
              ? <a href={SA_ROOT + 'teams/' + toSlug(award.topPick.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: isMobile ? 22 : 30, color: SA.white, letterSpacing: '-0.02em', textDecoration: 'none' }}>{award.topPick.name}</a>
              : <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: isMobile ? 22 : 30, color: SA.white, letterSpacing: '-0.02em' }}>{award.topPick.name}</span>
            }
          </div>
          <div>
            <div style={{ fontFamily: SA.mono, fontWeight: 700, fontSize: isMobile ? 14 : 18, color: SA.lime, fontVariantNumeric: 'tabular-nums' }}>
              {award.topPick.count} <span style={{ fontSize: isMobile ? 10 : 13, color: SA.dim, fontWeight: 400 }}>/ {award.topPick.total} models</span>
            </div>
            <div style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, marginTop: 3 }}>consensus pick</div>
          </div>
        </div>
      </div>

      {/* body */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.55fr 1fr', gap: 16, marginTop: 16 }}>

        {/* left */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* per-model table */}
          <Panel title="Model picks" sub={`${n} models`}>
            <div>
              <div style={{ display: 'grid', gridTemplateColumns: modelCols, alignItems: 'center', gap: 12, padding: '0 0 10px', borderBottom: `1px solid ${SA.line}`, fontFamily: SA.mono, fontSize: 9.5, letterSpacing: '0.06em', color: SA.faint }}>
                <span>MODEL</span>
                <span>PICK</span>
                {isWinner && <span style={{ textAlign: 'right' }}>CONFIDENCE</span>}
              </div>
              {award.models.map((m, i) => (
                <div key={m.id} style={{ display: 'grid', gridTemplateColumns: modelCols, alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: i < award.models.length - 1 ? `1px solid ${SA.line2}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
                    <ProviderMark code={m.providerCode} size={22} />
                    <a href={'../models/' + m.slug + '.html'} style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13.5, color: SA.white, textDecoration: 'none', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.name}</a>
                    {isWinner && m.history && m.history.length > 1 && <FlipBadge compact />}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                    {m.pick && m.pick.flag && <span style={{ fontSize: 14, flexShrink: 0 }}>{m.pick.flag}</span>}
                    {isWinner && m.pick && m.pick.name && m.pick.name !== '—'
                      ? <a href={SA_ROOT + 'teams/' + toSlug(m.pick.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 500, fontSize: 13.5, color: SA.white, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', textDecoration: 'none' }}>{m.pick.name}</a>
                      : <span style={{ fontFamily: SA.sans, fontWeight: 500, fontSize: 13.5, color: SA.white, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{m.pick ? m.pick.name : '—'}</span>
                    }
                  </div>
                  {isWinner && (
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                      <ConfBar value={m.conf || 0} w={isMobile ? 36 : 48} />
                      <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, fontVariantNumeric: 'tabular-nums' }}>{Math.round((m.conf || 0) * 100)}%</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </Panel>

          {/* trend across days */}
          {award.trend.length > 1 && (
            <Panel title="Consensus over time" sub={`${award.trend.length} days`}>
              <div>
                {[...award.trend].reverse().map((t, i) => (
                  <div key={t.date} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 0', borderBottom: i < award.trend.length - 1 ? `1px solid ${SA.line2}` : 'none' }}>
                    <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint }}>{t.date}</span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      {t.topPick.flag && <span style={{ fontSize: 13 }}>{t.topPick.flag}</span>}
                      <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13, color: SA.white }}>{t.topPick.name}</span>
                      <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.lime, fontVariantNumeric: 'tabular-nums' }}>{t.topPick.count}/{t.total}</span>
                    </div>
                  </div>
                ))}
              </div>
            </Panel>
          )}

          {/* winner: per-model flip history */}
          {isWinner && (
            <Panel title="Pick histories" sub={withFlips.length > 0 ? `${withFlips.length} model${withFlips.length > 1 ? 's' : ''} flipped` : 'no changes yet'}>
              {withFlips.length === 0 ? (
                <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 13, color: SA.faint, lineHeight: 1.6 }}>
                  No models have changed their winner pick yet. Changes will appear here as the tournament progresses.
                </p>
              ) : (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                  {withFlips.map((m, mi) => (
                    <div key={m.id}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, paddingBottom: 8, borderBottom: `1px solid ${SA.line2}` }}>
                        <ProviderMark code={m.providerCode} size={18} />
                        <a href={'../models/' + m.slug + '.html'} style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13, color: SA.dim, textDecoration: 'none' }}>{m.name}</a>
                        <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, marginLeft: 'auto' }}>{m.history.length} changes</span>
                      </div>
                      <div style={{ paddingLeft: 8 }}>
                        {m.history.map((e, ei) => (
                          <div key={ei} style={{ display: 'flex', gap: 14, paddingBottom: ei < m.history.length - 1 ? 14 : 0 }}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 36, flexShrink: 0 }}>
                              <span style={{ fontFamily: SA.mono, fontSize: 9.5, color: SA.lime }}>D{e.day}</span>
                              <span style={{ width: 6, height: 6, background: SA.lime, marginTop: 6 }} />
                              {ei < m.history.length - 1 && <span style={{ width: 1, flex: 1, minHeight: 16, background: SA.line2, marginTop: 3 }} />}
                            </div>
                            <div style={{ paddingTop: 1 }}>
                              <div style={{ marginBottom: 3 }}>{pickChip(e.pick, 13, teamHref(e.pick))}</div>
                              {e.note && <div style={{ fontFamily: SA.sans, fontSize: 12, color: SA.faint, lineHeight: 1.5 }}>{e.note}</div>}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </Panel>
          )}
        </div>

        {/* right */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* vote distribution */}
          <Panel title="Vote distribution" sub={`${n} models`}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {award.tally.map((t, i) => (
                <div key={t.pick.name || i}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }}>
                      {t.pick.flag && <span style={{ fontSize: 14, flexShrink: 0 }}>{t.pick.flag}</span>}
                      {isWinner && t.pick.name && t.pick.name !== '—'
                        ? <a href={SA_ROOT + 'teams/' + toSlug(t.pick.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: i === 0 ? 700 : 500, fontSize: 13.5, color: i === 0 ? SA.white : SA.dim, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', textDecoration: 'none' }}>{t.pick.name}</a>
                        : <span style={{ fontFamily: SA.sans, fontWeight: i === 0 ? 700 : 500, fontSize: 13.5, color: i === 0 ? SA.white : SA.dim, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.pick.name}</span>
                      }
                    </div>
                    <span style={{ fontFamily: SA.mono, fontSize: 12, color: i === 0 ? SA.lime : SA.faint, fontVariantNumeric: 'tabular-nums', flexShrink: 0, marginLeft: 8 }}>
                      {t.count} <span style={{ color: SA.faint }}>/ {n}</span>
                    </span>
                  </div>
                  <div style={{ height: 5, background: SA.line2, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: 0, width: `${t.pct}%`, background: i === 0 ? SA.limeDim : 'rgba(244,247,242,0.14)' }} />
                  </div>
                </div>
              ))}
            </div>
          </Panel>

          {/* links to other award pages */}
          <Panel title="Other awards">
            {ALL_AWARDS.filter(a => a.key !== awardKey).map((a, i, arr) => (
              <a key={a.key} href={a.slug + '.html'} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 0', borderBottom: i < arr.length - 1 ? `1px solid ${SA.line2}` : 'none', textDecoration: 'none' }}>
                <span style={{ fontSize: 18, lineHeight: 1 }}>{a.emoji}</span>
                <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 14, color: SA.dim }}>{a.label}</span>
                <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, marginLeft: 'auto' }}>→</span>
              </a>
            ))}
          </Panel>

        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AwardPage });