/* ============================================================
   dash.jsx — HQ Dashboard + Daily Report (desktop, light)
   ============================================================ */
function Dashboard() {
  const store = useContext(window.AppCtx);
  const D = window.POS_DATA, H = window.POS_HELP;
  const t = store.tweaks;
  const [range, setRange] = useState("today");
  const [metric, setMetric] = useState("sales");
  const mult = range === "today" ? 1 : range === "7d" ? 6.8 : 28.5;

  // session sales from POS add on top of "today"
  const session = store.sessionByBranch();

  const rows = store.branches.map((b) => {
    const s = session[b.id] || { sales: 0, profit: 0, orders: 0 };
    return {
      ...b,
      sales: Math.round((b.salesToday + s.sales) * (range === "today" ? 1 : mult)),
      profit: Math.round((b.profitToday + s.profit) * (range === "today" ? 1 : mult)),
      orders: Math.round((b.orders + s.orders) * (range === "today" ? 1 : mult)),
    };
  });
  const totSales = rows.reduce((a, b) => a + b.sales, 0);
  const totProfit = rows.reduce((a, b) => a + b.profit, 0);
  const totOrders = rows.reduce((a, b) => a + b.orders, 0);
  const avgBill = totOrders ? Math.round(totSales / totOrders) : 0;
  const maxMetric = Math.max(...rows.map((r) => r[metric]));
  const sorted = [...rows].sort((a, b) => b[metric] - a[metric]);

  const alerts = store.allLowStock();

  const hourData = D.hourlyPattern.map((v) => Math.round(v * (totSales / 9)));

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">ภาพรวมองค์กร · HQ</div>
          <h1 className="page-title">แดชบอร์ดภาพรวม</h1>
        </div>
        <div className="seg seg-sm">
          {[["today", "วันนี้"], ["7d", "7 วัน"], ["30d", "30 วัน"]].map(([id, l]) => (
            <button key={id} className={"seg-b" + (range === id ? " on" : "")} onClick={() => setRange(id)}>{l}</button>
          ))}
        </div>
      </div>

      <div className="kpi-row">
        <Stat label="ยอดขายรวม" value={H.thb(totSales)} sub={range === "today" ? "ทุกสาขา · วันนี้" : "ทุกสาขา · " + (range === "7d" ? "7 วัน" : "30 วัน")} accent />
        <Stat label="กำไรขั้นต้น" value={H.thb(totProfit)} sub={Math.round(totProfit / totSales * 100) + "% margin"} />
        <Stat label="จำนวนบิล" value={totOrders.toLocaleString()} sub={store.branches.length + " สาขา"} />
        <Stat label="บิลเฉลี่ย" value={H.thb(avgBill)} sub="ต่อบิล" />
        <Stat label="วัตถุดิบใกล้หมด" value={alerts.length} sub="รายการต้องสั่งซื้อ" tone={alerts.length ? "var(--clay)" : "var(--sage)"} />
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head">
            <div className="card-title">เปรียบเทียบสาขา</div>
            <div className="seg seg-xs">
              <button className={"seg-b" + (metric === "sales" ? " on" : "")} onClick={() => setMetric("sales")}>ยอดขาย</button>
              <button className={"seg-b" + (metric === "profit" ? " on" : "")} onClick={() => setMetric("profit")}>กำไร</button>
            </div>
          </div>
          <div className="cmp-list">
            {sorted.map((b, i) => (
              <CompareBar key={b.id} label={<span className="cmp-branch"><span className="cmp-rank">{i + 1}</span>สาขา{b.name}</span>}
                value={b[metric]} max={maxMetric} accent="var(--accent)" right={H.thb(b[metric])} />
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">ยอดขายรายชั่วโมง</div><div className="card-note">วันนี้ · ทุกสาขา</div></div>
          <BarChart data={hourData} labels={D.hours} height={170} accent="var(--accent)" />
        </div>
      </div>

      <div className="card">
        <div className="card-head"><div className="card-title">สาขาทั้งหมด</div><div className="card-note">{store.branches.length} สาขา</div></div>
        <table className="tbl">
          <thead><tr><th>สาขา</th><th>ผู้จัดการ</th><th className="r">ยอดขาย</th><th className="r">กำไร</th><th className="r">บิล</th><th className="r">บิลเฉลี่ย</th><th className="c">สถานะ</th></tr></thead>
          <tbody>
            {rows.map((b) => (
              <tr key={b.id}>
                <td><span className="tbl-strong">สาขา{b.name}</span> <span className="tbl-dim">{b.code}</span></td>
                <td className="tbl-dim">{b.manager}</td>
                <td className="r">{H.thb(b.sales)}</td>
                <td className="r">{H.thb(b.profit)}</td>
                <td className="r">{b.orders}</td>
                <td className="r">{H.thb(b.avgBill)}</td>
                <td className="c"><Pill tone="sage">เปิดอยู่</Pill></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

/* ============================================================
   DailyReport
   ============================================================ */
function DailyReport() {
  const store = useContext(window.AppCtx);
  const D = window.POS_DATA, H = window.POS_HELP;
  const [bid, setBid] = useState(store.currentBranchId);
  const branch = store.branches.find((b) => b.id === bid) || store.branches[0];
  const session = (store.sessionByBranch())[branch.id] || { sales: 0, profit: 0, orders: 0 };

  const gross = branch.salesToday + session.sales;
  const discount = Math.round(gross * 0.04);
  const net = gross - discount;
  const vat = Math.round(net * D.VAT_RATE / (1 + D.VAT_RATE));
  const cogs = Math.round(net * 0.285);
  const profit = net - cogs;
  const orders = branch.orders + session.orders;
  const items = Math.round(orders * 1.6);

  const pay = [
    { name: "เงินสด", v: Math.round(net * 0.42), tone: "var(--accent)" },
    { name: "พร้อมเพย์", v: Math.round(net * 0.41), tone: "#8a6d4b" },
    { name: "บัตร", v: Math.round(net * 0.12), tone: "#b9a07f" },
    { name: "e-Wallet", v: Math.round(net * 0.05), tone: "#d8c7ad" },
  ];
  const payMax = net;

  const top = [
    { name: "ลาเต้", qty: Math.round(items * 0.19), rev: 0 },
    { name: "อเมริกาโน่", qty: Math.round(items * 0.16), rev: 0 },
    { name: "คาราเมล มัคคิอาโต้", qty: Math.round(items * 0.13), rev: 0 },
    { name: "ชาไทยเย็น", qty: Math.round(items * 0.11), rev: 0 },
    { name: "มัทฉะ ลาเต้", qty: Math.round(items * 0.09), rev: 0 },
  ].map((x) => ({ ...x, rev: x.qty * 78 }));
  const topMax = Math.max(...top.map((x) => x.qty));

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">รายงาน · {new Date().toLocaleDateString("th-TH", { day: "numeric", month: "long", year: "numeric" })}</div>
          <h1 className="page-title">รายงานประจำวัน</h1>
        </div>
        <div className="head-actions">
          <select className="select" value={bid} onChange={(e) => setBid(e.target.value)}>
            {(store.visibleBranches ? store.visibleBranches() : store.branches).map((b) => <option key={b.id} value={b.id}>สาขา{b.name} · {b.code}</option>)}
          </select>
          <button className="btn-ghost" onClick={() => window.toast({ title: "ส่งออกรายงานแล้ว", msg: "report-" + branch.code + ".pdf (เดโม)" })}><Icon name="report" size={16} /> ส่งออก PDF</button>
        </div>
      </div>

      <div className="kpi-row">
        <Stat label="ยอดขายสุทธิ" value={H.thb(net)} sub={"จาก " + orders + " บิล"} accent />
        <Stat label="ต้นทุนวัตถุดิบ (COGS)" value={H.thb(cogs)} sub={Math.round(cogs / net * 100) + "% ของยอดขาย"} />
        <Stat label="กำไรขั้นต้น" value={H.thb(profit)} sub={Math.round(profit / net * 100) + "% margin"} tone="var(--sage)" />
        <Stat label="ภาษีมูลค่าเพิ่ม 7%" value={H.thb(vat)} sub="รวมอยู่ในยอดขาย" />
      </div>

      <div className="grid-2">
        <div className="card">
          <div className="card-head"><div className="card-title">ช่องทางชำระเงิน</div></div>
          <div className="cmp-list">
            {pay.map((p) => <CompareBar key={p.name} label={p.name} value={p.v} max={payMax} accent={p.tone} right={H.thb(p.v)} />)}
          </div>
          <div className="report-foot">
            <div className="rf-item"><span>จำนวนบิล</span><b>{orders}</b></div>
            <div className="rf-item"><span>จำนวนแก้ว</span><b>{items}</b></div>
            <div className="rf-item"><span>บิลเฉลี่ย</span><b>{H.thb(branch.avgBill)}</b></div>
            <div className="rf-item"><span>ส่วนลดรวม</span><b>−{H.thb(discount)}</b></div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div className="card-title">เมนูขายดี</div><div className="card-note">Top 5</div></div>
          <div className="cmp-list">
            {top.map((x, i) => (
              <CompareBar key={x.name} label={<span className="cmp-branch"><span className="cmp-rank">{i + 1}</span>{x.name}</span>}
                value={x.qty} max={topMax} accent="var(--accent)" right={x.qty + " แก้ว"} />
            ))}
          </div>
          <div className="formula-box">
            กำไรขั้นต้น = ยอดขายสุทธิ − ต้นทุนวัตถุดิบ &nbsp;·&nbsp; ต้นทุนคำนวณจากสูตร (recipe) × ราคาวัตถุดิบจริง
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard, DailyReport });