window.FB = window.FB || {};

// 共用盘点网格: 折算 + 安全线变黄 + 点名看照片
FB.CountGrid = function CountGrid({ items, safety, lang, counts, setCounts, showSafety = true, highlight = null }) {
  const { useState } = React;
  const t = FB.makeT(lang);
  const [photo, setPhoto] = useState(null);

  function upd(code, key, val) {
    setCounts((c) => ({ ...c, [code]: { ...(c[code] || {}), [key]: val } }));
  }
  const 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 hasCount = (i) => {
    const c = counts[i.code] || {};
    return (c.san !== "" && c.san != null) || (c.ctn !== "" && c.ctn != null);
  };

  // 按 zone 分组
  const groups = {};
  items.forEach((i) => { const z = i.zone || "—"; (groups[z] = groups[z] || []).push(i); });

  return (
    <div>
      {Object.entries(groups).map(([zone, list]) => {
        const zoneFilled = list.filter(hasCount).length;
        return (
        <div key={zone} className="mb-3">
          {/* S3 滚动吸顶 + 每区进度 (top-14 = header 高度) */}
          <div className="sticky top-16 z-10 flex items-center gap-2 px-1 py-1.5 -mx-1"
            style={{ background: "rgba(250,250,249,.95)", backdropFilter: "blur(4px)" }}>
            <span className="rounded-sm" style={{ width: 3, height: 12, background: "#B91C1C" }} />
            <span className="text-[12px] text-stone-600 font-semibold">{zone}</span>
            <span className="ml-auto text-[11px] text-stone-400 tabular-nums">{zoneFilled} / {list.length}</span>
          </div>
          <div className="rounded-xl border border-stone-200 bg-white divide-y divide-stone-100 overflow-hidden">
            {list.map((i) => {
              const sl = safety[i.code] && safety[i.code].safety_line;
              const tot = total(i);
              const below = showSafety && hasCount(i) && sl != null && tot < Number(sl);
              const hot = highlight === i.code;   // 改错回填的行, 黄框提示几秒
              return (
                <div key={i.code} id={"stk_" + i.code} className="flex items-center gap-2 px-3 py-2.5 transition-shadow"
                  style={{
                    background: hot ? "#FBF6E4" : below ? "#FBF6E4" : undefined,
                    boxShadow: hot ? "inset 0 0 0 2px #C2540A" : undefined,
                  }}>
                  <div className="flex-1 min-w-0" onClick={() => setPhoto(i)}>
                    <p className="text-[15px] text-stone-800 truncate leading-snug">{FB.nm(i, lang)}</p>
                    <p className="text-[11px] text-stone-400 flex items-center gap-1">
                      <span>{i.code} · {i.abc_class || "-"}
                        {showSafety && sl != null && <span className="ml-1">· {t("safety")} {Number(sl).toFixed(0)}</span>}</span>
                      <FB.PhotoBtn onClick={() => setPhoto(i)} />
                    </p>
                  </div>
                  <div className="flex items-end gap-1.5 shrink-0">
                    {/* S1 手套尺寸: h-12 + 16px */}
                    <label className="flex flex-col items-center">
                      <span className="text-[9px] text-stone-400 mb-0.5 leading-none">{i.unit || t("loose")}</span>
                      <input type="number" inputMode="decimal"
                        value={(counts[i.code] || {}).san ?? ""} onChange={(e) => upd(i.code, "san", e.target.value)}
                        className="w-16 h-12 px-1 rounded-xl border border-stone-200 text-center text-[16px] tabular-nums" />
                    </label>
                    {i.carton_size ? (
                      <label className="flex flex-col items-center">
                        <span className="text-[9px] text-stone-400 mb-0.5 leading-none">ctn×{Number(i.carton_size)}</span>
                        <input type="number" inputMode="decimal"
                          value={(counts[i.code] || {}).ctn ?? ""} onChange={(e) => upd(i.code, "ctn", e.target.value)}
                          className="w-[52px] h-12 px-1 rounded-xl border border-stone-200 text-center text-[16px] tabular-nums" />
                      </label>
                    ) : null}
                    <div className="w-14 text-right pb-1.5">
                      {/* S5 低于安全线: 数字直接变红 */}
                      <div className="text-[17px] font-bold tabular-nums leading-none"
                        style={{ color: below ? "#A81E12" : "#1C1917" }}>{tot ? Math.round(tot * 100) / 100 : ""}</div>
                      <div className="text-[9px] leading-none mt-1"
                        style={{ color: below ? "#A81E12" : "#A8A29E" }}>{tot ? i.unit : ""}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        );
      })}

      {photo && <FB.PhotoView code={photo.code} name={FB.nm(photo, lang)} lang={lang} onClose={() => setPhoto(null)} />}
    </div>
  );
};

FB.StockTab = function StockTab({ lang, user }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const [items, setItems] = useState(null);
  const [safety, setSafety] = useState({});
  const [counts, setCounts] = useState(() => JSON.parse(localStorage.getItem("fb_stk_draft") || "{}"));
  const [abc, setAbc] = useState("A");
  const [state, setState] = useState("idle");
  const [result, setResult] = useState(null);
  // 改错: 今天交过的清单 + 弹层原地改 (不跳进大列表, 不和新盘点混淆)
  const [todayDone, setTodayDone] = useState([]);
  const [showDone, setShowDone] = useState(false);
  const [fix, setFix] = useState(null);      // {row, val, busy, done, err}
  const L = (zh, vi, en) => (lang === "zh" ? zh : lang === "vi" ? vi : en);

  function loadToday() { FB.api.todayStocktakes().then(setTodayDone); }
  useEffect(() => { FB.api.items().then(setItems); FB.api.safetyMap().then(setSafety); loadToday(); }, []);
  useEffect(() => { localStorage.setItem("fb_stk_draft", JSON.stringify(counts)); }, [counts]);

  // 只重交这一项 → 后端写差额自动纠正, 主列表和其他项完全不动
  async function doFix() {
    if (!fix || fix.val === "" || fix.busy) return;
    const it = (items || []).find((i) => i.code === fix.row.item_code) || {};
    setFix((f) => ({ ...f, busy: true, err: false }));
    const r = await FB.api.submitStocktake({
      store_id: "CK", counted_by: user.name,
      counts: [{ item_code: fix.row.item_code, qty: Number(fix.val), abc_class: it.abc_class }],
    });
    if (!r || r.error || !r.ok) { setFix((f) => ({ ...f, busy: false, err: true })); return; }
    const res = (r.results || [])[0] || {};
    setFix((f) => ({ ...f, busy: false, done: res }));
    loadToday();
    setTimeout(() => setFix(null), 1600);
  }

  const filtered = (items || []).filter((i) => abc === "all" || (i.abc_class || "").toUpperCase() === abc);

  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;
  }
  async function submit() {
    const rows = (items || []).filter((i) => { const c = counts[i.code] || {}; return (c.san ?? "") !== "" || (c.ctn ?? "") !== ""; })
      .map((i) => ({ item_code: i.code, qty: total(i), abc_class: i.abc_class }));
    if (!rows.length) return;
    setState("sending"); setResult(null);
    const r = await FB.api.submitStocktake({ store_id: "CK", counted_by: user.name, counts: rows });
    if (r.error || !r.ok) { setState("error"); return; }
    setState("ok"); setResult(r.results); setCounts({}); localStorage.removeItem("fb_stk_draft");
    loadToday();
  }
  const filled = Object.values(counts).filter((c) => (c.san ?? "") !== "" || (c.ctn ?? "") !== "").length;

  const filledShown = filtered.filter((i) => { const c = counts[i.code] || {}; return (c.san ?? "") !== "" || (c.ctn ?? "") !== ""; }).length;

  // header 精华: 进度文字 + 进度条都发给顶栏 (滚到哪都看得见)
  useEffect(() => {
    if (items && FB.setPageInfo)
      FB.setPageInfo({ text: t("progress") + " " + filledShown + " / " + filtered.length, num: filledShown, den: filtered.length });
  }, [items, filledShown, filtered.length, lang]);

  return (
    <div className="px-3 py-3 max-w-md mx-auto pb-28">
      <div className="mb-3">
        <FB.UI.Seg small options={[["A", t("A")], ["B", t("B")], ["C", t("C")], ["all", t("all")]]} value={abc} onChange={setAbc} />
      </div>

      {/* 今天已盘: 打错了点开改 (改好重交, 后端差额自动纠正) */}
      {todayDone.length > 0 && (
        <div className="mb-3 rounded-xl border border-stone-200 bg-white overflow-hidden">
          <button onClick={() => setShowDone((v) => !v)}
            className="w-full flex items-center gap-2 px-3 py-2.5 text-[12.5px] text-stone-600">
            <FB.UI.Chev open={showDone} />
            <span className="font-semibold">{L("今天已盘", "Đã kiểm hôm nay", "Counted today")} {todayDone.length}</span>
            <span className="ml-auto text-[10.5px] text-stone-400">{L("打错了？点开改", "Sai số? Bấm sửa", "Wrong? Tap to fix")}</span>
          </button>
          {showDone && (
            <div className="divide-y divide-stone-50 border-t border-stone-100">
              {todayDone.map((r) => {
                const it = (items || []).find((i) => i.code === r.item_code) || { code: r.item_code };
                return (
                  <button key={r.id} onClick={() => setFix({ row: r, val: String(Number(r.qty)) })}
                    className="w-full flex items-center gap-2 px-3 py-2.5 text-left active:bg-stone-50">
                    <div className="flex-1 min-w-0">
                      <p className="text-[13.5px] text-stone-800 truncate">{FB.nm(it, lang)}</p>
                      <p className="text-[10.5px] text-stone-400">{r.item_code}{r.counted_by ? " · " + r.counted_by : ""}</p>
                    </div>
                    <span className="text-[15px] font-bold tabular-nums text-stone-900">{Number(r.qty)}</span>
                    <span className="text-stone-300"><FB.UI.Icon name="edit" size={14} /></span>
                  </button>
                );
              })}
            </div>
          )}
        </div>
      )}
      {!items && <p className="text-sm text-stone-400">{t("loading")}</p>}
      {items && <FB.CountGrid items={filtered} safety={safety} lang={lang} counts={counts} setCounts={setCounts} />}

      {/* 改错弹层: 原地改, 不碰主列表 */}
      {fix ? (
        <FB.UI.Sheet onClose={() => !fix.busy && setFix(null)}>
          {(() => {
            const it = (items || []).find((i) => i.code === fix.row.item_code) || { code: fix.row.item_code };
            return (
              <>
                <p className="text-[16px] font-semibold text-stone-900">{FB.nm(it, lang)}</p>
                <p className="text-[12px] text-stone-500 mt-0.5 mb-3">
                  {L("上次交的", "Lần trước", "Last submitted")}: <b className="tabular-nums">{Number(fix.row.qty)}</b> {it.unit || ""}
                  {fix.row.counted_by ? " · " + fix.row.counted_by : ""}
                </p>
                {fix.done ? (
                  <p className="text-[15px] font-semibold py-3 text-center" style={{ color: "#4A7A1C" }}>
                    ✓ {L("已改成", "Đã sửa thành", "Fixed to")} {fix.done.counted} · {t("variance")} {fix.done.variance > 0 ? "+" : ""}{fix.done.variance}
                  </p>
                ) : (
                  <>
                    <input autoFocus type="number" inputMode="decimal" value={fix.val}
                      onChange={(e) => setFix((f) => ({ ...f, val: e.target.value }))}
                      onKeyDown={(e) => e.key === "Enter" && doFix()}
                      className="w-full h-14 px-3 rounded-xl border-2 border-stone-300 text-center text-[22px] font-bold tabular-nums" />
                    <p className="text-[11px] text-stone-400 mt-1.5">
                      {L("填正确的总数(按库存单位), 系统自动写差额校准", "Nhập số đúng, hệ thống tự điều chỉnh", "Enter the correct total; system self-corrects")}
                    </p>
                    {fix.err ? <p className="text-[12px] mt-2" style={{ color: "#A81E12" }}>{t("failed")}</p> : null}
                    <div className="flex gap-2 mt-3">
                      <button onClick={() => setFix(null)} disabled={fix.busy}
                        className="px-5 h-12 rounded-xl border border-stone-200 text-stone-500 text-sm">{L("取消", "Hủy", "Cancel")}</button>
                      <button onClick={doFix} disabled={fix.busy || fix.val === ""}
                        className="flex-1 h-12 rounded-xl bg-red-700 text-white font-semibold disabled:opacity-40">
                        {fix.busy ? "…" : L("重交这一项", "Gửi lại mục này", "Resubmit this item")}
                      </button>
                    </div>
                  </>
                )}
              </>
            );
          })()}
        </FB.UI.Sheet>
      ) : null}
      {result && (
        <div className="mt-4 rounded-xl border border-green-200 bg-green-50 p-3">
          <p className="text-sm font-medium text-green-800 mb-2">{t("submitted")}</p>
          {result.map((r) => (
            <div key={r.item_code} className="flex justify-between text-xs text-green-900 py-0.5">
              <span>{r.item_code}</span><span>{t("variance")}: {r.variance > 0 ? "+" : ""}{r.variance}</span>
            </div>
          ))}
        </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>
  );
};