// Pages: Intake, Jobs list, Job detail, Quotes, Billing
const { useState: u2S, useEffect: u2E } = React;

// ============ INTAKE ============
function PageIntake({ setRoute }) {
  const [step, setStep] = u2S(1);
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Intake · รับรถเข้าซ่อม</div>
          <h1 className="page-title">รับรถใหม่</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => setRoute("home")}><I.ChevronL size={14}/> กลับ</button>
        </div>
      </div>

      {/* Stepper */}
      <div className="card" style={{marginBottom:16}}>
        <div style={{display:"flex"}}>
          {[
            {n:1,th:"ลูกค้า + รถ",en:"Customer & vehicle"},
            {n:2,th:"สภาพรถ + เช็คอุปกรณ์",en:"Condition & checklist"},
            {n:3,th:"งานที่ลูกค้าแจ้ง",en:"Customer complaints"},
            {n:4,th:"ยืนยันและพิมพ์ใบรับรถ",en:"Confirm & print"},
          ].map((s,i,arr) => {
            const active = step === s.n;
            const done = step > s.n;
            return (
              <div key={s.n} onClick={() => setStep(s.n)} style={{
                flex:1,padding:"14px 16px",cursor:"pointer",
                borderRight: i < arr.length-1 ? "1px solid var(--line)" : "none",
                background: active ? "var(--surface)" : "var(--surface-2)",
                position:"relative"
              }}>
                {active && <div style={{position:"absolute",top:0,left:0,right:0,height:2,background:"var(--accent)"}}></div>}
                <div className="row-flex" style={{gap:10}}>
                  <div style={{
                    width:24,height:24,borderRadius:"50%",
                    background: done ? "var(--ok)" : (active ? "var(--ink)" : "var(--bg-2)"),
                    color: done || active ? "#fff" : "var(--ink-4)",
                    display:"grid",placeItems:"center",
                    fontFamily:"var(--font-mono)",fontSize:11,fontWeight:600,
                    border: active ? "none" : "1px solid var(--line-strong)"
                  }}>
                    {done ? <I.Check size={12}/> : s.n}
                  </div>
                  <div>
                    <div className="thai" style={{fontWeight:active?600:500,fontSize:13,color: active ? "var(--ink)" : "var(--ink-3)"}}>{s.th}</div>
                    <div className="mono t-xs" style={{color:"var(--ink-4)"}}>{s.en}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {step === 1 && (
        <div className="grid" style={{gridTemplateColumns:"2fr 1fr"}}>
          <div className="card">
            <div className="card-head"><div className="card-title">เลือกลูกค้าและรถ</div></div>
            <div className="card-body">
              <div className="field" style={{marginBottom:14}}>
                <label className="label">ลูกค้า <span className="req">*</span></label>
                <div className="input-group">
                  <span className="icon"><I.Search size={15}/></span>
                  <input placeholder="พิมพ์ชื่อ / เบอร์ / ทะเบียนเพื่อค้นหา…" defaultValue="คุณสมชาย ใจดี"/>
                </div>
                <div className="hint">หรือ <a style={{color:"var(--ink)",textDecoration:"underline"}}>เพิ่มลูกค้าใหม่</a></div>
              </div>
              <div className="field" style={{marginBottom:14}}>
                <label className="label">รถ <span className="req">*</span></label>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                  {GS.VEHICLES.filter(v => v.custId === "C001").map((v,i) => (
                    <label key={v.id} style={{
                      padding:14,border:`1px solid ${i===0 ? "var(--ink)" : "var(--line-strong)"}`,
                      borderRadius:8,cursor:"pointer",
                      background: i===0 ? "var(--surface-2)" : "var(--surface)",
                      display:"flex",alignItems:"center",gap:12
                    }}>
                      <input type="radio" name="veh" defaultChecked={i===0} style={{margin:0}}/>
                      <div style={{flex:1}}>
                        <div className="row-flex" style={{gap:6}}>
                          <span className="mono t-strong">{v.plate}</span>
                          <span className="badge badge-outline">{v.year}</span>
                        </div>
                        <div className="thai" style={{fontSize:12,color:"var(--ink-3)",marginTop:2}}>{v.make} {v.model} · {v.color} · {GS.fmtInt(v.mileage)} กม.</div>
                      </div>
                    </label>
                  ))}
                  <button className="btn btn-default" style={{height:"auto",padding:14,justifyContent:"flex-start"}}><I.Plus size={14}/> เพิ่มรถคันใหม่</button>
                </div>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
                <div className="field"><label className="label">เลขไมล์ปัจจุบัน (กม.)</label><input className="input" defaultValue="78400"/></div>
                <div className="field"><label className="label">น้ำมันคงเหลือ</label>
                  <select className="select"><option>1/4</option><option>1/2</option><option>3/4</option><option>เต็มถัง</option></select>
                </div>
              </div>
            </div>
            <div className="card-foot">
              <button className="btn btn-ghost">ยกเลิก</button>
              <button className="btn btn-accent" onClick={() => setStep(2)}>ถัดไป <I.ChevronR size={14}/></button>
            </div>
          </div>
          <div className="card">
            <div className="card-head"><div className="card-title">ใบรับรถล่าสุด</div></div>
            <div className="lst">
              {GS.JOBS.slice(0,4).map(j => {
                const c = GS.CUSTOMERS.find(c => c.id === j.custId);
                const st = GS.JOB_STATUS[j.status];
                return (
                  <div key={j.id} className="lst-item">
                    <div style={{flex:1}}>
                      <div className="t-strong" style={{fontSize:13}}>{c?.name}</div>
                      <div className="mono t-xs muted">{j.plate} · {j.id}</div>
                    </div>
                    <span className={`badge badge-${st.color}`}>{st.label}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="grid" style={{gridTemplateColumns:"2fr 1fr"}}>
          <div className="card">
            <div className="card-head"><div><div className="card-title">สภาพรถ + เช็คอุปกรณ์</div><div className="card-sub">Vehicle condition · checklist</div></div></div>
            <div className="card-body" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              <div className="field"><label className="label">เลขไมล์ตอนรับ</label><input className="input" defaultValue="142,580 km" style={{fontFamily:"var(--font-mono)"}}/></div>
              <div className="field"><label className="label">น้ำมันเหลือ</label>
                <select className="input" defaultValue="1/2"><option>เต็มถัง</option><option>3/4</option><option>1/2</option><option>1/4</option><option>เกือบหมด</option></select>
              </div>
              <div className="field" style={{gridColumn:"1/-1"}}>
                <label className="label">รอยตำหนิ / สภาพภายนอก</label>
                <div style={{padding:14,background:"var(--surface-2)",border:"1px dashed var(--line-strong)",borderRadius:6,textAlign:"center",color:"var(--ink-4)",fontSize:12}} className="thai">
                  <I.Car size={32} stroke="var(--ink-4)"/><div style={{marginTop:6}}>คลิกที่ภาพรถเพื่อมาร์กรอย — ลาก/ครอป รูปจริงได้</div>
                </div>
              </div>
              <div className="field" style={{gridColumn:"1/-1"}}>
                <label className="label">เช็คอุปกรณ์ติดรถ</label>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:6,marginTop:4}}>
                  {["ยางอะไหล่","แม่แรง","ประแจล้อ","สามเหลี่ยมเตือน","ที่ดับเพลิง","ค้อนทุบกระจก","กุญแจสำรอง","พรมรถ","ที่ชาร์จไฟ"].map(item => (
                    <label key={item} style={{display:"flex",alignItems:"center",gap:6,padding:"6px 10px",border:"1px solid var(--line)",borderRadius:4,fontSize:12.5,cursor:"pointer"}} className="thai">
                      <input type="checkbox" defaultChecked={Math.random()>0.3}/>{item}
                    </label>
                  ))}
                </div>
              </div>
            </div>
            <div className="card-foot">
              <button className="btn btn-ghost" onClick={() => setStep(1)}><I.ChevronL size={14}/> ย้อนกลับ</button>
              <button className="btn btn-accent" onClick={() => setStep(3)}>ถัดไป <I.ChevronR size={14}/></button>
            </div>
          </div>
          <IntakeSidebar step={2}/>
        </div>
      )}

      {step === 3 && (
        <div className="grid" style={{gridTemplateColumns:"2fr 1fr"}}>
          <div className="card">
            <div className="card-head"><div><div className="card-title">งานที่ลูกค้าแจ้ง</div><div className="card-sub">Customer complaints · service requests</div></div></div>
            <div className="card-body" style={{display:"flex",flexDirection:"column",gap:10}}>
              {[
                {th:"เปลี่ยนน้ำมันเครื่อง + ไส้กรอง",req:true},
                {th:"เสียงดังที่ช่วงล่างหน้าซ้าย ตอนผ่านลูกระนาด",req:true},
                {th:"แอร์ไม่เย็น — ขอตรวจน้ำยา",req:false},
              ].map((c,i)=>(
                <div key={i} style={{padding:12,border:"1px solid var(--line)",borderRadius:6,background:"var(--surface-2)"}}>
                  <div className="row-flex between" style={{marginBottom:4}}>
                    <span className="thai t-strong" style={{fontSize:13}}>#{i+1} {c.th}</span>
                    <span className={`badge ${c.req?"badge-warn":"badge-default"}`}>{c.req?"จำเป็น":"ขอตรวจ"}</span>
                  </div>
                  <div className="thai t-xs muted">รายละเอียดเพิ่มเติม / สิ่งที่ลูกค้าสังเกต</div>
                </div>
              ))}
              <button className="btn btn-default btn-sm" style={{alignSelf:"flex-start"}}><I.Plus size={13}/> เพิ่มอาการ</button>
              <div className="field" style={{marginTop:6}}>
                <label className="label">หมายเหตุพิเศษ (ลุงวุ้นเท่านั้น)</label>
                <textarea className="input" rows={3} placeholder="เช่น ลูกค้าเร่ง ต้องการรถคืนก่อนบ่ายโมง" style={{fontFamily:"var(--font-thai)",fontSize:13}}/>
              </div>
              <div className="field">
                <label className="label">วันที่นัดส่งคืน (ETA)</label>
                <div className="row-flex" style={{gap:8}}>
                  <input className="input" type="date" defaultValue="2026-04-27" style={{flex:1,fontFamily:"var(--font-mono)"}}/>
                  <input className="input" type="time" defaultValue="16:00" style={{width:120,fontFamily:"var(--font-mono)"}}/>
                </div>
              </div>
            </div>
            <div className="card-foot">
              <button className="btn btn-ghost" onClick={() => setStep(2)}><I.ChevronL size={14}/> ย้อนกลับ</button>
              <button className="btn btn-accent" onClick={() => setStep(4)}>ถัดไป <I.ChevronR size={14}/></button>
            </div>
          </div>
          <IntakeSidebar step={3}/>
        </div>
      )}

      {step === 4 && (
        <div className="grid" style={{gridTemplateColumns:"2fr 1fr"}}>
          <div className="card">
            <div className="card-head">
              <div><div className="card-title">ใบรับรถ — พรีวิว</div><div className="card-sub">Vehicle intake form · preview</div></div>
              <span className="badge badge-default mono">RC-2604-000142</span>
            </div>
            <div className="card-body" style={{padding:0}}>
              <div style={{padding:"24px 28px",background:"var(--surface)",fontFamily:"var(--font-thai)"}}>
                <div className="row-flex between" style={{borderBottom:"2px solid var(--ink)",paddingBottom:10,marginBottom:14}}>
                  <div>
                    <div style={{fontSize:18,fontWeight:700}}>นายอะไหล่ยนต์</div>
                    <div className="t-xs muted mono">123/4 ถ.พระราม 4 คลองเตย กทม. 10110 · 02-XXX-XXXX</div>
                  </div>
                  <div style={{textAlign:"right"}}>
                    <div className="t-xs muted mono">ใบรับรถ · INTAKE</div>
                    <div className="mono t-strong" style={{fontSize:14}}>RC-2604-000142</div>
                    <div className="mono t-xs muted">27 เม.ย. 2569 · 11:42</div>
                  </div>
                </div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:14}}>
                  <div>
                    <div className="t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:4}}>ลูกค้า</div>
                    <div className="t-strong" style={{fontSize:14}}>คุณวิชัย ศรีทอง</div>
                    <div className="mono t-xs">081-234-5678</div>
                    <div className="t-xs muted">ลูกค้าเก่า · เข้าครั้งที่ 9</div>
                  </div>
                  <div>
                    <div className="t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:4}}>รถ</div>
                    <div className="row-flex" style={{gap:8}}>
                      <span style={{padding:"3px 10px",background:"var(--ink)",color:"var(--surface)",fontFamily:"var(--font-mono)",fontWeight:600,borderRadius:3,fontSize:13}}>กข 1234</span>
                      <span className="t-strong" style={{fontSize:14}}>Toyota Vios 2019</span>
                    </div>
                    <div className="mono t-xs">VIN: MR053KE...0142 · เลขไมล์ 142,580</div>
                  </div>
                </div>
                <div style={{marginBottom:14}}>
                  <div className="t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>งานที่ลูกค้าแจ้ง</div>
                  <ol style={{margin:0,paddingLeft:20,fontSize:13,lineHeight:1.7}}>
                    <li>เปลี่ยนน้ำมันเครื่อง + ไส้กรอง</li>
                    <li>เสียงดังที่ช่วงล่างหน้าซ้าย ตอนผ่านลูกระนาด</li>
                    <li>แอร์ไม่เย็น — ขอตรวจน้ำยา</li>
                  </ol>
                </div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:14,marginBottom:14,padding:10,background:"var(--surface-2)",border:"1px solid var(--line)",borderRadius:4}}>
                  <div><div className="t-xs muted">น้ำมันเหลือ</div><div className="t-strong" style={{fontSize:13}}>1/2 ถัง</div></div>
                  <div><div className="t-xs muted">อุปกรณ์ติดรถ</div><div className="t-strong" style={{fontSize:13}}>ครบ 9/9 รายการ</div></div>
                  <div><div className="t-xs muted">นัดส่งคืน</div><div className="t-strong" style={{fontSize:13}}>27 เม.ย. 16:00</div></div>
                </div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:30,marginTop:30,paddingTop:20,borderTop:"1px dashed var(--line-strong)"}}>
                  <div style={{textAlign:"center"}}>
                    <div style={{borderBottom:"1px solid var(--ink)",height:50,marginBottom:6}}></div>
                    <div className="t-xs">ลายเซ็นลูกค้า</div>
                  </div>
                  <div style={{textAlign:"center"}}>
                    <div style={{borderBottom:"1px solid var(--ink)",height:50,marginBottom:6}}></div>
                    <div className="t-xs">ผู้รับรถ (ที่ปรึกษางานบริการ)</div>
                  </div>
                </div>
              </div>
            </div>
            <div className="card-foot">
              <button className="btn btn-ghost" onClick={() => setStep(3)}><I.ChevronL size={14}/> ย้อนกลับ</button>
              <div className="row-flex" style={{gap:8}}>
                <button className="btn btn-default"><I.Print size={14}/> พิมพ์ใบรับรถ</button>
                <button className="btn btn-default"><I.Download size={14}/> ส่งทาง LINE</button>
                <button className="btn btn-accent" onClick={() => setRoute("jobs")}><I.Check size={14}/> บันทึก + เปิดใบงาน</button>
              </div>
            </div>
          </div>
          <IntakeSidebar step={4}/>
        </div>
      )}
    </div>
  );
}

// ============ JOBS LIST (SWIMLANE) ============
function PageJobs({ setRoute, openJob }) {
  const [view, setView] = u2S("swimlane");
  const [jobs, setJobs] = u2S(GS.JOBS.map(j => ({...j})));
  const [tick, setTick] = u2S(0);
  const [now, setNow] = u2S(new Date(2026,3,27,11,15,0));
  const [pulse, setPulse] = u2S({});

  // Realtime simulation: tick every second; ETA countdown + occasional state advance
  u2E(() => {
    const id = setInterval(() => {
      setTick(t => t + 1);
      setNow(n => new Date(n.getTime() + 1000));
    }, 1000);
    return () => clearInterval(id);
  }, []);

  // Random progression every ~12 seconds
  u2E(() => {
    if (tick === 0 || tick % 12 !== 0) return;
    setJobs(js => {
      const order = ["waiting","in_bay","done","invoiced"];
      const candidates = js.filter(j => order.indexOf(j.status) < 3);
      if (candidates.length === 0) return js;
      const pick = candidates[Math.floor(Math.random()*candidates.length)];
      const nextStatus = order[order.indexOf(pick.status)+1];
      setPulse(p => ({...p, [pick.id]: Date.now()}));
      return js.map(j => j.id === pick.id ? {...j, status: nextStatus, _moved: Date.now()} : j);
    });
  }, [tick]);

  const lanes = [
    { key: "waiting", label: "รอคิว", en: "Waiting", color: "var(--ink-4)", soft: "#ece8de" },
    { key: "in_bay", label: "กำลังซ่อม", en: "In bay", color: "var(--warn)", soft: "var(--warn-soft)" },
    { key: "done", label: "เสร็จ — รอลูกค้า", en: "Ready", color: "var(--ok)", soft: "var(--ok-soft)" },
    { key: "invoiced", label: "ออกบิล / ส่งมอบ", en: "Delivered", color: "var(--info)", soft: "var(--info-soft)" },
    { key: "quoted", label: "เสนอราคา / รออนุมัติ", en: "Quoted", color: "var(--accent)", soft: "var(--accent-soft)" },
  ];

  const fmtClock = (d) => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;
  const etaDiff = (etaStr) => {
    if (!etaStr) return null;
    const [h,m] = etaStr.split(":").map(Number);
    const eta = new Date(now); eta.setHours(h, m, 0, 0);
    const diff = Math.round((eta - now) / 60000);
    return diff;
  };

  const [drag, setDrag] = u2S(null);
  const [over, setOver] = u2S(null);
  const onDrop = (laneKey) => {
    if (!drag) return;
    setJobs(js => js.map(j => j.id === drag ? {...j, status: laneKey, _moved: Date.now()} : j));
    setPulse(p => ({...p, [drag]: Date.now()}));
    setDrag(null); setOver(null);
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">
            <span style={{display:"inline-flex",alignItems:"center",gap:6}}>
              <span className="live-dot"></span>
              <span className="mono" style={{color:"var(--ok)",fontWeight:600}}>LIVE</span>
              <span style={{color:"var(--ink-4)"}}>·</span>
              <span className="mono">{fmtClock(now)}</span>
              <span style={{color:"var(--ink-4)"}}>·</span>
              <span>Job Cards · ใบงาน · {jobs.length} ใบ</span>
            </span>
          </div>
          <h1 className="page-title">ใบงาน</h1>
        </div>
        <div className="page-actions">
          <div className="row-flex" style={{gap:0,border:"1px solid var(--line-strong)",borderRadius:6,overflow:"hidden"}}>
            <button className={"btn btn-sm "+(view==="swimlane"?"btn-ink":"btn-ghost")} style={{borderRadius:0}} onClick={() => setView("swimlane")}><I.Dispatch size={13}/> Swimlane</button>
            <button className={"btn btn-sm "+(view==="table"?"btn-ink":"btn-ghost")} style={{borderRadius:0,borderLeft:"1px solid var(--line-strong)"}} onClick={() => setView("table")}><I.List size={13}/> ตาราง</button>
          </div>
          <button className="btn btn-default btn-sm" onClick={() => setRoute("dispatch")}><I.Dispatch size={14}/> Dispatch</button>
          <button className="btn btn-accent" onClick={() => openJob("J2604-NEW")}><I.Plus size={14}/> เปิด Job ใหม่</button>
        </div>
      </div>

      <div className="filter-bar">
        <div className="input-group" style={{maxWidth:340,flex:1}}>
          <span className="icon"><I.Search size={15}/></span>
          <input placeholder="ค้นหาเลข Job / ลูกค้า / ทะเบียน…"/>
          <span className="kbd">/</span>
        </div>
        <button className="chip"><I.Calendar size={12}/> วันนี้</button>
        <button className="chip">ช่างทั้งหมด</button>
        <button className="chip">ทุก Bay</button>
        <div className="spacer"></div>
        <span className="muted t-xs mono">auto-update ทุกวินาที</span>
      </div>

      {view === "swimlane" && (
        <div className="swimlane">
          {lanes.map(lane => {
            const laneJobs = jobs.filter(j => j.status === lane.key);
            return (
              <div key={lane.key}
                className={"swim-lane" + (over === lane.key ? " drag-over" : "")}
                onDragOver={e => { e.preventDefault(); setOver(lane.key); }}
                onDragLeave={() => setOver(null)}
                onDrop={() => onDrop(lane.key)}
              >
                <div className="swim-head" style={{borderLeft:`3px solid ${lane.color}`}}>
                  <div className="row-flex" style={{gap:8,flex:1,minWidth:0}}>
                    <span style={{width:8,height:8,borderRadius:"50%",background:lane.color,flexShrink:0}}></span>
                    <span className="thai t-strong" style={{fontSize:13,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{lane.label}</span>
                    <span className="mono t-xs muted">{lane.en}</span>
                  </div>
                  <span className="swim-count" style={{background:lane.soft,color:lane.color}}>{laneJobs.length}</span>
                </div>
                <div className="swim-body">
                  {laneJobs.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);
                    const eta = etaDiff(j.eta);
                    const recent = pulse[j.id] && (Date.now() - pulse[j.id]) < 3000;
                    return (
                      <div key={j.id}
                        className={"swim-card" + (drag === j.id ? " dragging" : "") + (recent ? " just-moved" : "")}
                        draggable
                        onDragStart={() => setDrag(j.id)}
                        onDragEnd={() => { setDrag(null); setOver(null); }}
                        onClick={() => openJob(j.id)}
                      >
                        <div className="swim-card-top">
                          <span className="code t-xs muted">{j.id}</span>
                          {recent && <span className="badge badge-ok" style={{fontSize:9}}>● ใหม่</span>}
                        </div>
                        <div className="thai t-strong" style={{fontSize:13,lineHeight:1.3}}>{c?.name}</div>
                        <div className="row-flex" style={{gap:6,marginTop:3}}>
                          <span className="mono t-strong" style={{fontSize:12}}>{j.plate}</span>
                          <span className="muted t-xs" style={{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{v?.make} {v?.model}</span>
                        </div>
                        <div className="swim-tags">
                          {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="swim-card-foot">
                          {t ? <span className={`avatar avatar-sm avatar-${t.color}`} title={t.name}>{t.initials}</span> : <span className="avatar avatar-sm" style={{borderStyle:"dashed",color:"var(--ink-4)"}}><I.Plus size={9}/></span>}
                          {j.bay && <span className="badge badge-outline" style={{fontSize:9.5}}>B{j.bay}</span>}
                          <span style={{flex:1}}></span>
                          <span className="mono t-xs t-strong">{GS.fmtMoney(j.total, true)}</span>
                        </div>
                        {lane.key === "in_bay" && eta != null && (
                          <div className="swim-eta">
                            <span className="live-dot small"></span>
                            <I.Clock size={10} stroke="var(--ink-3)"/>
                            <span className="mono t-xs muted">ETA {j.eta}</span>
                            <span style={{flex:1}}></span>
                            <span className="mono t-xs" style={{color: eta < 0 ? "var(--accent)" : (eta < 30 ? "var(--warn)" : "var(--ok)")}}>
                              {eta < 0 ? `เลย ${-eta}m` : `เหลือ ${eta}m`}
                            </span>
                          </div>
                        )}
                        {lane.key === "waiting" && (
                          <div className="swim-eta">
                            <I.Clock size={10} stroke="var(--ink-3)"/>
                            <span className="mono t-xs muted">รอ {Math.floor(Math.random()*40)+5} นาที</span>
                          </div>
                        )}
                      </div>
                    );
                  })}
                  {laneJobs.length === 0 && <div className="swim-empty">วางการ์ดที่นี่</div>}
                </div>
              </div>
            );
          })}
        </div>
      )}

      {view === "table" && (
        <div className="card">
          <table className="tbl">
            <thead><tr>
              <th style={{width:30}}><input type="checkbox"/></th>
              <th>เลขที่</th><th>วันที่</th><th>ลูกค้า</th><th>ทะเบียน</th>
              <th>ช่าง</th><th>Bay</th><th>เริ่ม</th><th>ETA</th>
              <th className="num">ยอด</th><th>สถานะ</th><th></th>
            </tr></thead>
            <tbody>
              {jobs.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);
                const st = GS.JOB_STATUS[j.status];
                const recent = pulse[j.id] && (Date.now() - pulse[j.id]) < 3000;
                return (
                  <tr key={j.id} onClick={() => openJob(j.id)} style={recent ? {background:"var(--ok-soft)"} : undefined}>
                    <td onClick={e => e.stopPropagation()}><input type="checkbox"/></td>
                    <td className="code t-strong">{j.id}</td>
                    <td className="mono t-xs muted">26/4/2569</td>
                    <td>{c?.name}</td>
                    <td><span className="row-flex" style={{gap:6}}><span className="mono t-strong">{j.plate}</span><span className="muted t-xs">{v?.make} {v?.model}</span></span></td>
                    <td>{t ? <span className="row-flex"><span className={`avatar avatar-sm avatar-${t.color}`}>{t.initials}</span>{t.name}</span> : <span className="muted">—</span>}</td>
                    <td>{j.bay ? <span className="badge badge-outline">Bay {j.bay}</span> : <span className="muted">—</span>}</td>
                    <td className="mono">{j.started || "—"}</td>
                    <td className="mono">{j.eta || "—"}</td>
                    <td className="num mono t-strong">{GS.fmtMoney(j.total, true)}</td>
                    <td><span className={`badge badge-${st.color}`}><span className="badge-dot"></span>{st.label}</span></td>
                    <td><I.ChevronR size={14} stroke="var(--ink-4)" /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ============ JOB DETAIL ============
function PageJobDetail({ jobId, setRoute }) {
  const j = GS.JOBS.find(j => j.id === jobId) || GS.JOBS[0];
  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);
  const st = GS.JOB_STATUS[j.status];
  const [rxOpen, setRxOpen] = u2S(false);
  const [rxStep, setRxStep] = u2S("review");
  const Rx = window.ReceiptFlow && window.ReceiptFlow.ReceiptModal;

  const lines = [
    { type: "svc", code: "BRAKE-PAD", name: "เปลี่ยนผ้าเบรกหน้า", qty: 1, price: 800 },
    { type: "part", code: "BP-FRONT-SEDAN", name: "ผ้าเบรกหน้า รถเก๋งทั่วไป", qty: 1, price: 1100 },
    { type: "svc", code: "BRAKE-OIL", name: "เปลี่ยนน้ำมันเบรก", qty: 1, price: 450 },
    { type: "part", code: "BRAKE-FLUID", name: "น้ำมันเบรก DOT-4 500ml", qty: 1, price: 180 },
  ];
  const sub = lines.reduce((s,l) => s + l.qty * l.price, 0);
  const vat = sub * 0.07;
  const total = sub + vat;

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Job Card · ใบงาน</div>
          <div className="row-flex" style={{gap:10}}>
            <h1 className="page-title">{j.id}</h1>
            <span className={`status-pill badge-${st.color}`} style={{background:"var(--warn-soft)",color:"var(--warn)"}}>● {st.label}</span>
          </div>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost" onClick={() => setRoute("jobs")}><I.ChevronL size={14}/> กลับ</button>
          <button className="btn btn-default btn-sm" onClick={() => { setRxStep('print'); setRxOpen(true); }}><I.Print size={14}/> พิมพ์</button>
          <button className="btn btn-default btn-sm">เสนอราคา</button>
          <button className="btn btn-accent" onClick={() => { setRxStep('review'); setRxOpen(true); }}>ออกใบเสร็จ <I.Arrow size={14}/></button>
        </div>
      </div>

      {Rx && <Rx open={rxOpen} onClose={() => setRxOpen(false)} job={j} initialStep={rxStep} />}

      <div className="grid" style={{gridTemplateColumns:"2fr 1fr"}}>
        {/* Left: lines */}
        <div>
          <div className="card" style={{marginBottom:14}}>
            <div className="card-head">
              <div className="card-title">ข้อมูลรถ + ลูกค้า</div>
            </div>
            <div style={{padding:16,display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
              <div>
                <div className="t-xs mono muted" style={{textTransform:"uppercase",letterSpacing:".08em",marginBottom:4}}>ลูกค้า</div>
                <div className="row-flex" style={{gap:10}}>
                  <div className="avatar avatar-lg avatar-ink">{c.name.replace(/^คุณ/,"").charAt(0)}</div>
                  <div>
                    <div className="t-strong" style={{fontSize:14}}>{c.name}</div>
                    <div className="mono t-xs muted">{c.phone} · {c.email}</div>
                  </div>
                </div>
              </div>
              <div>
                <div className="t-xs mono muted" style={{textTransform:"uppercase",letterSpacing:".08em",marginBottom:4}}>รถ</div>
                <div className="row-flex" style={{gap:6}}>
                  <span className="mono t-strong" style={{fontSize:15}}>{j.plate}</span>
                  <span className="badge badge-outline">{v.year}</span>
                </div>
                <div className="thai t-xs muted" style={{marginTop:2}}>{v.make} {v.model} · {v.color} · {GS.fmtInt(v.mileage)} กม.</div>
              </div>
            </div>
          </div>

          <div className="card" style={{marginBottom:14}}>
            <div className="card-head">
              <div className="card-title">รายการ <span className="muted t-xs mono" style={{marginLeft:6}}>{lines.length} รายการ</span></div>
              <div className="row-flex">
                <button className="btn btn-ghost btn-sm"><I.Plus size={13}/> งาน</button>
                <button className="btn btn-ghost btn-sm"><I.Plus size={13}/> อะไหล่</button>
              </div>
            </div>
            <table className="tbl">
              <thead><tr>
                <th style={{width:50}}>#</th><th>โค้ด</th><th>รายการ</th><th className="num">จำนวน</th><th className="num">ราคา</th><th className="num">รวม</th><th></th>
              </tr></thead>
              <tbody>
                {lines.map((l,i) => (
                  <tr key={i}>
                    <td><span className="badge badge-outline" style={{padding:"1px 6px",fontSize:9.5}}>{l.type === "svc" ? "งาน" : "อะไหล่"}</span></td>
                    <td className="code">{l.code}</td>
                    <td>{l.name}</td>
                    <td className="num mono">{l.qty}</td>
                    <td className="num mono">{GS.fmtMoney(l.price, true)}</td>
                    <td className="num mono t-strong">{GS.fmtMoney(l.qty*l.price, true)}</td>
                    <td><I.X size={13} stroke="var(--ink-4)" /></td>
                  </tr>
                ))}
              </tbody>
            </table>
            <div className="card-foot" style={{flexDirection:"column",alignItems:"stretch",gap:6}}>
              <div className="row-flex between"><span className="muted">ยอดก่อน VAT</span><span className="mono">{GS.fmtMoney(sub)}</span></div>
              <div className="row-flex between"><span className="muted">VAT 7%</span><span className="mono">{GS.fmtMoney(vat)}</span></div>
              <div className="row-flex between" style={{paddingTop:6,borderTop:"1px solid var(--line)"}}>
                <span className="t-strong thai" style={{fontSize:14}}>รวมทั้งหมด</span>
                <span className="mono t-strong" style={{fontSize:18}}>{GS.fmtMoney(total)}</span>
              </div>
            </div>
          </div>
        </div>

        {/* Right: meta + timeline */}
        <div>
          <div className="card" style={{marginBottom:14}}>
            <div className="card-head"><div className="card-title">การจัดงาน</div></div>
            <div className="card-body" style={{display:"flex",flexDirection:"column",gap:10}}>
              <div className="row-flex between">
                <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>ช่าง</span>
                <span className="row-flex"><span className={`avatar avatar-sm avatar-${t?.color||"ink"}`}>{t?.initials||"—"}</span><span className="t-strong">{t?.name||"ยังไม่จ่าย"}</span></span>
              </div>
              <div className="row-flex between">
                <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>Bay</span>
                <span className="badge badge-outline">Bay {j.bay}</span>
              </div>
              <div className="row-flex between">
                <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>เริ่มเวลา</span>
                <span className="mono t-strong">{j.started}</span>
              </div>
              <div className="row-flex between">
                <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>ETA</span>
                <span className="mono t-strong">{j.eta}</span>
              </div>
              <div className="row-flex between">
                <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>เลขไมล์</span>
                <span className="mono">{GS.fmtInt(v.mileage)} กม.</span>
              </div>
              <hr className="hr" style={{margin:"4px 0"}}/>
              <div className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>หมายเหตุ</div>
              <div style={{padding:10,background:"var(--surface-2)",border:"1px solid var(--line)",borderRadius:6,fontFamily:"var(--font-thai)",fontSize:12,color:"var(--ink-2)"}}>{j.note || "—"}</div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><div className="card-title">Timeline</div></div>
            <div className="card-body">
              {[
                { t: "10:30", what: "เริ่มงาน Bay 2", who: "สมศักดิ์", done: true },
                { t: "10:15", what: "จ่ายงานให้ช่าง", who: "ลุงวุ้น", done: true },
                { t: "10:05", what: "ตรวจรับรถ", who: "ลุงวุ้น", done: true },
                { t: "10:00", what: "เปิดใบงาน", who: "ระบบ", done: true },
              ].map((e,i) => (
                <div key={i} className="row-flex" style={{gap:10,padding:"8px 0",borderBottom:i<3?"1px solid var(--line-soft)":"none"}}>
                  <div style={{width:6,height:6,borderRadius:"50%",background:e.done?"var(--ok)":"var(--ink-4)",flexShrink:0}}></div>
                  <div style={{flex:1}}>
                    <div className="thai" style={{fontSize:13}}>{e.what}</div>
                    <div className="mono t-xs muted">{e.who}</div>
                  </div>
                  <div className="mono t-xs muted">{e.t}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ QUOTES ============
function PageQuotes({ setRoute }) {
  const quotes = [
    { id: "Q2604-000003", date: "2026-04-26", custId: "C002", total: 5300, status: "sent", validUntil: "2026-05-10" },
  ];
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Quotes · ใบเสนอราคา</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"><I.Plus size={14}/> สร้างใบเสนอราคา</button>
        </div>
      </div>
      <div className="card">
        {quotes.length === 0 ? (
          <div className="empty">
            <div className="empty-title">ยังไม่มีใบเสนอราคา</div>
            <div className="empty-sub">สร้างจาก Job detail หรือกดปุ่มด้านบน</div>
          </div>
        ) : (
          <table className="tbl">
            <thead><tr>
              <th>เลขที่</th><th>วันที่</th><th>ลูกค้า</th><th>ใช้ได้ถึง</th>
              <th className="num">ยอด</th><th>สถานะ</th><th></th>
            </tr></thead>
            <tbody>
              {quotes.map(q => {
                const c = GS.CUSTOMERS.find(c => c.id === q.custId);
                return (
                  <tr key={q.id}>
                    <td className="code t-strong">{q.id}</td>
                    <td className="mono">26/4/2569</td>
                    <td>{c?.name}</td>
                    <td className="mono muted">10/5/2569</td>
                    <td className="num mono t-strong">{GS.fmtMoney(q.total)}</td>
                    <td><span className="badge badge-info"><span className="badge-dot"></span>ส่งให้ลูกค้า</span></td>
                    <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}

// ============ INVOICES (BILLING) ============
function PageBilling({ setRoute }) {
  const [tab, setTab] = u2S("all");
  const [rxOpen, setRxOpen] = u2S(false);
  const [rxJob, setRxJob] = u2S(null);
  const [rxInv, setRxInv] = u2S(null);
  const [rxStep, setRxStep] = u2S("review");
  const [pickOpen, setPickOpen] = u2S(false);
  const Rx = window.ReceiptFlow && window.ReceiptFlow.ReceiptModal;
  const counts = {
    all: GS.INVOICES.length,
    finalized: GS.INVOICES.filter(i => i.status === "finalized").length,
    void: GS.INVOICES.filter(i => i.status === "void").length,
  };
  const list = GS.INVOICES.filter(i => tab === "all" || i.status === tab);
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Invoices · ใบเสร็จ / ใบกำกับภาษี</div>
          <h1 className="page-title">ใบเสร็จ</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Download size={14}/> XML ภาษี</button>
          <button className="btn btn-accent" onClick={() => setPickOpen(true)}><I.Plus size={14}/> ออกใบเสร็จ</button>
        </div>
      </div>
      <div className="tabs">
        <div className={"tab"+(tab==="all"?" active":"")} onClick={()=>setTab("all")}>ทั้งหมด <span className="count">{counts.all}</span></div>
        <div className={"tab"+(tab==="finalized"?" active":"")} onClick={()=>setTab("finalized")}>ออกแล้ว <span className="count">{counts.finalized}</span></div>
        <div className={"tab"+(tab==="void"?" active":"")} onClick={()=>setTab("void")}>ยกเลิก <span className="count">{counts.void}</span></div>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr>
            <th>เลขที่</th><th>วันที่</th><th>Job</th><th>ลูกค้า</th>
            <th className="num">ยอด</th><th className="num">ชำระแล้ว</th><th>กำหนดชำระ</th><th>สถานะ</th><th></th>
          </tr></thead>
          <tbody>
            {list.map(inv => {
              const c = GS.CUSTOMERS.find(c => c.id === inv.custId);
              const balance = inv.total - inv.paid;
              return (
                <tr key={inv.id} style={{cursor:"pointer"}}
                    onClick={() => { setRxInv(inv); setRxJob(null); setRxStep("print"); setRxOpen(true); }}>
                  <td className="code t-strong">{inv.id}</td>
                  <td className="mono muted">26/4/2569</td>
                  <td className="code muted">{inv.jobId}</td>
                  <td>{c?.name}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(inv.total, true)}</td>
                  <td className="num mono" style={{color: inv.paid > 0 ? "var(--ok)" : "var(--ink-4)"}}>{GS.fmtMoney(inv.paid, true)}</td>
                  <td className="mono muted">26/5/2569</td>
                  <td>
                    {inv.status === "void"
                      ? <span className="badge badge-danger"><span className="badge-dot"></span>ยกเลิก</span>
                      : balance === 0
                        ? <span className="badge badge-ok"><span className="badge-dot"></span>ชำระแล้ว</span>
                        : <span className="badge badge-warn"><span className="badge-dot"></span>คงค้าง</span>}
                  </td>
                  <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {Rx && <Rx open={rxOpen} onClose={() => { setRxOpen(false); setRxInv(null); setRxJob(null); }}
                 job={rxJob} invoice={rxInv} initialStep={rxStep} />}

      {pickOpen && (
        <div className="scrim" onClick={() => setPickOpen(false)}>
          <div className="card" onClick={e => e.stopPropagation()}
               style={{width:"min(560px,94vw)",margin:"8vh auto",overflow:"hidden"}}>
            <div className="card-head">
              <div className="card-title">เลือก Job ที่จะออกใบเสร็จ</div>
              <button className="tb-iconbtn" onClick={() => setPickOpen(false)}><I.X size={14}/></button>
            </div>
            <div style={{maxHeight:"50vh",overflow:"auto"}}>
              {GS.JOBS.map(jb => {
                const cu = GS.CUSTOMERS.find(c => c.id === jb.custId);
                return (
                  <div key={jb.id}
                       onClick={() => { setRxJob(jb); setRxInv(null); setRxStep("review"); setPickOpen(false); setRxOpen(true); }}
                       style={{padding:"10px 14px",borderBottom:"1px solid var(--line-soft)",cursor:"pointer",display:"flex",justifyContent:"space-between",alignItems:"center",gap:10}}>
                    <div>
                      <div className="row-flex" style={{gap:8}}>
                        <span className="code t-strong">{jb.id}</span>
                        <span className="mono t-strong">{jb.plate}</span>
                      </div>
                      <div className="thai t-xs muted">{cu?.name}</div>
                    </div>
                    <span className="mono t-strong">{GS.fmtMoney(jb.total)}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.Pages2 = { PageIntake, PageJobs, PageJobDetail, PageQuotes, PageBilling };

function IntakeSidebar({ step }) {
  return (
    <div>
      <div className="card" style={{marginBottom:12}}>
        <div className="card-head"><div className="card-title">สรุปการรับรถ</div></div>
        <div className="card-body" style={{fontFamily:"var(--font-thai)",fontSize:13,lineHeight:1.6,display:"flex",flexDirection:"column",gap:6}}>
          <div className="row-flex between"><span className="muted">เลขที่</span><span className="mono t-strong">RC-2604-000142</span></div>
          <div className="row-flex between"><span className="muted">ลูกค้า</span><span className="t-strong">คุณวิชัย ศรีทอง</span></div>
          <div className="row-flex between"><span className="muted">รถ</span><span className="t-strong">กข 1234 · Vios</span></div>
          {step >= 2 && <div className="row-flex between"><span className="muted">เลขไมล์</span><span className="mono">142,580</span></div>}
          {step >= 3 && <div className="row-flex between"><span className="muted">งานแจ้ง</span><span className="t-strong">3 รายการ</span></div>}
          {step >= 3 && <div className="row-flex between"><span className="muted">นัดส่งคืน</span><span className="t-strong mono">27/4 · 16:00</span></div>}
        </div>
      </div>
      <div className="card">
        <div className="card-head"><div className="card-title">เคล็ดลับ</div></div>
        <div className="card-body thai" style={{fontSize:12.5,color:"var(--ink-2)",lineHeight:1.7}}>
          {step === 2 && "บันทึกรอยตำหนิให้ครบ ป้องกันเรื่องร้องเรียนภายหลัง"}
          {step === 3 && "เขียนอาการที่ลูกค้าแจ้งให้ละเอียด ช่างจะจ่ายงานได้แม่นยำ"}
          {step === 4 && "พิมพ์ใบรับรถให้ลูกค้าเซ็นก่อนเริ่มงาน — ป้องกันความเข้าใจผิดเรื่องสภาพรถ"}
        </div>
      </div>
    </div>
  );
}