/* Reports.jsx — รายงานสินค้าคงเหลือ + รายงานการเคลื่อนไหว */
const { useState: rpUseState, useMemo: rpUseMemo } = React;

/* ============ รายงานสินค้าคงเหลือ ============ */
function StockReport({ go }) {
  const s = useStore();
  const [cat, setCat] = rpUseState("all");
  const [status, setStatus] = rpUseState("all");

  const rows = rpUseMemo(() => {
    let r = s.ITEMS.map(i => {
      const qty = s.stockBySku[i.sku] || 0;
      const st = qty <= 0 ? "out" : qty <= i.reorder ? "low" : "ok";
      return { ...i, qty, value: qty * i.price, st, nLoc: s.locationsOf(i.sku).length };
    });
    if (cat !== "all") r = r.filter(i => i.cat === cat);
    if (status !== "all") r = r.filter(i => i.st === status);
    return r.sort((a, b) => b.value - a.value);
  }, [s.stockBySku, cat, status]);

  const sum = rows.reduce((a, i) => a + i.value, 0);
  const sumQty = rows.reduce((a, i) => a + i.qty, 0);
  const counts = {
    all: s.ITEMS.length,
    ok: s.ITEMS.filter(i => (s.stockBySku[i.sku] || 0) > i.reorder).length,
    low: s.ITEMS.filter(i => { const q = s.stockBySku[i.sku] || 0; return q > 0 && q <= i.reorder; }).length,
    out: s.ITEMS.filter(i => (s.stockBySku[i.sku] || 0) <= 0).length,
  };

  return (
    <React.Fragment>
      {/* การ์ดสรุป */}
      <div className="kpi-grid stagger" style={{ marginBottom: 18 }}>
        {[
          { l: "มูลค่าคงเหลือรวม", v: `฿${s.fmtMoney(s.totalValue)}`, c: "var(--primary-600)", soft: "var(--primary-soft)", ic: <Icons.box size={20}/> },
          { l: "ปริมาณรวม", v: `${s.fmt(s.ITEMS.reduce((a,i)=>a+(s.stockBySku[i.sku]||0),0))}`, sub: "หน่วย", c: "#7c3aed", soft: "#f1ebfe", ic: <Icons.layers size={20}/> },
          { l: "สถานะปกติ", v: counts.ok, sub: "รายการ", c: "var(--green)", soft: "var(--green-soft)", ic: <Icons.check size={20}/> },
          { l: "ต้องเติม / หมด", v: `${counts.low} / ${counts.out}`, sub: "รายการ", c: "var(--amber)", soft: "var(--amber-soft)", ic: <Icons.alert size={20}/> },
        ].map((k, i) => (
          <div className="kpi" key={i}>
            <div className="k-top"><span className="k-label">{k.l}</span><span className="k-ic" style={{ background: k.soft, color: k.c }}>{k.ic}</span></div>
            <div className="k-val num">{k.v} {k.sub && <small>{k.sub}</small>}</div>
          </div>
        ))}
      </div>

      {/* ตัวกรอง */}
      <div style={{ display: "flex", gap: 10, marginBottom: 14, flexWrap: "wrap", alignItems: "center" }}>
        <div className="seg">
          {[["all","ทั้งหมด"],["ok","ปกติ"],["low","ต่ำกว่าจุดสั่ง"],["out","หมด"]].map(([k, l]) => (
            <button key={k} className={status === k ? "on" : ""} onClick={() => setStatus(k)}>{l}</button>
          ))}
        </div>
        <select className="select" style={{ width: 200 }} value={cat} onChange={e => setCat(e.target.value)}>
          <option value="all">ทุกหมวดวัสดุ</option>
          {s.CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-ghost btn-sm" onClick={() => s.pushToast("กำลังเตรียมไฟล์ Excel…")}><Icons.download size={16}/>ส่งออก Excel</button>
        <button className="btn btn-ghost btn-sm" onClick={() => window.print()}><Icons.print size={16}/>พิมพ์</button>
      </div>

      <Card pad={false}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>สินค้า</th><th>หมวด</th><th className="t-center">โลเคชั่น</th>
                <th className="t-right">คงเหลือ</th><th className="t-right">ต้นทุน/หน่วย</th>
                <th className="t-right">มูลค่า</th><th>สถานะ</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(i => {
                const c = s.catOf(i.sku);
                return (
                  <tr key={i.sku}>
                    <td><div className="item-id"><ItemThumb sku={i.sku} size={34}/><div><div className="item-name" style={{ fontSize: 13.5 }}>{i.name}</div><div className="item-sku num">{i.sku}</div></div></div></td>
                    <td><span className="badge" style={{ background: c.soft, color: c.color }}>{c.name}</span></td>
                    <td className="t-center num" style={{ color: "var(--muted)" }}>{i.nLoc}</td>
                    <td className="t-right num" style={{ fontWeight: 600 }}>{s.fmt(i.qty)} <span style={{ fontSize: 12, color: "var(--muted-2)", fontWeight: 400 }}>{i.unit}</span></td>
                    <td className="t-right num" style={{ color: "var(--muted)" }}>฿{s.fmtMoney(i.price)}</td>
                    <td className="t-right num" style={{ fontWeight: 600 }}>฿{s.fmtMoney(i.value)}</td>
                    <td><StockBadge qty={i.qty} reorder={i.reorder} /></td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{ background: "var(--surface-2)", fontWeight: 600 }}>
                <td colSpan={3} style={{ padding: "14px 16px", borderTop: "2px solid var(--line)" }}>รวม {rows.length} รายการ</td>
                <td className="t-right num" style={{ borderTop: "2px solid var(--line)" }}>{s.fmt(sumQty)}</td>
                <td style={{ borderTop: "2px solid var(--line)" }}></td>
                <td className="t-right num" style={{ borderTop: "2px solid var(--line)", color: "var(--primary-700)" }}>฿{s.fmtMoney(sum)}</td>
                <td style={{ borderTop: "2px solid var(--line)" }}></td>
              </tr>
            </tfoot>
          </table>
        </div>
        {rows.length === 0 && <Empty icon={<Icons.report size={22}/>} title="ไม่มีข้อมูลตามเงื่อนไข" />}
      </Card>
    </React.Fragment>
  );
}

/* ============ รายงานการเคลื่อนไหว ============ */
function MovementReport() {
  const s = useStore();
  const [type, setType] = rpUseState("all");
  const [q, setQ] = rpUseState("");

  const rows = rpUseMemo(() => {
    let r = s.movements;
    if (type !== "all") r = r.filter(m => m.type === type);
    const search = q.trim().toLowerCase();
    if (search) r = r.filter(m => m.id.toLowerCase().includes(search) || m.party.toLowerCase().includes(search) || m.lines.some(l => s.itemOf(l.sku)?.name.toLowerCase().includes(search)));
    return r;
  }, [s.movements, type, q]);

  const inCount = s.movements.filter(m => m.type === "in").length;
  const outCount = s.movements.filter(m => m.type === "out").length;
  const inUnits = s.movements.filter(m => m.type === "in").reduce((a, m) => a + m.lines.reduce((x, l) => x + l.qty, 0), 0);
  const outUnits = s.movements.filter(m => m.type === "out").reduce((a, m) => a + m.lines.reduce((x, l) => x + l.qty, 0), 0);

  return (
    <React.Fragment>
      <div className="kpi-grid stagger" style={{ marginBottom: 18, gridTemplateColumns: "repeat(4,1fr)" }}>
        {[
          { l: "เอกสารรับเข้า", v: inCount, sub: "ใบ", c: "var(--green)", soft: "var(--green-soft)", ic: <Icons.receive size={20}/> },
          { l: "เอกสารจ่ายออก", v: outCount, sub: "ใบ", c: "var(--primary-600)", soft: "var(--primary-soft)", ic: <Icons.issue size={20}/> },
          { l: "รับเข้าสะสม", v: `+${s.fmt(inUnits)}`, sub: "หน่วย", c: "var(--green)", soft: "var(--green-soft)", ic: <Icons.arrowDown size={20}/> },
          { l: "จ่ายออกสะสม", v: `−${s.fmt(outUnits)}`, sub: "หน่วย", c: "var(--primary-600)", soft: "var(--primary-soft)", ic: <Icons.arrowUp size={20}/> },
        ].map((k, i) => (
          <div className="kpi" key={i}>
            <div className="k-top"><span className="k-label">{k.l}</span><span className="k-ic" style={{ background: k.soft, color: k.c }}>{k.ic}</span></div>
            <div className="k-val num" style={{ color: k.c }}>{k.v} <small style={{ color: "var(--muted)" }}>{k.sub}</small></div>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", gap: 10, marginBottom: 14, flexWrap: "wrap", alignItems: "center" }}>
        <div className="seg">
          {[["all","ทั้งหมด"],["in","รับเข้า"],["out","จ่ายออก"]].map(([k, l]) => (
            <button key={k} className={type === k ? "on" : ""} onClick={() => setType(k)}>{l}</button>
          ))}
        </div>
        <div className="search" style={{ width: 260 }}>
          <Icons.search size={17}/>
          <input placeholder="ค้นหาเลขที่ / ผู้ติดต่อ / สินค้า…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div style={{ flex: 1 }}></div>
        <button className="btn btn-ghost btn-sm" onClick={() => s.pushToast("กำลังเตรียมไฟล์ Excel…")}><Icons.download size={16}/>ส่งออก</button>
      </div>

      <Card pad={false}>
        <div className="tbl-wrap">
          <table className="tbl">
            <thead>
              <tr>
                <th>เลขที่เอกสาร</th><th>ประเภท</th><th>ผู้ติดต่อ</th>
                <th>รายการสินค้า</th><th className="t-right">จำนวนรวม</th>
                <th>ผู้บันทึก</th><th>วันที่-เวลา</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(m => {
                const isIn = m.type === "in";
                const units = m.lines.reduce((a, l) => a + l.qty, 0);
                return (
                  <tr key={m.id}>
                    <td className="num" style={{ fontWeight: 600 }}>{m.id}</td>
                    <td>
                      <span className={`badge ${isIn ? "badge-green" : "badge-blue"}`}>
                        {isIn ? <Icons.arrowDown size={13}/> : <Icons.arrowUp size={13}/>}{isIn ? "รับเข้า" : "จ่ายออก"}
                      </span>
                    </td>
                    <td style={{ maxWidth: 200 }}>{m.party}</td>
                    <td style={{ maxWidth: 280 }}>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
                        {m.lines.map((l, i) => (
                          <span key={i} className="badge badge-gray" title={s.itemOf(l.sku)?.name} style={{ fontWeight: 500 }}>
                            {s.itemOf(l.sku)?.name.slice(0, 14)}{s.itemOf(l.sku)?.name.length > 14 ? "…" : ""} <b className="num" style={{ marginLeft: 3 }}>×{s.fmt(l.qty)}</b>
                          </span>
                        ))}
                      </div>
                    </td>
                    <td className="t-right num" style={{ fontWeight: 600, color: isIn ? "var(--green)" : "var(--primary-700)" }}>{isIn ? "+" : "−"}{s.fmt(units)}</td>
                    <td style={{ color: "var(--muted)", fontSize: 13 }}>{m.user}</td>
                    <td className="num" style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap" }}>{s.fmtDate(m.date)}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {rows.length === 0 && <Empty icon={<Icons.activity size={22}/>} title="ไม่พบการเคลื่อนไหว" />}
      </Card>
    </React.Fragment>
  );
}

function Reports({ tab, go }) {
  const isMove = tab === "moves";
  return (
    <div className="page fade-up">
      <div className="page-head">
        <h2>{isMove ? "รายงานการเคลื่อนไหว" : "รายงานสินค้าคงเหลือ"}</h2>
        <p>{isMove ? "ประวัติการรับเข้า–จ่ายออกทั้งหมด พร้อมตัวกรองและการค้นหา" : "สรุปคงเหลือและมูลค่าสินค้าทุกรายการ ณ ปัจจุบัน"}</p>
      </div>
      {isMove ? <MovementReport /> : <StockReport go={go} />}
    </div>
  );
}
window.Reports = Reports;