// Hero + Status sections
const { useState: useStateA, useEffect: useEffectA } = React;

// 2-letter ISO country code → flag emoji (e.g. "US" → 🇺🇸)
function countryFlag(code) {
  if (typeof code !== "string" || code.length !== 2) return "";
  return String.fromCodePoint(...[...code.toUpperCase()].map(c => 0x1F1E6 + c.charCodeAt(0) - 65));
}

function Hero() {
  const [copied, setCopied] = useStateA(false);
  const full = `${SERVER.ip}:${SERVER.port}`;
  const live = useLiveStatus(47);

  const copy = async () => {
    try { await navigator.clipboard.writeText(full); }
    catch (e) { /* swallow */ }
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  return (
    <section className="hero" id="top">
      <div className="hero-grid"></div>
      <div className="hero-vignette"></div>
      <div className="hero-shovel"><BigShovel color="var(--ink-2)" /></div>

      <div className="shell hero-inner">
        <div>
          <div className="hero-eyebrow">
            <span className="bar"></span>
            <span>Season 01 · Wipe 2026-05-18 · Chernarus</span>
          </div>
          <h1>
            <span className="outline">DIG</span> YOUR<br/>
            OWN <span className="accent">GRAVE.</span>
          </h1>
          <p className="hero-sub">
            A vanilla+ DayZ server for adults who want loot that matters, bases that hold,
            and admins that actually read the ticket. {SERVER.slots} slots, NA-East, BattlEye on.
          </p>

          <div className="hero-meta">
            <div className="item">
              <div className="k">Region</div>
              <div className="v">NA-EAST</div>
            </div>
            <div className="item">
              <div className="k">Map</div>
              <div className="v">{(live.map || SERVER.map).toUpperCase()}</div>
            </div>
            <div className="item">
              <div className="k">Style</div>
              <div className="v">VANILLA+</div>
            </div>
            <div className="item">
              <div className="k">Slots</div>
              <div className="v">60</div>
            </div>
          </div>

          <div className="hero-cta">
            <a href="#mods" className="btn btn-primary">How to connect</a>
            <a href={`https://${SERVER.discord}`} className="btn">Discord</a>
            <a href="#rules" className="btn btn-ghost">Read the rules</a>
          </div>
        </div>

        <aside className="connect-card">
          <div className="head">
            <span>· LIVE SERVER</span>
            <Pip label="ONLINE" />
          </div>
          <div className="server-name">{live.name || SERVER.name}</div>
          <div className="ip-row">
            <div className="ip">{full}</div>
            <button className={"copy-btn" + (copied ? " copied" : "")} onClick={copy}>
              {copied ? "COPIED" : "COPY IP"}
            </button>
          </div>
          <LiveStats live={live} />
        </aside>
      </div>
    </section>
  );
}

function LiveStats({ live }) {
  const players = live?.players ?? 47;
  const max     = live?.max ?? SERVER.slots;
  const source  = live?.source ?? "demo";
  return (
    <>
      <div className="live-grid">
        <div className="live-cell">
          <div className="k">PLAYERS</div>
          <div className="v accent">{players}<span style={{color:"var(--ink-3)",fontSize:14}}>/{max}</span></div>
        </div>
        <div className="live-cell">
          <div className="k">COUNTRY</div>
          <div className="v">
            {live?.country ? <>{countryFlag(live.country)} <span style={{color:"var(--ink-3)",fontSize:14,letterSpacing:"0.08em"}}>{live.country}</span></> : "—"}
          </div>
        </div>
        <div className="live-cell">
          <div className="k">HOSTED IN</div>
          <div className="v" style={{fontSize:18}}>{SERVER.host}</div>
        </div>
      </div>
      <div style={{marginTop:12, fontFamily:"JetBrains Mono", fontSize:10, color:"var(--ink-4)", letterSpacing:"0.14em", textTransform:"uppercase"}}>
        {source === "battlemetrics"
          ? <>SRC · BATTLEMETRICS · <span style={{color:"var(--good)"}}>LIVE</span></>
          : <>SRC · DEMO DATA · <span style={{color:"var(--ink-3)"}}>SET BM-ID IN live-data.js</span></>}
      </div>
    </>
  );
}

// 24h activity sparkline. Pulls real hourly samples from the public
// BattleMetrics player-count-history endpoint (no auth needed).
// Falls back to a synthesized curve if the fetch fails.
function ActivityGraph() {
  const [history, setHistory] = React.useState(null); // array of 24 numbers, oldest→newest
  const [loaded, setLoaded] = React.useState(false);

  React.useEffect(() => {
    let stopped = false;
    async function tick() {
      const h = await ShovelheadLive.fetchPlayerCountHistory24h();
      if (stopped) return;
      if (Array.isArray(h) && h.length > 0) setHistory(h);
      setLoaded(true);
    }
    tick();
    // Re-poll every 5 min — BM only updates this endpoint hourly anyway.
    const i = setInterval(tick, 5 * 60_000);
    return () => { stopped = true; clearInterval(i); };
  }, []);

  const useReal = Array.isArray(history) && history.length > 0;

  // synthesized 24h curve (peak around 20:00 local) — only used while loading
  // or if the BM endpoint fails.
  const demo = React.useMemo(() => {
    const out = [];
    for (let i = 0; i < 24; i++) {
      const base = 18 + 32 * Math.exp(-Math.pow((i - 20)/4, 2)) + 18 * Math.exp(-Math.pow((i - 13)/5, 2));
      const jitter = (Math.sin(i * 1.7) + Math.cos(i * 2.3)) * 2;
      out.push(Math.max(8, Math.min(60, Math.round(base + jitter))));
    }
    return out;
  }, []);

  const points = useReal ? history : demo;

  const W = 800, H = 140, P = 8;
  // Scale Y-axis: use the bigger of (peak observed × 1.3, server max, 10)
  // so a low-traffic period doesn't show as a flat line at the bottom.
  const peakObserved = Math.max(0, ...points.filter(v => v != null));
  const max = Math.max(Math.ceil(peakObserved * 1.3), SERVER.slots, 10);
  const stepX = (W - P*2) / (points.length - 1);
  const y = v => H - P - (v / max) * (H - P*2);

  // Path that gaps over null buckets (real mode only).
  const segments = [];
  let seg = [];
  points.forEach((v, i) => {
    if (v === null || v === undefined) {
      if (seg.length) segments.push(seg);
      seg = [];
    } else {
      seg.push([P + i*stepX, y(v)]);
    }
  });
  if (seg.length) segments.push(seg);

  const dLine = segments
    .map(s => "M " + s.map(p => p[0] + " " + p[1]).join(" L "))
    .join(" ");
  const dArea = segments
    .map(s => "M " + s[0][0] + " " + (H - P) + " L " +
              s.map(p => p[0] + " " + p[1]).join(" L ") +
              " L " + s[s.length-1][0] + " " + (H - P) + " Z")
    .join(" ");

  const realVals = points.filter(v => v !== null && v !== undefined);
  const peak = realVals.length ? Math.max(...realVals) : 0;
  const avg  = realVals.length ? Math.round(realVals.reduce((a,b)=>a+b,0)/realVals.length) : 0;

  return (
    <div className="activity">
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",marginBottom:8}}>
        <div className="eyebrow">Players · last 24 hours</div>
        <div className="mono" style={{fontSize:11,color:"var(--ink-3)"}}>
          PEAK <span style={{color:"var(--accent)"}}>{peak}</span> · AVG {avg}
        </div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="agrad" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.5"/>
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {[0.25, 0.5, 0.75].map((p,i) => (
          <line key={i} x1={P} x2={W-P} y1={P + (H-P*2)*p} y2={P + (H-P*2)*p}
                stroke="var(--line)" strokeDasharray="2 4" />
        ))}
        <path d={dArea} fill="url(#agrad)" />
        <path d={dLine} fill="none" stroke="var(--accent)" strokeWidth="1.5" />
        {points.map((v,i) => (v === null || v === undefined ? null : (
          <circle key={i} cx={P + i*stepX} cy={y(v)} r="2" fill="var(--accent)" />
        )))}
      </svg>
      <div className="axis">
        <span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>23:59</span>
      </div>
      <div style={{marginTop:8, fontFamily:"JetBrains Mono", fontSize:10, color:"var(--ink-4)", letterSpacing:"0.14em", textTransform:"uppercase", display:"flex", justifyContent:"space-between"}}>
        <span>{useReal
          ? <>SRC · BATTLEMETRICS · <span style={{color:"var(--good)"}}>LIVE</span></>
          : (loaded
              ? <>SRC · SYNTHESIZED · <span style={{color:"var(--ink-3)"}}>HISTORY UNAVAILABLE</span></>
              : <>SRC · BATTLEMETRICS · <span style={{color:"var(--ink-3)"}}>LOADING…</span></>)}
        </span>
      </div>
    </div>
  );
}

function StatusSection() {
  const live = useLiveStatus(47);
  const players = live.players;
  const max = live.max;

  const pct = (players / max) * 100;
  const ticks = Array.from({length: 5}, (_, i) => ((i+1) * 100/6) + "%");

  return (
    <section id="status">
      <div className="shell">
        <SectionHead
          num="§01 — LIVE STATUS"
          title={<>SERVER<br/>PULSE.</>}
          sub={<>Live BattleMetrics feed · refreshed every 30 seconds.</>}
        />

        <div className="status-grid">
          <div>
            <div className="players-panel">
              <div className="players-meter">
                <span className="big">{players}</span>
                <span className="of">/ {max}</span>
                <span className="label"><Pip label={live.source === "battlemetrics" ? "LIVE · BATTLEMETRICS" : "DEMO DATA"} /></span>
              </div>
              <div className="players-bar">
                <div className="fill" style={{width: pct + "%"}}></div>
                {ticks.map((t,i) => <div key={i} className="tick" style={{left:t}} />)}
              </div>
              <div className="queue-row">
                <span>QUEUE · <span className="lit">{live.queue}</span> waiting</span>
                <span>AVG WAIT · {live.queue > 0 ? Math.round(live.queue * 1.5) + "m" : "0m"}</span>
                <span>NEXT RESTART · 04:00 ET</span>
              </div>
            </div>
            <ActivityGraph />
          </div>

          <div className="facts">
            <div className="fact"><div className="k">Map</div><div className="v">{(live.map || SERVER.map).toUpperCase()}</div></div>
            <div className="fact"><div className="k">Version</div><div className="v">v{live.version || SERVER.version}</div></div>
            <div className="fact"><div className="k">Region</div><div className="v">NA-EAST</div></div>
            <div className="fact"><div className="k">Last wipe</div><div className="v">{SERVER.wipe}</div></div>
            <div className="fact full">
              <div className="k">{live.rank ? "BattleMetrics rank" : "BattleMetrics ID"}</div>
              <div className="v mono" style={{fontFamily:"JetBrains Mono",fontSize:18,letterSpacing:"0.06em"}}>
                {live.rank ? `#${live.rank.toLocaleString()}` : `BM-${window.SHOVELHEAD_CONFIG.battleMetricsServerId || "—"}`}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, StatusSection });