/* =====================================================
   Betting Tracker — Settings page
   Everything that configures the tracker rather than
   describing it: staking strategy, odds display, and the
   two lists that fill the bet form (betting markets and
   sportsbooks). Reached from the gear in the app bar.
   ===================================================== */

/* ---- reusable pill list editor (markets / sportsbooks) ---- */
function ListEditor({ title, hint, items, count, addPlaceholder, addLabel, searchPlaceholder, noMatch, usedLabel, unusedLabel, inUseTitle, deleteLabel, onAdd, onRemove }) {
  const [txt, setTxt] = React.useState("");
  const [q, setQ] = React.useState("");
  const add = () => {
    const v = txt.trim();
    if (!v || items.some((x) => x.toLowerCase() === v.toLowerCase())) { setTxt(""); return; }
    onAdd(v); setTxt("");
  };
  const shown = q.trim() ? items.filter((x) => x.toLowerCase().includes(q.trim().toLowerCase())) : items;
  return (
    <Panel pad={26}>
      <SectionHead title={<>{title} <span className="trk-books__count">{items.length}</span></>} sub={hint} />
      {items.length > 8 && (
        <div className="trk-books__search">
          <Input value={q} placeholder={searchPlaceholder} onChange={(e) => setQ(e.target.value)} />
        </div>
      )}
      <div className={"trk-books" + (items.length > 12 ? " is-scroll" : "")}>
        {shown.map((name) => {
          const n = count(name);
          return (
            <div className="trk-bookrow" key={name}>
              <span className="trk-bookrow__name">{name}</span>
              <span className="trk-bookrow__n">{n ? n + " " + usedLabel : unusedLabel}</span>
              <button className="trk-bookrow__x" disabled={!!n} title={n ? inUseTitle : deleteLabel}
                onClick={() => onRemove(name)} aria-label={deleteLabel}><Icon name="close" size={13} /></button>
            </div>
          );
        })}
        {!shown.length && <div className="trk-bookrow trk-bookrow--empty">{noMatch}</div>}
      </div>
      <div className="trk-books__add">
        <Input value={txt} placeholder={addPlaceholder} onChange={(e) => setTxt(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }} />
        <Btn size="sm" variant="ghost" icon="plus" onClick={add}>{addLabel}</Btn>
      </div>
    </Panel>
  );
}

function Settings() {
  const { state, dispatch, t } = useTracker();
  const cur = state.settings.currency;
  const st = state.settings;
  const setSetting = (k, v) => dispatch({ type: "set-setting", key: k, value: v });
  // One number: 1 unit = the flat stake. Kept in sync so units display and the
  // flat strategy can never disagree.
  const setUnit = (v) => { const n = parseFloat(v) || 0; setSetting("unitSize", n); setSetting("flatStake", n); };

  // suggested next stake
  const bank = TRK.bankrollBalance(state);
  // "% of bankroll" re-bases once a month: it sizes off the balance you started
  // the month with, so a good or bad run mid-month doesn't move your unit.
  const monthBase = TRK.monthStartBankroll(state) || bank;
  let nextStake = st.flatStake != null ? st.flatStake : st.unitSize;
  if (st.stakeStrategy === "percent") nextStake = monthBase * (st.stakePct / 100);
  else if (st.stakeStrategy === "kelly") {
    // illustrative Kelly at a sample 4% edge, 2.0 odds
    const edge = 0.04, odds = 2.0, b = odds - 1, p = 1 / odds + edge, q = 1 - p;
    const kelly = Math.max(0, (b * p - q) / b);
    nextStake = bank * kelly * st.kellyFraction;
  }
  nextStake = TRK.round(nextStake, 0);

  const strategyOpts = [
    { value: "flat", label: t("bank.flat") },
    { value: "percent", label: t("bank.percent") },
    { value: "kelly", label: t("bank.kelly") }
  ];

  // Betting markets — the market types offered when logging a bet.
  const markets = TRK.marketOptions(state);
  const marketBetCount = (name) => state.bets.filter((x) => x.market === name
    || (x.legs || []).some((l) => l.market === name)).length;

  // Sportsbooks are a global list, shared by every bankroll. A bankroll (a model,
  // a tipster, a strategy) can place bets at any of them; the link lives on the bet.
  const books = TRK.bookOptions(state);
  const bookBetCount = (name) => state.bets.filter((x) => x.book === name).length;

  return (
    <div className="trk-page">
      <SectionHead title={t("set.title")} sub={t("set.sub")} />

      {/* staking strategy */}
      <Panel pad={26} className="trk-strategy">
        <SectionHead title={t("bank.strategy")} sub={t("bank.strategyHint")} />
        <div className="trk-strategy__seg">
          <Segmented size="sm" value={st.stakeStrategy} onChange={(v) => setSetting("stakeStrategy", v)} options={strategyOpts} />
        </div>
        <div className="trk-strategy__controls">
          <Field label={t("bank.unitField") + " (" + cur + ")"} hint={st.stakeStrategy === "flat" ? t("bank.unitFieldHint") : t("bank.unitFieldHint2")}>
            <Input type="number" value={st.unitSize} onChange={(e) => setUnit(e.target.value)} />
          </Field>
          {st.stakeStrategy === "percent" && (
            <Field label={t("bank.stakePct")} hint={t("bank.pctHint") + " " + TRK.fmtMoney(monthBase, cur)}>
              <Input type="number" step="0.5" value={st.stakePct} onChange={(e) => setSetting("stakePct", parseFloat(e.target.value) || 0)} />
            </Field>
          )}
          {st.stakeStrategy === "kelly" && (
            <Field label={t("bank.kellyFrac")}>
              <Select value={String(st.kellyFraction)} onChange={(v) => setSetting("kellyFraction", parseFloat(v))}
                options={[{ value: "1", label: "Full Kelly" }, { value: "0.5", label: "Half Kelly" }, { value: "0.25", label: "Quarter Kelly" }, { value: "0.1", label: "1/10 Kelly" }]} />
            </Field>
          )}
        </div>
        <div className="trk-strategy__next">
          <div className="trk-strategy__next-l">
            <span>{t("bank.nextStake")}</span>
            <b>{TRK.fmtMoney(nextStake, cur)}</b>
          </div>
          <small>{TRK.round(nextStake / (st.stakeStrategy === "percent" ? monthBase : bank) * 100, 2)}% {st.stakeStrategy === "percent" ? t("bank.ofMonthBase") : t("bank.ofBankroll")}</small>
        </div>
      </Panel>

      {/* odds format — one setting, one line */}
      <Panel pad={18} className="trk-inlineset">
        <span className="trk-inlineset__label">{t("bank.oddsFormat")}</span>
        <Segmented size="sm" value={st.oddsFormat} onChange={(v) => setSetting("oddsFormat", v)}
          options={[{ value: "decimal", label: t("odds.decimal") }, { value: "american", label: t("odds.american") }, { value: "fractional", label: t("odds.fractional") }]} />
      </Panel>

      {/* betting markets — the dropdown on every bet */}
      <ListEditor title={t("set.markets")} hint={t("set.marketsHint")} items={markets} count={marketBetCount}
        addPlaceholder={t("set.addMarketPh")} addLabel={t("bank.addBook")} searchPlaceholder={t("set.searchMarket")}
        noMatch={t("bank.noBookMatch")} usedLabel={t("bank.booksBets")} unusedLabel={t("bank.booksNone")}
        inUseTitle={t("set.marketInUse")} deleteLabel={t("form.delete")}
        onAdd={(v) => setSetting("markets", [...markets, v])}
        onRemove={(v) => { if (!marketBetCount(v)) setSetting("markets", markets.filter((x) => x !== v)); }} />

      {/* sportsbooks — global, shared across bankrolls */}
      <ListEditor title={t("bank.books")} hint={t("bank.booksHint")} items={books} count={bookBetCount}
        addPlaceholder={t("bank.addBookPh")} addLabel={t("bank.addBook")} searchPlaceholder={t("bank.searchBook")}
        noMatch={t("bank.noBookMatch")} usedLabel={t("bank.booksBets")} unusedLabel={t("bank.booksNone")}
        inUseTitle={t("bank.bookInUse")} deleteLabel={t("form.delete")}
        onAdd={(v) => setSetting("books", [...books, v])}
        onRemove={(v) => { if (!bookBetCount(v)) setSetting("books", books.filter((x) => x !== v)); }} />
    </div>
  );
}

Object.assign(window, { Settings, ListEditor });