// dashboard.jsx — Dashboard screen with KPIs, charts, and recent activity

const { useState: useState_d, useMemo: useMemo_d } = React;

function Dashboard({ onNavigate }) {
  const { items, locations, stock, movements, totalQty } = useStore();

  const kpis = useMemo_d(() => {
    const totalSku = items.length;
    const totalUnits = stock.reduce((a, b) => a + b.qty, 0);
    const totalValue = items.reduce((a, it) => a + totalQty(it.sku) * it.cost, 0);
    const lowStock = items.filter(it => totalQty(it.sku) < it.reorder).length;
    return { totalSku, totalUnits, totalValue, lowStock };
  }, [items, stock, totalQty]);

  // Build last 14 days of in/out
  const flow14 = useMemo_d(() => {
    const days = [];
    for (let i = 13; i >= 0; i--) {
      const d = new Date();
      d.setHours(0, 0, 0, 0);
      d.setDate(d.getDate() - i);
      const start = d.getTime();
      const end = start + 86400000;
      const dayMv = movements.filter(m => m.ts >= start && m.ts < end);
      const _in = dayMv.filter(m => m.type === "IN").reduce((a, b) => a + b.qty, 0);
      const _out = dayMv.filter(m => m.type === "OUT").reduce((a, b) => a + b.qty, 0);
      days.push({ label: d.getDate(), in: _in, out: _out });
    }
    return days;
  }, [movements]);

  // Stock by category for donut
  const byCategory = useMemo_d(() => {
    const map = new Map();
    items.forEach(it => {
      const q = totalQty(it.sku);
      map.set(it.category, (map.get(it.category) || 0) + q);
    });
    const colors = { Electronics: "#6d7cff", Apparel: "#38d3a3", Grocery: "#ffb454", Household: "#5fb8ff", Stationery: "#c084fc" };
    return [...map.entries()].map(([k, v]) => ({ label: k, value: v, color: colors[k] || "#888" }));
  }, [items, totalQty]);

  // Top moving items (most movements in last 7 days)
  const topMoving = useMemo_d(() => {
    const cutoff = Date.now() - 7 * 86400000;
    const m = new Map();
    movements.filter(mv => mv.ts >= cutoff).forEach(mv => {
      m.set(mv.sku, (m.get(mv.sku) || 0) + mv.qty);
    });
    return [...m.entries()]
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([sku, qty]) => {
        const it = items.find(i => i.sku === sku);
        return { ...it, moved: qty, onHand: totalQty(sku) };
      });
  }, [movements, items, totalQty]);

  // Low stock items
  const lowItems = useMemo_d(() => {
    return items
      .map(it => ({ ...it, onHand: totalQty(it.sku) }))
      .filter(it => it.onHand < it.reorder)
      .sort((a, b) => (a.onHand / a.reorder) - (b.onHand / b.reorder))
      .slice(0, 5);
  }, [items, totalQty]);

  // Recent movements
  const recent = movements.slice(0, 6);

  const totalIn14 = flow14.reduce((a, b) => a + b.in, 0);
  const totalOut14 = flow14.reduce((a, b) => a + b.out, 0);

  return (
    <div className="col gap-md">
      {/* KPIs */}
      <div className="kpi-grid">
        <Kpi
          label="SKU ทั้งหมด"
          value={kpis.totalSku}
          unit="รายการ"
          icon="package"
          color="#6d7cff"
          bg="rgba(109,124,255,0.14)"
          trend={{ dir: "up", val: "+2 รายการสัปดาห์นี้" }}
          spark={[12,10,12,11,13,12,12]}
        />
        <Kpi
          label="สินค้าคงเหลือรวม"
          value={kpis.totalUnits}
          unit="หน่วย"
          icon="warehouse"
          color="#38d3a3"
          bg="rgba(56,211,163,0.14)"
          trend={{ dir: "up", val: "+8.2% MoM" }}
          spark={[40,42,45,44,48,52,55]}
        />
        <Kpi
          label="มูลค่าสต๊อก"
          value={kpis.totalValue}
          unit="฿"
          formatMoney
          icon="trend-up"
          color="#ffb454"
          bg="rgba(255,176,84,0.14)"
          trend={{ dir: "up", val: "+12.4%" }}
          spark={[10,12,14,13,15,17,19]}
        />
        <Kpi
          label="ต้องสั่งซื้อเพิ่ม"
          value={kpis.lowStock}
          unit="SKU"
          icon="alert"
          color="#ff6b78"
          bg="rgba(255,107,120,0.14)"
          trend={{ dir: "down", val: "ต่ำกว่า reorder point", neutral: true }}
          spark={[2,3,3,4,4,3,kpis.lowStock]}
        />
      </div>

      {/* Charts row */}
      <div style={{display:"grid", gridTemplateColumns:"1.6fr 1fr", gap: 14}}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">การเคลื่อนไหวรายวัน (14 วัน)</div>
              <div className="card-sub">รับเข้า vs จ่ายออก รายวัน</div>
            </div>
            <div style={{marginLeft:"auto", display:"flex", gap: 14, fontSize: 12}}>
              <span style={{display:"inline-flex", alignItems:"center", gap:6}}>
                <span style={{width:10, height:10, borderRadius:3, background:"var(--accent-2)"}}/>
                <span className="muted">รับเข้า</span>
                <b className="num">{fmtNum(totalIn14)}</b>
              </span>
              <span style={{display:"inline-flex", alignItems:"center", gap:6}}>
                <span style={{width:10, height:10, borderRadius:3, background:"#ff8089"}}/>
                <span className="muted">จ่ายออก</span>
                <b className="num">{fmtNum(totalOut14)}</b>
              </span>
            </div>
          </div>
          <div style={{padding:"10px 18px 18px"}}>
            <BarChart data={flow14} height={200}/>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">สต๊อกแยกตามหมวด</div>
              <div className="card-sub">จำนวนรวมแยกตามหมวดสินค้า</div>
            </div>
          </div>
          <div style={{padding:"16px 18px 22px", display:"flex", gap: 20, alignItems:"center"}}>
            <div className="donut-wrap">
              <Donut segments={byCategory} size={170} thickness={20}/>
              <div className="donut-center">
                <div className="lbl">รวม</div>
                <div className="val num">{fmtNum(kpis.totalUnits)}</div>
              </div>
            </div>
            <div style={{flex:1, display:"flex", flexDirection:"column", gap:8}}>
              {byCategory.map(c => (
                <div key={c.label} style={{display:"flex", alignItems:"center", gap:8, fontSize: 12.5}}>
                  <span style={{width:10, height:10, borderRadius:3, background: c.color, flexShrink:0}}/>
                  <span style={{flex:1}}>{c.label}</span>
                  <span className="num muted">{fmtNum(c.value)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Lists row */}
      <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 14}}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">สินค้าใกล้หมด</div>
              <div className="card-sub">ต่ำกว่า Reorder Point</div>
            </div>
            <button className="btn sm ghost" style={{marginLeft:"auto"}} onClick={() => onNavigate("items")}>
              ดูทั้งหมด<Icon name="arrow-right" size={13}/>
            </button>
          </div>
          <div style={{padding:"8px 8px 12px"}}>
            {lowItems.length === 0 && <EmptyState icon="check" title="สต๊อกปกติ" hint="ไม่มีสินค้าที่ต่ำกว่า Reorder Point"/>}
            {lowItems.map(it => {
              const pct = Math.round((it.onHand / it.reorder) * 100);
              const danger = pct < 50;
              return (
                <div key={it.sku} style={{display:"flex", alignItems:"center", gap:12, padding:"9px 10px", borderRadius:8, transition:"background 140ms", cursor:"pointer"}}
                  onMouseEnter={e => e.currentTarget.style.background = "rgba(255,255,255,0.025)"}
                  onMouseLeave={e => e.currentTarget.style.background = "transparent"}
                >
                  <div style={{flex:1, minWidth:0}}>
                    <div style={{fontSize:13, fontWeight:500, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{it.name}</div>
                    <div style={{fontSize:11, color:"var(--text-mute)", marginTop:2, display:"flex", gap:8}}>
                      <span className="mono">{it.sku}</span>
                      <span>·</span>
                      <span>เหลือ <b className="num" style={{color:danger?"var(--danger)":"var(--warn)"}}>{it.onHand}</b>/{it.reorder} {it.unit}</span>
                    </div>
                    <div className={`pbar ${danger?"err":"warn"}`} style={{marginTop:7}}>
                      <span style={{width: Math.min(100, pct) + "%"}}/>
                    </div>
                  </div>
                  <button className="btn sm primary" onClick={() => onNavigate("receive", { sku: it.sku })}>รับเข้า</button>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">สินค้าขายดี</div>
              <div className="card-sub">เคลื่อนไหวมากที่สุด 7 วัน</div>
            </div>
          </div>
          <div style={{padding:"8px 8px 12px"}}>
            {topMoving.map((it, i) => (
              <div key={it.sku} style={{display:"flex", alignItems:"center", gap:12, padding:"9px 10px", borderRadius:8}}>
                <div style={{width:26, height:26, borderRadius:7, background:`rgba(109,124,255,${0.32-i*0.05})`, color:"#fff", display:"grid", placeItems:"center", fontSize:12, fontWeight:700}}>{i+1}</div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:13, fontWeight:500, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{it.name}</div>
                  <div style={{fontSize:11, color:"var(--text-mute)", marginTop:2}}>
                    <span className="mono">{it.sku}</span> · คงเหลือ <span className="num">{fmtNum(it.onHand)}</span>
                  </div>
                </div>
                <div style={{textAlign:"right"}}>
                  <div className="num" style={{fontWeight:700}}>{fmtNum(it.moved)}</div>
                  <div className="muted" style={{fontSize:10.5}}>เคลื่อนไหว</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">กิจกรรมล่าสุด</div>
              <div className="card-sub">การเคลื่อนไหวสต๊อก</div>
            </div>
            <button className="btn sm ghost" style={{marginLeft:"auto"}} onClick={() => onNavigate("reports")}>
              ดูทั้งหมด<Icon name="arrow-right" size={13}/>
            </button>
          </div>
          <div style={{padding:"8px 14px 12px"}}>
            {recent.map((m, i) => (
              <div key={m.id} style={{display:"flex", gap:10, padding:"9px 0", borderBottom: i < recent.length-1 ? "1px solid rgba(255,255,255,0.04)" : "none"}}>
                <div className={"mv-type " + m.type} style={{height:"fit-content", marginTop:3}}>
                  {m.type === "IN" ? "รับ" : m.type === "OUT" ? "จ่าย" : "โอน"}
                </div>
                <div style={{flex:1, minWidth:0}}>
                  <div style={{fontSize:12.5, fontWeight:500, overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap"}}>{m.itemName}</div>
                  <div style={{fontSize:11, color:"var(--text-mute)", marginTop:2}}>
                    <span className="num">{fmtNum(m.qty)}</span> หน่วย · {timeAgo(m.ts)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Kpi({ label, value, unit, icon, color, bg, trend, spark, formatMoney }) {
  return (
    <div className="kpi" style={{ "--kpi-c": color, "--kpi-bg": bg }}>
      <div className="kpi-label">
        <span className="kpi-ico"><Icon name={icon} size={14}/></span>
        {label}
      </div>
      <div className="kpi-value">
        <AnimNum value={value} format={formatMoney ? (n) => "฿" + (n/1000).toFixed(1) + "k" : (n) => fmtNum(n)}/>
        {unit && <span className="unit">{unit}</span>}
      </div>
      {trend && (
        <div className={"kpi-trend " + (trend.neutral ? "" : trend.dir === "up" ? "up" : "down")} style={trend.neutral ? {background:"rgba(255,255,255,0.05)", color:"var(--text-mute)"} : null}>
          {!trend.neutral && <Icon name={trend.dir === "up" ? "trend-up" : "trend-down"} size={11}/>}
          {trend.val}
        </div>
      )}
      {spark && (
        <div className="kpi-spark">
          <Sparkline data={spark} width={88} height={28} color={color}/>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Dashboard });