/* global React, IRONMAN_DATA, Placeholder */
const { useState: useStateCrypt } = React;

function stageForLevel(level, stages) {
  // Parse ranges like "1 – 7", "7 – 20", "151+"
  for (const s of stages) {
    const r = s.range.replace(/\s/g, "");
    const rate = parseFloat(s.rate);
    if (r.endsWith("+")) {
      const min = parseInt(r);
      if (level >= min) return rate;
    } else {
      const [lo, hi] = r.split(/–|-/).map(n => parseInt(n));
      if (level >= lo && level <= hi) return rate;
    }
  }
  return 1;
}

function XpCalculator() {
  const stages = window.IRONMAN_DATA.expStages;
  const [level, setLevel] = React.useState(40);
  const [bonuses, setBonuses] = React.useState(10);

  const baseStage = stageForLevel(level, stages);
  const bonus = Math.ceil((baseStage * bonuses * 3) / 100);
  const finalStage = baseStage + bonus;

  return (
    <div className="xp-calc">
      <div className="xpc-head">
        <h4>XP Stage Calculator</h4>
      </div>

      <div className="xpc-grid">
        <label>
          <span>Level</span>
          <input type="number" min="1" max="500" value={level}
            onChange={(e) => setLevel(Math.max(1, parseInt(e.target.value) || 1))} />
        </label>
        <label>
          <span>Quest bonuses</span>
          <input type="number" min="0" max="50" value={bonuses}
            onChange={(e) => setBonuses(Math.max(0, parseInt(e.target.value) || 0))} />
        </label>
      </div>

      <div className="xpc-result-box">
        <div className="xpc-line">
          <span className="kk">Base stage</span>
          <span className="vv">{baseStage}×</span>
        </div>
        <div className="xpc-line">
          <span className="kk">Quest bonus</span>
          <span className="vv">+{bonus}×</span>
        </div>
        <div className="xpc-line final">
          <span className="kk">Your rate</span>
          <span className="vv"><b>{finalStage}×</b></span>
        </div>
      </div>
    </div>
  );
}

function RatesLayout() {
  const D = window.IRONMAN_DATA;
  const { rules, expStages } = D;
  return (
    <div className="rates-layout">
      <div className="rates-table">
        <div className="rt-head">
          <span>Level Range</span>
          <span style={{ textAlign: "right" }}>Rate</span>
          <span>Notes</span>
        </div>
        {expStages.map((s, i) => (
          <div className="rt-row" key={i}>
            <span className="lvl">Lv {s.range}</span>
            <span className="rate">
              {s.rate.replace(/\*$/, "")}
              {s.rate.endsWith("*") && <span className="ast">*</span>}
            </span>
            <span className="note">{s.note}</span>
          </div>
        ))}
        <div style={{ padding: "14px 20px", borderTop: "1px dashed #3a2a1a", color: "#8b7650", fontSize: 17, fontStyle: "italic", lineHeight: 1.5 }}>
          <span style={{ color: "#d4a656" }}>*</span> Rates are heavily affected by your account-wide quest bonus. The more quests you complete across all your characters, the faster every stage becomes.
        </div>
        <XpCalculator />
      </div>
      <div className="rates-sidecard">
        <h4>Other Rates</h4>
        <div className="rs-row"><span className="k">World Type</span><span className="v">{rules.worldType}</span></div>
        <div className="rs-row"><span className="k">Red Skull</span><span className="v">{rules.redSkull}</span></div>
        <div className="rs-row"><span className="k">Death Penalty</span><span className="v pos">{rules.deathPenalty}</span></div>
        <div className="rs-row"><span className="k">Free Premium</span><span className="v pos">{rules.freePremium}</span></div>
        <div className="rs-row"><span className="k">Skill Rate</span><span className="v">{rules.skillRate}</span></div>
        <div className="rs-row"><span className="k">Magic Rate</span><span className="v">{rules.magicRate}</span></div>
        <div className="rs-row"><span className="k">Loot Rate</span><span className="v flame">{rules.lootRate}</span></div>
        <div className="rs-row"><span className="k">Map</span><span className="v">{rules.map}</span></div>
      </div>
    </div>
  );
}

function FeaturesPage({ onNavigate }) {
  const features = window.IRONMAN_DATA.features;
  return (
    <div className="variation active v-crypt" data-variation="crypt">
      <section className="crypt-section features-hero" data-screen-label="Features · Hero">
        <div className="crypt-section-head">
          <h2>Features</h2>
          <div className="kicker">What makes Ironman OT</div>
        </div>
        <p className="experience-lede">
          The systems behind the server. Each one is built for self-found play —
          no shortcuts, no trading, every number earned.
        </p>
      </section>

      <section className="crypt-section features-list" data-screen-label="Features · List">
        {features.map((f, i) => (
          <article className="feature-card" key={f.id} id={f.id}>
            <div className="fc-seal">{String(i + 1).padStart(2, "0")}</div>
            <div className="fc-strip">
              <span className="fc-kicker">{f.kicker}</span>
              <span className="fc-strip-sep">//</span>
              <h3>{f.title}</h3>
            </div>

            <div className="fc-grid">
              <div className="fc-main">
                <p className="fc-lede">{f.lede}</p>
                <p className="fc-body">{f.body}</p>

                {f.tooltips && (
                  <div className="fc-tooltips">
                    {f.tooltips.map((t, j) => (
                      <figure className="fc-tooltip" key={j}>
                        <img src={t.src} alt={t.label} />
                        {t.label && <figcaption>{t.label}</figcaption>}
                      </figure>
                    ))}
                  </div>
                )}

                {f.statCategories && (
                  <div className="fc-stat-cats">
                    {f.statCategories.map((c, j) => (
                      <div className="fc-stat-cat" key={j}>
                        <h5>{c.label}</h5>
                        <dl>
                          {c.items.map(([k, v], si) => (
                            <React.Fragment key={si}>
                              <dt>{k}</dt>
                              <dd>{v}</dd>
                            </React.Fragment>
                          ))}
                        </dl>
                      </div>
                    ))}
                  </div>
                )}

                {f.statBlocks && (
                  <div className="fc-statblocks">
                    {f.statBlocks.map((b, j) => (
                      <div className="fc-statblock" key={j}>
                        <div className="fc-sb-label">{b.label}</div>
                        <div className="fc-sb-stats">
                          {b.stats.map(([k, v], si) => (
                            <div className="fc-sb-row" key={si}>
                              <span className="k">{k}</span>
                              <span className="v">{v}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                )}

                {f.lists && (
                  <div className="fc-lists">
                    {f.lists.map((l, j) => (
                      <div className="fc-list" key={j}>
                        <h5>{l.title}</h5>
                        <ul>
                          {l.items.map((it, k) => <li key={k}>{it}</li>)}
                        </ul>
                      </div>
                    ))}
                  </div>
                )}

                {f.subFeatures && (
                  <div className="fc-subs">
                    {f.subFeatures.map((s, j) => (
                      <div className={`fc-sub${s.wide ? " fc-sub-wide" : ""}${!s.media ? " fc-sub-text-only" : ""}`} key={j}>
                        <div className="fc-sub-text">
                          <h4>{s.title}</h4>
                          <p>{s.body}</p>
                        </div>
                        {s.media && (
                          <div className="fc-sub-media">
                            <div className="fc-sub-media-frame">
                              {s.media.src ? (
                                <img className="fc-media-img" src={s.media.src} alt={s.media.label} />
                              ) : (
                                <div className="fc-media-placeholder" data-kind={s.media.kind}>
                                  <div className="fc-media-kind">{s.media.kind}</div>
                                  <div className="fc-media-label">{s.media.label}</div>
                                  <div className="fc-media-note">{s.media.note}</div>
                                </div>
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}

                {f.formula && (
                  <div className="fc-formula">
                    <div className="fc-formula-title">{f.formula.title}</div>
                    <pre>{f.formula.lines.join("\n")}</pre>
                  </div>
                )}

                {f.example && (
                  <div className="fc-example">
                    <span className="fc-ex-label">{f.example.title}</span>
                    <span>{f.example.text}</span>
                  </div>
                )}

                {f.cta && (
                  <a className="crypt-btn primary fc-cta" href={`#${f.cta.page}`}
                    onClick={(e) => {
                      if (e.metaKey || e.ctrlKey || e.shiftKey) return;
                      e.preventDefault();
                      onNavigate?.(f.cta.page);
                    }}>
                    <span className="arrow">▶</span> {f.cta.label}
                  </a>
                )}
              </div>

              {f.media && (
                <aside className="fc-media">
                  <div className="fc-media-frame">
                    {f.media.src ? (
                      <img className="fc-media-img" src={f.media.src} alt={f.media.label} />
                    ) : (
                      <div className="fc-media-placeholder" data-kind={f.media.kind}>
                        <div className="fc-media-kind">{f.media.kind}</div>
                        <div className="fc-media-label">{f.media.label}</div>
                        <div className="fc-media-note">{f.media.note}</div>
                        {f.media.kind === "video" && <div className="fc-media-play"><span /></div>}
                      </div>
                    )}
                  </div>
                  {!f.media.src && <div className="fc-media-caption">drop-in slot</div>}
                </aside>
              )}
            </div>

            {f.note && <p className="fc-note">* {f.note}</p>}
          </article>
        ))}
      </section>
    </div>
  );
}

function ExperiencePage() {
  return (
    <div className="variation active v-crypt" data-variation="crypt">
      <section className="crypt-section experience-hero" data-screen-label="Experience · Hero">
        <div className="crypt-section-head">
          <h2>Experience Stages</h2>
          <div className="kicker">Rates &amp; Calculator</div>
        </div>
        <p className="experience-lede">
          Your leveling rate depends on your level bracket <b>and</b> your account-wide quest bonus.
          Complete more quests across all your characters and every stage becomes faster.
        </p>
      </section>
      <section className="crypt-section" data-screen-label="Experience · Rates">
        <RatesLayout />
      </section>
    </div>
  );
}

function CryptVariation() {
  const D = window.IRONMAN_DATA;
  const { server, rules, expStages, modes, pillars, media, howToPlay } = D;

  // Mock live stats
  const [players] = useStateCrypt(47);
  const [peak] = useStateCrypt(112);

  const mediaSizes = ["size-1", "size-2", "size-3", "size-4", "size-5", "size-6", "size-7", "size-8", "size-9"];

  return (
    <div className="variation active v-crypt" data-variation="crypt">
      {/* HERO */}
      <section className="crypt-hero" data-screen-label="01 Crypt · Hero">
        <div className="torch left" />
        <div className="torch right" />

        <div className="left-col">
          <div className="eyebrow">
            <span className="sq" /> OT · 8.0 · Open PVP
          </div>
          <h1>
            Ironman OT
            <span className="small">You earned every item.</span>
          </h1>
          <p className="tagline">
            True self-found Tibia. No donation shop. No trading. No parcels. Every stack of runes, every piece of armor — yours.
          </p>
          <div className="cta-row">
            <a className="crypt-btn primary" href={server.download} target="_blank" rel="noreferrer">
              <span className="arrow">▶</span> Download client
            </a>
            <a className="crypt-btn" href={server.discord} target="_blank" rel="noreferrer">
              <span className="arrow">◆</span> Join Discord
            </a>
          </div>
        </div>

        <div className="right-col">
          <div className="server-card">
            <div className="sc-head">
              <span>Server Status</span>
              <span className="live"><span className="d" /> ONLINE</span>
            </div>
            <div className="sc-body">
              <div className="sc-row"><span className="k">Host</span><span className="v hl">{server.ip}</span></div>
              <div className="sc-row"><span className="k">Port</span><span className="v hl">{server.port}</span></div>
              <div className="sc-row"><span className="k">Client</span><span className="v">Tibia 8.0 · <a href={server.download} target="_blank" rel="noreferrer" style={{color:"var(--gold)",borderBottom:"1px dotted var(--gold)"}}>download ↗</a></span></div>
              <div className="sc-row"><span className="k">Login</span><span className="v">Account 1 · Pass 1</span></div>
              <div className="sc-row"><span className="k">World</span><span className="v">Open PVP</span></div>
              <div className="sc-row"><span className="k">Location</span><span className="v">Germany · Dedicated · DDoS-protected*</span></div>
              <div className="sc-row"><span className="k">Uptime</span><span className="v">24 / 7</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* Ticker */}
      <div className="crypt-ticker">
        <div className="track">
          {Array.from({ length: 2 }).map((_, i) => (
            <React.Fragment key={i}>
              <span className="item">◆ <b>NO</b> DONATION SHOP</span>
              <span className="sep">/</span>
              <span className="item">◆ <b>NO</b> TRADING</span>
              <span className="sep">/</span>
              <span className="item">◆ <b>NO</b> LOOTING CORPSES</span>
              <span className="sep">/</span>
              <span className="item">◆ <b>NO</b> PARCELS</span>
              <span className="sep">/</span>
              <span className="item">◆ <b>NO</b> XP OR ITEM LOSS</span>
              <span className="sep">/</span>
              <span className="item">◆ FREE PREMIUM FOR <b>ALL</b></span>
              <span className="sep">/</span>
              <span className="item">◆ <b>REAL</b> GLOBAL MAP</span>
              <span className="sep">/</span>
              <span className="item">◆ <b>TIERED</b> ITEM DROPS</span>
              <span className="sep">/</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* MODES */}
      <section className="crypt-section" data-screen-label="02 Crypt · Modes">
        <div className="crypt-section-head">
          <h2>Two Ways to Play</h2>
          <div className="kicker">Modes</div>
        </div>
        <div className="modes-grid">
          {modes.map((m, i) => (
            <div className="mode-card" key={i}>
              {i === 0 && <div className="mc-seal">Solo</div>}
              {i === 1 && <div className="mc-seal">Team</div>}
              <h3>{m.title}</h3>
              <div className="mc-sub">{m.sub}</div>
              <p className="mc-blurb">{m.blurb}</p>
              <div className="mc-tags">
                {m.tags.map((t, j) => <span className="mc-tag" key={j}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* PILLARS */}
      <section className="crypt-section" data-screen-label="03 Crypt · Features">
        <div className="crypt-section-head">
          <h2>What Makes Ironman OT</h2>
          <div className="kicker">Features</div>
        </div>
        <div className="pillars-grid">
          {pillars.map((p, i) => (
            <div className="pillar" key={i}>
              <div className="p-idx">NO.{String(i + 1).padStart(2, "0")}</div>
              <h4>{p.title}</h4>
              <p>{p.blurb}</p>
            </div>
          ))}
        </div>
      </section>

      {/* RATES */}
      <section className="crypt-section" data-screen-label="04 Crypt · Rates">
        <div className="crypt-section-head">
          <h2>Experience Stages</h2>
          <div className="kicker">Rates</div>
        </div>
        <RatesLayout />
      </section>

      {/* HOW TO PLAY */}
      <section className="crypt-section" data-screen-label="06 Crypt · How to play">
        <div className="crypt-section-head">
          <h2>How to Begin</h2>
          <div className="kicker">Quickstart</div>
        </div>
        <div className="howto-list">
          {howToPlay.map((s) => (
            <div className="howto-step" key={s.n}>
              <div className="n">{String(s.n).padStart(2, "0")}</div>
              <div className="txt">
                <h5>{s.title}</h5>
                <p>{s.body}</p>
              </div>
              <div className="side">
                {s.n === 1 && "~ 60 MB"}
                {s.n === 2 && `${server.ip}:${server.port}`}
                {s.n === 3 && "Acc: 1 / 1"}
                {s.n === 4 && "Rookgaard"}
                {s.n === 5 && "GLHF"}
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="crypt-footer">
        <div>
          <h6>Ironman OT</h6>
          <p>A passion-project Open Tibia server. Built for players who want to earn it, not buy it.</p>
          <p style={{ marginTop: 12, color: "#d4a656" }}>{server.ip} : {server.port}</p>
        </div>
        <div>
          <h6>Links</h6>
          <a href={server.download}>Download client</a>
          <a href={server.discord}>Discord</a>
        </div>
        <div>
          <h6>Server</h6>
          <p>Host · Hetzner (Germany)</p>
          <p>Uptime · 24 / 7</p>
          <p>Client · Tibia 8.0</p>
        </div>
        <div className="sig">
          © Ironman OT · Not affiliated with CipSoft GmbH. Tibia is a trademark of CipSoft GmbH.
        </div>
      </footer>
    </div>
  );
}

window.CryptVariation = CryptVariation;
window.ExperiencePage = ExperiencePage;
window.FeaturesPage = FeaturesPage;