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

const SA_HOME = 'index.html';

function useCountdown() {
  const KEY = 'sa-next-match-target';
  const read = () => {
    let target = 0;
    try { target = parseInt(localStorage.getItem(KEY) || '0', 10); } catch (e) { target = 0; }
    const now = Date.now();
    if (!target || target <= now) {
      target = now + ARENA.tournament.nextMatchSeconds * 1000;
      try { localStorage.setItem(KEY, String(target)); } catch (e) { /* no-op */ }
    }
    return Math.max(0, Math.round((target - now) / 1000));
  };
  const start = read();
  const [s, setS] = useStateS(start);
  useEffectS(() => {
    let cur = start;
    const id = setInterval(() => { cur = cur > 0 ? cur - 1 : 0; setS(cur); }, 1000);
    return () => clearInterval(id);
  }, []);
  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 }) {
  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: '15px 28px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0 }}>
          <a href={SA_HOME} style={{ display: 'flex', alignItems: 'baseline', textDecoration: 'none', flexShrink: 0 }}>
            <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 17, letterSpacing: '-0.03em', color: SA.white }}>soccerarena</span>
            <span style={{ fontFamily: SA.sans, fontWeight: 800, fontSize: 17, 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 }}>/</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' }}>{c.label}</span>}
            </React.Fragment>
          ))}
        </div>
        <LiveStat countdown={countdown} />
      </div>
    </header>
  );
}

function AppFooter() {
  return (
    <footer style={{ borderTop: `1px solid ${SA.line2}`, marginTop: 8 }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '20px 28px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <div style={{ display: 'flex', gap: 18, fontFamily: SA.mono, fontSize: 11 }}>
          <a href={SA_HOME} style={{ color: SA.dim, textDecoration: 'none' }}>← Arena</a>
          <a href="fixtures.html" style={{ color: SA.dim, textDecoration: 'none' }}>All Fixtures</a>
          <a href="methodology.html" style={{ color: SA.dim, textDecoration: 'none' }}>Methodology</a>
        </div>
        <span style={{ fontFamily: SA.mono, fontSize: 11, color: SA.faint, letterSpacing: '0.02em' }}>
          Updated daily · Not affiliated with FIFA
        </span>
      </div>
    </footer>
  );
}

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