/* ============================================================
   FINANCE OFFICE — window.FinanceOffice
   ============================================================ */
(function () {
  const { useState } = React;
  const { useT, useLang, Icon, Panel, Badge, Stat, DataTable, PageHead, LineChart, Donut } = 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>;
  }

  const daily = [
    { date: "02 มิ.ย.", sales: 84200, ad: 16800, cost: 31400, ship: 6900, cod: 1680, pack: 1240, net: 21840 },
    { date: "01 มิ.ย.", sales: 79100, ad: 18200, cost: 29800, ship: 6400, cod: 1560, pack: 1180, net: 16760 },
    { date: "31 พ.ค.", sales: 88600, ad: 15900, cost: 33100, ship: 7100, cod: 1720, pack: 1310, net: 24470 },
    { date: "30 พ.ค.", sales: 74300, ad: 17100, cost: 28200, ship: 6100, cod: 1480, pack: 1090, net: 16230 },
    { date: "29 พ.ค.", sales: 91200, ad: 16400, cost: 34000, ship: 7400, cod: 1810, pack: 1360, net: 25830 },
  ];

  function DailyProfit() {
    const t = useT(); const D = window.DATA;
    const cols = [
      { key: "date", label: t("DATE", "วันที่"), render: (r) => <span className="mono strong">{r.date}</span> },
      { key: "sales", label: t("SALES", "ยอดขาย"), sortable: true, render: (r) => <span className="num strong">{baht(r.sales)}</span> },
      { key: "ad", label: t("AD COST", "ค่าแอด"), sortable: true, render: (r) => <span className="num" style={{ color: "var(--warn)" }}>{baht(r.ad)}</span> },
      { key: "cost", label: t("PRODUCT COST", "ต้นทุนสินค้า"), render: (r) => <span className="num">{baht(r.cost)}</span> },
      { key: "ship", label: t("SHIPPING", "ค่าส่ง"), render: (r) => <span className="num">{baht(r.ship)}</span> },
      { key: "cod", label: t("COD FEE", "ค่า COD"), render: (r) => <span className="num" style={{ color: "var(--tx-faint)" }}>{baht(r.cod)}</span> },
      { key: "pack", label: t("PACKING", "ค่าแพ็ค"), render: (r) => <span className="num" style={{ color: "var(--tx-faint)" }}>{baht(r.pack)}</span> },
      { key: "net", label: t("NET PROFIT", "กำไรสุทธิ"), sortable: true, render: (r) => <span className="num strong" style={{ color: "var(--ok)" }}>{baht(r.net)}</span> },
    ];
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("Net profit today", "กำไรสุทธิวันนี้")} value={baht(D.kpi.profitToday)} delta="+30.3%" accent="var(--ok)" spark={D.profitTrend} />
          <Stat label={t("Gross sales today", "ยอดขายวันนี้")} value={baht(D.kpi.salesToday)} delta="+6.4%" accent="var(--ok)" />
          <Stat label={t("Profit margin", "อัตรากำไร")} value="25.9%" delta="+2.1%" accent="var(--ok)" />
          <Stat label={t("Ad % of sales", "% ค่าแอด")} value="19.9%" deltaDir="flat" delta={t("target 22%", "เป้า 22%")} accent="var(--accent)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "minmax(0,1fr) 300px", alignItems: "start", marginBottom: 16 }}>
          <Panel title={t("Profit over time", "กำไรตามช่วงเวลา")} th={t("net profit · last 10 days", "10 วันล่าสุด")} right={<div className="seg"><button>7D</button><button className="on">10D</button><button>30D</button></div>}>
            <div className="panel-pad">
              <LineChart height={210} labels={["24", "25", "26", "27", "28", "29", "30", "31", "01", "02"]} series={[{ color: "var(--ok)", data: D.profitTrend }]} yMax={26} />
            </div>
          </Panel>
          <Panel title={t("Cost breakdown", "สัดส่วนต้นทุน")} th={t("today", "วันนี้")}>
            <div className="panel-pad" style={{ display: "grid", gap: 12 }}>
              {[["Product cost", "ต้นทุนสินค้า", 31400, "var(--shopee)"], ["Ad spend", "ค่าแอด", 16800, "var(--warn)"], ["Shipping", "ค่าส่ง", 6900, "var(--info)"], ["COD + packing", "COD + แพ็ค", 2920, "var(--tx-faint)"]].map((r, i) => {
                const tot = 58020, pct = Math.round(r[2] / tot * 100);
                return (
                  <div key={i}>
                    <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, marginBottom: 4 }}><span style={{ color: "var(--tx-dim)" }}>{t(r[0], r[1])}</span><span className="mono" style={{ fontWeight: 600 }}>{baht(r[2])}</span></div>
                    <div style={{ height: 6, background: "var(--panel-3)", borderRadius: 99 }}><div style={{ width: pct + "%", height: "100%", borderRadius: 99, background: r[3] }} /></div>
                  </div>
                );
              })}
            </div>
          </Panel>
        </div>
        <Panel title={t("Daily P&L", "กำไร-ขาดทุนรายวัน")} th={t("auto-calculated — no manual sheet", "คำนวณอัตโนมัติ")} right={<button className="chip"><Icon name="dl" size={14} />{t("Export", "ส่งออก")}</button>}>
          <DataTable columns={cols} rows={daily} initialSort={{ key: "date", dir: "desc" }} />
        </Panel>
      </div>
    );
  }

  function ProductProfit() {
    const t = useT(); const D = window.DATA;
    const rows = D.products.filter((p) => p.price > 0).map((p) => {
      const sales = p.sold30 * p.price, cost = p.sold30 * p.cost, profit = sales - cost - sales * 0.22;
      return { ...p, sales, profit, units: p.sold30, margin: Math.round(profit / sales * 100) };
    });
    const cols = [
      { key: "name", label: t("PRODUCT", "สินค้า"), render: (r) => <div className="th-cell"><span className="strong">{r.alias}</span><span className="sub">{r.sku}</span></div> },
      { key: "units", label: t("UNITS (30D)", "ขาย 30 วัน"), sortable: true, render: (r) => <span className="num">{r.units}</span> },
      { key: "sales", label: t("SALES", "ยอดขาย"), sortable: true, render: (r) => <span className="num strong">{baht(r.sales)}</span> },
      { key: "margin", label: t("MARGIN", "อัตรากำไร"), sortable: true, render: (r) => <span className="num" style={{ color: r.margin >= 25 ? "var(--ok)" : r.margin >= 12 ? "var(--warn)" : "var(--danger)" }}>{r.margin}%</span> },
      { key: "profit", label: t("PROFIT", "กำไร"), sortable: true, render: (r) => <span className="num strong" style={{ color: "var(--ok)" }}>{baht(r.profit)}</span> },
    ];
    return (
      <div className="fade-in">
        <Panel title={t("Profit by product", "กำไรแยกสินค้า")} th={t("last 30 days · after ad cost", "30 วัน · หักค่าแอด")} right={<button className="chip"><Icon name="cal" size={14} />{t("30 days", "30 วัน")}</button>}>
          <DataTable columns={cols} rows={rows} initialSort={{ key: "profit", dir: "desc" }} />
        </Panel>
      </div>
    );
  }

  function AdCost() {
    const t = useT();
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(3,1fr)", marginBottom: 16 }}>
          <Stat label={t("Total ad spend", "ค่าแอดรวม")} value={baht(498000)} delta="+4.1%" deltaDir="down" accent="var(--warn)" />
          <Stat label={t("Blended ROAS", "ROAS รวม")} value="5.01×" delta="+0.3" accent="var(--ok)" />
          <Stat label={t("Ad % of sales", "% ค่าแอดต่อยอดขาย")} value="20.4%" delta={t("target 22%", "เป้า 22%")} accent="var(--ok)" />
        </div>
        <div className="grid" style={{ gridTemplateColumns: "repeat(2,1fr)" }}>
          <Panel title={t("Spend by channel", "ค่าแอดแยกช่องทาง")} th="Facebook / TikTok">
            <div className="panel-pad" style={{ display: "flex", gap: 24, justifyContent: "center", alignItems: "center" }}>
              <div style={{ textAlign: "center" }}><Donut value={68} color="var(--fb)" label="68%" sub={baht(338000)} /><div style={{ marginTop: 8, fontSize: 12, color: "var(--tx-dim)" }}>Facebook</div></div>
              <div style={{ textAlign: "center" }}><Donut value={32} color="var(--tiktok)" label="32%" sub={baht(160000)} /><div style={{ marginTop: 8, fontSize: 12, color: "var(--tx-dim)" }}>TikTok</div></div>
            </div>
          </Panel>
          <Panel title={t("ROAS trend", "แนวโน้ม ROAS")} th={t("last 30 days", "30 วัน")}>
            <div className="panel-pad">
              <div className="legend" style={{ marginBottom: 8 }}><span className="lg"><i style={{ background: "var(--fb)" }} />Facebook</span><span className="lg"><i style={{ background: "var(--tiktok)" }} />TikTok</span></div>
              <LineChart height={190} labels={["W1", "W2", "W3", "W4"]} series={[{ color: "var(--fb-bright)", data: [4.2, 4.6, 4.9, 5.2] }, { color: "var(--tiktok)", data: [5.4, 5.8, 6.1, 6.4] }]} yMax={8} />
            </div>
          </Panel>
        </div>
      </div>
    );
  }

  function Monthly() {
    const t = useT();
    const months = [
      { m: "พ.ค. 2026", sales: 2486000, ad: 498000, profit: 631000, orders: 4128, margin: 25.4 },
      { m: "เม.ย. 2026", sales: 2218000, ad: 472000, profit: 548000, orders: 3760, margin: 24.7 },
      { m: "มี.ค. 2026", sales: 2034000, ad: 441000, profit: 489000, orders: 3502, margin: 24.0 },
    ];
    const cols = [
      { key: "m", label: t("MONTH", "เดือน"), render: (r) => <span className="strong">{r.m}</span> },
      { key: "sales", label: t("SALES", "ยอดขาย"), render: (r) => <span className="num strong">{baht(r.sales)}</span> },
      { key: "ad", label: t("AD COST", "ค่าแอด"), render: (r) => <span className="num" style={{ color: "var(--warn)" }}>{baht(r.ad)}</span> },
      { key: "orders", label: t("ORDERS", "ออเดอร์"), render: (r) => <span className="num">{r.orders.toLocaleString()}</span> },
      { key: "margin", label: t("MARGIN", "อัตรากำไร"), render: (r) => <span className="num">{r.margin}%</span> },
      { key: "profit", label: t("NET PROFIT", "กำไรสุทธิ"), render: (r) => <span className="num strong" style={{ color: "var(--ok)" }}>{baht(r.profit)}</span> },
    ];
    return (
      <div className="fade-in">
        <div className="grid" style={{ gridTemplateColumns: "repeat(4,1fr)", marginBottom: 16 }}>
          <Stat label={t("May sales", "ยอดขาย พ.ค.")} value={baht(2486000)} delta="+12.1%" accent="var(--ok)" />
          <Stat label={t("May profit", "กำไร พ.ค.")} value={baht(631000)} delta="+15.1%" accent="var(--ok)" />
          <Stat label={t("Orders", "ออเดอร์")} value="4,128" delta="+9.8%" accent="var(--accent)" />
          <Stat label={t("Avg margin", "กำไรเฉลี่ย")} value="25.4%" delta="+0.7%" accent="var(--ok)" />
        </div>
        <Panel title={t("Monthly summary", "สรุปรายเดือน")} th={t("filter, don't rebuild a sheet each month", "กรองได้ ไม่ต้องสร้างชีตใหม่")} right={<button className="chip"><Icon name="cal" size={14} />2026</button>}>
          <DataTable columns={cols} rows={months} />
        </Panel>
      </div>
    );
  }

  function FinanceOffice({ onNav }) {
    const t = useT();
    const Hero = window.OfficeHero;
    const [room, setRoom] = useState("daily");
    const rooms = [
      { key: "daily", en: "Daily Profit", th: "กำไรรายวัน" },
      { key: "product", en: "Product Profit", th: "กำไรรายสินค้า" },
      { key: "ad", en: "Ad Cost", th: "ค่าแอด" },
      { key: "monthly", en: "Monthly", th: "รายเดือน" },
    ];
    return (
      <div className="main">
        <Hero office="finance" />
        <PageHead
          crumbs={<><a onClick={() => onNav("city")}>{t("System Map", "แผนที่ระบบ")}</a><Icon name="chev" size={12} /><span style={{ color: "var(--ok)" }}>Finance Office</span></>}
          title="Finance Office" th="ห้องบัญชีการเงิน" live
          right={<RoomTabs rooms={rooms} active={room} onChange={setRoom} />} />
        {room === "daily" && <DailyProfit />}
        {room === "product" && <ProductProfit />}
        {room === "ad" && <AdCost />}
        {room === "monthly" && <Monthly />}
      </div>
    );
  }
  window.FinanceOffice = FinanceOffice;
})();