/* soccerarena.ai — model profile page body. */

function Metric({ label, children, accent }) {
  return (
    <div style={{ padding: '14px 20px', borderLeft: `1px solid ${SA.line2}`, display: 'flex', flexDirection: 'column', gap: 7, minWidth: 0 }}>
      <span style={{ fontFamily: SA.mono, fontSize: 9.5, letterSpacing: '0.08em', color: SA.faint, whiteSpace: 'nowrap' }}>{label}</span>
      <div style={{ fontFamily: SA.mono, fontWeight: 700, fontSize: 22, color: accent || SA.white, fontVariantNumeric: 'tabular-nums', lineHeight: 1, display: 'flex', alignItems: 'baseline', gap: 6 }}>{children}</div>
    </div>
  );
}

function ModelPage({ m, idx, countdown }) {
  const d = m.detail;
  const isMobile = useIsMobile();
  const rank = [...ARENA.models].sort((a, b) => b.total - a.total).findIndex((x) => x.id === m.id) + 1;
  const teamChip = (t, big) => (
    <a href={SA_ROOT + 'teams/' + toSlug(t.name) + '.html'} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, textDecoration: 'none' }}>
      <span style={{ fontSize: big ? 20 : 14 }}>{t.flag}</span>
      <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: big ? 17 : 13, color: SA.white }}>{t.name}</span>
    </a>
  );

  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}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 14 : 22, padding: isMobile ? '14px 14px' : '22px 24px', flexWrap: 'wrap' }}>
          <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: isMobile ? 40 : 56, color: SA.lime, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em', lineHeight: 0.9 }}>{rank}</span>
          <ProviderMark code={m.providerCode} size={isMobile ? 34 : 44} />
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
              <h1 style={{ margin: 0, fontFamily: SA.sans, fontWeight: 700, fontSize: isMobile ? 22 : 28, letterSpacing: '-0.02em', color: SA.white, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.name}</h1>
              <span style={{ fontSize: 16, flexShrink: 0 }}>{m.origin}</span>
              {m.flipped && <FlipBadge when={m.lastFlip} />}
            </div>
            <div style={{ fontFamily: SA.mono, fontSize: isMobile ? 11 : 12, color: SA.dim, marginTop: 5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{m.provider}{!isMobile && <> · <span style={{ color: SA.faint }}>{m.id}</span></>}</div>
          </div>
          {/* current pick + share */}
          <div style={{ textAlign: isMobile ? 'left' : 'right', flexBasis: isMobile ? '100%' : 'auto', paddingTop: isMobile ? 12 : 0, borderTop: isMobile ? `1px solid ${SA.line2}` : 'none' }}>
            <div style={{ fontFamily: SA.mono, fontSize: 10, letterSpacing: '0.08em', color: SA.faint, marginBottom: 8 }}>WINNER PICK</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
              <span style={{ fontSize: isMobile ? 26 : 30 }}>{m.pick.flag}</span>
              <span style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: isMobile ? 22 : 26, color: SA.white, letterSpacing: '-0.02em' }}>{m.pick.name}</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: isMobile ? 'flex-start' : 'flex-end', marginTop: 9 }}>
              <ConfBar value={m.conf} w={70} />
              <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.lime, fontVariantNumeric: 'tabular-nums' }}>{Math.round(m.conf * 100)}% conf</span>
            </div>
          </div>
        </div>
        {/* metric strip */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', borderTop: `1px solid ${SA.line2}` }}>
          <Metric label="TOTAL SCORE" accent={SA.lime}>{m.total}</Metric>
          <Metric label="MATCH · TRACK 2">{m.t2}</Metric>
          <Metric label="TOURNAMENT · TRACK 1">{m.t1}</Metric>
          <Metric label="7-DAY"><Sparkline data={m.spark} w={56} h={20} color={m.d7 >= 0 ? SA.lime : SA.orange} /><Delta value={m.d7} /></Metric>
        </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 }}>
          <Panel title="Why this pick">
            <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 15, lineHeight: 1.6, color: SA.dim }}>{d.reasoning}</p>
          </Panel>

          <Panel title="Pick history" sub={`${d.timeline.length} ${d.timeline.length === 1 ? 'pick' : 'changes'}`}>
            {d.timeline.length === 0 ? (
              <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 13, color: SA.faint }}>No pick changes yet.</p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {d.timeline.map((e, i) => (
                  <div key={i} style={{ display: 'flex', gap: 16, paddingBottom: i < d.timeline.length - 1 ? 18 : 0 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.lime, whiteSpace: 'nowrap' }}>DAY {e.day}</span>
                      <span style={{ width: 7, height: 7, background: SA.lime, marginTop: 8 }} />
                      {i < d.timeline.length - 1 && <span style={{ width: 1, flex: 1, minHeight: 22, background: SA.line2, marginTop: 4 }} />}
                    </div>
                    <div style={{ paddingTop: 2 }}>
                      <div style={{ marginBottom: 4 }}>{teamChip(e.t)}</div>
                      <div style={{ fontFamily: SA.sans, fontSize: 12.5, color: SA.faint, lineHeight: 1.5 }}>{e.note}</div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Panel>

          <Panel title="Recent match calls" sub={d.recent.length > 0 ? `${d.accuracy.hits}/${d.accuracy.calls} correct` : 'tournament not started'}>
            {d.recent.length === 0 ? (
              <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 13, color: SA.faint }}>
                Match call accuracy will appear once games have been played.
              </p>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column' }}>
                {d.recent.map((r, i) => {
                  const parts = (r.m || '').split(' vs ');
                  const fx = parts.length === 2
                    ? (ARENA.allFixtures || []).find(f => f.home.name === parts[0].trim() && f.away.name === parts[1].trim())
                    : null;
                  const matchLabel = fx
                    ? <a href={SA_ROOT + 'fixtures/' + fx.slug + '.html'} style={{ color: SA.white, textDecoration: 'none' }}>{r.m}</a>
                    : <span>{r.m}</span>;
                  return (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '12px 1fr auto' : '12px 1fr auto auto', alignItems: 'center', gap: 12, padding: '9px 0', borderBottom: i < d.recent.length - 1 ? `1px solid ${SA.line2}` : 'none' }}>
                      <span style={{ width: 8, height: 8, borderRadius: '50%', background: r.hit ? SA.lime : SA.orange }} />
                      <span style={{ fontFamily: SA.sans, fontSize: 13.5, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{matchLabel}</span>
                      {!isMobile && <span style={{ fontFamily: SA.mono, fontSize: 11.5, color: SA.dim }}>{r.line}</span>}
                      <span style={{ fontFamily: SA.mono, fontSize: 12, color: SA.white, fontVariantNumeric: 'tabular-nums', minWidth: 42, textAlign: 'right' }}>{r.result}</span>
                    </div>
                  );
                })}
              </div>
            )}
          </Panel>
        </div>

        {/* right */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Panel title="Bracket projection">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {d.bracket.champion && (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottom: `1px solid ${SA.line2}` }}>
                  <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.lime, letterSpacing: '0.06em' }}>CHAMPION</span>
                  {teamChip(d.bracket.champion, true)}
                </div>
              )}
              {d.bracket.runnerUp && (
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingBottom: 12, borderBottom: `1px solid ${SA.line2}` }}>
                  <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.dim, letterSpacing: '0.06em' }}>RUNNER-UP</span>
                  {teamChip(d.bracket.runnerUp)}
                </div>
              )}
              {d.bracket.semis.length > 0 && (
                <div>
                  <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>SEMI-FINALISTS</span>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 14px', marginTop: 12 }}>
                    {d.bracket.semis.map((t, i) => <div key={i}>{teamChip(t)}</div>)}
                  </div>
                </div>
              )}
            </div>
          </Panel>

          <Panel title="Standout calls">
            <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>GOLDEN BOOT</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14 }}>{m.goldenBoot.flag}</span>
                  <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13, color: SA.white }}>{m.goldenBoot.name}</span>
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>GOLDEN BALL</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14 }}>{m.goldenBall.flag}</span>
                  <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13, color: SA.white }}>{m.goldenBall.name}</span>
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>GOLDEN GLOVE</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ fontSize: 14 }}>{m.goldenGlove.flag}</span>
                  <span style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: 13, color: SA.white }}>{m.goldenGlove.name}</span>
                </span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.06em' }}>PICK FLIPS / WEEK</span>
                <span style={{ fontFamily: SA.mono, fontWeight: 700, fontSize: 15, color: m.flipsWeek > 1 ? SA.orange : SA.white }}>{m.flipsWeek}×</span>
              </div>
            </div>
          </Panel>

          <Panel title="Compare with other models">
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {ARENA.models.filter(x => x.id !== m.id).map(x => {
                const [s1, s2] = [toSlug(m.name), toSlug(x.name)].sort();
                return (
                  <a key={x.id} href={SA_ROOT + 'compare/' + s1 + '-vs-' + s2 + '.html'}
                    style={{ fontFamily: SA.mono, fontSize: 11, color: SA.dim, textDecoration: 'none', padding: '5px 10px', border: `1px solid ${SA.line2}`, background: SA.turf }}>
                    vs {x.name}
                  </a>
                );
              })}
            </div>
          </Panel>

          <Panel title="Match accuracy" sub="Track 2">
            {d.accuracy.calls === 0 ? (
              <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 13, color: SA.faint }}>
                Accuracy tracking begins on opening day.
              </p>
            ) : (
              <>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 12, marginBottom: 14 }}>
                  <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 44, color: SA.lime, lineHeight: 0.85, letterSpacing: '-0.03em' }}>{d.accuracy.matchPct}<span style={{ fontSize: 22 }}>%</span></span>
                  <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, paddingBottom: 4 }}>over {d.accuracy.calls} calls</span>
                </div>
                <div style={{ display: 'flex', height: 6, width: '100%', gap: 2 }}>
                  <div style={{ width: `${(d.accuracy.hits / d.accuracy.calls) * 100}%`, background: SA.lime }} />
                  <div style={{ flex: 1, background: 'rgba(255,157,61,0.45)' }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 9, fontFamily: SA.mono, fontSize: 11 }}>
                  <span style={{ color: SA.lime }}>{d.accuracy.hits} correct</span>
                  <span style={{ color: SA.orange }}>{d.accuracy.miss} missed</span>
                </div>
              </>
            )}
          </Panel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ModelPage, Metric });