// Pages: Dispatch (kanban), Payments, POS, Inventory, Parts, Services
const { useState: u3S } = React;

// ============ DISPATCH (KANBAN) ============
// Map svc codes -> department/bay type
const DEPT_MAP = {
  "OIL-CHG":"ทั่วไป","FILTER-O":"ทั่วไป","FILTER-A":"ทั่วไป","INSPECT":"ทั่วไป","ENGINE-TUNE":"ทั่วไป",
  "BRAKE-PAD":"ช่วงล่าง","BRAKE-OIL":"ช่วงล่าง","TIRE-ROT":"ช่วงล่าง","WHEEL-ALIGN":"ช่วงล่าง","BELT-TIMING":"ช่วงล่าง","SHOCK":"ช่วงล่าง",
  "WASH-DETAIL":"ล้างรถ","WAX":"ล้างรถ",
  "AC-SERVICE":"แอร์","AC-RECHARGE":"แอร์",
  "ELEC":"ไฟฟ้า","BATTERY":"ไฟฟ้า",
};
const DEPT_COLOR = {
  "ทั่วไป":"#6B7280","ช่วงล่าง":"#B85C28","ล้างรถ":"#0EA5E9","แอร์":"#10B981","ไฟฟ้า":"#A855F7",
};
function jobDepts(j) {
  const set = new Set();
  for (const s of j.svc) if (DEPT_MAP[s]) set.add(DEPT_MAP[s]);
  if (set.size === 0) set.add("ทั่วไป");
  return [...set];
}

function PageDispatch({ setRoute }) {
  const [jobs, setJobs] = u3S(GS.JOBS.map(j => ({...j})));
  const [drag, setDrag] = u3S(null);
  const [over, setOver] = u3S(null);
  const [deptFilter, setDeptFilter] = u3S("all");

  const ALL_DEPTS = ["ทั่วไป","ช่วงล่าง","ล้างรถ","แอร์","ไฟฟ้า"];

  const cols = [
    { key: "waiting", label: "รอคิว", en: "Waiting", color: "var(--ink-4)", stripe: "info" },
    { key: "in_bay", label: "กำลังซ่อม", en: "In bay", color: "var(--warn)", stripe: "amber" },
    { key: "done", label: "เสร็จ — รอลูกค้า", en: "Done", color: "var(--ok)", stripe: "green" },
    { key: "invoiced", label: "ออกบิล / ส่งมอบ", en: "Invoiced", color: "var(--ink)", stripe: "red" },
  ];

  const onDrop = (col) => {
    if (!drag) return;
    setJobs(js => js.map(j => j.id === drag ? {...j, status: col} : j));
    setDrag(null); setOver(null);
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Dispatch board · จันทร์ที่ 27/4/2569</div>
          <h1 className="page-title">จัดคิวซ่อม</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.ChevronL size={13}/></button>
          <button className="btn btn-default btn-sm"><I.Calendar size={13}/> วันนี้</button>
          <button className="btn btn-default btn-sm"><I.ChevronR size={13}/></button>
          <span style={{margin:"0 8px",height:24,width:1,background:"var(--line)"}}></span>
          <button className="chip active"><I.Dispatch size={12}/> Kanban</button>
          <button className="chip">Bay grid</button>
          <button className="chip">Timeline</button>
        </div>
      </div>

      {/* Department filter */}
      <div className="filter-bar" style={{marginBottom:14}}>
        <span className="thai t-xs muted" style={{marginRight:4}}>แผนก:</span>
        <button className={"chip"+(deptFilter==="all"?" active":"")} onClick={()=>setDeptFilter("all")}>
          ทั้งหมด <span className="mono t-xs muted" style={{marginLeft:4}}>{jobs.length}</span>
        </button>
        {ALL_DEPTS.map(d => {
          const n = jobs.filter(j => jobDepts(j).includes(d)).length;
          return (
            <button key={d} className={"chip"+(deptFilter===d?" active":"")} onClick={()=>setDeptFilter(d)}>
              <span style={{width:7,height:7,borderRadius:"50%",background:DEPT_COLOR[d],display:"inline-block",marginRight:5}}></span>
              {d} <span className="mono t-xs muted" style={{marginLeft:4}}>{n}</span>
            </button>
          );
        })}
      </div>

      {/* Kanban */}
      <div className="kanban">
        {cols.map(col => {
          const colJobs = jobs.filter(j => j.status === col.key && (deptFilter === "all" || jobDepts(j).includes(deptFilter)));
          return (
            <div key={col.key} className="kanban-col">
              <div className="kanban-col-head">
                <span style={{width:8,height:8,borderRadius:2,background:col.color}}></span>
                <div className="kanban-col-title">{col.label}</div>
                <span className="kanban-col-count">{colJobs.length}</span>
                <button className="tb-iconbtn" style={{width:26,height:26}}><I.Plus size={13}/></button>
              </div>
              <div
                className={"kanban-list" + (over === col.key ? " drag-over" : "")}
                onDragOver={e => { e.preventDefault(); setOver(col.key); }}
                onDragLeave={() => setOver(null)}
                onDrop={() => onDrop(col.key)}
              >
                {colJobs.map(j => {
                  const c = GS.CUSTOMERS.find(c => c.id === j.custId);
                  const v = GS.VEHICLES.find(v => v.id === j.vehId);
                  const t = GS.TECHS.find(t => t.id === j.tech);
                  return (
                    <div key={j.id}
                      className={"kanban-card" + (drag === j.id ? " dragging" : "")}
                      draggable
                      onDragStart={() => setDrag(j.id)}
                      onDragEnd={() => { setDrag(null); setOver(null); }}
                    >
                      <div className={`kanban-card-stripe ${col.stripe}`}></div>
                      <div className="kanban-card-top">
                        <span className="kanban-card-id">{j.id}</span>
                        <span style={{display:"inline-flex",gap:3,marginLeft:6,flexWrap:"wrap"}}>
                          {jobDepts(j).map(d => (
                            <span key={d} className="badge badge-outline" style={{fontSize:9,padding:"1px 6px"}}>
                              <span style={{width:6,height:6,borderRadius:"50%",background:DEPT_COLOR[d],display:"inline-block",marginRight:4,verticalAlign:"middle"}}></span>
                              {d}
                            </span>
                          ))}
                        </span>
                        <span style={{flex:1}}></span>
                        <I.Drag size={12} stroke="var(--ink-5)"/>
                      </div>
                      <div className="kanban-card-cust">{c?.name}</div>
                      <div className="row-flex" style={{gap:6,marginTop:4}}>
                        <span className="kanban-card-vehicle t-strong">{j.plate}</span>
                        <span className="muted t-xs">· {v?.make} {v?.model}</span>
                      </div>
                      <div style={{marginTop:8,display:"flex",flexWrap:"wrap",gap:4}}>
                        {j.svc.slice(0,2).map(s => <span key={s} className="badge badge-default" style={{fontSize:9.5}}>{s}</span>)}
                        {j.svc.length > 2 && <span className="badge badge-outline" style={{fontSize:9.5}}>+{j.svc.length-2}</span>}
                      </div>
                      <div className="kanban-card-foot">
                        {t ? <span className={`avatar avatar-sm avatar-${t.color}`}>{t.initials}</span> : <span className="avatar avatar-sm" style={{borderStyle:"dashed",color:"var(--ink-4)"}}><I.Plus size={10}/></span>}
                        {j.bay && <span className="badge badge-outline" style={{fontSize:9.5}}>Bay {j.bay}</span>}
                        <span className="spacer"></span>
                        <span className="mono t-xs t-strong">{GS.fmtMoney(j.total, true)}</span>
                      </div>
                      {j.started && col.key === "in_bay" && (() => {
                        const [sh,sm] = j.started.split(":").map(Number);
                        const startMin = sh*60+sm;
                        // simulate "now" = 11:45 (within demo day)
                        const nowMin = 11*60+45;
                        const diff = Math.max(0, nowMin - startMin);
                        const h = Math.floor(diff/60), m = diff%60;
                        const long = diff >= 180; // > 3h flag
                        return (
                          <div style={{marginTop:6,paddingTop:6,borderTop:"1px dashed var(--line)",display:"flex",alignItems:"center",gap:6}}>
                            <I.Clock size={11} stroke={long?"var(--accent)":"var(--ink-3)"}/>
                            <span className="mono t-xs muted">เริ่ม {j.started}</span>
                            <span className="spacer"></span>
                            <span className="mono t-xs t-strong" style={{color: long ? "var(--accent)" : "var(--ink-2)"}}>
                              อยู่ {h>0?`${h}ชม `:""}{m}น
                            </span>
                          </div>
                        );
                      })()}
                    </div>
                  );
                })}
                {colJobs.length === 0 && <div style={{padding:"24px 8px",textAlign:"center",color:"var(--ink-5)",fontFamily:"var(--font-thai)",fontSize:12,border:"1px dashed var(--line)",borderRadius:6}}>วางการ์ดที่นี่</div>}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ============ PAYMENTS ============
function PagePayments({ setRoute }) {
  const [tab, setTab] = u3S("list");
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Payments · การชำระเงิน</div>
          <h1 className="page-title">การชำระเงิน</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm" onClick={() => setRoute("payments_aging")}><I.Chart size={13}/> AR Aging</button>
          <button className="btn btn-accent" onClick={() => setRoute("payments_new")}><I.Plus size={14}/> รับชำระเงิน</button>
        </div>
      </div>

      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="วันนี้" value={GS.fmtMoney(9120, true)} unit="฿" />
        <Kpi2 label="สัปดาห์นี้" value={GS.fmtMoney(48200, true)} unit="฿" />
        <Kpi2 label="เดือนนี้" value={GS.fmtMoney(286400, true)} unit="฿" />
        <Kpi2 label="ลูกหนี้คงค้าง" value={GS.fmtMoney(6420, true)} unit="฿" warn />
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">รายการชำระเงิน</div>
          <div className="row-flex">
            <button className="chip active">ทั้งหมด</button>
            <button className="chip">เงินสด</button>
            <button className="chip">โอน</button>
            <button className="chip">QR</button>
            <button className="chip">บัตร</button>
          </div>
        </div>
        <table className="tbl">
          <thead><tr>
            <th>เลขที่</th><th>วันที่</th><th>ลูกค้า</th><th>วิธีชำระ</th>
            <th>อ้างอิง</th><th className="num">ยอด</th><th>Invoice</th><th></th>
          </tr></thead>
          <tbody>
            {GS.PAYMENTS.map(p => {
              const c = GS.CUSTOMERS.find(c => c.id === p.custId);
              const methodMap = { cash: ["เงินสด", "ok"], transfer: ["โอน", "info"], card: ["บัตร", "default"], qr: ["QR", "warn"] };
              const [ml, mc] = methodMap[p.method];
              return (
                <tr key={p.id}>
                  <td className="code t-strong">{p.id}</td>
                  <td className="mono muted">{p.date}</td>
                  <td>{c?.name}</td>
                  <td><span className={`badge badge-${mc}`}>{ml}</span></td>
                  <td className="mono muted t-xs">{p.ref}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(p.amount, true)}</td>
                  <td className="code muted">{p.invId}</td>
                  <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function Kpi2({ label, value, unit, warn }) {
  return (
    <div className="kpi">
      <div className="kpi-label">{label}</div>
      <div className="kpi-value"><span style={{color: warn ? "var(--accent)" : undefined}}>{value}</span>{unit && <span className="unit">{unit}</span>}</div>
    </div>
  );
}

function PagePaymentsNew({ setRoute }) {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Payments › New</div>
          <h1 className="page-title">รับชำระเงิน</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => setRoute("payments")}><I.ChevronL size={14}/> กลับ</button>
        </div>
      </div>
      <div className="grid" style={{gridTemplateColumns:"1fr 1fr", maxWidth:1100}}>
        <div className="card">
          <div className="card-head"><div className="card-title">รายละเอียด</div></div>
          <div className="card-body" style={{display:"grid",gap:14}}>
            <div className="field"><label className="label">ลูกค้า <span className="req">*</span></label>
              <div className="input-group"><span className="icon"><I.Search size={15}/></span><input placeholder="ค้นหาลูกค้า…"/></div>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8}}>
              {[["เงินสด","Cash"],["โอน","Transfer"],["QR","PromptPay"],["บัตร","Card"]].map(([l,e],i) => (
                <button key={l} className="card" style={{padding:14,cursor:"pointer",border: i===0 ? "2px solid var(--ink)" : "1px solid var(--line)"}}>
                  <div className="thai t-strong" style={{fontSize:13}}>{l}</div>
                  <div className="mono t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em"}}>{e}</div>
                </button>
              ))}
            </div>
            <div className="field">
              <label className="label">จำนวนเงิน (บาท)</label>
              <input className="input" style={{fontFamily:"var(--font-mono)",fontSize:24,height:56,fontWeight:600}} placeholder="0.00"/>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8}}>
              {[100,500,1000,1605,2000,5000].map(v => <button key={v} className="btn btn-default">{GS.fmtMoney(v,true)}</button>)}
            </div>
            <div className="field"><label className="label">เลขอ้างอิง <span className="muted t-xs mono">(optional)</span></label><input className="input" placeholder="BBL-44512"/></div>
            <label className="row-flex" style={{gap:8}}><input type="checkbox" defaultChecked/><span className="thai" style={{fontSize:13}}>auto-apply ใบแจ้งหนี้คงค้าง <span className="muted t-xs">(oldest-first)</span></span></label>
          </div>
          <div className="card-foot">
            <button className="btn btn-ghost" onClick={() => setRoute("payments")}>ยกเลิก</button>
            <button className="btn btn-accent" style={{minWidth:160}}><I.Check size={14}/> บันทึก</button>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">ใบแจ้งหนี้คงค้าง</div></div>
          <table className="tbl">
            <thead><tr><th>เลขที่</th><th>วันที่</th><th className="num">ยอด</th><th></th></tr></thead>
            <tbody>
              {GS.INVOICES.filter(i => i.status==="finalized" && i.total>i.paid).map(inv => (
                <tr key={inv.id}>
                  <td className="code">{inv.id}</td>
                  <td className="mono muted t-xs">26/4/2569</td>
                  <td className="num mono">{GS.fmtMoney(inv.total - inv.paid, true)}</td>
                  <td><input type="checkbox" defaultChecked/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function PagePaymentsAging({ setRoute }) {
  const rows = GS.INVOICES.filter(i => i.status==="finalized" && i.paid<i.total).map(inv => {
    const c = GS.CUSTOMERS.find(c => c.id === inv.custId);
    return { name: c?.name, b0: inv.total - inv.paid, b1: 0, b2: 0, b3: 0 };
  });
  const tot = rows.reduce((s,r) => s + r.b0 + r.b1 + r.b2 + r.b3, 0);
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">AR Aging · ลูกหนี้คงค้าง</div>
          <h1 className="page-title">ลูกหนี้คงค้าง</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => setRoute("payments")}><I.ChevronL size={14}/> กลับ</button>
          <button className="btn btn-default btn-sm"><I.Download size={13}/> CSV</button>
        </div>
      </div>
      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="ยอดรวม" value={GS.fmtMoney(tot, true)} unit="฿" warn />
        <Kpi2 label="0–30 วัน" value={GS.fmtMoney(tot, true)} unit="฿" />
        <Kpi2 label="31–60 วัน" value="0.00" unit="฿" />
        <Kpi2 label="เกิน 90 วัน" value="0.00" unit="฿" />
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>ลูกค้า</th><th className="num">0–30</th><th className="num">31–60</th>
            <th className="num">61–90</th><th className="num">>90</th><th className="num">รวม</th>
          </tr></thead>
          <tbody>
            {rows.map((r,i) => (
              <tr key={i}>
                <td>{r.name}</td>
                <td className="num mono aging-1">{GS.fmtMoney(r.b0, true)}</td>
                <td className="num mono muted">0.00</td>
                <td className="num mono muted">0.00</td>
                <td className="num mono aging-3">0.00</td>
                <td className="num mono t-strong">{GS.fmtMoney(r.b0, true)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ POS ============
function PagePOS({ setRoute }) {
  const [cart, setCart] = u3S([
    { code: "OIL-CHG", name: "เปลี่ยนน้ำมันเครื่อง", type: "svc", qty: 1, price: 350 },
    { code: "OF-TOYOTA", name: "กรองน้ำมันเครื่อง Toyota", type: "part", qty: 1, price: 180 },
  ]);
  const sub = cart.reduce((s,l) => s + l.qty*l.price, 0);
  const vat = sub * 0.07;
  const total = sub + vat;

  return (
    <div style={{height:"calc(100vh - 120px)",display:"grid",gridTemplateColumns:"1.4fr 1fr",gap:16}}>
      {/* Catalog */}
      <div className="card" style={{display:"flex",flexDirection:"column",overflow:"hidden"}}>
        <div className="card-head">
          <div className="card-title">POS · ขายหน้าเคาน์เตอร์</div>
        </div>
        <div style={{padding:14,borderBottom:"1px solid var(--line)"}}>
          <div className="input-group">
            <span className="icon"><I.Search size={15}/></span>
            <input placeholder="สแกนบาร์โค้ด หรือพิมพ์โค้ดอะไหล่ / ชื่อ…" autoFocus/>
            <span className="kbd">/</span>
          </div>
          <div className="row-flex" style={{gap:6,marginTop:10,flexWrap:"wrap"}}>
            {["ทั้งหมด","กรอง","น้ำมัน","แบต","เบรก","ยาง","อุปกรณ์","งาน"].map((c,i) => <button key={c} className={"chip"+(i===0?" active":"")}>{c}</button>)}
          </div>
        </div>
        <div style={{flex:1,overflow:"auto",padding:14}}>
          <div className="grid grid-3">
            {GS.PARTS.slice(0,9).map(p => (
              <button key={p.code} className="card" style={{padding:12,cursor:"pointer",textAlign:"left"}}
                onClick={() => setCart(c => {
                  const ex = c.find(x => x.code === p.code);
                  if (ex) return c.map(x => x.code === p.code ? {...x, qty: x.qty+1} : x);
                  return [...c, { code: p.code, name: p.name, type: "part", qty: 1, price: p.price }];
                })}
              >
                <div style={{height:48,background:"var(--surface-3)",borderRadius:4,marginBottom:10,display:"grid",placeItems:"center",color:"var(--ink-5)"}}><I.Box size={20}/></div>
                <div className="code t-xs muted">{p.code}</div>
                <div className="thai t-strong" style={{fontSize:12,lineHeight:1.3,margin:"3px 0",height:32,overflow:"hidden"}}>{p.name}</div>
                <div className="row-flex between">
                  <span className="mono t-strong">{GS.fmtMoney(p.price, true)}</span>
                  <span className="badge badge-outline" style={{fontSize:9}}>{p.stock}</span>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      {/* Cart */}
      <div className="card" style={{display:"flex",flexDirection:"column",overflow:"hidden"}}>
        <div className="card-head">
          <div className="card-title">ตะกร้า <span className="muted t-xs mono">{cart.length} รายการ</span></div>
          <button className="btn btn-ghost btn-sm"><I.Trash size={13}/> ล้าง</button>
        </div>
        <div style={{padding:14,borderBottom:"1px solid var(--line)"}}>
          <div className="field">
            <label className="label">ลูกค้า</label>
            <div className="input-group"><span className="icon"><I.User size={14}/></span><input placeholder="walk-in / ค้นหาลูกค้า…"/></div>
          </div>
        </div>
        <div style={{flex:1,overflow:"auto"}}>
          {cart.map((l,i) => (
            <div key={i} style={{padding:"12px 14px",borderBottom:"1px solid var(--line-soft)"}}>
              <div className="row-flex between" style={{marginBottom:6}}>
                <div style={{flex:1}}>
                  <div className="thai t-strong" style={{fontSize:13}}>{l.name}</div>
                  <div className="code t-xs muted">{l.code}</div>
                </div>
                <button className="tb-iconbtn" style={{width:24,height:24}} onClick={() => setCart(c => c.filter((_,j) => j!==i))}><I.X size={13}/></button>
              </div>
              <div className="row-flex between">
                <div className="row-flex" style={{gap:0,border:"1px solid var(--line)",borderRadius:6}}>
                  <button className="tb-iconbtn" style={{width:30,height:30,border:0}} onClick={() => setCart(c => c.map((x,j) => j===i ? {...x, qty: Math.max(1, x.qty-1)} : x))}><I.Minus size={12}/></button>
                  <span className="mono" style={{minWidth:36,textAlign:"center",fontSize:13}}>{l.qty}</span>
                  <button className="tb-iconbtn" style={{width:30,height:30,border:0}} onClick={() => setCart(c => c.map((x,j) => j===i ? {...x, qty: x.qty+1} : x))}><I.Plus size={12}/></button>
                </div>
                <span className="mono t-strong">{GS.fmtMoney(l.qty*l.price, true)}</span>
              </div>
            </div>
          ))}
        </div>
        <div style={{padding:14,borderTop:"1px solid var(--line)",background:"var(--surface-2)"}}>
          <div className="row-flex between" style={{marginBottom:4}}><span className="muted">ยอดก่อน VAT</span><span className="mono">{GS.fmtMoney(sub)}</span></div>
          <div className="row-flex between" style={{marginBottom:8}}><span className="muted">VAT 7%</span><span className="mono">{GS.fmtMoney(vat)}</span></div>
          <div className="row-flex between" style={{padding:"8px 0",borderTop:"1px solid var(--line)"}}>
            <span className="thai t-strong" style={{fontSize:14}}>รวม</span>
            <span className="mono t-strong" style={{fontSize:24}}>{GS.fmtMoney(total)}</span>
          </div>
          <button className="btn btn-accent btn-lg" style={{width:"100%",marginTop:10}}><I.Receipt size={16}/> ชำระเงิน · F9</button>
        </div>
      </div>
    </div>
  );
}

// ============ INVENTORY ============
function PageInventory({ setRoute }) {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Inventory · สต๊อก / คลัง</div>
          <h1 className="page-title">สต๊อก</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Download size={13}/> Export</button>
          <button className="btn btn-default"><I.Plus size={14}/> ปรับสต๊อก</button>
          <button className="btn btn-accent"><I.Plus size={14}/> เพิ่มคลัง</button>
        </div>
      </div>

      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="คลังทั้งหมด" value={GS.WAREHOUSES.length} unit="คลัง"/>
        <Kpi2 label="SKU รวม" value={GS.WAREHOUSES.reduce((s,w) => s + w.sku, 0)} unit="รายการ"/>
        <Kpi2 label="จำนวนรวม" value={GS.WAREHOUSES.reduce((s,w) => s + w.qty, 0)} unit="ชิ้น"/>
        <Kpi2 label="ใกล้หมด" value={4} unit="รายการ" warn/>
      </div>

      <div className="card" style={{marginBottom:16}}>
        <div className="card-head">
          <div className="card-title">คลังทั้งหมด</div>
        </div>
        <table className="tbl">
          <thead><tr><th>คลัง</th><th>โค้ด</th><th className="num">SKU</th><th className="num">จำนวนรวม</th><th className="num">จอง</th><th>สถานะ</th><th></th></tr></thead>
          <tbody>
            {GS.WAREHOUSES.map(w => (
              <tr key={w.code}>
                <td><span className="row-flex"><I.Garage size={15} stroke="var(--ink-3)"/><span className="t-strong">{w.name}</span></span></td>
                <td className="code">{w.code}</td>
                <td className="num mono">{w.sku}</td>
                <td className="num mono t-strong">{GS.fmtInt(w.qty)}</td>
                <td className="num mono muted">{w.reserved}</td>
                <td><span className="badge badge-ok"><span className="badge-dot"></span>active</span></td>
                <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">แจ้งเตือนสต๊อกใกล้หมด</div>
          <span className="badge badge-warn">{GS.PARTS.filter(p => p.stock <= p.reorder + 4).length} รายการ</span>
        </div>
        <table className="tbl">
          <thead><tr><th>โค้ด</th><th>ชื่อ</th><th>หมวด</th><th className="num">คงเหลือ</th><th className="num">จุดสั่ง</th><th className="num">ราคาทุน</th><th></th></tr></thead>
          <tbody>
            {GS.PARTS.filter(p => p.stock <= p.reorder + 4).map(p => (
              <tr key={p.code}>
                <td className="code">{p.code}</td>
                <td>{p.name}</td>
                <td><span className="badge badge-default">{p.cat}</span></td>
                <td className="num mono" style={{color:p.stock<=p.reorder?"var(--accent)":"var(--warn)"}}>{p.stock}</td>
                <td className="num mono muted">{p.reorder}</td>
                <td className="num mono">{GS.fmtMoney(p.cost,true)}</td>
                <td><button className="btn btn-default btn-sm">สั่งซื้อ</button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ PARTS ============
function PageParts() {
  const [q, setQ] = u3S("");
  const list = GS.PARTS.filter(p => !q || p.name.toLowerCase().includes(q.toLowerCase()) || p.code.toLowerCase().includes(q.toLowerCase()));
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Parts · อะไหล่ · {GS.PARTS.length} รายการ</div>
          <h1 className="page-title">อะไหล่</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Download size={13}/> Export</button>
          <button className="btn btn-accent"><I.Plus size={14}/> เพิ่มอะไหล่</button>
        </div>
      </div>
      <div className="filter-bar">
        <div className="input-group" style={{flex:1,maxWidth:400}}>
          <span className="icon"><I.Search size={15}/></span>
          <input placeholder="ค้นหาโค้ด / ชื่ออะไหล่…" value={q} onChange={e=>setQ(e.target.value)}/>
        </div>
        <button className="chip active">ทั้งหมด</button>
        {["กรอง","น้ำมัน","เบรก","แบต","ยาง","เครื่อง"].map(c => <button key={c} className="chip">{c}</button>)}
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>โค้ด</th><th>ชื่อ</th><th>ยี่ห้อ</th><th>หน่วย</th><th>หมวด</th>
            <th className="num">ทุน</th><th className="num">ราคาขาย</th><th className="num">มาร์จิน</th><th className="num">คงเหลือ</th><th></th>
          </tr></thead>
          <tbody>
            {list.map(p => {
              const margin = ((p.price - p.cost) / p.price * 100).toFixed(0);
              return (
                <tr key={p.code}>
                  <td className="code t-strong">{p.code}</td>
                  <td>{p.name}</td>
                  <td><span className="badge badge-outline">{p.brand}</span></td>
                  <td className="mono t-xs muted">{p.unit}</td>
                  <td><span className="badge badge-default">{p.cat}</span></td>
                  <td className="num mono muted">{GS.fmtMoney(p.cost,true)}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(p.price,true)}</td>
                  <td className="num mono" style={{color:"var(--ok)"}}>{margin}%</td>
                  <td className="num mono" style={{color:p.stock<=p.reorder?"var(--accent)":"var(--ink)"}}>{p.stock}</td>
                  <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ SERVICES ============
function PageServices() {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Services · งานบริการ · {GS.SERVICES.length} รายการ</div>
          <h1 className="page-title">งานบริการ</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-accent"><I.Plus size={14}/> เพิ่มงาน</button>
        </div>
      </div>
      <div className="filter-bar">
        <div className="input-group" style={{flex:1,maxWidth:400}}>
          <span className="icon"><I.Search size={15}/></span>
          <input placeholder="ค้นหาโค้ด / ชื่องาน…"/>
        </div>
        <button className="chip active">ทั้งหมด</button>
        {["เครื่องยนต์","ช่วงล่าง","ไฟฟ้า","แอร์","ทั่วไป"].map(c => <button key={c} className="chip">{c}</button>)}
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>โค้ด</th><th>ชื่อ</th><th>หมวด</th><th className="num">นาที</th><th className="num">ราคาตั้งต้น</th><th>สถานะ</th><th></th></tr></thead>
          <tbody>
            {GS.SERVICES.map(s => (
              <tr key={s.code}>
                <td className="code t-strong">{s.code}</td>
                <td>
                  <div className="thai t-strong" style={{fontSize:13}}>{s.name_th}</div>
                  <div className="mono t-xs muted">{s.name_en}</div>
                </td>
                <td><span className="badge badge-default">{s.cat}</span></td>
                <td className="num mono">{s.min}</td>
                <td className="num mono t-strong">{GS.fmtMoney(s.price, true)}</td>
                <td><span className="badge badge-ok"><span className="badge-dot"></span>active</span></td>
                <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.Pages3 = { PageDispatch, PagePayments, PagePaymentsNew, PagePaymentsAging, PagePOS, PageInventory, PageParts, PageServices };