/* =====================================================
   Betting Tracker — Entry screen
   The privacy pitch is the money moment. Upload / Create,
   the Browser→Read→Modify→Write flow, and three honest
   privacy claims. A simulated "reading .xlsx" overlay.
   ===================================================== */

/* ---- chip multi-select with custom add (sports / books / models) ---- */
function ChipSet({ items, active, onToggle, onAdd, addLabel }) {
  const [txt, setTxt] = useState("");
  const add = () => { const v = txt.trim(); if (v) { onAdd(v); setTxt(""); } };
  return (
    <div className="trk-chipset">
      <div className="trk-chipset__chips">
        {items.map((it) => (
          <button key={it} type="button" className={"trk-chip" + (active.includes(it) ? " is-on" : "")} onClick={() => onToggle(it)}>
            {active.includes(it) && <Icon name="check" size={13} />}{it}
          </button>
        ))}
      </div>
      <div className="trk-chipset__add">
        <input className="trk-input" value={txt} placeholder={addLabel} onChange={(e) => setTxt(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }} />
        <button type="button" className="trk-iconbtn trk-iconbtn--sm" onClick={add} aria-label="add"><Icon name="plus" size={14} /></button>
      </div>
    </div>
  );
}

/* ---- create-tracker setup wizard ---- */
function SetupWizard({ open, onClose, onCreate }) {
  const { t } = useTracker();
  const [currency, setCurrency] = useState("USD");
  const [oddsFormat, setOddsFormat] = useState("decimal");
  const [unitSize, setUnitSize] = useState(100);
  const [bankrolls, setBankrolls] = useState([{ name: "Main bankroll", initial: 1000 }]);
  const [sportItems, setSportItems] = useState(TRK.SPORTS.slice());
  const [sports, setSports] = useState(TRK.SPORTS.slice());
  const [bookItems, setBookItems] = useState(TRK.BOOKS.slice());
  const [books, setBooks] = useState(TRK.BOOKS.slice());
  const [modelItems, setModelItems] = useState([t("src.me"), ...TRK.TIPSTERS]);
  const [models, setModels] = useState([t("src.me"), "PROPHET", "PROPHET ⚽"]);

  const toggle = (list, setList) => (v) => setList(list.includes(v) ? list.filter((x) => x !== v) : [...list, v]);
  const addItem = (items, setItems, active, setActive) => (v) => {
    if (!items.includes(v)) setItems([...items, v]);
    if (!active.includes(v)) setActive([...active, v]);
  };
  const setBk = (i, k, v) => setBankrolls(bankrolls.map((b, j) => (j === i ? { ...b, [k]: v } : b)));
  const addBk = () => setBankrolls([...bankrolls, { name: "", initial: 0 }]);
  const rmBk = (i) => setBankrolls(bankrolls.length > 1 ? bankrolls.filter((_, j) => j !== i) : bankrolls);

  const valid = bankrolls.length && sports.length && books.length && models.length;
  const submit = () => {
    if (!valid) return;
    onCreate({
      currency, oddsFormat, unitSize: Number(unitSize) || 100,
      bankrolls: bankrolls.map((b) => ({ name: (b.name || "").trim() || "Bankroll", initial: Number(b.initial) || 0 })),
      models, sports, books
    });
  };

  const sym = currency === "EUR" ? "\u20ac" : currency === "GBP" ? "\u00a3" : currency === "BRL" ? "R$" : currency === "UNITS" ? "u" : "$";

  return (
    <Modal open={open} onClose={onClose} title={t("setup.title")} width={600}
      footer={<>
        <Btn variant="ghost" onClick={onClose}>{t("setup.cancel")}</Btn>
        <Btn variant="primary" icon="arrowRight" onClick={submit} disabled={!valid}>{t("setup.create")}</Btn>
      </>}>
      <p className="trk-setup__lede">{t("setup.sub")}</p>
      <div className="trk-setup">
        {/* basics */}
        <div className="trk-setup__sec">
          <div className="trk-setup__lab">{t("setup.basics")}</div>
          <div className="trk-setup__grid3">
            <Field label={t("setup.currency")}><Select value={currency} onChange={setCurrency} options={TRK.CURRENCIES} /></Field>
            <Field label={t("setup.unit")} hint={t("setup.unitHint")}><Input type="number" step="1" value={unitSize} onChange={(e) => setUnitSize(e.target.value)} /></Field>
          </div>
          <Field label={t("setup.odds")}>
            <Segmented value={oddsFormat} onChange={setOddsFormat} size="sm"
              options={[{ value: "decimal", label: t("odds.decimal") }, { value: "american", label: t("odds.american") }, { value: "fractional", label: t("odds.fractional") }]} />
          </Field>
        </div>

        {/* bankrolls */}
        <div className="trk-setup__sec">
          <div className="trk-setup__lab">{t("setup.bankrolls")} <small>{t("setup.bankrollsHint")}</small></div>
          <div className="trk-bkrows">
            {bankrolls.map((b, i) => (
              <div className="trk-bkrow" key={i}>
                <Input value={b.name} placeholder={t("setup.name")} onChange={(e) => setBk(i, "name", e.target.value)} />
                <div className="trk-bkrow__amt">
                  <span>{sym}</span>
                  <Input type="number" step="1" value={b.initial} placeholder={t("setup.initial")} onChange={(e) => setBk(i, "initial", e.target.value)} />
                </div>
                <button type="button" className="trk-iconbtn trk-iconbtn--sm" onClick={() => rmBk(i)} disabled={bankrolls.length <= 1} aria-label="remove"><Icon name="trash" size={14} /></button>
              </div>
            ))}
          </div>
          <button type="button" className="trk-textlink trk-textlink--sm" onClick={addBk}><Icon name="plus" size={13} /> {t("setup.addBankroll")}</button>
        </div>

        {/* models */}
        <div className="trk-setup__sec">
          <div className="trk-setup__lab">{t("setup.models")} <small>{t("setup.modelsHint")}</small></div>
          <ChipSet items={modelItems} active={models} onToggle={toggle(models, setModels)}
            onAdd={addItem(modelItems, setModelItems, models, setModels)} addLabel={t("setup.addPlaceholder")} />
        </div>

        {/* sports */}
        <div className="trk-setup__sec">
          <div className="trk-setup__lab">{t("setup.sports")} <small>{t("setup.sportsHint")}</small></div>
          <ChipSet items={sportItems} active={sports} onToggle={toggle(sports, setSports)}
            onAdd={addItem(sportItems, setSportItems, sports, setSports)} addLabel={t("setup.addPlaceholder")} />
        </div>

        {/* books */}
        <div className="trk-setup__sec">
          <div className="trk-setup__lab">{t("setup.books")} <small>{t("setup.booksHint")}</small></div>
          <ChipSet items={bookItems} active={books} onToggle={toggle(books, setBooks)}
            onAdd={addItem(bookItems, setBookItems, books, setBooks)} addLabel={t("setup.addPlaceholder")} />
        </div>
      </div>
    </Modal>
  );
}

function FlowStep({ n, icon, text, active }) {
  return (
    <div className={"trk-flow__step" + (active ? " is-on" : "")}>
      <div className="trk-flow__ic"><Icon name={icon} size={20} /></div>
      <div className="trk-flow__tx"><span className="trk-flow__n">{n}</span>{text}</div>
    </div>
  );
}

function Entry({ onLoad, resume, onResume, onDiscard }) {
  const { t } = useTracker();
  const [busy, setBusy] = useState(null); // {mode, label}
  const [step, setStep] = useState(0);
  const [err, setErr] = useState("");
  const [setupOpen, setSetupOpen] = useState(false);
  const fileRef = useRef(null);
  const io = window.TRK_XLSX;

  // decorative progress, resolves when done
  const runProgress = (mode, label) => new Promise((resolve) => {
    setBusy({ mode, label }); setStep(0);
    let s = 0;
    const iv = setInterval(() => { s++; setStep(s); if (s >= 3) { clearInterval(iv); setTimeout(resolve, 420); } }, 340);
  });
  const finish = (state, mode, handle) => { setBusy(null); onLoad(state, mode, handle); };

  // OPEN — try the File System Access picker (keeps a handle to save back in place);
  // if it's unavailable OR blocked (e.g. cross-origin iframe), fall back to a file input.
  const openFile = async () => {
    setErr("");
    if (io.fsaSupported) {
      try {
        const { state, handle } = await io.pickOpen();
        await runProgress("open", t("entry.reading"));
        finish(state, "open", handle);
        return;
      } catch (e) {
        if (e && e.name === "AbortError") return; // user cancelled the picker
        // otherwise fall through to the input fallback
      }
    }
    fileRef.current && fileRef.current.click();
  };
  const onFilePicked = async (e) => {
    const f = e.target.files && e.target.files[0];
    e.target.value = "";
    if (!f) return;
    setErr("");
    try {
      const state = await io.parseFile(f);
      state.meta.name = f.name;
      await runProgress("open", t("entry.reading"));
      finish(state, "open", null);
    } catch (er) { setErr(er && er.message ? er.message : String(er)); }
  };

  // CREATE — open the setup wizard. No file is downloaded here; the workbook is
  // written the first time the user hits Save, from the config they choose.
  const createNew = () => { setErr(""); setSetupOpen(true); };
  const onSetupCreate = async (cfg) => {
    setSetupOpen(false);
    const state = TRK.buildState(cfg);
    await runProgress("new", t("entry.generating"));
    finish(state, "new", null);
  };
  const demo = () => onLoad(TRK.clone(TRK.sample), "demo");

  return (
    <main className="trk-entry">
      <section className="trk-hero" data-screen-label="Entry hero">
        <div className="trk-hero__copy">
          {resume && (
            <div className="glass trk-resume">
              <span className="trk-resume__ic"><Icon name="history" size={18} /></span>
              <span className="trk-resume__tx">
                <b>{t("entry.resume")}</b>
                <small>{t("entry.resume.sub")} {resume.bets.length} {t("entry.resume.bets")}</small>
              </span>
              <span className="trk-resume__actions">
                <button className="trk-textlink trk-textlink--sm" onClick={onDiscard}>{t("entry.discard")}</button>
                <Btn size="sm" variant="primary" icon="arrowRight" onClick={onResume}>{t("entry.resume")}</Btn>
              </span>
            </div>
          )}
          <div className="trk-hero__eyebrow">
            <span className="trk-shieldpill"><Icon name="shield" size={13} /></span>
            <span>{t("entry.eyebrow")}</span>
          </div>
          <h1>{t("entry.title")}</h1>
          <p className="trk-hero__lede">{t("entry.lede")}</p>

          <div className="trk-hero__cta">
            <button className="trk-choice trk-choice--primary" onClick={openFile}>
              <span className="trk-choice__ic"><Icon name="upload" size={20} /></span>
              <span className="trk-choice__tx">
                <span className="trk-choice__t">{t("entry.open")}</span>
                <span className="trk-choice__s">{t("entry.open.sub")}</span>
              </span>
              <Icon name="arrowRight" size={17} />
            </button>
            <button className="trk-choice" onClick={createNew}>
              <span className="trk-choice__ic"><Icon name="plus" size={20} /></span>
              <span className="trk-choice__tx">
                <span className="trk-choice__t">{t("entry.new")}</span>
                <span className="trk-choice__s">{t("entry.new.sub")}</span>
              </span>
              <Icon name="arrowRight" size={17} />
            </button>
          </div>

          <div className="trk-hero__demo">
            <span className="trk-hero__or">{t("entry.or")}</span>
            <button className="trk-textlink" onClick={demo}>
              <Icon name="layers" size={15} /> {t("entry.demo")}
              <small>{t("entry.demo.sub")}</small>
            </button>
          </div>
          <input ref={fileRef} type="file" accept=".xlsx,.xls" hidden onChange={onFilePicked} />
          {err && <div className="trk-entry__err"><Icon name="close" size={14} /> {err}</div>}
        </div>

        {/* the flow diagram — the "no server" story */}
        <div className="trk-hero__flow glass" data-screen-label="Data flow">
          <div className="trk-flow__cap">{t("entry.how")}</div>
          <div className="trk-flow">
            <FlowStep n="1" icon="file" text={t("entry.flow1")} active />
            <div className="trk-flow__conn"><Icon name="arrowRight" size={16} /></div>
            <FlowStep n="2" icon="edit" text={t("entry.flow2")} active />
            <div className="trk-flow__conn"><Icon name="arrowRight" size={16} /></div>
            <FlowStep n="3" icon="download" text={t("entry.flow3")} active />
          </div>
          <div className="trk-flow__noserver">
            <span className="trk-flow__nostrike"><Icon name="wifi" size={16} /></span>
            {t("entry.noserver")}
          </div>
          <div className="trk-flow__file">
            <span className="trk-flow__filepill"><Icon name="lock" size={13} /> {t("entry.filepill")}</span>
          </div>
        </div>
      </section>

      {/* three honest privacy claims */}
      <section className="trk-claims" data-screen-label="Privacy claims">
        {[
          { ic: "lock", t: "entry.p1title", b: "entry.p1body" },
          { ic: "shield", t: "entry.p2title", b: "entry.p2body" },
          { ic: "wifi", t: "entry.p3title", b: "entry.p3body" }
        ].map((c, i) => (
          <div className="glass trk-claim" key={i}>
            <div className="icon-tile"><Icon name={c.ic} size={19} /></div>
            <h3>{t(c.t)}</h3>
            <p>{t(c.b)}</p>
          </div>
        ))}
      </section>

      <SetupWizard open={setupOpen} onClose={() => setSetupOpen(false)} onCreate={onSetupCreate} />

      {busy && (
        <Portal>
        <div className="trk-scrim trk-scrim--load">
          <div className="glass trk-load">
            <div className="trk-load__file">
              <Icon name="file" size={22} />
              <span>{busy.mode === "new" ? "BettingTracker.xlsx" : (busy.label)}</span>
            </div>
            <div className="trk-load__bar"><div className="trk-load__fill" style={{ width: (step / 3) * 100 + "%" }}></div></div>
            <div className="trk-load__steps">
              <span className={step >= 1 ? "is-on" : ""}>{t("entry.parsing")}</span>
              <span className={step >= 2 ? "is-on" : ""}>Bets · Bankroll · Models · Settings</span>
              <span className={step >= 3 ? "is-on" : ""}><Icon name="check" size={13} /> Ready</span>
            </div>
          </div>
        </div>
        </Portal>
      )}
    </main>
  );
}

Object.assign(window, { Entry });