/* Dashboard.jsx — ภาพรวมระบบ */
function Dashboard({ go }) {
  const s = useStore();
  const { FLOW_7D } = s;
  const todayIn = s.movements.filter(m => m.type === "in" && m.date.startsWith("2026-06-03")).reduce((a, m) => a + m.lines.reduce((x, l) => x + l.qty, 0), 0);
  const todayOut = s.movements.filter(m => m.type === "out" && m.date.startsWith("2026-06-03")).reduce((a, m) => a + m.lines.reduce((x, l) => x + l.qty, 0), 0);
  const skuCount = s.ITEMS.length;
  const maxFlow = Math.max(...FLOW_7D.flatMap(d => [d.in, d.out]));

  /* มูลค่าตามหมวด (donut) */
  const byCat = s.CATEGORIES.map(c => ({
    label: c.name, color: c.color,
    value: s.ITEMS.filter(i => i.cat === c.id).reduce((a, i) => a + (s.stockBySku[i.sku] || 0) * i.price, 0),
  })).filter(c => c.value > 0).sort((a, b) => b.value - a.value);

  const kpis = [
    { label: "มูลค่าสต๊อกรวม", val: <span><span className="num">{s.fmtMoney(s.totalValue)}</span> <small>บาท</small></span>, delta: "+4.2%", up: true, ic: <Icons.box size={20}/>, c: "var(--primary-600)", soft: "var(--primary-soft)" },
    { label: "รายการสินค้า (SKU)", val: <span className="num">{skuCount}</span>, sub: `${s.CATEGORIES.length} หมวดวัสดุ`, ic: <Icons.layers size={20}/>, c: "#7c3aed", soft: "#f1ebfe" },
    { label: "รับเข้าวันนี้", val: <span><span className="num">{s.fmt(todayIn)}</span> <small>หน่วย</small></span>, delta: "เอกสาร 1 ใบ", up: true, ic: <Icons.receive size={20}/>, c: "var(--green)", soft: "var(--green-soft)" },
    { label: "ต่ำกว่าจุดสั่งซื้อ", val: <span className="num">{s.lowStock.length}</span>, sub: "ต้องเติมสต๊อก", warn: true, ic: <Icons.alert size={20}/>, c: "var(--amber)", soft: "var(--amber-soft)" },
  ];

  return (
    <div className="page fade-up">
      <div className="page-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 14 }}>
        <div>
          <h2>ภาพรวมคลังวัสดุ</h2>
          <p>อัปเดตล่าสุด · วันนี้ 3 มิ.ย. 2569 เวลา 09:30 น.</p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => go("receive")}><Icons.receive size={17}/>รับเข้า</button>
          <button className="btn btn-primary" onClick={() => go("issue")}><Icons.issue size={17}/>จ่ายออก</button>
        </div>
      </div>

      <div className="kpi-grid stagger" style={{ marginBottom: 18 }}>
        {kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="k-top">
              <span className="k-label">{k.label}</span>
              <span className="k-ic" style={{ background: k.soft, color: k.c }}>{k.ic}</span>
            </div>
            <div className="k-val">{k.val}</div>
            {k.delta && <div className={`k-delta ${k.warn ? "k-down" : "k-up"}`}>{!k.warn && <Icons.trendUp size={14}/>}{k.delta}</div>}
            {k.sub && <div className="k-delta" style={{ color: k.warn ? "var(--amber)" : "var(--muted)" }}>{k.sub}</div>}
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 18, marginBottom: 18 }} className="dash-row">
        {/* กราฟการเคลื่อนไหว 7 วัน */}
        <Card>
          <SectionHead title="การเคลื่อนไหวสต๊อก" sub="7 วันล่าสุด (หน่วยรวม)" right={
            <div style={{ display: "flex", gap: 16, fontSize: 12.5, color: "var(--muted)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--green)" }}></span>รับเข้า</span>
              <span style={{ display: "flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: "var(--primary-600)" }}></span>จ่ายออก</span>
            </div>
          } />
          <div className="chart-bars">
            {FLOW_7D.map((d, i) => (
              <div className="chart-col" key={i}>
                <div style={{ display: "flex", gap: 4, alignItems: "flex-end", width: "100%", height: "100%", justifyContent: "center" }}>
                  <div style={{ width: "42%", height: `${(d.in / maxFlow) * 100}%`, background: "var(--green)", borderRadius: "5px 5px 0 0", minHeight: 3, transition: "height .6s var(--ease-out)" }} title={`รับ ${s.fmt(d.in)}`}></div>
                  <div style={{ width: "42%", height: `${(d.out / maxFlow) * 100}%`, background: "var(--primary-600)", borderRadius: "5px 5px 0 0", minHeight: 3, transition: "height .6s var(--ease-out)" }} title={`จ่าย ${s.fmt(d.out)}`}></div>
                </div>
                <div className="chart-x">{d.d}</div>
              </div>
            ))}
          </div>
        </Card>

        {/* สัดส่วนมูลค่าตามหมวด */}
        <Card>
          <SectionHead title="มูลค่าตามหมวด" />
          <div style={{ display: "flex", gap: 18, alignItems: "center" }}>
            <Donut segments={byCat} center={
              <div>
                <div style={{ fontSize: 11, color: "var(--muted)" }}>รวม</div>
                <div className="num" style={{ fontSize: 16, fontWeight: 600 }}>{s.fmtMoneyK(s.totalValue)}</div>
                <div style={{ fontSize: 10.5, color: "var(--muted-2)" }}>บาท</div>
              </div>
            } />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9 }}>
              {byCat.slice(0, 5).map((c, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 12.5 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 3, background: c.color, flex: "none" }}></span>
                  <span style={{ flex: 1, color: "var(--ink-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.label}</span>
                  <span className="num" style={{ fontWeight: 600, color: "var(--muted)" }}>{Math.round(c.value / s.totalValue * 100)}%</span>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="dash-row">
        {/* แจ้งเตือนสต๊อกต่ำ */}
        <Card pad={false}>
          <div style={{ padding: "18px 20px 14px" }}>
            <SectionHead title="ต้องเติมสต๊อก" sub={`${s.lowStock.length} รายการต่ำกว่าจุดสั่งซื้อ`} right={
              <button className="btn btn-soft btn-sm" onClick={() => go("items")}>ดูทั้งหมด<Icons.chevR size={15}/></button>
            } />
          </div>
          <div style={{ maxHeight: 280, overflowY: "auto" }}>
            {s.lowStock.map(i => {
              const pct = Math.min(100, Math.round(i.qty / i.reorder * 100));
              return (
                <div key={i.sku} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 20px", borderTop: "1px solid var(--line-2)" }}>
                  <ItemThumb sku={i.sku} size={36} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{i.name}</div>
                    <div className="bar" style={{ marginTop: 6 }}><span style={{ width: `${pct}%`, background: i.qty === 0 ? "var(--red)" : "var(--amber)" }}></span></div>
                  </div>
                  <div style={{ textAlign: "right", flex: "none" }}>
                    <div className="num" style={{ fontWeight: 600, fontSize: 14, color: i.qty === 0 ? "var(--red)" : "var(--ink)" }}>{s.fmt(i.qty)}</div>
                    <div style={{ fontSize: 11, color: "var(--muted-2)" }}>/ {s.fmt(i.reorder)} {i.unit}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* กิจกรรมล่าสุด */}
        <Card pad={false}>
          <div style={{ padding: "18px 20px 14px" }}>
            <SectionHead title="กิจกรรมล่าสุด" right={
              <button className="btn btn-soft btn-sm" onClick={() => go("moves")}>ดูทั้งหมด<Icons.chevR size={15}/></button>
            } />
          </div>
          <div style={{ padding: "0 20px 16px", maxHeight: 280, overflowY: "auto" }}>
            {s.movements.slice(0, 6).map((m, idx, arr) => {
              const isIn = m.type === "in";
              const units = m.lines.reduce((a, l) => a + l.qty, 0);
              return (
                <div className="tl-item" key={m.id}>
                  <div className="tl-rail">
                    <span className="tl-dot" style={{ background: isIn ? "var(--green-soft)" : "var(--primary-soft)", color: isIn ? "var(--green)" : "var(--primary-700)" }}>
                      {isIn ? <Icons.arrowDown size={16}/> : <Icons.arrowUp size={16}/>}
                    </span>
                    {idx < arr.length - 1 && <span className="tl-line"></span>}
                  </div>
                  <div style={{ flex: 1, paddingBottom: 16, minWidth: 0 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 8 }}>
                      <span style={{ fontWeight: 600, fontSize: 13.5 }}>{isIn ? "รับเข้า" : "จ่ายออก"} · {m.party}</span>
                      <span className="num" style={{ fontSize: 12.5, fontWeight: 600, color: isIn ? "var(--green)" : "var(--primary-700)" }}>{isIn ? "+" : "−"}{s.fmt(units)}</span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--muted-2)", marginTop: 2 }}>{m.id} · {s.fmtDate(m.date)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>
    </div>
  );
}
window.Dashboard = Dashboard;