/* ============================================================
   FACEBOOK OFFICE — window.FacebookOffice  (flagship, 5 rooms)
   ============================================================ */
(function () {
  const { useState } = React;
  const { useT, useLang, Icon, Panel, Badge, Dot, Avatar, Stat, DataTable, PageHead, LineChart, Donut, BarChart } = window.UI;
  const baht = (n) => "฿" + Math.round(n).toLocaleString();

  function RoomTabs({ rooms, active, onChange }) {
    const { lang } = useLang();
    return (
      <div className="seg">
        {rooms.map((r) => (
          <button key={r.key} className={active === r.key ? "on" : ""} onClick={() => onChange(r.key)}>
            {r.en}{lang === "th" ? <span style={{ color: "var(--tx-ghost)", marginLeft: 6, fontSize: 11 }}>{r.th}</span> : null}
          </button>
        ))}
      </div>
    );
  }

  function FilterBar({ children }) {
    return <div style={{ display: "flex", gap: 9, flexWrap: "wrap", alignItems: "center", marginBottom: 16 }}>{children}</div>;
  }
  function Chip({ icon, children, on, onClick }) {
    return <button className={"chip" + (on ? " on" : "")} onClick={onClick}>{icon ? <Icon name={icon} size={14} /> : null}{children}</button>;
  }

  /* ---------------- CHAT & ORDERS ---------------- */
  function ChatOrders() {
    const t = useT(); const D = window.DATA;
    const [status, setStatus] = useState("all");
    const statusMap = { "จัดส่งแล้ว": "ok", "กำลังแพ็ค": "warn", "รอยืนยัน": "warn", "ตีกลับ": "danger", "ลูกค้าปฏิเสธรับ": "danger" };
    let rows = D.orders;
    if (status === "issue") rows = rows.filter((r) => r.st === "danger");
    if (status === "pending") rows = rows.filter((r) => r.status === "รอยืนยัน" || r.status === "กำลังแพ็ค");

    const cols = [
      { key: "id", label: "ORDER", sortable: true, render: (r) => <span className="mono strong">{r.id}</span> },
      { key: "date", label: t("DATE", "วันที่"), render: (r) => <span className="mono" style={{ color: "var(--tx-faint)" }}>{r.date}</span> },
      { key: "cust", label: t("CUSTOMER", "ลูกค้า"), render: (r) => <span className="strong">{r.cust}</span> },
      { key: "items", label: t("ITEMS", "รายการ") },
      { key: "admin", label: t("ADMIN", "แอดมิน"), render: (r) => <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><Avatar ini={r.admin[0]} size={22} ac1="oklch(0.7 0.18 330)" ac2="oklch(0.7 0.16 280)" />{r.admin}</span> },
      { key: "pay", label: t("PAYMENT", "ชำระเงิน"), render: (r) => <Badge kind={r.pay === "COD" ? "warn" : "info"}>{r.pay}{r.cod ? " " + baht(r.cod) : ""}</Badge> },
      { key: "courier", label: t("COURIER", "ขนส่ง"), render: (r) => r.courier === "—" ? <span style={{ color: "var(--tx-ghost)" }}>—</span> : <span><span className="mono" style={{ fontSize: 11 }}>{r.courier}</span><div style={{ fontSize: 10, color: "var(--tx-faint)", fontFamily: "var(--mono)" }}>{r.track}</div></span> },
      { key: "status", label: t("STATUS", "สถานะ"), sortable: true, render: (r) => <Badge kind={statusMap[r.status] || "neutral"} dot>{r.status}</Badge> },
    ];

    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4, 1fr)", marginBottom: 16 }}>
          <Stat label={t("Sales today", "ยอดขายวันนี้")} value={baht(D.kpi.salesToday)} delta="+12.4%" accent="var(--fb)" spark={D.salesTrend} />
          <Stat label={t("Orders today", "ออเดอร์วันนี้")} value={D.kpi.ordersToday} delta="+18 vs avg" accent="var(--fb)" />
          <Stat label={t("Awaiting confirm", "รอยืนยัน")} value="5" delta={t("needs action", "ต้องจัดการ")} deltaDir="flat" accent="var(--warn)" />
          <Stat label={t("Returns / refused", "ตีกลับ / ปฏิเสธ")} value="2" delta="฿1,047" deltaDir="down" accent="var(--danger)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1fr) 312px", alignItems: "start" }}>
          <Panel title={t("Orders", "ออเดอร์")} th={t("from MyOrder export", "จาก MyOrder")}
            right={<><button className="chip"><Icon name="dl" size={14} />{t("Export", "ส่งออก")}</button><button className="btn primary"><Icon name="plus" size={15} />{t("New order", "เปิดออเดอร์")}</button></>}>
            <div style={{ padding: "12px 16px 0" }}>
              <FilterBar>
                <Chip icon="filter" on={status === "all"} onClick={() => setStatus("all")}>{t("All", "ทั้งหมด")} ({D.orders.length})</Chip>
                <Chip on={status === "pending"} onClick={() => setStatus("pending")}>{t("In progress", "กำลังดำเนินการ")}</Chip>
                <Chip on={status === "issue"} onClick={() => setStatus("issue")}>{t("Issues", "มีปัญหา")} (2)</Chip>
                <span style={{ marginLeft: "auto" }}><Chip icon="cal">02 มิ.ย. 2026</Chip></span>
              </FilterBar>
            </div>
            <DataTable columns={cols} rows={rows} initialSort={{ key: "id", dir: "desc" }} />
          </Panel>

          <div style={{ display: "grid", gap: 16 }}>
            <Panel title={t("Chat queue", "คิวแชท")} th={t("live", "")} right={<span className="live-pill"><span className="blip" />24</span>}>
              <div style={{ padding: "8px 10px" }}>
                {[{ n: "คุณมานี", m: "สนใจเซรั่มค่ะ ส่งฟรีไหม", a: "ฟ้า", w: "2 นาที" }, { n: "คุณสมศักดิ์", m: "ของถึงไหนแล้วครับ", a: "มิ้น", w: "5 นาที" }, { n: "คุณกานต์", m: "ขอเปลี่ยนที่อยู่จัดส่ง", a: "ฟ้า", w: "11 นาที" }].map((c, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, padding: "10px 8px", borderBottom: i < 2 ? "1px solid var(--hairline-soft)" : "none" }}>
                    <Avatar ini={c.n.replace("คุณ", "")[0]} size={32} ac1="oklch(0.7 0.16 250)" ac2="oklch(0.72 0.14 290)" />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 600 }}>{c.n}</div>
                      <div style={{ fontSize: 11.5, color: "var(--tx-faint)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.m}</div>
                    </div>
                    <div style={{ textAlign: "right" }}>
                      <div style={{ fontSize: 10, fontFamily: "var(--mono)", color: "var(--tx-ghost)" }}>{c.w}</div>
                      <div style={{ fontSize: 10.5, color: "var(--accent-bright)" }}>{c.a}</div>
                    </div>
                  </div>
                ))}
              </div>
            </Panel>
            <Panel title={t("Daily summary", "สรุปรายวัน")}>
              <div className="panel-pad" style={{ display: "grid", gap: 11 }}>
                {[["Gross sales", "ยอดขายรวม", baht(84200), "var(--tx)"], ["COD orders", "ออเดอร์ COD", "82", "var(--tx)"], ["Transfer", "โอนจ่าย", "56", "var(--tx)"], ["Avg basket", "ยอดเฉลี่ย/บิล", baht(610), "var(--tx)"]].map((r, i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5 }}>
                    <span style={{ color: "var(--tx-faint)" }}>{t(r[0], r[1])}</span><span className="mono" style={{ color: r[3], fontWeight: 600 }}>{r[2]}</span>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- ADMIN TEAM ---------------- */
  function AdminTeam() {
    const t = useT(); const D = window.DATA;
    const admins = D.staff.filter((s) => s.team === "Facebook" && (s.role.includes("Admin")));
    const perf = { "ฟ้า": { orders: 48, follow: 12, pending: 3, resp: "1.4m", load: 78 }, "มิ้น": { orders: 41, follow: 9, pending: 5, resp: "2.1m", load: 64 } };
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("Orders handled", "ออเดอร์ที่รับ")} value="89" delta="+11%" accent="var(--fb)" />
          <Stat label={t("Follow-ups due", "ต้อง follow-up")} value="21" deltaDir="flat" delta={t("today", "วันนี้")} accent="var(--warn)" />
          <Stat label={t("Avg response", "ตอบเฉลี่ย")} value="1.7" unit="min" delta="-0.3m" accent="var(--ok)" />
          <Stat label={t("Pending tasks", "งานค้าง")} value="8" deltaDir="flat" delta={t("across team", "ทั้งทีม")} accent="var(--accent)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
          {admins.map((a) => {
            const p = perf[a.nick];
            return (
              <Panel key={a.id}>
                <div className="panel-pad" style={{ display: "flex", gap: 16, alignItems: "center" }}>
                  <Avatar ini={a.nick[0]} size={56} ac1={a.ac1} ac2={a.ac2} />
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontSize: 16, fontWeight: 700 }}>{a.nick}</span>
                      <Badge kind={a.status === "online" ? "ok" : a.status === "busy" ? "warn" : "neutral"} dot>{a.status === "online" ? t("online", "ออนไลน์") : a.status === "busy" ? t("busy", "ไม่ว่าง") : t("offline", "ออฟไลน์")}</Badge>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--tx-faint)" }}>{a.role} · {a.roleTh}</div>
                  </div>
                  <button className="chip"><Icon name="chat" size={14} />{t("Message", "ทัก")}</button>
                </div>
                <div style={{ borderTop: "1px solid var(--hairline-soft)", padding: "14px 18px", display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10 }}>
                  {[[p.orders, t("orders", "ออเดอร์")], [p.follow, t("follow-up", "ตามต่อ")], [p.pending, t("pending", "ค้าง"), p.pending > 4 ? "var(--warn)" : null], [p.resp, t("response", "ตอบ")]].map((c, i) => (
                    <div key={i}>
                      <div style={{ fontSize: 18, fontWeight: 700, color: c[2] || "var(--tx)" }} className="mono">{c[0]}</div>
                      <div style={{ fontSize: 10.5, color: "var(--tx-faint)" }}>{c[1]}</div>
                    </div>
                  ))}
                </div>
                <div style={{ padding: "0 18px 16px" }}>
                  <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, color: "var(--tx-faint)", marginBottom: 5 }}><span>{t("Workload", "ภาระงาน")}</span><span>{p.load}%</span></div>
                  <div style={{ height: 6, background: "var(--panel-3)", borderRadius: 99 }}>
                    <div style={{ width: p.load + "%", height: "100%", borderRadius: 99, background: p.load > 75 ? "var(--warn)" : "var(--fb-bright)", boxShadow: "0 0 8px var(--fb)" }} />
                  </div>
                </div>
              </Panel>
            );
          })}
        </div>
      </div>
    );
  }

  /* ---------------- CONTENT ROOM ---------------- */
  function ContentRoom() {
    const t = useT(); const D = window.DATA;
    const colMeta = { "ไอเดีย": { en: "Idea", c: "var(--tx-faint)" }, "กำลังทำ": { en: "In progress", c: "var(--info)" }, "รอลง": { en: "Ready", c: "var(--warn)" }, "ลงแล้ว": { en: "Posted", c: "var(--ok)" } };
    const typeIco = { "คลิป": "play", "โพสต์": "chat", "รูป": "store", "creative ads": "spark" };
    return (
      <div className="fade-in">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 16 }}>
          <div className="eyebrow">{t("Content pipeline · 8 items", "คอนเทนต์ในไปป์ไลน์ · 8 ชิ้น")}</div>
          <button className="btn primary"><Icon name="plus" size={15} />{t("New content", "เพิ่มคอนเทนต์")}</button>
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", alignItems: "start" }}>
          {Object.keys(D.content).map((col) => (
            <div key={col} className="panel" style={{ background: "oklch(0.2 0.03 268 / 0.5)" }}>
              <div className="panel-head" style={{ padding: "12px 14px" }}>
                <span className="sdot" style={{ background: colMeta[col].c, boxShadow: `0 0 7px ${colMeta[col].c}` }} />
                <h3 style={{ fontSize: 12.5 }}>{colMeta[col].en}<span className="th">{col}</span></h3>
                <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 11, color: "var(--tx-faint)" }}>{D.content[col].length}</span>
              </div>
              <div style={{ padding: 10, display: "grid", gap: 9 }}>
                {D.content[col].map((card, i) => (
                  <div key={i} style={{ background: "var(--panel)", border: "1px solid var(--hairline-soft)", borderRadius: 11, padding: 12 }}>
                    <div className="imgph" style={{ height: 64, marginBottom: 9, fontSize: 9 }}>{t("thumbnail", "ภาพปก")}</div>
                    <div style={{ fontSize: 12.5, fontWeight: 600, lineHeight: 1.3, marginBottom: 8 }}>{card.t}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "space-between" }}>
                      <Badge kind="neutral"><Icon name={typeIco[card.type] || "spark"} size={11} />{card.type}</Badge>
                      <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, color: "var(--tx-faint)" }}><Avatar ini={card.owner[0]} size={18} ac1="oklch(0.72 0.18 290)" ac2="oklch(0.74 0.16 330)" />{card.owner}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  /* ---------------- ADS ROOM ---------------- */
  function AdsRoom() {
    const t = useT(); const D = window.DATA;
    const stMap = { "ยิงอยู่": "ok", "พักยิง": "neutral", "ขาดทุน": "danger" };
    const cols = [
      { key: "id", label: "CAMPAIGN", render: (r) => <div className="th-cell"><span className="mono strong">{r.id}</span><span className="sub">{r.page} · {r.product}</span></div> },
      { key: "spend", label: t("AD SPEND", "ค่าแอด"), sortable: true, render: (r) => <span className="num strong">{baht(r.spend)}</span> },
      { key: "sales", label: t("SALES", "ยอดขาย"), sortable: true, render: (r) => <span className="num">{baht(r.sales)}</span> },
      { key: "orders", label: t("ORDERS", "ออเดอร์"), render: (r) => <span className="num">{r.orders}</span> },
      { key: "roas", label: "ROAS", sortable: true, render: (r) => <span className="num strong" style={{ color: r.roas >= 4 ? "var(--ok)" : r.roas >= 2.5 ? "var(--warn)" : "var(--danger)" }}>{r.roas.toFixed(2)}×</span> },
      { key: "adp", label: t("AD %", "% ค่าแอด"), sortable: true, render: (r) => <span className="num" style={{ color: r.adp > 35 ? "var(--danger)" : r.adp > 25 ? "var(--warn)" : "var(--tx-dim)" }}>{r.adp.toFixed(1)}%</span> },
      { key: "profit", label: t("PROFIT", "กำไร"), sortable: true, render: (r) => <span className="num strong" style={{ color: r.profit >= 0 ? "var(--ok)" : "var(--danger)" }}>{r.profit >= 0 ? "+" : ""}{baht(r.profit)}</span> },
      { key: "status", label: t("STATUS", "สถานะ"), render: (r) => <Badge kind={stMap[r.status]} dot>{r.status}</Badge> },
    ];
    const losing = D.campaigns.find((c) => c.profit < 0);
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("Ad spend today", "ค่าแอดวันนี้")} value={baht(D.kpi.adSpendToday)} delta="+8.2%" deltaDir="down" accent="var(--fb)" />
          <Stat label={t("Blended ROAS", "ROAS รวม")} value="4.71×" delta="+0.4" accent="var(--ok)" />
          <Stat label={t("Ad % of sales", "% ค่าแอด")} value="22.8%" delta={t("target 22%", "เป้า 22%")} deltaDir="flat" accent="var(--warn)" />
          <Stat label={t("Active campaigns", "แคมเปญที่ยิง")} value="4" unit="/ 6" delta={t("1 losing", "ขาดทุน 1")} deltaDir="down" accent="var(--danger)" />
        </div>
        {losing && (
          <div className="panel" style={{ borderColor: "oklch(0.66 0.2 27 / 0.4)", background: "oklch(0.66 0.2 27 / 0.08)", marginBottom: 16, padding: "14px 18px", display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ color: "var(--danger)" }}><Icon name="warn" size={22} /></span>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 700, fontSize: 13.5 }}>{t("Campaign losing money — consider pausing", "แคมเปญขาดทุน — ควรพิจารณาหยุดยิง")}</div>
              <div style={{ fontSize: 12, color: "var(--tx-dim)" }}><span className="mono">{losing.id}</span> · {losing.product} · ROAS {losing.roas}× · {t("ad cost", "ค่าแอด")} {losing.adp}% · {baht(losing.profit)}</div>
            </div>
            <button className="btn">{t("Pause", "พักยิง")}</button>
            <button className="btn primary">{t("Review", "ดูรายละเอียด")}</button>
          </div>
        )}
        <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 300px", alignItems: "start" }}>
          <Panel title={t("Campaigns", "แคมเปญ")} th="Facebook Ads" right={<button className="chip"><Icon name="cal" size={14} />{t("Last 30 days", "30 วัน")}</button>}>
            <DataTable columns={cols} rows={D.campaigns} initialSort={{ key: "spend", dir: "desc" }} />
          </Panel>
          <Panel title={t("Spend vs sales", "ค่าแอด vs ยอดขาย")}>
            <div className="panel-pad">
              <div className="legend" style={{ marginBottom: 8 }}>
                <span className="lg"><i style={{ background: "var(--fb)" }} />{t("Sales", "ยอดขาย")}</span>
                <span className="lg"><i style={{ background: "var(--warn)" }} />{t("Spend", "ค่าแอด")}</span>
              </div>
              <LineChart height={150} labels={["W1", "W2", "W3", "W4"]} series={[
                { color: "var(--fb-bright)", data: [62, 71, 78, 84] },
                { color: "var(--warn)", data: [14, 17, 16, 17] },
              ]} />
              <div style={{ marginTop: 14, display: "grid", gap: 9 }}>
                {D.campaigns.slice(0, 3).map((c) => (
                  <div key={c.id} style={{ fontSize: 11.5 }}>
                    <div style={{ display: "flex", justifyContent: "space-between" }}><span style={{ color: "var(--tx-dim)" }}>{c.product}</span><span className="mono">{c.roas.toFixed(2)}×</span></div>
                    <div style={{ height: 5, background: "var(--panel-3)", borderRadius: 99, marginTop: 4 }}><div style={{ width: Math.min(100, c.roas / 7 * 100) + "%", height: "100%", borderRadius: 99, background: c.roas >= 4 ? "var(--ok)" : "var(--warn)" }} /></div>
                  </div>
                ))}
              </div>
            </div>
          </Panel>
        </div>
      </div>
    );
  }

  /* ---------------- RETURNS & COD ---------------- */
  function ReturnsCOD() {
    const t = useT(); const D = window.DATA;
    const stMap = { "เข้าแล้ว": "ok", "ค้างนำส่ง": "warn", "ตีกลับ": "danger", "ลูกค้าปฏิเสธ": "danger" };
    const cols = [
      { key: "track", label: t("TRACKING", "เลขพัสดุ"), render: (r) => <span className="mono strong">{r.track}</span> },
      { key: "order", label: "ORDER", render: (r) => <span className="mono" style={{ color: "var(--tx-faint)" }}>{r.order}</span> },
      { key: "courier", label: t("COURIER", "ขนส่ง"), render: (r) => <Badge kind={r.courier === "Flash" ? "warn" : "info"}>{r.courier}</Badge> },
      { key: "expected", label: t("COD", "ยอด COD"), sortable: true, render: (r) => <span className="num strong">{baht(r.expected)}</span> },
      { key: "days", label: t("AGE", "ค้าง"), sortable: true, render: (r) => <span className="num" style={{ color: r.days >= 5 ? "var(--danger)" : r.days >= 2 ? "var(--warn)" : "var(--tx-faint)" }}>{r.days === 0 ? "—" : r.days + "d"}</span> },
      { key: "status", label: t("STATUS", "สถานะ"), render: (r) => <Badge kind={stMap[r.status]} dot>{r.status}</Badge> },
      { key: "act", label: "", render: (r) => r.st !== "ok" ? <button className="chip" style={{ padding: "5px 10px" }}>{t("Resolve", "จัดการ")}</button> : <span style={{ color: "var(--ok)" }}><Icon name="check" size={15} /></span> },
    ];
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("COD received", "COD เข้าแล้ว")} value={baht(74600)} delta="+6.1%" accent="var(--ok)" />
          <Stat label={t("COD pending", "COD ค้างนำส่ง")} value={baht(1000)} deltaDir="flat" delta={t("2 parcels", "2 พัสดุ")} accent="var(--warn)" />
          <Stat label={t("COD returned", "COD ตีกลับ")} value={baht(1047)} deltaDir="down" delta={t("2 parcels", "2 พัสดุ")} accent="var(--danger)" />
          <Stat label={t("Return rate", "อัตราตีกลับ")} value="1.4%" delta="-0.2%" accent="var(--accent)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 300px", alignItems: "start" }}>
          <Panel title={t("Parcel & COD tracking", "ติดตามพัสดุ & COD")} th="Flash / SPX" right={<><button className="chip">Flash</button><button className="chip">SPX</button></>}>
            <DataTable columns={cols} rows={D.codRows} initialSort={{ key: "days", dir: "desc" }} />
          </Panel>
          <div style={{ display: "grid", gap: 16 }}>
            <Panel title={t("Courier split", "แยกตามขนส่ง")}>
              <div className="panel-pad" style={{ display: "flex", gap: 18, justifyContent: "center" }}>
                <div style={{ textAlign: "center" }}><Donut value={62} color="var(--warn)" label="62%" size={92} /><div style={{ fontSize: 11.5, marginTop: 8, color: "var(--tx-dim)" }}>Flash</div></div>
                <div style={{ textAlign: "center" }}><Donut value={38} color="var(--info)" label="38%" size={92} /><div style={{ fontSize: 11.5, marginTop: 8, color: "var(--tx-dim)" }}>SPX</div></div>
              </div>
            </Panel>
            <Panel title={t("Problem queue", "งานปัญหา")} right={<Badge kind="danger">4</Badge>}>
              <div style={{ padding: "8px 10px" }}>
                {D.codRows.filter((r) => r.st !== "ok").slice(0, 4).map((r, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "center", padding: "9px 8px", borderBottom: i < 3 ? "1px solid var(--hairline-soft)" : "none" }}>
                    <Dot kind={r.st} />
                    <div style={{ flex: 1 }}><div className="mono" style={{ fontSize: 11.5, fontWeight: 600 }}>{r.track}</div><div style={{ fontSize: 10.5, color: "var(--tx-faint)" }}>{r.status} · {r.days}d</div></div>
                    <span className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{baht(r.expected)}</span>
                  </div>
                ))}
              </div>
            </Panel>
          </div>
        </div>
      </div>
    );
  }

  /* ---------------- SHELL ---------------- */
  function FacebookOffice({ onNav }) {
    const t = useT();
    const Hero = window.OfficeHero;
    const [room, setRoom] = useState("chat");
    const rooms = [
      { key: "chat", en: "Chat & Orders", th: "แชท & ออเดอร์" },
      { key: "admin", en: "Admin Team", th: "ทีมแอดมิน" },
      { key: "content", en: "Content", th: "คอนเทนต์" },
      { key: "ads", en: "Ads Room", th: "ห้องค่าแอด" },
      { key: "returns", en: "Returns & COD", th: "ตีกลับ & COD" },
    ];
    return (
      <div className="main">
        <Hero office="facebook" />
        <PageHead
          crumbs={<><a onClick={() => onNav("city")}>{t("System Map", "แผนที่ระบบ")}</a><Icon name="chev" size={12} /><span style={{ color: "var(--fb-bright)" }}>Facebook Office</span></>}
          title="Facebook Office" th="สำนักงานเฟซบุ๊ก"
          right={<RoomTabs rooms={rooms} active={room} onChange={setRoom} />} />
        {room === "chat" && <ChatOrders />}
        {room === "admin" && <AdminTeam />}
        {room === "content" && <ContentRoom />}
        {room === "ads" && <AdsRoom />}
        {room === "returns" && <ReturnsCOD />}
      </div>
    );
  }

  window.FacebookOffice = FacebookOffice;
})();