// ============================================================
// dashboard.jsx — Overview screen with animated charts
// ============================================================

function Dashboard({ state }) {
  const { products, movements, warehouses, locations, stock } = state;

  const stats = useMemo(() => {
    const totalSkus = products.length;
    let totalUnits = 0;
    Object.values(stock).forEach(q => totalUnits += q);
    let totalValue = 0;
    products.forEach(p => { totalValue += getStockBySKU(state, p.sku) * p.costPrice; });
    const lowStock = products.filter(p => {
      const q = getStockBySKU(state, p.sku);
      return q > 0 && q < p.reorderPoint;
    }).length;
    return { totalSkus, totalUnits, totalValue, lowStock };
  }, [products, stock, state]);

  // Last 14 days movement chart
  const chartData = useMemo(() => {
    const days = [];
    const now = new Date("2026-05-13T23:59:59");
    for (let d = 13; d >= 0; d--) {
      const dt = new Date(now); dt.setDate(now.getDate() - d);
      const dayKey = dt.toISOString().slice(0, 10);
      days.push({ date: dt, key: dayKey, receive: 0, issue: 0 });
    }
    movements.forEach(m => {
      const key = m.date.slice(0, 10);
      const d = days.find(x => x.key === key);
      if (d) d[m.type] += m.qty;
    });
    return days;
  }, [movements]);

  // Top 5 movers
  const topMovers = useMemo(() => {
    const tally = {};
    movements.slice(0, 200).forEach(m => {
      tally[m.sku] = (tally[m.sku] || 0) + m.qty;
    });
    return Object.entries(tally)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([sku, qty]) => ({ sku, qty, product: products.find(p => p.sku === sku) }));
  }, [movements, products]);

  // Warehouse fill levels
  const warehouseFill = useMemo(() => {
    return warehouses.map(wh => {
      const locs = locations.filter(l => l.warehouseId === wh.id);
      const used = locs.reduce((sum, l) => sum + getStockByLocation(state, l.id), 0);
      const cap = locs.reduce((sum, l) => sum + l.capacity, 0);
      return { ...wh, used, cap, pct: cap > 0 ? Math.min(100, (used / cap) * 100) : 0 };
    });
  }, [warehouses, locations, state]);

  // Low stock items
  const lowStockItems = useMemo(() => {
    return products
      .map(p => ({ ...p, qty: getStockBySKU(state, p.sku) }))
      .filter(p => p.qty < p.reorderPoint)
      .sort((a, b) => (a.qty / a.reorderPoint) - (b.qty / b.reorderPoint))
      .slice(0, 6);
  }, [products, state]);

  const recentMovements = movements.slice(0, 6);

  return (
    <>
      <div className="page-header">
        <div>
          <div className="page-title">ภาพรวมคลังสินค้า</div>
          <div className="page-sub">สรุปสถานการณ์สินค้าคงเหลือและการเคลื่อนไหวล่าสุด · อัปเดต <span className="mono">13/05/2569</span></div>
        </div>
        <div className="row">
          <span className="badge"><span className="pulse-dot" style={{ marginRight: 4 }}/> Live</span>
        </div>
      </div>

      <div className="stats-grid">
        <StatCard label="จำนวน SKU ทั้งหมด" value={stats.totalSkus} icon="package" delta="+2 จากเดือนก่อน" deltaDir="up"/>
        <StatCard label="สต๊อกคงเหลือ (หน่วย)" value={stats.totalUnits} icon="warehouse" delta="−4.2%" deltaDir="down"/>
        <StatCard label="มูลค่าสต๊อก" value={stats.totalValue} format="currency" icon="chart" delta="+฿14,200" deltaDir="up"/>
        <StatCard label="สินค้าใกล้หมด" value={stats.lowStock} icon="alert" delta="ต้องสั่งเพิ่ม" deltaDir="warn"/>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 14, marginBottom: 14 }}>
        <div className="card card-pad-0">
          <div className="card-header">
            <div>
              <h3>การเคลื่อนไหว 14 วันล่าสุด</h3>
              <div className="card-header-sub">รับเข้า vs จ่ายออก · หน่วยรวม</div>
            </div>
            <div className="row" style={{ gap: 14, fontSize: 12 }}>
              <span className="row" style={{ gap: 6 }}><span style={{ width: 8, height: 8, background: "var(--success)", borderRadius: 2 }}/> รับเข้า</span>
              <span className="row" style={{ gap: 6 }}><span style={{ width: 8, height: 8, background: "var(--danger)", borderRadius: 2 }}/> จ่ายออก</span>
            </div>
          </div>
          <div style={{ padding: 18 }}>
            <MovementChart data={chartData}/>
          </div>
        </div>

        <div className="card card-pad-0">
          <div className="card-header">
            <h3>การใช้พื้นที่คลัง</h3>
          </div>
          <div style={{ padding: 18 }}>
            <div className="col" style={{ gap: 16 }}>
              {warehouseFill.map(wh => (
                <div key={wh.id}>
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 6 }}>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 500 }}>{wh.name}</div>
                      <div className="mono text-xs muted">{wh.code} · {wh.type}</div>
                    </div>
                    <div style={{ textAlign: "right" }}>
                      <div className="tnum" style={{ fontSize: 13, fontWeight: 600 }}>{Math.round(wh.pct)}%</div>
                      <div className="mono text-xs muted">{formatNumber(wh.used)}/{formatNumber(wh.cap)}</div>
                    </div>
                  </div>
                  <ProgressBar value={wh.pct}/>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 14, marginBottom: 14 }}>
        <div className="card card-pad-0">
          <div className="card-header">
            <h3>การเคลื่อนไหวล่าสุด</h3>
            <button className="btn btn-ghost btn-sm">ดูทั้งหมด <Icon name="arrow-right" size={12}/></button>
          </div>
          <div className="table-wrap">
            <table className="table">
              <thead><tr>
                <th>เวลา</th><th>ประเภท</th><th>สินค้า</th><th>Location</th><th className="num">จำนวน</th>
              </tr></thead>
              <tbody>
                {recentMovements.map(m => {
                  const p = products.find(x => x.sku === m.sku);
                  return (
                    <tr key={m.id}>
                      <td className="muted text-xs mono">{formatShortDate(m.date)} {new Date(m.date).toTimeString().slice(0,5)}</td>
                      <td><MovementBadge type={m.type}/></td>
                      <td>
                        <div style={{ fontSize: 13 }}>{p?.name || m.sku}</div>
                        <div className="mono text-xs muted">{m.sku}</div>
                      </td>
                      <td className="mono text-xs">{m.locationId}</td>
                      <td className="num"><span className={m.type === "receive" ? "" : ""} style={{ fontWeight: 500 }}>{m.type === "receive" ? "+" : "−"}{formatNumber(m.qty)}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card card-pad-0">
          <div className="card-header">
            <h3>สินค้าใกล้หมดสต๊อก</h3>
            <span className="badge badge-warn">{lowStockItems.length}</span>
          </div>
          <div style={{ padding: 6 }}>
            {lowStockItems.length === 0 ? (
              <EmptyState icon="check" title="สต๊อกอยู่ในระดับปกติ" sub="ทุกสินค้าสูงกว่าจุดสั่งซื้อ"/>
            ) : (
              <div className="col" style={{ gap: 0 }}>
                {lowStockItems.map(p => {
                  const pct = (p.qty / p.reorderPoint) * 100;
                  return (
                    <div key={p.sku} style={{ padding: "10px 12px", borderBottom: "1px solid var(--border)" }}>
                      <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
                        <div>
                          <div style={{ fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                          <div className="mono text-xs muted">{p.sku}</div>
                        </div>
                        <div style={{ textAlign: "right" }}>
                          <div className="tnum" style={{ fontSize: 13, fontWeight: 600, color: "var(--warn)" }}>{formatNumber(p.qty)}</div>
                          <div className="mono text-xs muted">/ {formatNumber(p.reorderPoint)}</div>
                        </div>
                      </div>
                      <ProgressBar value={pct} color={pct < 50 ? "var(--danger)" : "var(--warn)"}/>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="card card-pad-0">
        <div className="card-header">
          <h3>สินค้าเคลื่อนไหวสูงสุด</h3>
          <div className="card-header-sub">30 วันที่ผ่านมา</div>
        </div>
        <div style={{ padding: 18 }}>
          <TopMoversChart items={topMovers}/>
        </div>
      </div>
    </>
  );
}

function StatCard({ label, value, valueText, format, icon, delta, deltaDir, suffix = "" }) {
  const isMoney = format === "currency";
  return (
    <div className="stat">
      <div className="stat-label"><Icon name={icon} size={13}/> {label}</div>
      <div className="stat-value" style={valueText ? { fontSize: 20 } : {}}>
        {valueText
          ? <span>{valueText}</span>
          : <AnimatedNumber value={value} prefix={isMoney ? "฿" : ""} suffix={suffix}/>}
      </div>
      {delta && (
        <div className={`stat-delta ${deltaDir === "up" ? "up" : deltaDir === "down" ? "down" : ""}`} style={deltaDir === "warn" ? { color: "var(--warn)" } : {}}>
          {deltaDir === "up" && <Icon name="arrow-up" size={11}/>}
          {deltaDir === "down" && <Icon name="arrow-down" size={11}/>}
          {delta}
        </div>
      )}
      <div className="stat-bar"/>
    </div>
  );
}

function ProgressBar({ value, color = "var(--accent)", height = 6 }) {
  const [w, setW] = useState(0);
  useEffect(() => {
    const t = setTimeout(() => setW(value), 60);
    return () => clearTimeout(t);
  }, [value]);
  return (
    <div style={{ height, background: "var(--surface-2)", borderRadius: 999, overflow: "hidden" }}>
      <div style={{ width: `${Math.min(100, w)}%`, height: "100%", background: color, transition: "width 900ms cubic-bezier(0.16, 1, 0.3, 1)" }}/>
    </div>
  );
}

// ============ MovementChart (animated line + bars) ============
function MovementChart({ data }) {
  const w = 720, h = 240;
  const padL = 40, padR = 12, padT = 12, padB = 24;
  const iw = w - padL - padR;
  const ih = h - padT - padB;
  const maxY = Math.max(100, ...data.flatMap(d => [d.receive, d.issue]));
  const stepX = iw / (data.length - 1);
  const yScale = (v) => padT + ih - (v / maxY) * ih;

  // Receive line points
  const linePts = data.map((d, i) => `${padL + i * stepX},${yScale(d.receive)}`).join(" ");
  const areaPath = `M${padL},${padT + ih} L${linePts.replace(/,/g, " ").split(" ").reduce((acc, _, i, arr) => i % 2 === 0 ? acc + `${arr[i]},${arr[i+1]} ` : acc, "").trim().replace(/\s+/g, " L")} L${padL + iw},${padT + ih} Z`;

  // build smooth area path manually
  const pts = data.map((d, i) => [padL + i * stepX, yScale(d.receive)]);
  const areaPath2 = `M${pts[0][0]},${padT + ih} L${pts.map(p => p.join(",")).join(" L")} L${pts[pts.length-1][0]},${padT + ih} Z`;
  const linePath = `M${pts.map(p => p.join(",")).join(" L")}`;

  // gridlines
  const gridLines = [0, 0.25, 0.5, 0.75, 1].map(t => padT + ih * (1 - t));
  const yLabels = [0, 0.25, 0.5, 0.75, 1].map(t => Math.round(maxY * t));

  // Bar width for issue
  const barW = Math.max(4, stepX * 0.34);

  return (
    <div style={{ width: "100%", overflow: "hidden" }}>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: "100%", height: 240, display: "block" }}>
        <defs>
          <linearGradient id="chart-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="var(--success)" stopOpacity="0.32"/>
            <stop offset="100%" stopColor="var(--success)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <g className="chart-grid">
          {gridLines.map((y, i) => <line key={i} x1={padL} x2={padL + iw} y1={y} y2={y}/>)}
        </g>
        <g className="chart-axis">
          {yLabels.map((v, i) => <text key={i} x={padL - 8} y={gridLines[i] + 3} textAnchor="end">{v}</text>)}
          {data.map((d, i) => i % 2 === 0 && (
            <text key={i} x={padL + i * stepX} y={h - 6} textAnchor="middle">{formatShortDate(d.date)}</text>
          ))}
        </g>
        {/* Issue bars (downward visual, drawn as red bars below receive line) */}
        <g>
          {data.map((d, i) => {
            const x = padL + i * stepX - barW / 2;
            const barH = (d.issue / maxY) * ih;
            const y = padT + ih - barH;
            return (
              <rect key={i} x={x} y={y} width={barW} height={barH}
                fill="var(--danger)" opacity="0.78"
                className="bar-animate"
                style={{ animationDelay: `${i * 30}ms` }}
                rx="2"/>
            );
          })}
        </g>
        {/* Receive area + line */}
        <path d={areaPath2} fill="url(#chart-gradient)"/>
        <path d={linePath} fill="none" stroke="var(--success)" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" className="chart-line animate"/>
        {pts.map((p, i) => (
          <circle key={i} cx={p[0]} cy={p[1]} r="3.2" fill="white" stroke="var(--success)" strokeWidth="2"
            style={{ animation: "pop 0.4s ease forwards", animationDelay: `${800 + i * 30}ms`, opacity: 0 }}/>
        ))}
      </svg>
    </div>
  );
}

// ============ TopMoversChart (horizontal bars) ============
function TopMoversChart({ items }) {
  const max = Math.max(1, ...items.map(i => i.qty));
  return (
    <div className="col" style={{ gap: 12 }}>
      {items.map((it, idx) => {
        const pct = (it.qty / max) * 100;
        return (
          <div key={it.sku}>
            <div className="row" style={{ justifyContent: "space-between", marginBottom: 4 }}>
              <div className="row" style={{ gap: 10 }}>
                <span className="mono text-xs muted" style={{ width: 18 }}>{String(idx + 1).padStart(2, "0")}</span>
                <span style={{ fontSize: 13, fontWeight: 500 }}>{it.product?.name || it.sku}</span>
                <span className="mono text-xs muted">{it.sku}</span>
              </div>
              <span className="tnum" style={{ fontSize: 13, fontWeight: 600 }}>{formatNumber(it.qty)}</span>
            </div>
            <div style={{ height: 8, background: "var(--surface-2)", borderRadius: 999, overflow: "hidden" }}>
              <div style={{
                width: `${pct}%`,
                height: "100%",
                background: `linear-gradient(90deg, var(--accent), oklch(0.65 0.18 240))`,
                transition: "width 1.2s cubic-bezier(0.16, 1, 0.3, 1)",
                transitionDelay: `${idx * 80}ms`,
              }}/>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Object.assign(window, { Dashboard });