/* soccerarena.ai — shared app shell. Exports useCountdown, AppHeader, AppFooter. */
const { useState: useStateS, useEffect: useEffectS } = React;

const SA_ROOT = (typeof window !== 'undefined' && window.SA_ROOT) || '';
const SA_HOME = '/';

function useCountdown() {
  const kickoffAt = ARENA.tournament.nextMatchKickoffAt;
  const target = kickoffAt ? new Date(kickoffAt).getTime() : 0;

  function secs() { return target ? Math.max(0, Math.round((target - Date.now()) / 1000)) : 0; }
  const [s, setS] = useStateS(secs);
  useEffectS(() => {
    if (!target) return;
    const id = setInterval(() => setS(secs()), 1000);
    return () => clearInterval(id);
  }, [target]);

  if (!kickoffAt) return '—';
  const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60;
  if (h >= 24) {
    const days = Math.floor(h / 24);
    return `${days}d ${h % 24}h ${String(m).padStart(2, '0')}m`;
  }
  return `${h}h ${String(m).padStart(2, '0')}m ${String(sec).padStart(2, '0')}s`;
}

function LiveStat({ countdown }) {
  const t = ARENA.tournament;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: SA.mono, fontSize: 12, whiteSpace: 'nowrap' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <LiveDot />
        <span style={{ color: SA.dim }}>
          {t.dayCurrent > 0
            ? <span>Day <span style={{ color: SA.white, fontVariantNumeric: 'tabular-nums' }}>{t.dayCurrent}</span> of {t.dayTotal}</span>
            : <span style={{ color: SA.white }}>Starts {new Date(t.startDate + 'T00:00:00Z').toLocaleDateString('en-US', { month: 'short', day: 'numeric', timeZone: 'UTC' })}</span>}
        </span>
      </div>
      <span style={{ color: SA.faint }}>·</span>
      <span style={{ color: SA.dim }}>
        {t.dayCurrent > 0 ? 'Next match in ' : 'First match in '}
        <span style={{ color: SA.lime, fontVariantNumeric: 'tabular-nums' }}>{countdown}</span>
      </span>
    </div>
  );
}

function AppHeader({ trail = [], countdown }) {
  const isMobile = useIsMobile();
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20, background: 'rgba(10,31,15,0.92)',
      backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
      borderBottom: `1px solid ${SA.line2}`,
    }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '12px 16px' : '15px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, overflow: 'hidden' }}>
          <a href={SA_HOME} style={{ display: 'flex', alignItems: 'baseline', textDecoration: 'none', flexShrink: 0 }}>
            <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 19, letterSpacing: '-0.03em', color: SA.white }}>footballarena</span>
            <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 19, letterSpacing: '-0.03em', color: SA.lime }}>.ai</span>
          </a>
          {trail.map((c, i) => (
            <React.Fragment key={i}>
              <span style={{ color: SA.faint, fontFamily: SA.mono, fontSize: 13, flexShrink: 0 }}>/</span>
              {c.href
                ? <a href={c.href} style={{ fontFamily: SA.mono, fontSize: 12, color: SA.dim, textDecoration: 'none', whiteSpace: 'nowrap' }}>{c.label}</a>
                : <span style={{ fontFamily: SA.mono, fontSize: 12, color: SA.white, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: isMobile ? 130 : undefined }}>{c.label}</span>}
            </React.Fragment>
          ))}
        </div>
        {!isMobile && <LiveStat countdown={countdown} />}
      </div>
    </header>
  );
}

const FOOTER_COLUMNS = [
  {
    title: 'Arena',
    links: [
      { href: SA_HOME,            label: 'Leaderboard' },
      { rel: 'odds.html',         label: 'AI Odds' },
      { rel: 'fixtures.html',     label: 'All Fixtures' },
      { rel: 'groups.html',       label: 'Group Predictions' },
      { rel: 'methodology.html',  label: 'Methodology' },
    ],
  },
  {
    title: 'Predictions',
    links: [
      { rel: 'awards/winner.html',       label: 'Winner' },
      { rel: 'awards/golden-boot.html',  label: 'Golden Boot' },
      { rel: 'awards/golden-ball.html',  label: 'Golden Ball' },
      { rel: 'awards/golden-glove.html', label: 'Golden Glove' },
    ],
  },
  {
    title: 'Compare',
    links: [
      { rel: 'compare/index.html', label: 'All Model Pairs' },
    ],
  },
];

function AppFooter() {
  const isMobile = useIsMobile();
  const linkStyle = { color: SA.dim, textDecoration: 'none', fontFamily: SA.mono, fontSize: 12, lineHeight: 1 };
  const colTitle = { fontFamily: SA.sans, fontWeight: 800, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: SA.faint, marginBottom: 4 };
  return (
    <footer style={{ borderTop: `1px solid ${SA.line2}`, background: SA.turf, marginTop: 8 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: isMobile ? '28px 20px 30px' : '38px 28px 30px' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: isMobile ? 28 : 48, justifyContent: 'space-between' }}>
          {/* brand */}
          <div style={{ maxWidth: 290 }}>
            <a href={SA_HOME} style={{ display: 'inline-flex', alignItems: 'baseline', textDecoration: 'none', marginBottom: 10 }}>
              <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 18, letterSpacing: '-0.03em', color: SA.white }}>footballarena</span>
              <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 18, letterSpacing: '-0.03em', color: SA.lime }}>.ai</span>
            </a>
            <p style={{ margin: 0, fontFamily: SA.sans, fontSize: 12.5, lineHeight: 1.6, color: SA.faint }}>
              Frontier AI models compete on their FIFA World Cup 2026 predictions.
            </p>
            <a href="mailto:contact@footballarena.ai" style={{ display: 'inline-block', marginTop: 10, fontFamily: SA.mono, fontSize: 11.5, color: SA.dim, textDecoration: 'none' }}>contact@footballarena.ai</a>
          </div>
          {/* link columns */}
          <div style={{ display: 'flex', gap: isMobile ? 40 : 72, flexWrap: 'wrap' }}>
            {FOOTER_COLUMNS.map((c) => (
              <div key={c.title} style={{ display: 'flex', flexDirection: 'column', gap: 12, minWidth: 120 }}>
                <span style={colTitle}>{c.title}</span>
                {c.links.map((l, i) => (
                  <a key={i} href={l.rel != null ? SA_ROOT + l.rel : l.href} style={linkStyle}>{l.label}</a>
                ))}
              </div>
            ))}
          </div>
        </div>
        {/* bottom bar */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8, marginTop: isMobile ? 26 : 34, paddingTop: 18, borderTop: `1px solid ${SA.line2}` }}>
          <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, letterSpacing: '0.02em' }}>
            {ARENA.generatedAt
              ? 'Updated ' + new Date(ARENA.generatedAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
              : 'Updated daily'}
          </span>
          <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, letterSpacing: '0.02em' }}>
            Not affiliated with FIFA
          </span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { useCountdown, AppHeader, AppFooter, LiveStat, SA_HOME, SA_ROOT });