// pages2.jsx — About + Signup (i18n-aware)
const { useState: useS2, useEffect: useE2 } = React;

/* render a string that may contain <b>…</b> */
function Rich({ html, className }) { return <p className={className} dangerouslySetInnerHTML={{ __html: html }} />; }

/* ---------- ABOUT ---------- */
function AboutPage({ go, races = [] }) {
  const { t } = useT();
  const steps = [
    { n: "1", key: "practice" },
    { n: "2", key: "quali" },
    { n: "3", key: "race" },
  ];
  const rules = ["a", "b", "c", "d"];
  return (
    <div>
      <section className="about-hero wrap">
        <span className="eyebrow">{t("about.eyebrow")}</span>
        <h1 className="display">{t("about.titleA")}<br /><span style={{ color: "var(--accent)" }}>{t("about.titleB")}</span></h1>
        <div className="prose" style={{ marginTop: 28 }}>
          <Rich html={t("about.p1")} />
          <Rich html={t("about.p2")} />
          <Rich html={t("about.p3")} />
        </div>
      </section>

      <section className="section tight wrap">
        <div className="section-head"><div><span className="eyebrow">{t("about.fmt.eyebrow")}</span><h2 className="display" style={{ marginTop: 14 }}>{t("about.fmt.title")}</h2></div></div>
        <div className="steps">
          {steps.map((s) => (
            <div className="step reveal" key={s.n}>
              <div className="big">{s.n}</div>
              <div className="t">{t("step.step", { n: s.n })}</div>
              <h4>{t("step." + s.key + ".t")}</h4>
              <div className="muted" style={{ fontFamily: "var(--mono)", fontSize: 13, margin: "2px 0 10px", color: "var(--accent)" }}>{t("step." + s.key + ".h")}</div>
              <p>{t("step." + s.key + ".p")}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section tight wrap">
        <div className="section-head"><div><span className="eyebrow">{t("about.rules.eyebrow")}</span><h2 className="display" style={{ marginTop: 14 }}>{t("about.rules.title")}</h2></div>
          <p className="lead">{t("about.rules.lead")}</p></div>
        <div className="rules">
          {rules.map((id) => (
            <div className="rule reveal" key={id}>
              <div className="mk"><span>{id.toUpperCase()}</span></div>
              <div><h4>{t("rule." + id + ".t")}</h4><p>{t("rule." + id + ".p")}</p></div>
            </div>
          ))}
        </div>
      </section>

      <section className="section tight wrap">
        <div className="race-data" style={{ marginTop: 0, gridTemplateColumns: "repeat(4,1fr)" }}>
          <div className="dcell"><div className="k">{t("stat.class.k")}</div><div className="v">GT3<small>{t("stat.class.v")}</small></div></div>
          <div className="dcell"><div className="k">{t("stat.rounds.k")}</div><div className="v">{races.length || SEASON.rounds}<small>{t("stat.rounds.v", { y: SEASON.year })}</small></div></div>
          <div className="dcell"><div className="k">{t("stat.grid.k")}</div><div className="v">{races.length ? Math.max(...races.map(r => r.gridTotal || 0)) : 30}<small>{t("stat.grid.v")}</small></div></div>
          <div className="dcell"><div className="k">{t("stat.platform.k")}</div><div className="v">iRacing<small>{t("stat.platform.v")}</small></div></div>
        </div>
      </section>

      <CtaBand go={go} />
    </div>
  );
}

/* ---------- SIGNUP ---------- */
function SignupPage({ go, preselect, races }) {
  const { t, fmtShort, country } = useT();
  const { discordUrl } = useCfg();
  const openRaces = races.filter(r => r.status !== "full");
  const [done, setDone] = useS2(false);
  const [loading, setLoading] = useS2(false);
  const [submitError, setSubmitError] = useS2(null);
  const [f, setF] = useS2({
    name: "", iracing: "", num: "", num2: "", team: "", country: "România",
    race: preselect || (openRaces[0] && openRaces[0].id),
    car: CARS[0], discord: "", exp: "inter",
    helpInterest: "no", notes: "",
    locked: false, agree: false,
  });
  useE2(() => { if (preselect) setF(s => ({ ...s, race: preselect })); }, [preselect]);

  const upd = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));
  const race = races.find(r => r.id === f.race);
  const valid = f.name.trim() && f.iracing.trim() && f.race && f.car && f.locked && f.agree;
  const submit = async (e) => {
    e.preventDefault();
    if (!valid || loading) return;
    setLoading(true);
    setSubmitError(null);
    const { error } = await window.sbClient.from('signups').insert({
      name: f.name.trim(),
      iracing_id: f.iracing.trim(),
      car_number: f.num || null,
      car_number_2: f.num2 || null,
      team_name: f.team || null,
      country: f.country,
      race_id: f.race,
      car: f.car,
      discord: f.discord || null,
      experience: f.exp,
      help_interest: f.helpInterest === 'yes',
      notes: f.notes || null,
    });
    setLoading(false);
    if (error) {
      setSubmitError('Eroare: ' + (error.message || error.details || JSON.stringify(error)));
    } else {
      if (window._syncCounts) window._syncCounts();
      // Check signup count and trigger Discord milestone every 3 signups
      try {
        const { count } = await window.sbClient
          .from('signups')
          .select('*', { count: 'exact', head: true })
          .eq('race_id', f.race);
        if (count && count % 3 === 0 && window.postSignupMilestone) {
          const r = races.find(x => x.id === f.race);
          const spotsLeft = r ? Math.max(0, r.gridTotal - count) : 0;
          window.postSignupMilestone(f.race, spotsLeft, r ? r.gridTotal : 30);
        }
      } catch(e) {}
      setDone(true);
    }
  };

  const exps = [["beginner", t("exp.beginner")], ["inter", t("exp.inter")], ["adv", t("exp.adv")], ["pro", t("exp.pro")]];

  if (done) {
    return (
      <section className="section wrap">
        <div className="feature" style={{ gridTemplateColumns: "1fr" }}>
          <div className="entry-ok">
            <div className="seal"><IconCheck /></div>
            <span className="eyebrow" style={{ justifyContent: "center", display: "flex" }}>{t("ok.eyebrow")}</span>
            <h2 className="display" style={{ marginTop: 14 }}>{t("ok.title")}</h2>
            <p>
              {f.name.toUpperCase()} · #{f.num || "—"} · {race ? race.name : ""}<br />
              {race ? `${fmtShort(race.date)} · ${race.time} ${race.tz}` : ""} · {f.car}
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn" href={discordUrl} target="_blank" rel="noopener noreferrer"><span>{t("btn.confirmDiscord")}</span></a>
              <button className="btn ghost" onClick={() => { setDone(false); go("races"); }}><span>{t("btn.backToCalendar")}</span></button>
            </div>
            <p className="muted" style={{ fontSize: 13, marginTop: 22, fontFamily: "var(--mono)" }}>{t("ok.note")}</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <div>
      <section className="section wrap" style={{ paddingBottom: 36 }}>
        <span className="eyebrow">{t("signup.eyebrow")}</span>
        <h1 className="display" style={{ fontSize: "clamp(46px,7vw,88px)", marginTop: 16 }}>{t("signup.title")}</h1>
        <p className="lead" style={{ maxWidth: 540, marginTop: 16, color: "var(--muted)", fontSize: 18 }}>{t("signup.lead")}</p>
      </section>

      <section className="wrap" style={{ paddingBottom: 90 }}>
        <form className="form-grid" onSubmit={submit}>
          <div className="fieldset">
            <div className="row2">
              <div className="field">
                <label>{t("f.name")} <span className="req">*</span></label>
                <input className="input" placeholder={t("ph.name")} value={f.name} onChange={upd("name")} />
              </div>
              <div className="field">
                <label>{t("f.iracing")} <span className="req">*</span></label>
                <input className="input" placeholder={t("ph.iracing")} value={f.iracing} onChange={upd("iracing")} />
              </div>
            </div>

            <div className="row2">
              <div className="field">
                <label>{t("f.num")} <span className="req">*</span></label>
                <input className="input" placeholder={t("ph.num")} value={f.num} onChange={upd("num")} />
              </div>
              <div className="field">
                <label>{t("f.num2")}</label>
                <input className="input" placeholder={t("ph.num2")} value={f.num2} onChange={upd("num2")} />
              </div>
            </div>

            <div className="row2">
              <div className="field">
                <label>{t("f.team")}</label>
                <input className="input" placeholder={t("ph.team")} value={f.team} onChange={upd("team")} />
              </div>
              <div className="field">
                <label>{t("f.country")}</label>
                <input className="input" value={f.country} onChange={upd("country")} />
              </div>
            </div>

            <div className="field">
              <label>{t("f.race")} <span className="req">*</span></label>
              <select className="select" value={f.race} onChange={upd("race")}>
                {openRaces.map(r => (
                  <option key={r.id} value={r.id}>
                    RND {String(r.round).padStart(2, "0")} · {r.name} — {fmtShort(r.date)} · {t("card.spots", { n: r.gridFree })}
                  </option>
                ))}
              </select>
            </div>

            <div className="field">
              <label>{t("f.car")} <span className="req">*</span></label>
              <select className="select" value={f.car} onChange={upd("car")}>
                {CARS.map(c => <option key={c} value={c}>{c}</option>)}
              </select>
            </div>

            <div className="field">
              <label>{t("f.discord")}</label>
              <input className="input" placeholder={t("ph.discord")} value={f.discord} onChange={upd("discord")} />
            </div>

            <div className="field">
              <label>{t("f.exp")}</label>
              <div className="choice">
                {exps.map(([id, lab]) => (
                  <button type="button" key={id} className={f.exp === id ? "on" : ""} onClick={() => setF(s => ({ ...s, exp: id }))}>{lab}</button>
                ))}
              </div>
            </div>

            <div className="field">
              <label>{t("f.help")}</label>
              <div className="choice">
                <button type="button" className={f.helpInterest === "yes" ? "on" : ""} onClick={() => setF(s => ({ ...s, helpInterest: "yes" }))}>{t("signup.helpYes")}</button>
                <button type="button" className={f.helpInterest === "no" ? "on" : ""} onClick={() => setF(s => ({ ...s, helpInterest: "no" }))}>{t("signup.helpNo")}</button>
              </div>
            </div>

            <div className="field">
              <label>{t("f.notes")}</label>
              <textarea className="textarea" rows="3" placeholder={t("ph.notes")} value={f.notes} onChange={upd("notes")} style={{ resize: "vertical" }} />
            </div>

            <label className="check">
              <input type="checkbox" checked={f.locked} onChange={e => setF(s => ({ ...s, locked: e.target.checked }))} />
              <span className="box"><IconCheck /></span>
              <span className="txt">{t("signup.lockConfirm")}</span>
            </label>

            <label className="check">
              <input type="checkbox" checked={f.agree} onChange={e => setF(s => ({ ...s, agree: e.target.checked }))} />
              <span className="box"><IconCheck /></span>
              <span className="txt">{t("signup.agreePre")}<a href="#" onClick={e => { e.preventDefault(); go("about"); }}>{t("signup.agreeLink")}</a>{t("signup.agreePost")}</span>
            </label>

            {submitError && <p style={{ color: "var(--accent)", fontFamily: "var(--mono)", fontSize: 13, margin: "0 0 8px" }}>{submitError}</p>}
            <button className="btn block" type="submit" disabled={!valid || loading} style={{ opacity: valid && !loading ? 1 : 0.5 }}>
              <span>{loading ? "Se trimite..." : t("signup.submit")}</span>
            </button>
          </div>

          <aside className="summary">
            <div className="summary-h"><span>{t("summary.title")}</span><span style={{ fontFamily: "var(--mono)", fontSize: 12 }}>{race ? `RND ${String(race.round).padStart(2, "0")}` : "—"}</span></div>
            <div className="summary-b">
              <div className="sline"><span className="k">{t("sline.race")}</span><span className="v">{race ? race.name : "—"}</span></div>
              <div className="sline"><span className="k">{t("sline.date")}</span><span className={"v" + (race ? "" : " empty")}>{race ? fmtShort(race.date) : "—"}</span></div>
              <div className="sline"><span className="k">{t("sline.start")}</span><span className={"v" + (race ? "" : " empty")}>{race ? `${race.time} ${race.tz}` : "—"}</span></div>
              <div className="sline"><span className="k">{t("sline.driver")}</span><span className={"v" + (f.name ? "" : " empty")}>{f.name || t("summary.completeName")}</span></div>
              <div className="sline"><span className="k">{t("sline.car")}</span><span className="v" style={{ fontSize: 14 }}>{f.car}</span></div>
              <div className="sline"><span className="k">{t("sline.num")}</span><span className={"v" + (f.num ? "" : " empty")}>{f.num ? "#" + f.num : t("summary.optional")}</span></div>
              <div className="sline"><span className="k">{t("sline.team")}</span><span className={"v" + (f.team ? "" : " empty")} style={{ fontSize: 13 }}>{f.team || t("summary.optional")}</span></div>
              <div className="sline"><span className="k">{t("sline.free")}</span><span className="v" style={{ color: "var(--sec-green)" }}>{race ? race.gridFree : "—"}</span></div>
            </div>
          </aside>
        </form>
      </section>
    </div>
  );
}

Object.assign(window, { AboutPage, SignupPage });