// pdx-guide.jsx — Game Guide: two modes (plain), bug report + feature request.
const { useState: useSG } = React;

// Swap for a real Formspree form id (or Google Form) at deploy. Forms degrade to a
// local confirmation + mailto fallback when no endpoint is configured.
const FORMSPREE = ""; // e.g. "https://formspree.io/f/xxxxxxx"
const CONTACT_EMAIL = "feedback@pokemon-game-guide.shellphone.net";

function Field({ label, name, type = "text", placeholder, textarea, options, required }) {
  return (
    <div className="field">
      <label htmlFor={"f-" + name}>{label}{required && " *"}</label>
      {textarea ? <textarea id={"f-" + name} name={name} placeholder={placeholder} required={required} />
        : options ? <select id={"f-" + name} name={name}>{options.map((o) => <option key={o}>{o}</option>)}</select>
        : <input id={"f-" + name} name={name} type={type} placeholder={placeholder} required={required} />}
    </div>
  );
}

function FeedbackForm({ kind }) {
  const [done, setDone] = useSG(false);
  const bug = kind === "bug";
  const onSubmit = (e) => {
    e.preventDefault();
    if (FORMSPREE) { try { fetch(FORMSPREE, { method: "POST", body: new FormData(e.target), headers: { Accept: "application/json" } }); } catch {} }
    setDone(true);
  };
  if (done) return (
    <div className={"form-card " + (bug ? "bug" : "idea")}>
      <div className="form-done">
        <div className="pokeball" />
        <h4>{bug ? "Report sent." : "Request sent."}</h4>
        <p>{bug ? "Thanks — we'll take a look." : "Thanks — we'll consider it."}</p>
      </div>
    </div>
  );
  return (
    <form className={"form-card " + (bug ? "bug" : "idea")} onSubmit={onSubmit}>
      <h3>{bug ? "Bug report" : "Feature request"}</h3>
      <p className="sub">{bug ? "Report a wrong type, a broken moveset, a missing sprite, or anything else that looks off." : "Suggest a new fusion, filter, or feature you'd like to see."}</p>
      {bug ? <>
        <Field label="What happened" name="summary" placeholder="e.g. Chariztoise shows the wrong hidden ability" required />
        <Field label="Where" name="where" options={["Fusions grid", "Fusion detail", "Trainer Teams", "Search / filters", "Sprites", "Somewhere else"]} />
        <Field label="Details" name="details" textarea placeholder="Steps to reproduce, what you expected, what you saw…" required />
      </> : <>
        <Field label="Your idea" name="idea" placeholder="e.g. Filter fusions by base-stat threshold" required />
        <Field label="Area" name="area" options={["Fusions Pokédex", "Trainer Teams", "Search / filters", "Data / curation", "New feature", "Other"]} />
        <Field label="Why it'd help" name="why" textarea placeholder="What would this let you do?" />
      </>}
      <Field label="Email (optional, if you want a reply)" name="email" type="email" placeholder="you@example.com" />
      <button className="submit" type="submit">{bug ? "Send report" : "Send request"}</button>
    </form>
  );
}

function GuideView() {
  return (
    <div className="view"><div className="view-scroll scrl"><div className="guide">

      <div className="g-head">
        <div className="g-sec-k">Game Guide</div>
        <h1 className="g-h">Two ways to play</h1>
      </div>

      <div className="g-sec">
        <div className="mode-tag">Mode 01</div>
        <h2 className="g-h" style={{ color: "var(--glow)" }}>Total Fusions</h2>
        <p className="g-p">Every Pokémon on the field is a fusion — wild encounters, trainers, gym leaders, all of it. There are no vanilla Pokémon in this mode. Each fusion is built like this:</p>
        <ul className="g-bullets">
          <li className="g-bullet">A <b>head</b> species and a <b>body</b> species combine into one Fakemon with its own sprite and name.</li>
          <li className="g-bullet">Its <b>stats and typing</b> are blended from both parents.</li>
          <li className="g-bullet">It gets an <b>ability</b> (sometimes a hidden one) and a <b>signature item</b>.</li>
          <li className="g-bullet">It has a full <b>L1–100 learnset</b> plus a curated competitive moveset.</li>
        </ul>
      </div>

      <div className="g-sec">
        <div className="mode-tag">Mode 02</div>
        <h2 className="g-h" style={{ color: "#5bb0ff" }}>Fusion-Enhanced</h2>
        <p className="g-p">Standard PokéRogue, except each Pokémon can be fused with a Fakemon that enhances it. The base game is unchanged — fusions are an optional upgrade layer on the Pokémon you already use.</p>
      </div>

      <div className="forms-head">
        <div className="g-sec-k" style={{ justifyContent: "center" }}>Feedback</div>
        <h2 className="g-h">Bug report &amp; feature request</h2>
      </div>
      <div className="forms">
        <FeedbackForm kind="bug" />
        <FeedbackForm kind="idea" />
      </div>
      <p className="form-note">Prefer email? Reach us at <a href={"mailto:" + CONTACT_EMAIL}>{CONTACT_EMAIL}</a>. · This is a non-commercial fan project, unaffiliated with Nintendo, Game Freak, or The Pokémon Company.</p>

    </div></div></div>
  );
}

Object.assign(window, { GuideView });