window.FB = window.FB || {};
FB.ProductionTab = function ProductionTab({ lang, user }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const [goods, setGoods] = useState(null);
  const [batch, setBatch] = useState(() => FB.draft.get("prod", {}));
  const [search, setSearch] = useState("");
  const [state, setState] = useState("idle");
  const [result, setResult] = useState(null);
  const [photo, setPhoto] = useState(null);
  const [sug, setSug] = useState(null);
  const [showSug, setShowSug] = useState(true);

  useEffect(() => { FB.api.finishedForProd().then(setGoods); FB.api.productionSuggest().then(setSug); }, []);
  useEffect(() => { FB.draft.set("prod", batch); }, [batch]);
  function applySuggest() {
    const next = {};
    (sug || []).forEach((s) => { if (s.suggest_batches > 0) next[s.output_code] = String(s.suggest_batches); });
    setBatch(next); setShowSug(false);
  }
  const nm = (g) => lang === "zh" ? g.name_cn : lang === "vi" ? (g.name_vn || g.name_en || g.name_cn) : (g.name_en || g.name_cn);
  const list = (goods || []).filter((g) => { const s = search.trim().toLowerCase(); return !s || g.code.toLowerCase().includes(s) || (g.name_en || "").toLowerCase().includes(s) || (g.name_cn || "").includes(search); });
  const chosen = Object.entries(batch).filter(([, n]) => Number(n) > 0);

  useEffect(() => {
    if (goods && FB.setPageInfo)
      FB.setPageInfo((lang === "zh" ? "已选 " : lang === "vi" ? "Đã chọn " : "Chosen ") + chosen.length);
  }, [goods, chosen.length, lang]);

  async function submit() {
    if (!chosen.length) return;
    setState("sending"); setResult(null);
    const lines = chosen.map(([output_code, n]) => ({ output_code, batch: Number(n) }));
    const r = await FB.api.submitProduction({ lines, produced_by: user.name });
    if (r.error || !r.ok) { setState("error"); return; }
    setState("ok"); setResult(r.results); setBatch({}); FB.draft.clear("prod");
  }

  return (
    <div className="px-3 py-3 max-w-md mx-auto pb-28">
      <div className="relative mb-3">
        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400"><FB.UI.Icon name="search" size={15} /></span>
        <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t("search")}
          className="w-full pl-9 pr-3 h-11 rounded-xl border border-stone-300 text-sm" />
      </div>
      {sug && sug.length > 0 && showSug && (
        <div className="rounded-xl border border-stone-200 bg-white p-3 mb-3" style={{ borderLeft: "3px solid #B91C1C" }}>
          <div className="flex justify-between items-center mb-1.5">
            <p className="text-[13px] font-semibold flex items-center gap-1.5" style={{ color: "#B91C1C" }}>
              <FB.UI.Icon name="production" size={14} />{lang === "zh" ? "本周建议" : lang === "vi" ? "Đề xuất tuần" : "Weekly suggestion"}
            </p>
            <button onClick={() => setShowSug(false)} className="w-7 h-7 rounded-lg flex items-center justify-center text-stone-400 active:bg-stone-100"><FB.UI.Icon name="x" size={13} /></button>
          </div>
          <div className="max-h-40 overflow-y-auto">
            {sug.filter((s) => s.suggest_batches > 0).map((s) => (
              <div key={s.output_code} className="flex justify-between py-0.5 text-[12px]">
                <span className="text-stone-700">
                  {lang === "zh" ? s.name_cn : lang === "vi" ? (s.name_vn || s.name_en) : (s.name_en || s.name_cn)}
                  {s.data_source === "seed" && <span className="text-stone-400 ml-1">~</span>}
                </span>
                <span className="font-medium tabular-nums" style={{ color: "#B91C1C" }}>{s.suggest_batches} {t("batch")}</span>
              </div>
            ))}
          </div>
          <button onClick={applySuggest}
            className="w-full h-10 rounded-xl bg-red-700 text-white text-[12.5px] font-semibold mt-2">
            {lang === "zh" ? "全部填入" : lang === "vi" ? "Điền tất cả" : "Fill all"}
          </button>
          <p className="text-[10px] text-stone-400 mt-1.5">
            {lang === "zh" ? "~ = 用估算值算的，出货记录满7笔后会自动变准" : lang === "vi" ? "~ = ước tính" : "~ = estimated"}
          </p>
        </div>
      )}
      {sug && !showSug && (
        <button onClick={() => setShowSug(true)} className="w-full h-10 rounded-xl border border-stone-200 bg-white text-[12px] text-stone-500 mb-3 flex items-center justify-center gap-1.5">
          <FB.UI.Icon name="production" size={13} />{lang === "zh" ? "看本周建议" : lang === "vi" ? "Xem đề xuất" : "Suggestion"}
        </button>
      )}
      <p className="text-[11px] text-stone-400 px-1 mb-1">{t("production")} · {t("addProd")}</p>
      {!goods && <p className="text-sm text-stone-400">{t("loading")}</p>}
      <div className="rounded-xl border border-stone-200 bg-white divide-y divide-stone-100 overflow-hidden">
        {list.map((g) => {
          const n = batch[g.code] || "";
          return (
            <div key={g.code} className="flex items-center gap-2 px-3 py-2.5" style={Number(n) > 0 ? { background: "#FCEDEA" } : {}}>
              <div className="flex-1 min-w-0" onClick={() => setPhoto({ code: g.code, name: nm(g) })}>
                <p className="text-[15px] text-stone-800 truncate leading-snug">{nm(g)}</p>
                <p className="text-[11px] text-stone-400 flex items-center gap-1">
                  <span>{g.code} · {g["一批几包"] ? g["一批几包"] + "/" + t("batch") : ""}</span>
                  <FB.PhotoBtn onClick={() => setPhoto({ code: g.code, name: nm(g) })} />
                </p>
                {/* 「一批」是多少 (定义住 TodayTab.jsx 的 FB.BATCH_NOTE, 两页共用) */}
                {FB.BATCH_NOTE && FB.BATCH_NOTE[g.code] ? (
                  <p className="text-[11px] mt-1 px-1.5 py-0.5 rounded" style={{ background: "#FBF6E5", color: "#7A5E06" }}>
                    ⚖️ {FB.BATCH_NOTE[g.code][lang === "vi" ? "vn" : lang === "zh" ? "cn" : "en"]}
                  </p>
                ) : null}
              </div>
              <FB.UI.Qty value={Number(n) || 0} unit={t("batch")}
                onChange={(v) => setBatch((b) => ({ ...b, [g.code]: v ? String(v) : "" }))} />
            </div>
          );
        })}
      </div>
      <p className="text-[11px] text-stone-400 mt-2 px-1">↺ {lang === "zh" ? "提交=成品入库+按BOM扣原料" : lang === "vi" ? "Gửi = nhập thành phẩm + trừ nguyên liệu theo BOM" : "Submit = yield in + consume materials by BOM"}</p>
      {result && (
        <div className="mt-3 rounded-xl border border-green-200 bg-green-50 p-3 text-sm text-green-800">
          {t("submitted")} · {result.map((r) => r.output_code + "×" + r.batch).join(", ")}
        </div>
      )}
      {photo && <FB.PhotoView code={photo.code} name={photo.name} lang={lang} onClose={() => setPhoto(null)} />}

      <FB.UI.Sticky>
        <button onClick={submit} disabled={state === "sending" || !chosen.length}
          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")} (${chosen.length})`}
        </button>
      </FB.UI.Sticky>
    </div>
  );
};