/* soccerarena.ai — fixture detail page body. */

function FormChip({ r }) {
  const c = r === 'W' ? SA.lime : r === 'L' ? SA.orange : SA.dim;
  return (
    <span style={{ width: 20, height: 20, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      border: `1px solid ${c}`, color: c, fontFamily: SA.mono, fontSize: 10, fontWeight: 600 }}>{r}</span>
  );
}

function Panel({ title, children, sub }) {
  return (
    <section style={{ border: `1px solid ${SA.line2}`, background: SA.turf2 }}>
      <div style={{ padding: '13px 20px', borderBottom: `1px solid ${SA.line2}`, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <h2 style={{ margin: 0, fontFamily: SA.sans, fontWeight: 800, fontSize: 12, letterSpacing: '0.12em', color: SA.white, textTransform: 'uppercase' }}>{title}</h2>
        {sub && <span style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint }}>{sub}</span>}
      </div>
      <div style={{ padding: 20 }}>{children}</div>
    </section>
  );
}

function FixturePage({ mt, idx }) {
  const d = mt.detail;
  const isTBD = mt.tbd === true;
  const isMobile = useIsMobile();
  const total = mt.split.home + mt.split.draw + mt.split.away;
  const pickLabel = (p) => p === 'home' ? `${mt.home.name} win` : p === 'away' ? `${mt.away.name} win` : 'Draw';
  const pickColor = (p) => p === 'home' ? SA.lime : p === 'away' ? SA.white : SA.dim;

  const splitItem = (n, label, color) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: isMobile ? 20 : 26, color, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{n}</span>
      <span style={{ fontFamily: SA.mono, fontSize: isMobile ? 9 : 10, color: SA.faint, letterSpacing: '0.04em' }}>{label}</span>
    </div>
  );

  const predCols = isMobile ? '1fr 1fr 76px' : '1.4fr 1.1fr 70px 96px';

  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 }}>
        {/* stage + venue bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: isMobile ? '10px 14px' : '12px 22px', borderBottom: `1px solid ${SA.line2}` }}>
          <span style={{ fontFamily: SA.mono, fontSize: isMobile ? 10 : 11, color: SA.dim, letterSpacing: '0.06em' }}>{d.stage.toUpperCase()}</span>
          <span style={{ fontFamily: SA.mono, fontSize: isMobile ? 9 : 11, color: SA.faint, textAlign: 'right', maxWidth: isMobile ? 160 : undefined, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{d.venue}</span>
        </div>

        {isMobile ? (
          /* Mobile hero: stacked layout */
          <div style={{ padding: '18px 16px 22px' }}>
            {/* home team */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
              <span style={{ fontSize: 40, lineHeight: 1, flexShrink: 0 }}>{mt.home.flag}</span>
              <div>
                <a href={SA_ROOT + 'teams/' + toSlug(mt.home.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 22, color: SA.white, letterSpacing: '-0.02em', textDecoration: 'none' }}>{mt.home.name}</a>
                {d.form.home.length > 0 && (
                  <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>{d.form.home.map((r, i) => <FormChip key={i} r={r} />)}</div>
                )}
              </div>
            </div>
            {/* center score/kickoff */}
            <div style={{ textAlign: 'center', padding: '12px 0', borderTop: `1px solid ${SA.line2}`, borderBottom: `1px solid ${SA.line2}`, marginBottom: 14 }}>
              <div style={{ fontFamily: SA.mono, fontSize: 9, color: SA.faint, letterSpacing: '0.08em', marginBottom: 6 }}>CONSENSUS SCORE</div>
              <div style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 34, color: SA.lime, fontVariantNumeric: 'tabular-nums', letterSpacing: '0.02em', lineHeight: 1 }}>{d.consensusScore}</div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7, marginTop: 10, fontFamily: SA.mono, fontSize: 11 }}>
                <span style={{ color: SA.white, fontVariantNumeric: 'tabular-nums' }}>KO {mt.kickoff}</span>
                {!isTBD && <><span style={{ color: SA.faint }}>·</span><RelativeTime kickoffAt={mt.kickoffAt} style={{ color: SA.lime, fontVariantNumeric: 'tabular-nums' }} /></>}
              </div>
            </div>
            {/* away team */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 40, lineHeight: 1, flexShrink: 0 }}>{mt.away.flag}</span>
              <div>
                <a href={SA_ROOT + 'teams/' + toSlug(mt.away.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 22, color: SA.white, letterSpacing: '-0.02em', textDecoration: 'none' }}>{mt.away.name}</a>
                {d.form.away.length > 0 && (
                  <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>{d.form.away.map((r, i) => <FormChip key={i} r={r} />)}</div>
                )}
              </div>
            </div>
          </div>
        ) : (
          /* Desktop hero: 3-column grid */
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '30px 30px 34px', gap: 20 }}>
            {/* home */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <span style={{ fontSize: 52, lineHeight: 1 }}>{mt.home.flag}</span>
              <div>
                <a href={SA_ROOT + 'teams/' + toSlug(mt.home.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 30, color: SA.white, letterSpacing: '-0.02em', textDecoration: 'none' }}>{mt.home.name}</a>
                {d.form.home.length > 0 && (
                  <div style={{ display: 'flex', gap: 5, marginTop: 8 }}>{d.form.home.map((r, i) => <FormChip key={i} r={r} />)}</div>
                )}
              </div>
            </div>
            {/* center */}
            <div style={{ textAlign: 'center', minWidth: 150 }}>
              <div style={{ fontFamily: SA.mono, fontSize: 10, color: SA.faint, letterSpacing: '0.08em', marginBottom: 8 }}>CONSENSUS SCORE</div>
              <div style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 40, color: SA.lime, fontVariantNumeric: 'tabular-nums', letterSpacing: '0.02em', lineHeight: 1 }}>{d.consensusScore}</div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 7, marginTop: 14, fontFamily: SA.mono, fontSize: 12 }}>
                <span style={{ color: SA.white, fontVariantNumeric: 'tabular-nums' }}>KO {mt.kickoff}</span>
                {!isTBD && <><span style={{ color: SA.faint }}>·</span>
                <RelativeTime kickoffAt={mt.kickoffAt} style={{ color: SA.lime, fontVariantNumeric: 'tabular-nums' }} /></>}
              </div>
            </div>
            {/* away */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'flex-end', textAlign: 'right' }}>
              <div>
                <a href={SA_ROOT + 'teams/' + toSlug(mt.away.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 700, fontSize: 30, color: SA.white, letterSpacing: '-0.02em', textDecoration: 'none', display: 'block' }}>{mt.away.name}</a>
                {d.form.away.length > 0 && (
                  <div style={{ display: 'flex', gap: 5, marginTop: 8, justifyContent: 'flex-end' }}>{d.form.away.map((r, i) => <FormChip key={i} r={r} />)}</div>
                )}
              </div>
              <span style={{ fontSize: 52, lineHeight: 1 }}>{mt.away.flag}</span>
            </div>
          </div>
        )}

        {/* split bar */}
        <div style={{ padding: isMobile ? '0 16px 18px' : '0 30px 26px' }}>
          <SplitBar split={mt.split} height={8} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14 }}>
            {splitItem(mt.split.home, `${mt.home.code} WIN`, SA.lime)}
            <div style={{ textAlign: 'center' }}>{splitItem(mt.split.draw, 'DRAW', SA.dim)}</div>
            <div style={{ textAlign: 'right' }}>{splitItem(mt.split.away, `${mt.away.code} WIN`, SA.white)}</div>
          </div>
        </div>
      </div>

      {/* body */}
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.55fr 1fr', gap: 16, marginTop: 16 }}>
        {/* model predictions */}
        <Panel title="How the models call it" sub={isTBD ? 'TBD' : `${total} models`}>
          {isTBD ? (
            <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 14, color: SA.faint }}>
              AI predictions will be published once both teams are confirmed.
            </p>
          ) : d.preds.length === 0 ? (
            <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 14, color: SA.faint }}>
              Model predictions will be published before kickoff.
            </p>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'grid', gridTemplateColumns: predCols, 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>CALL</span>{!isMobile && <span style={{ textAlign: 'right' }}>SCORE</span>}<span style={{ textAlign: 'right' }}>CONFIDENCE</span>
              </div>
              {d.preds.map((p, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: predCols, alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < d.preds.length - 1 ? `1px solid ${SA.line2}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 6 : 9, minWidth: 0 }}>
                    <ProviderMark code={p.code} size={isMobile ? 18 : 22} />
                    <a href={SA_ROOT + 'models/' + toSlug(p.name) + '.html'} style={{ fontFamily: SA.sans, fontWeight: 600, fontSize: isMobile ? 12.5 : 13.5, color: SA.white, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', textDecoration: 'none' }}>{p.name}</a>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: pickColor(p.pick), flexShrink: 0 }} />
                    <span style={{ fontFamily: SA.sans, fontSize: 13, color: SA.white, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{pickLabel(p.pick)}</span>
                  </div>
                  {!isMobile && <span style={{ fontFamily: SA.mono, fontSize: 12.5, color: SA.dim, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{p.score}</span>}
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, justifyContent: 'flex-end' }}>
                    <ConfBar value={p.conf} w={isMobile ? 36 : 44} />
                    <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, fontVariantNumeric: 'tabular-nums', minWidth: 26, textAlign: 'right' }}>{Math.round(p.conf * 100)}%</span>
                  </div>
                </div>
              ))}
            </div>
          )}
        </Panel>

        {/* facts */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Panel title="Read">
            <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 14.5, lineHeight: 1.6, color: SA.dim }}>
              {isTBD
                ? `This ${d.stage} match will be played on ${mt.kickoff}. The participating teams will be confirmed after the group stage concludes.`
                : d.note}
            </p>
          </Panel>
          <Panel title="Match facts">
            {(() => {
              const groupLetter = mt.group ? mt.group.replace('Group ', '').toLowerCase() : null;
              const rows = [
                ['STAGE',    d.stage],
                ['GROUP',    groupLetter ? <a href={SA_ROOT + 'groups/' + groupLetter + '.html'} style={{ color: SA.lime, textDecoration: 'none' }}>{mt.group}</a> : null],
                ['VENUE',    d.venue],
                ['KICK-OFF', isTBD ? mt.kickoff : <>{mt.kickoff} · in <RelativeTime kickoffAt={mt.kickoffAt} /></>],
                ['FAVOURITE', isTBD ? 'TBD' : d.favourite === 'home' ? mt.home.name : d.favourite === 'away' ? mt.away.name : d.favourite === 'draw' ? 'Draw' : 'No clear favourite'],
              ].filter(([, v]) => v != null);
              return (
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontFamily: SA.mono, fontSize: 12 }}>
                  {rows.map(([k, v], i) => (
                    <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 16, paddingBottom: 10, borderBottom: i < rows.length - 1 ? `1px solid ${SA.line2}` : 'none' }}>
                      <span style={{ color: SA.faint, letterSpacing: '0.05em', flexShrink: 0 }}>{k}</span>
                      <span style={{ color: SA.white, textAlign: 'right' }}>{v}</span>
                    </div>
                  ))}
                </div>
              );
            })()}
          </Panel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FixturePage, FormChip, Panel });