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

// 门店回单 (v2 实收回写) — 店里按「确认收货」后, 实收数写回系统, 这页看:
// 哪张单还没回、哪行「实收 ≠ 实发」。全收齐就一个绿勾, 不用点开。
// 入口: 设置 → 自选导航 (可把 签到 换成这页); ☰ 菜单里也有。WhatsApp 收货报缺过渡期照发。
FB.RecvBackTab = function RecvBackTab({ lang, user, embedded }) {
  const { useState, useEffect } = React;
  const t = FB.makeT(lang);
  const L = (zh, vi, en) => (lang === "zh" ? zh : lang === "vi" ? vi : en);
  const [orders, setOrders] = useState(null);
  const [names, setNames] = useState({});
  const [open, setOpen] = useState(null);

  useEffect(() => {
    FB.api.recentReceipts(7).then(setOrders);
    FB.api.sellPrices().then((ps) => {
      const m = {}; (ps || []).forEach((p) => { m[p.sell_code] = p; }); setNames(m);
    });
  }, []);

  const nm = (sc) => { const p = names[sc] || {}; const it = p.items || {};
    return lang === "zh" ? (it.name_cn || p.name_en || sc)
         : lang === "vi" ? (it.name_vn || p.name_en || sc) : (p.name_en || sc); };

  const judge = (o) => {
    if (!o.receipt_at) return { k: "none", diffs: [] };
    const diffs = (o.items || []).filter((it) =>
      it.qty_received != null && Number(it.qty_received) !== Number(it.qty_shipped ?? 0));
    return diffs.length ? { k: "diff", diffs } : { k: "ok", diffs: [] };
  };

  return (
    <div className={embedded ? "px-3" : "px-3 py-3 max-w-md mx-auto pb-24"}>
      <p className={embedded ? "text-sm font-semibold text-stone-800 mb-0.5" : "text-[16px] font-semibold text-stone-900 mb-0.5"}>{t("recvback")}</p>
      <p className="text-[11px] text-stone-400 mb-3">
        {L("最近 7 天 · 店里确认收货后自动更新", "7 ngày gần nhất · tự cập nhật", "last 7 days · auto-updates")}</p>
      {orders == null && <p className="text-sm text-stone-400">{t("loading")}</p>}
      {orders != null && !orders.length && <p className="text-sm text-stone-400">
        {L("最近没有已发的单", "Chưa có đơn giao", "No shipped orders")}</p>}
      {(orders || []).map((o) => {
        const sn = (FB.STORES.find((s) => s.id === o.store_id) || {}).name || o.store_id;
        const j = judge(o);
        const chip = j.k === "none"
          ? { txt: L("未回单", "Chưa xác nhận", "no receipt"), bg: "#F5F5F4", fg: "#78716C" }
          : j.k === "ok"
          ? { txt: L("全收齐 ✓", "Đủ ✓", "all in ✓"), bg: "#F0F7E8", fg: "#4A7A1C" }
          : { txt: L("差异 ", "Lệch ", "diff ") + j.diffs.length, bg: "#FCEDEA", fg: "#A81E12" };
        const isOpen = open === o.id;
        return (
          <button key={o.id} onClick={() => setOpen(isOpen ? null : o.id)}
            className="w-full text-left rounded-xl border bg-white p-3 mb-2"
            style={{ borderColor: j.k === "diff" ? "rgba(168,30,18,.4)" : "#E7E5E4",
                     borderLeft: "3px solid " + (j.k === "diff" ? "#A81E12" : j.k === "ok" ? "#4A7A1C" : "#D6D3D1") }}>
            <div className="flex items-center gap-2">
              <p className="text-sm font-medium text-stone-800 flex-1 min-w-0 truncate">
                {sn} · {o.want_date || o.order_date}</p>
              <span className="text-[11px] font-semibold rounded-md px-2 py-0.5 shrink-0"
                style={{ background: chip.bg, color: chip.fg }}>{chip.txt}</span>
            </div>
            <p className="text-[10.5px] text-stone-400 mt-0.5 tabular-nums truncate">
              {o.order_ref}{o.receipt_by ? " · " + o.receipt_by : ""}</p>
            {isOpen && j.k === "diff" && (
              <div className="mt-2 border-t border-stone-100 pt-1.5">
                {j.diffs.map((it) => (
                  <p key={it.sell_code} className="text-[12px] py-0.5 tabular-nums" style={{ color: "#791F1F" }}>
                    {it.sell_code} {nm(it.sell_code)} — {L("发", "giao", "sent")} {Number(it.qty_shipped ?? 0)} ·{" "}
                    {L("实收", "nhận", "got")} <b>{Number(it.qty_received)}</b></p>
                ))}
              </div>
            )}
            {isOpen && j.k !== "diff" && (
              <p className="mt-1.5 text-[11px] text-stone-400">
                {j.k === "ok" ? L("每一行实收 = 实发", "Tất cả khớp", "every line matches")
                  : L("店里还没按「确认收货」", "Cửa hàng chưa xác nhận", "store has not confirmed yet")}</p>
            )}
          </button>
        );
      })}
    </div>
  );
};