// Pages: Home, Customers, Intake, Jobs, Quotes
const { useState: uS, useEffect: uE, useMemo: uM, useRef: uR } = React;

// ============ HOME ============
function PageHome({ setRoute }) {
  const k = GS.KPIS;
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">วันที่ {GS.fmtDateTH(GS.TODAY)} · MON 27 APR 2026</div>
          <h1 className="page-title">สวัสดี, ลุงวุ้น 👋</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Calendar size={14} /> วันนี้</button>
          <button className="btn btn-default btn-sm"><I.Download size={14} /> Export</button>
        </div>
      </div>

      {/* Quick actions — large tap targets, fastest path to common tasks */}
      <div className="grid grid-4" style={{marginBottom:20}}>
        <QuickAction icon="Car" title="รับรถใหม่" sub="Intake · I" accent onClick={() => setRoute("intake")} />
        <QuickAction icon="Wrench" title="เปิด Job" sub="New Job · J" onClick={() => setRoute("jobs")} />
        <QuickAction icon="Money" title="รับชำระเงิน" sub="Receive payment · P" onClick={() => setRoute("payments")} />
        <QuickAction icon="Receipt" title="POS / ขายหน้าร้าน" sub="Counter sale" onClick={() => setRoute("pos")} />
      </div>

      {/* KPI strip */}
      <div className="grid grid-4" style={{marginBottom:20}}>
        <Kpi label="รายได้วันนี้" value={GS.fmtMoney(k.todayRevenue, true)} unit="฿" delta="+12.4% vs avg" up />
        <Kpi label="งานวันนี้" value={k.todayJobs} unit="jobs" hint={`${k.inBay} ในช่อง · ${k.waiting} รอ · ${k.doneToday} เสร็จ`} />
        <Kpi label="ลูกหนี้คงค้าง" value={GS.fmtMoney(k.ar, true)} unit="฿" hint="0 เกินกำหนด" />
        <Kpi label="แจ้งเตือนสต๊อก" value={k.partsAlert} unit="รายการ" hint="ต่ำกว่าจุดสั่ง" warn />
      </div>

      <div className="grid" style={{gridTemplateColumns:"2fr 1fr", marginBottom:20}}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">งานในวันนี้</div>
              <div className="card-sub">Today's pipeline · {GS.JOBS.length} jobs</div>
            </div>
            <div className="row-flex">
              <button className="btn btn-ghost btn-sm" onClick={() => setRoute("dispatch")}>เปิด Dispatch <I.ChevronR size={12}/></button>
            </div>
          </div>
          <div style={{padding:16}}>
            <PipelineStrip jobs={GS.JOBS} />
            <table className="tbl" style={{marginTop:12}}>
              <thead><tr>
                <th>เลขที่</th><th>ลูกค้า</th><th>ทะเบียน</th><th>ช่าง</th><th>สถานะ</th><th></th>
              </tr></thead>
              <tbody>
                {GS.JOBS.slice(0,5).map(j => {
                  const cust = GS.CUSTOMERS.find(c => c.id === j.custId);
                  const tech = GS.TECHS.find(t => t.id === j.tech);
                  const st = GS.JOB_STATUS[j.status];
                  return (
                    <tr key={j.id} onClick={() => setRoute("jobs")}>
                      <td className="code">{j.id}</td>
                      <td>{cust?.name}</td>
                      <td className="mono">{j.plate}</td>
                      <td>{tech ? <span className="row-flex"><span className={`avatar avatar-sm avatar-${tech.color}`}>{tech.initials}</span>{tech.name}</span> : <span className="muted">—</span>}</td>
                      <td><span className={`badge badge-${st.color}`}><span className="badge-dot"></span>{st.label}</span></td>
                      <td style={{width:30,textAlign:"right"}}><I.ChevronR size={14} stroke="var(--ink-4)" /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">เงินสดวันนี้</div>
              <div className="card-sub">Cash today</div>
            </div>
          </div>
          <div className="card-body">
            <div style={{display:"flex",flexDirection:"column",gap:14}}>
              <CashRow label="เงินสด" amount={4205} pct={0.46} />
              <CashRow label="โอน" amount={3120} pct={0.34} />
              <CashRow label="QR PromptPay" amount={1100} pct={0.12} />
              <CashRow label="บัตรเครดิต" amount={695} pct={0.08} />
            </div>
            <hr className="hr" />
            <div className="row-flex between">
              <div>
                <div className="t-xs muted mono" style={{textTransform:"uppercase",letterSpacing:".08em"}}>รวม</div>
                <div className="t-xl mono t-strong">{GS.fmtMoney(9120)}</div>
              </div>
              <button className="btn btn-default btn-sm" onClick={() => setRoute("payments")}>ดูทั้งหมด <I.ChevronR size={12}/></button>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-2">
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">ผลงานช่าง · วันนี้</div>
              <div className="card-sub">Mechanic productivity</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => setRoute("payroll")}>ดูทั้งหมด <I.ChevronR size={12}/></button>
          </div>
          <div style={{padding:6}}>
            <table className="tbl">
              <thead><tr><th>ช่าง</th><th>Jobs</th><th className="num">ชั่วโมง</th><th className="num">รายได้</th><th className="num">%</th></tr></thead>
              <tbody>
                {GS.TECHS.map(t => {
                  const jobs = GS.JOBS.filter(j => j.tech === t.id);
                  const hrs = jobs.length * 1.4;
                  const rev = jobs.reduce((s,j) => s + j.total, 0);
                  const pct = Math.min(rev / 5000, 1);
                  return (
                    <tr key={t.id}>
                      <td><span className="row-flex"><span className={`avatar avatar-sm avatar-${t.color}`}>{t.initials}</span>{t.name}<span className="muted t-xs">· {t.role}</span></span></td>
                      <td className="mono">{jobs.length}</td>
                      <td className="num mono">{hrs.toFixed(1)}</td>
                      <td className="num mono t-strong">{GS.fmtMoney(rev, true)}</td>
                      <td className="num"><Bar pct={pct} /></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">สต๊อกใกล้หมด</div>
              <div className="card-sub">Low stock alerts</div>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => setRoute("inventory")}>ดูสต๊อก <I.ChevronR size={12}/></button>
          </div>
          <div style={{padding:6}}>
            <table className="tbl">
              <thead><tr><th>โค้ด</th><th>ชื่อ</th><th className="num">คงเหลือ</th><th className="num">จุดสั่ง</th></tr></thead>
              <tbody>
                {GS.PARTS.filter(p => p.stock <= p.reorder + 4).slice(0, 6).map(p => (
                  <tr key={p.code}>
                    <td className="code">{p.code}</td>
                    <td>{p.name}</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>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

function QuickAction({ icon, title, sub, accent, onClick }) {
  const IconC = I[icon];
  return (
    <button onClick={onClick} className={"card"} style={{
      cursor:"pointer", padding:18, display:"flex", alignItems:"center", gap:14,
      background: accent ? "var(--ink)" : "var(--surface)",
      color: accent ? "var(--bg)" : "var(--ink)",
      border: accent ? "1px solid var(--ink)" : undefined,
      textAlign:"left", transition:"transform .08s, box-shadow .12s",
    }}
    onMouseEnter={e => e.currentTarget.style.boxShadow = "var(--shadow-md)"}
    onMouseLeave={e => e.currentTarget.style.boxShadow = ""}
    >
      <div style={{
        width:44,height:44,borderRadius:8,
        background: accent ? "rgba(255,255,255,0.1)" : "var(--surface-3)",
        display:"grid",placeItems:"center",
        color: accent ? "var(--bg)" : "var(--ink-2)"
      }}>
        <IconC size={22} />
      </div>
      <div>
        <div style={{fontFamily:"var(--font-thai)",fontWeight:600,fontSize:15}}>{title}</div>
        <div className="mono" style={{fontSize:10,opacity:.7,textTransform:"uppercase",letterSpacing:".1em",marginTop:2}}>{sub}</div>
      </div>
    </button>
  );
}

function Kpi({ label, value, unit, delta, hint, up, 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>
      {delta && <div className={"kpi-delta " + (up ? "up" : "down")}>{up ? <I.ArrowUp size={11}/> : <I.ArrowDown size={11}/>} {delta}</div>}
      {hint && <div className="kpi-delta">{hint}</div>}
    </div>
  );
}

function PipelineStrip({ jobs }) {
  const stages = [
    { key: "waiting", label: "รอคิว", count: jobs.filter(j => j.status === "waiting").length, color: "var(--ink-4)" },
    { key: "in_bay", label: "กำลังซ่อม", count: jobs.filter(j => j.status === "in_bay").length, color: "var(--warn)" },
    { key: "done", label: "เสร็จ", count: jobs.filter(j => j.status === "done").length, color: "var(--ok)" },
    { key: "invoiced", label: "ออกบิล", count: jobs.filter(j => j.status === "invoiced" || j.status === "quoted").length, color: "var(--info)" },
  ];
  const total = stages.reduce((s,x) => s + x.count, 0) || 1;
  return (
    <div style={{paddingBottom:4}}>
      <div style={{display:"flex",gap:8,marginBottom:8}}>
        {stages.map(s => (
          <div key={s.key} style={{flex:s.count/total, minWidth:60, height:6, borderRadius:3, background:s.color}}></div>
        ))}
      </div>
      <div style={{display:"flex",gap:8}}>
        {stages.map(s => (
          <div key={s.key} style={{flex:s.count/total, minWidth:60, fontSize:11, fontFamily:"var(--font-thai)", color:"var(--ink-3)", whiteSpace:"nowrap", overflow:"hidden", textOverflow:"ellipsis"}}>
            {s.label} <span className="mono t-strong" style={{color:"var(--ink)"}}>{s.count}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CashRow({ label, amount, pct }) {
  return (
    <div>
      <div className="row-flex between" style={{marginBottom:4}}>
        <span className="thai" style={{fontSize:13}}>{label}</span>
        <span className="mono t-strong">{GS.fmtMoney(amount, true)}</span>
      </div>
      <div style={{height:6,background:"var(--bg-2)",borderRadius:3,overflow:"hidden"}}>
        <div style={{width:`${pct*100}%`,height:"100%",background:"var(--ink)"}}></div>
      </div>
    </div>
  );
}

function Bar({ pct }) {
  return (
    <div style={{display:"inline-block",width:80,height:6,background:"var(--bg-2)",borderRadius:3,overflow:"hidden",verticalAlign:"middle"}}>
      <div style={{width:`${pct*100}%`,height:"100%",background:"var(--ok)"}}></div>
    </div>
  );
}

// ============ CUSTOMERS ============
function PageCustomers({ setRoute }) {
  const [q, setQ] = uS("");
  const [type, setType] = uS("all");
  const list = uM(() => {
    return GS.CUSTOMERS.filter(c =>
      (type === "all" || c.type === type) &&
      (!q || c.name.toLowerCase().includes(q.toLowerCase()) || c.phone.includes(q))
    );
  }, [q, type]);

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Customers · ลูกค้า · {GS.CUSTOMERS.length} ราย</div>
          <h1 className="page-title">ลูกค้า</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Download size={14}/> ส่งออก</button>
          <button className="btn btn-accent" onClick={() => setRoute("customers_new")}><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)} />
          <span className="kbd">/</span>
        </div>
        <div className="row-flex" style={{gap:4}}>
          {[["all","ทั้งหมด"],["person","บุคคล"],["company","นิติบุคคล"]].map(([v,l]) => (
            <button key={v} className={"chip" + (type === v ? " active" : "")} onClick={() => setType(v)}>{l}</button>
          ))}
        </div>
        <div className="spacer"></div>
        <button className="btn btn-ghost btn-sm"><I.Filter size={13}/> Filter</button>
        <button className="btn btn-ghost btn-sm"><I.Sort size={13}/> Sort</button>
      </div>

      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th style={{width:36}}><input type="checkbox" /></th>
            <th>ชื่อ</th><th>ประเภท</th><th>เบอร์</th><th>อีเมล</th>
            <th className="num">รถ</th><th className="num">ค้างชำระ</th><th>ลูกค้าตั้งแต่</th><th></th>
          </tr></thead>
          <tbody>
            {list.map(c => (
              <tr key={c.id}>
                <td><input type="checkbox" /></td>
                <td>
                  <div className="row-flex">
                    <span className={`avatar avatar-sm avatar-${c.type === "company" ? "ink" : ""}`}>
                      {c.type === "company" ? <I.Garage size={11}/> : c.name.replace(/^คุณ/,"").charAt(0)}
                    </span>
                    <span><span className="t-strong">{c.name}</span><div className="t-xs muted mono">{c.id}</div></span>
                  </div>
                </td>
                <td><span className={`badge ${c.type === "company" ? "badge-info" : "badge-default"}`}>{c.type === "company" ? "นิติบุคคล" : "บุคคล"}</span></td>
                <td className="mono">{c.phone}</td>
                <td className="mono muted">{c.email}</td>
                <td className="num mono">{c.vehicles}</td>
                <td className="num mono" style={{color: c.balance > 0 ? "var(--accent)" : "var(--ink-4)"}}>{c.balance > 0 ? GS.fmtMoney(c.balance, true) : "—"}</td>
                <td className="mono muted t-xs">{c.since}</td>
                <td><I.ChevronR size={14} stroke="var(--ink-4)" /></td>
              </tr>
            ))}
          </tbody>
        </table>
        <div className="card-foot">
          <span className="muted t-xs">แสดง {list.length} จาก {GS.CUSTOMERS.length} รายการ</span>
          <div className="row-flex">
            <button className="btn btn-ghost btn-sm"><I.ChevronL size={12}/></button>
            <span className="mono t-xs">1 / 3</span>
            <button className="btn btn-ghost btn-sm"><I.ChevronR size={12}/></button>
          </div>
        </div>
      </div>
    </div>
  );
}

function PageCustomerNew({ setRoute }) {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Customers › New</div>
          <h1 className="page-title">เพิ่มลูกค้าใหม่</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => setRoute("customers")}><I.ChevronL size={14}/> กลับ</button>
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:"2fr 1fr", maxWidth:1100}}>
        <div className="card">
          <div className="card-head"><div className="card-title">ข้อมูลลูกค้า</div></div>
          <div className="card-body" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
            <div className="field" style={{gridColumn:"1/-1"}}>
              <label className="label">ชื่อ <span className="req">*</span></label>
              <input className="input" placeholder="คุณสมชาย / บจก. ขนส่ง…" />
            </div>
            <div className="field"><label className="label">ประเภท</label><select className="select"><option>บุคคลทั่วไป</option><option>นิติบุคคล</option></select></div>
            <div className="field"><label className="label">เลขประจำตัวผู้เสียภาษี</label><input className="input" placeholder="13 หลัก" /></div>
            <div className="field"><label className="label">เบอร์โทร</label><input className="input" placeholder="081-234-5678" /></div>
            <div className="field"><label className="label">อีเมล</label><input className="input" placeholder="you@example.com" /></div>
            <div className="field" style={{gridColumn:"1/-1"}}><label className="label">ที่อยู่</label><textarea className="textarea" placeholder="ที่อยู่สำหรับใบกำกับภาษี"/></div>
            <div className="field" style={{gridColumn:"1/-1"}}><label className="label">หมายเหตุ</label><textarea className="textarea"/></div>
          </div>
          <div className="card-head" style={{borderTop:"1px solid var(--line)",borderBottom:0}}>
            <div className="card-title">ข้อมูลรถ <span className="muted t-xs mono" style={{marginLeft:6}}>(optional · เพิ่มภายหลังได้)</span></div>
            <button className="btn btn-ghost btn-sm"><I.Plus size={13}/> เพิ่มอีกคัน</button>
          </div>
          <div className="card-body" style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:14}}>
            <div className="field"><label className="label">ป้ายทะเบียน</label><input className="input" placeholder="กข 1234"/></div>
            <div className="field"><label className="label">ยี่ห้อ</label><input className="input" placeholder="Toyota / Honda"/></div>
            <div className="field"><label className="label">รุ่น</label><input className="input" placeholder="Vios / City"/></div>
            <div className="field"><label className="label">ปี</label><input className="input" placeholder="2020"/></div>
            <div className="field"><label className="label">สี</label><input className="input" placeholder="ขาว"/></div>
            <div className="field"><label className="label">เลขไมล์ (กม.)</label><input className="input" placeholder="50000"/></div>
          </div>
          <div className="card-foot">
            <button className="btn btn-ghost" onClick={() => setRoute("customers")}>ยกเลิก</button>
            <div className="row-flex">
              <button className="btn btn-default">บันทึกแล้วเพิ่มอีก</button>
              <button className="btn btn-accent"><I.Check size={14}/> บันทึก</button>
            </div>
          </div>
        </div>

        <div>
          <div className="card" style={{marginBottom:14}}>
            <div className="card-head"><div className="card-title">เคล็ดลับ</div></div>
            <div className="card-body" style={{fontFamily:"var(--font-thai)",fontSize:13,color:"var(--ink-2)",lineHeight:1.6}}>
              <p style={{margin:"0 0 10px"}}>• ระบบจะตรวจซ้ำเลขผู้เสียภาษีอัตโนมัติ</p>
              <p style={{margin:"0 0 10px"}}>• ถ้ายังไม่มีข้อมูลครบ บันทึกเฉพาะชื่อก่อนได้</p>
              <p style={{margin:0}}>• เพิ่มรถภายหลังจากหน้ารายละเอียดลูกค้าได้</p>
            </div>
          </div>
          <div className="card">
            <div className="card-head"><div className="card-title">ทางลัด</div></div>
            <div className="card-body" style={{display:"flex",flexDirection:"column",gap:8}}>
              <ShortcutRow keys={["⌘","S"]} label="บันทึก" />
              <ShortcutRow keys={["⌘","↵"]} label="บันทึกแล้วเพิ่มอีก" />
              <ShortcutRow keys={["ESC"]} label="ยกเลิก / กลับ" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ShortcutRow({ keys, label }) {
  return (
    <div className="row-flex between">
      <span className="thai" style={{fontSize:13}}>{label}</span>
      <span className="row-flex" style={{gap:3}}>
        {keys.map(k => <span key={k} className="mono" style={{fontSize:11,padding:"2px 6px",border:"1px solid var(--line)",borderRadius:4,background:"var(--bg-2)",color:"var(--ink-3)"}}>{k}</span>)}
      </span>
    </div>
  );
}

window.Pages1 = { PageHome, PageCustomers, PageCustomerNew };