/* ============================================================
   MAIN MENU + RULES — entry point for players new to the game
   ============================================================ */
const { useState: useStateMenu } = React;

function Starfield() {
  // cheap decorative star dots (no external assets)
  const stars = [];
  for (let i = 0; i < 60; i++) {
    const x = (i * 53) % 100, y = (i * 37) % 100, s = (i % 3) + 1;
    stars.push(<circle key={i} cx={x + "%"} cy={y + "%"} r={s * 0.4} fill="#fff" opacity={0.04 + (i % 5) * 0.02} />);
  }
  return <svg className="menu-stars" width="100%" height="100%" preserveAspectRatio="none">{stars}</svg>;
}

function MainMenu({ onBuild, onDemo, onDemoCpu, onRules, onTutorial, onEffects, hasGame, onResume }) {
  return (
    <div className="menu">
      <Starfield />
      <div className="menu-inner">
        <div className="menu-brand">
          <div className="menu-mark"><svg width="22" height="22" viewBox="0 0 24 24"><path d="M12 3 L21 21 L3 21 Z" fill="currentColor" /></svg></div>
          <div className="menu-title">ARMADA <b>COMMAND</b></div>
          <div className="menu-tag">Hotseat-companion voor je vlootgevecht — twee spelers, één scherm. De app regelt het fiddly werk en leidt je door elke beurt.</div>
        </div>

        <div className="menu-cards">
          <button className="menu-card primary" onClick={onTutorial}>
            <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><circle cx="12" cy="8" r="3.4" fill="none" stroke="currentColor" strokeWidth="1.6"/><path d="M5 20 c0 -4 3 -6 7 -6 s7 2 7 6" fill="none" stroke="currentColor" strokeWidth="1.6"/></svg></div>
            <div className="mc-title">Speel de tutorial</div>
            <div className="mc-sub">Nieuw? Ik klik je stap voor stap door een complete beurt. Begin hier.</div>
          </button>

          <button className="menu-card" onClick={onDemo}>
            <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><path d="M5 3 L20 12 L5 21 Z" fill="currentColor"/></svg></div>
            <div className="mc-title">Snel spelen</div>
            <div className="mc-sub">Voorbeeld-vloten + scenario, meteen het bord op.</div>
          </button>

          <button className="menu-card" onClick={onDemoCpu}>
            <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="currentColor" strokeWidth="1.6"/><circle cx="9" cy="12" r="1.4" fill="currentColor"/><circle cx="15" cy="12" r="1.4" fill="currentColor"/><path d="M12 3 v3" stroke="currentColor" strokeWidth="1.6"/></svg></div>
            <div className="mc-title">Tegen de computer</div>
            <div className="mc-sub">Voorbeeld-potje; de Rebellen worden door de CPU gespeeld.</div>
          </button>

          <button className="menu-card" onClick={onBuild}>
            <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 3 L20 19 L12 15 L4 19 Z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg></div>
            <div className="mc-title">Vloten bouwen &amp; spelen</div>
            <div className="mc-sub">Kies facties, stel vloten samen, kies een scenario en plaats je schepen.</div>
          </button>

          <button className="menu-card" onClick={onRules}>
            <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><path d="M5 4 h10 a2 2 0 0 1 2 2 v14 l-4 -2 -4 2 V4 Z M5 4 v16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg></div>
            <div className="mc-title">Hoe speel je het?</div>
            <div className="mc-sub">Korte uitleg van de rondes, het dobbelen en de gevechten.</div>
          </button>

          {onEffects ? (
            <button className="menu-card" onClick={onEffects}>
              <div className="mc-ico"><svg width="26" height="26" viewBox="0 0 24 24"><path d="M4 5 h16 v11 H4 Z M4 9 h16 M9 12 h7" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg></div>
              <div className="mc-title">Kaarteffecten laden</div>
              <div className="mc-sub">Laad je eigen effect-bestand (blijft in je browser); zie dan de teksten bij upgrades.</div>
            </button>
          ) : null}
        </div>

        {hasGame ? (
          <button className="menu-resume" onClick={onResume}>← Verder met het huidige potje</button>
        ) : null}
        <div className="menu-foot mono">Fan-speelhulp voor persoonlijk gebruik · originele namen &amp; iconen · geen officiële spel-assets</div>
      </div>
    </div>
  );
}

/* ---- rules / how-to-play, taught in plain language with our own diagrams ---- */
const RULE_SECTIONS = [
  { id: "doel", icon: "target", title: "Het doel",
    body: ["Twee vloten ruimteschepen vechten over zes rondes. Je wint door vijandelijke schepen te vernietigen (hun puntenwaarde) en je scenario-objectief te scoren. Na ronde 6 telt wie de meeste punten heeft."] },
  { id: "opstellen", icon: "shield", title: "Opstellen",
    body: ["Voor de eerste ronde plaatst elke speler zijn schepen in de eigen deployment-zone.",
           "Daarbij stel je per schip ook een startsnelheid in (0–4). Die bepaalt hoe ver het in de eerste ronde kan bewegen — de app onthoudt dit per schip."] },
  { id: "ronde", icon: "loop", title: "Een ronde heeft vier fasen",
    body: ["1 · COMMAND — plan in het geheim wat elk schip gaat doen (een 'dial').",
           "2 · SHIP — spelers wisselen om de beurt af: activeer één schip, onthul z'n dial, vuur en beweeg.",
           "3 · SQUADRON — kleine jagers die nog niet bewogen, bewegen en vuren nu.",
           "4 · STATUS — alles wordt klaargezet voor de volgende ronde."] },
  { id: "command", icon: "dial", title: "Command dials",
    body: ["Elk schip krijgt elke ronde een opdracht die je vooruit plant — daarom plan je 'blind'. Vier soorten:",
           "NAV (Navigate) — beter manoeuvreren. SQ (Squadron) — laat jagers meevechten. REP (Repair) — herstel hull/shields. CF (Concentrate Fire) — extra aanvalskracht.",
           "Je plant ze in een wachtrij; je onthult er telkens één bovenaan als het schip activeert."] },
  { id: "vuren", icon: "dice", title: "Vuren & dobbelen",
    body: ["Een schip vuurt vanuit een vuurhoek (front/rear/left/right) op een doel dat in die hoek én binnen bereik staat.",
           "Bereik bepaalt welke dice je gooit: dichtbij (close) = alle kleuren, ver (long) = alleen rood. De app pakt automatisch de juiste dice.",
           "Symbolen: ▲ hit = 1 schade · ✦ crit = 1 schade + crit-effect · ◎ accuracy = 'vergrendelt' een verdedig-token zodat de tegenstander het niet mag gebruiken."] },
  { id: "schade", icon: "shield", title: "Schade & verdediging",
    body: ["Schade gaat eerst op de shields van de geraakte hoek; overschot gaat op de hull. Op 0 hull is een schip vernietigd.",
           "De verdediger mag defense tokens inzetten: Brace (halveer schade), Redirect (verplaats naar zij-shield), Evade (annuleer een die), Scatter (annuleer alles), Contain (geen crit).",
           "De app rekent dit allemaal voor je uit in het aanval-venster."] },
  { id: "tips", icon: "spark", title: "Zo speel je het via de app",
    body: ["Volg gewoon de balk bovenaan het bord — die zegt steeds wiens beurt het is en wat je moet doen.",
           "Schepen die je nog mag activeren lichten op. Tik er één, onthul de dial, en gebruik de knoppen Aanval / Manoeuvre / Beëindig.",
           "De '?'-knop legt elke fase opnieuw uit. Je dwingt zelf de regels af — de app telt en onthoudt alles."] },
];

function RuleIcon({ kind }) {
  const c = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinejoin: "round", strokeLinecap: "round" };
  switch (kind) {
    case "target": return <svg {...c}><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3"/></svg>;
    case "loop": return <svg {...c}><path d="M4 12 a8 8 0 1 1 3 6"/><path d="M3 14 l4 4 4 -4" fill="currentColor" stroke="none"/></svg>;
    case "dial": return <svg {...c}><circle cx="12" cy="12" r="8"/><path d="M12 12 L12 5 M12 12 L17 15"/></svg>;
    case "dice": return <svg {...c}><rect x="4" y="4" width="16" height="16" rx="3"/><circle cx="9" cy="9" r="1.2" fill="currentColor"/><circle cx="15" cy="15" r="1.2" fill="currentColor"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/></svg>;
    case "shield": return <svg {...c}><path d="M12 3 L19 6 V11 C19 16 12 21 12 21 C12 21 5 16 5 11 V6 Z"/></svg>;
    case "spark": return <svg {...c}><path d="M12 3 L14 10 L21 12 L14 14 L12 21 L10 14 L3 12 L10 10 Z" fill="currentColor" stroke="none"/></svg>;
    default: return <svg {...c}><circle cx="12" cy="12" r="8"/></svg>;
  }
}

function RulesScreen({ onClose, onStart, embedded }) {
  return (
    <div className={embedded ? "rules embedded" : "rules"}>
      <div className="rules-bar">
        <button className="btn btn-ghost" onClick={onClose}>← Terug</button>
        <div className="rules-bar-title lbl">Hoe speel je het?</div>
        <div style={{ flex: 1 }} />
        {onStart ? <button className="btn btn-accent" onClick={onStart}>Direct spelen →</button> : <span style={{ width: 80 }} />}
      </div>
      <div className="rules-body">
        <div className="rules-grid">
          {RULE_SECTIONS.map((s) => (
            <div className="rule-card" key={s.id}>
              <div className="rule-head"><span className="rule-ico"><RuleIcon kind={s.icon} /></span><h3>{s.title}</h3></div>
              {s.body.map((p, i) => <p key={i} className="rule-p">{p}</p>)}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- contextual phase help shown by the "?" button during play ---- */
const PHASE_HELP = {
  command: { title: "Command-fase", steps: [
    "Klik 'Plan commands'. De app vraagt elk om de beurt het apparaat aan een speler te geven.",
    "Kies per schip een opdracht (NAV / SQ / REP / CF). In ronde 1 plan je er meerdere; daarna één per ronde.",
    "Klaar? Geef door aan de tegenstander. Niemand ziet elkaars plan." ] },
  ship: { title: "Ship-fase", steps: [
    "Het is om de beurt. Je nog-te-activeren schepen lichten op het bord op.",
    "Tik een schip (of een chip in de balk) en klik 'Activeer — onthul dial'.",
    "Gebruik 'Aanval' om te vuren en 'Manoeuvre' om te bewegen. Klik dan 'Beëindig' — de beurt gaat naar de ander." ] },
  squadron: { title: "Squadron-fase", steps: [
    "Squadrons (de ronde tokens) die nog niet meevochten, mogen nu bewegen en vuren.",
    "Sleep een squadron en open z'n paneel om een aanval te rollen.",
    "Klaar? Klik de knop om door te gaan naar de status-fase." ] },
  status: { title: "Status-fase", steps: [
    "Verbruikte defense tokens gaan weer 'ready'. De ronde-teller gaat omhoog.",
    "Klik de knop om de volgende ronde te starten (of het potje te eindigen na ronde 6)." ] },
};

function PhaseHelp({ phase, onClose }) {
  const h = PHASE_HELP[phase]; if (!h) return null;
  return (
    <div className="scrim" onPointerDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="dialog" style={{ maxWidth: 440 }}>
        <div className="dialog-head"><span className="sec-accent" /><span className="dh-title">{h.title}</span><span style={{ flex: 1 }} />
          <button className="icon-btn" onClick={onClose}><svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 2 L12 12 M12 2 L2 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg></button>
        </div>
        <div className="dialog-body">
          <ol className="help-steps">{h.steps.map((s, i) => <li key={i}>{s}</li>)}</ol>
        </div>
        <div className="dialog-foot"><button className="btn btn-accent" onClick={onClose}>Begrepen</button></div>
      </div>
    </div>
  );
}

Object.assign(window, { MainMenu, RulesScreen, PhaseHelp, Starfield });