/* Shared app chrome: top header + left nav. Reads window globals. */

function OracleLogo({ size = 30 }) {
  return (
    <span style={{ width: size, height: size, color: "var(--accent)", display: "inline-flex", flex: "none" }}>
      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: "100%", height: "100%" }}>
        <circle cx="32" cy="32" r="28.5" stroke="currentColor" strokeWidth="2.2"/>
        <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
          <line x1="32" y1="4.5" x2="32" y2="11"/><line x1="32" y1="53" x2="32" y2="59.5"/>
          <line x1="4.5" y1="32" x2="11" y2="32"/><line x1="53" y1="32" x2="59.5" y2="32"/>
        </g>
        <path d="M11 32C17 23 24.5 18.5 32 18.5C39.5 18.5 47 23 53 32C47 41 39.5 45.5 32 45.5C24.5 45.5 17 41 11 32Z" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round"/>
        <circle cx="32" cy="32" r="6.4" fill="currentColor"/>
      </svg>
    </span>
  );
}

function Header({ matchdayLabel }) {
  return (
    <header style={{
      height: 64, flex: "none", display: "flex", alignItems: "center", gap: 16,
      padding: "0 24px", borderBottom: "1px solid var(--border)",
      background: "color-mix(in srgb, var(--bg-app) 80%, transparent)",
      backdropFilter: "blur(12px)", position: "sticky", top: 0, zIndex: 20,
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
        <OracleLogo size={28} />
        <span style={{ fontFamily: "var(--font-display)", fontSize: 22, color: "var(--text-primary)", lineHeight: 1, letterSpacing: "-0.01em" }}>
          The Oracle League
        </span>
      </div>
      <span style={{
        marginLeft: 6, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)",
        border: "1px solid var(--border)", borderRadius: "var(--radius-pill)", padding: "3px 10px",
      }}>2026 World Cup</span>
      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, color: "var(--text-secondary)" }}>{matchdayLabel}</span>
      </div>
    </header>
  );
}

const NAV = [
  { id: "leaderboard", label: "Leaderboard", icon: "trophy" },
  { id: "matchday",    label: "Matchday",    icon: "calendar" },
  { id: "bankroll",    label: "Bankroll",    icon: "coins" },
  { id: "dispatches",  label: "Dispatches",  icon: "radio" },
];

function Sidebar({ active, onNavigate, season }) {
  const Icon = window.Icon;
  return (
    <nav style={{
      width: 220, flex: "none", borderRight: "1px solid var(--border)",
      padding: "20px 14px", display: "flex", flexDirection: "column", gap: 4,
      position: "sticky", top: 64, height: "calc(100vh - 64px)", background: "var(--bg-app)",
    }}>
      <span style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-faint)", padding: "0 10px 8px" }}>
        The League
      </span>
      {NAV.map((item) => {
        const on = active === item.id;
        return (
          <button key={item.id} onClick={() => onNavigate(item.id)}
            style={{
              display: "flex", alignItems: "center", gap: 11, padding: "9px 11px",
              borderRadius: "var(--radius-md)", border: "1px solid transparent",
              background: on ? "var(--accent-soft)" : "transparent",
              color: on ? "var(--gold-200)" : "var(--text-secondary)",
              fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: on ? 600 : 500,
              cursor: "pointer", textAlign: "left", width: "100%",
              transition: "background var(--dur), color var(--dur)",
            }}
            onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "var(--bg-hover)"; }}
            onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "transparent"; }}
          >
            <Icon name={item.icon} size={17} color={on ? "var(--accent)" : "var(--text-muted)"} />
            {item.label}
          </button>
        );
      })}
      <div style={{ marginTop: "auto", padding: 12, borderRadius: "var(--radius-md)", border: "1px solid var(--border)", background: "var(--bg-surface)" }}>
        <span style={{ fontFamily: "var(--font-sans)", fontSize: 10.5, fontWeight: 600, letterSpacing: "0.09em", textTransform: "uppercase", color: "var(--text-muted)" }}>Season</span>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--text-secondary)", marginTop: 5 }}>{season || "8 models · 14 played"}</div>
      </div>
    </nav>
  );
}

Object.assign(window, { Header, Sidebar, OracleLogo });