window.FB = window.FB || {};
FB.BaselineTab = function BaselineTab({ lang, user }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const [items, setItems] = useState(null);
  const [counts, setCounts] = useState(() => JSON.parse(localStorage.getItem("fb_base_draft") || "{}"));
  const [state, setState] = useState("idle");
  const [done, setDone] = useState(null);

  useEffect(() => { FB.api.items().then(setItems); }, []);
  useEffect(() => { localStorage.setItem("fb_base_draft", JSON.stringify(counts)); }, [counts]);

  function total(i) {
    const c = counts[i.code] || {}; const san = parseFloat(c.san) || 0; const ctn = parseFloat(c.ctn) || 0;
    return i.carton_size ? san + ctn * Number(i.carton_size) : san;
  }
  const filledRows = (items || []).filter((i) => { const c = counts[i.code] || {}; return (c.san ?? "") !== "" || (c.ctn ?? "") !== ""; });
  const filled = filledRows.length;
  const totalItems = (items || []).length;

  useEffect(() => {
    if (items && FB.setPageInfo)
      FB.setPageInfo({ text: t("progress") + " " + filled + " / " + totalItems, num: filled, den: totalItems });
  }, [items, filled, totalItems, lang]);

  async function submit() {
    const rows = filledRows.map((i) => ({ item_code: i.code, qty: total(i) }));
    if (!rows.length) return;
    setState("sending");
    const r = await FB.api.submitBaseline({ counts: rows, counted_by: user.name });
    if (r.error || !r.ok) { setState("error"); return; }
    setState("ok"); setDone(r.results); setCounts({}); localStorage.removeItem("fb_base_draft");
  }

  return (
    <div className="px-3 py-3 max-w-md mx-auto pb-28">
      <div className="rounded-xl px-3 py-2.5 mb-3 text-xs flex items-start gap-2"
        style={{ background: "#FDF2E8", color: "#C2540A", borderLeft: "3px solid #C2540A" }}>
        <FB.UI.Icon name="baseline" size={15} style={{ marginTop: 1 }} />
        <span>{t("baselineWarn")}</span>
      </div>
      {!items && <p className="text-sm text-stone-400">{t("loading")}</p>}
      {items && <FB.CountGrid items={items} safety={{}} lang={lang} counts={counts} setCounts={setCounts} showSafety={false} />}
      {done && (
        <div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-800">
          {t("submitted")} · {done.length} ✓
        </div>
      )}
      <FB.UI.Sticky>
        <button onClick={submit} disabled={state === "sending" || !filled}
          className="w-full h-12 rounded-xl bg-red-700 text-white font-semibold active:scale-95 disabled:opacity-40">
          {state === "sending" ? t("submitting") : `${t("submit")} (${filled})`}
        </button>
      </FB.UI.Sticky>
    </div>
  );
};