// Pages: Payroll, Suppliers, Warranty, Reports, Tax, Admin, Login
const { useState: u4S } = React;

// ============ PAYROLL ============
function PagePayroll() {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Payroll · เงินเดือน + คอมมิชชั่น</div>
          <h1 className="page-title">เงินเดือน</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Calendar size={13}/> เม.ย. 2569</button>
          <button className="btn btn-default btn-sm"><I.Download size={13}/> สลิปเงินเดือน</button>
          <button className="btn btn-accent">ปิดงวด <I.Arrow size={14}/></button>
        </div>
      </div>
      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="ช่างทั้งหมด" value={GS.TECHS.length} unit="คน"/>
        <Kpi2 label="งวดนี้ (รวม)" value={GS.fmtMoney(96400, true)} unit="฿"/>
        <Kpi2 label="ฐาน" value={GS.fmtMoney(72000, true)} unit="฿"/>
        <Kpi2 label="คอมมิชชั่น" value={GS.fmtMoney(24400, true)} unit="฿"/>
      </div>
      <div className="card">
        <div className="card-head"><div className="card-title">งวด เม.ย. 2569 · 1–30</div></div>
        <table className="tbl">
          <thead><tr>
            <th>ช่าง</th><th>ตำแหน่ง</th><th className="num">งานที่ทำ</th>
            <th className="num">ฐาน</th><th className="num">คอม %</th><th className="num">คอม ฿</th>
            <th className="num">หัก</th><th className="num">รวมรับ</th><th>สถานะ</th>
          </tr></thead>
          <tbody>
            {GS.TECHS.map((t,i) => {
              const base = [18000,15000,15000,12000][i] || 12000;
              const jobs = [38,32,29,18][i] || 20;
              const comm = [8400,6800,5200,4000][i] || 3000;
              const ded = [200,200,0,0][i] || 0;
              return (
                <tr key={t.id}>
                  <td><span className="row-flex"><span className={`avatar avatar-${t.color}`}>{t.initials}</span>{t.name}</span></td>
                  <td><span className="badge badge-outline">{t.role}</span></td>
                  <td className="num mono">{jobs}</td>
                  <td className="num mono">{GS.fmtMoney(base, true)}</td>
                  <td className="num mono muted">{[10,8,6,5][i]}%</td>
                  <td className="num mono" style={{color:"var(--ok)"}}>{GS.fmtMoney(comm, true)}</td>
                  <td className="num mono" style={{color:"var(--accent)"}}>{ded ? `−${GS.fmtMoney(ded,true)}` : "—"}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(base+comm-ded, true)}</td>
                  <td><span className="badge badge-warn"><span className="badge-dot"></span>รออนุมัติ</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ SUPPLIERS ============
function PageSuppliers() {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Suppliers · ผู้จำหน่ายอะไหล่</div>
          <h1 className="page-title">ผู้จำหน่าย</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm">ใบสั่งซื้อ (PO)</button>
          <button className="btn btn-accent"><I.Plus size={14}/> เพิ่มผู้จำหน่าย</button>
        </div>
      </div>
      <div className="grid grid-3">
        {GS.SUPPLIERS.map(s => (
          <div key={s.id} className="card" style={{padding:16}}>
            <div className="row-flex between" style={{marginBottom:10}}>
              <div className="t-strong" style={{fontSize:14}}>{s.name}</div>
              <span className="badge badge-outline">{s.type}</span>
            </div>
            <div className="thai t-xs muted" style={{marginBottom:8}}>{s.contact}</div>
            <div className="mono t-xs muted">{s.phone}</div>
            <hr className="hr"/>
            <div className="row-flex between" style={{marginBottom:6}}>
              <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>เครดิต</span>
              <span className="mono">{s.terms} วัน</span>
            </div>
            <div className="row-flex between">
              <span className="thai" style={{fontSize:12,color:"var(--ink-3)"}}>คงค้าง</span>
              <span className="mono t-strong" style={{color: s.outstanding > 0 ? "var(--accent)" : "var(--ink-3)"}}>
                {GS.fmtMoney(s.outstanding, true)} ฿
              </span>
            </div>
            <div className="row-flex" style={{marginTop:12,gap:6}}>
              <button className="btn btn-default btn-sm" style={{flex:1}}>เปิด PO</button>
              <button className="btn btn-ghost btn-sm">รายละเอียด</button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============ WARRANTY ============
function PageWarranty() {
  const items = [
    { id: "W2604-001", jobId: "J2603-189", custName: "คุณวิชัย ปิยะวงศ์", plate: "ขก-2901", item: "ผ้าเบรกหน้า", start: "2026-04-15", end: "2026-10-15", days: 172, status: "active" },
    { id: "W2604-002", jobId: "J2603-194", custName: "คุณสมศรี ทองเจริญ", plate: "ภบ-1832", item: "แบตเตอรี่ Bosch", start: "2026-04-12", end: "2027-04-12", days: 351, status: "active" },
    { id: "W2604-003", jobId: "J2602-152", custName: "คุณชัยชนะ ฉัตรชัย", plate: "กท-9482", item: "เปลี่ยนน้ำมันเครื่อง", start: "2026-02-20", end: "2026-05-20", days: 24, status: "expiring" },
  ];
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Warranty · ใบรับประกัน</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="card">
        <table className="tbl">
          <thead><tr>
            <th>เลขที่</th><th>Job</th><th>ลูกค้า</th><th>ทะเบียน</th><th>รายการ</th>
            <th>เริ่ม</th><th>สิ้นสุด</th><th className="num">เหลือ</th><th>สถานะ</th><th></th>
          </tr></thead>
          <tbody>
            {items.map(w => (
              <tr key={w.id}>
                <td className="code t-strong">{w.id}</td>
                <td className="code muted">{w.jobId}</td>
                <td>{w.custName}</td>
                <td className="mono t-strong">{w.plate}</td>
                <td>{w.item}</td>
                <td className="mono muted">{w.start}</td>
                <td className="mono">{w.end}</td>
                <td className="num mono" style={{color: w.days < 30 ? "var(--warn)" : "var(--ink)"}}>{w.days} วัน</td>
                <td>{w.status === "expiring" ? <span className="badge badge-warn"><span className="badge-dot"></span>ใกล้หมด</span> : <span className="badge badge-ok"><span className="badge-dot"></span>คุ้มครอง</span>}</td>
                <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ REPORTS ============
function PageReports() {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Reports · รายงาน</div>
          <h1 className="page-title">รายงาน</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Calendar size={13}/> เม.ย. 2569</button>
          <button className="btn btn-default btn-sm"><I.Download size={13}/> ส่งออก PDF</button>
        </div>
      </div>

      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="รายได้เดือนนี้" value={GS.fmtMoney(286400, true)} unit="฿"/>
        <Kpi2 label="ต้นทุน" value={GS.fmtMoney(142800, true)} unit="฿"/>
        <Kpi2 label="กำไรขั้นต้น" value={GS.fmtMoney(143600, true)} unit="฿"/>
        <Kpi2 label="งานเสร็จ" value="68" unit="ใบ"/>
      </div>

      <div className="grid" style={{gridTemplateColumns:"1.4fr 1fr",marginBottom:16}}>
        <div className="card">
          <div className="card-head"><div className="card-title">รายได้รายวัน · เม.ย. 2569</div></div>
          <div className="card-body" style={{height:280,padding:20}}>
            <svg width="100%" height="100%" viewBox="0 0 600 240" preserveAspectRatio="none">
              <defs>
                <pattern id="grd" width="60" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 60 0 L 0 0 0 40" fill="none" stroke="var(--line-soft)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="600" height="240" fill="url(#grd)"/>
              {Array.from({length:30}).map((_,i) => {
                const v = 60 + Math.sin(i*0.6)*40 + Math.random()*60;
                const h = v * 1.4;
                return <rect key={i} x={i*20+5} y={240-h} width={14} height={h} fill="var(--ink)" opacity={i===26?1:0.7}/>;
              })}
            </svg>
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">งานยอดนิยม</div></div>
          <table className="tbl">
            <thead><tr><th>งาน</th><th className="num">ใบ</th><th className="num">ยอด</th></tr></thead>
            <tbody>
              {[
                ["เปลี่ยนน้ำมันเครื่อง", 24, 14400],
                ["เช็คระยะ", 18, 36000],
                ["เปลี่ยนผ้าเบรก", 12, 28200],
                ["เปลี่ยนแบต", 8, 32400],
                ["ซ่อมช่วงล่าง", 6, 19800],
              ].map(([n,c,t],i) => (
                <tr key={i}>
                  <td>{n}</td>
                  <td className="num mono">{c}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(t, true)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="grid" style={{gridTemplateColumns:"1fr 1fr"}}>
        <div className="card">
          <div className="card-head"><div className="card-title">ช่างยอดเยี่ยม</div></div>
          <div className="card-body">
            {GS.TECHS.map((t,i) => {
              const score = [38,32,29,18][i];
              const max = 38;
              return (
                <div key={t.id} style={{marginBottom:12}}>
                  <div className="row-flex between" style={{marginBottom:4}}>
                    <span className="row-flex"><span className={`avatar avatar-sm avatar-${t.color}`}>{t.initials}</span><span className="t-strong" style={{fontSize:13}}>{t.name}</span></span>
                    <span className="mono">{score} ใบ</span>
                  </div>
                  <div className="progress"><div className="progress-bar" style={{width: `${score/max*100}%`}}></div></div>
                </div>
              );
            })}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><div className="card-title">ช่องทางชำระ</div></div>
          <div className="card-body">
            {[["เงินสด",112,42],["โอน",98,37],["QR",36,14],["บัตร",18,7]].map(([n,c,p],i) => (
              <div key={i} style={{marginBottom:12}}>
                <div className="row-flex between" style={{marginBottom:4}}>
                  <span className="thai" style={{fontSize:13}}>{n}</span>
                  <span className="mono">{c} · {p}%</span>
                </div>
                <div className="progress"><div className="progress-bar" style={{width:`${p}%`,background:["var(--ok)","var(--info)","var(--warn)","var(--ink-3)"][i]}}></div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ TAX ============
function PageTax() {
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Tax · รายงานภาษี</div>
          <h1 className="page-title">ภาษี</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Calendar size={13}/> เม.ย. 2569</button>
          <button className="btn btn-accent"><I.Download size={14}/> e-Tax XML</button>
        </div>
      </div>
      <div className="grid grid-4" style={{marginBottom:16}}>
        <Kpi2 label="VAT ขาย (Output)" value={GS.fmtMoney(20048, true)} unit="฿"/>
        <Kpi2 label="VAT ซื้อ (Input)" value={GS.fmtMoney(9996, true)} unit="฿"/>
        <Kpi2 label="VAT สุทธิ" value={GS.fmtMoney(10052, true)} unit="฿" warn/>
        <Kpi2 label="ใบกำกับ" value="68" unit="ใบ"/>
      </div>
      <div className="card" style={{marginBottom:14}}>
        <div className="card-head"><div className="card-title">ภาษีขาย (Output VAT)</div></div>
        <table className="tbl">
          <thead><tr>
            <th>เลขที่</th><th>วันที่</th><th>ลูกค้า</th><th>เลขผู้เสียภาษี</th>
            <th className="num">ฐาน</th><th className="num">VAT 7%</th><th className="num">รวม</th>
          </tr></thead>
          <tbody>
            {GS.INVOICES.filter(i => i.status==="finalized").map(inv => {
              const c = GS.CUSTOMERS.find(c => c.id === inv.custId);
              const base = inv.total / 1.07;
              const vat = inv.total - base;
              return (
                <tr key={inv.id}>
                  <td className="code t-strong">{inv.id}</td>
                  <td className="mono muted">26/4/2569</td>
                  <td>{c?.name}</td>
                  <td className="mono t-xs muted">{c?.taxId || "—"}</td>
                  <td className="num mono">{GS.fmtMoney(base)}</td>
                  <td className="num mono">{GS.fmtMoney(vat)}</td>
                  <td className="num mono t-strong">{GS.fmtMoney(inv.total)}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ============ ADMIN ============
function PageAdmin() {
  const [tab, setTab] = u4S("users");
  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Admin · ผู้ดูแลระบบ</div>
          <h1 className="page-title">ตั้งค่าระบบ</h1>
        </div>
      </div>
      <div className="tabs">
        <div className={"tab"+(tab==="users"?" active":"")} onClick={()=>setTab("users")}>ผู้ใช้งาน <span className="count">{GS.USERS.length}</span></div>
        <div className={"tab"+(tab==="roles"?" active":"")} onClick={()=>setTab("roles")}>บทบาท</div>
        <div className={"tab"+(tab==="company"?" active":"")} onClick={()=>setTab("company")}>ข้อมูลกิจการ</div>
        <div className={"tab"+(tab==="branches"?" active":"")} onClick={()=>setTab("branches")}>สาขา</div>
      </div>

      {tab === "users" && (
        <div className="card">
          <div className="card-head">
            <div className="card-title">ผู้ใช้งาน</div>
            <button className="btn btn-accent btn-sm"><I.Plus size={13}/> เพิ่มผู้ใช้</button>
          </div>
          <table className="tbl">
            <thead><tr><th>ชื่อ</th><th>username</th><th>บทบาท</th><th>เข้าระบบล่าสุด</th><th>สถานะ</th><th></th></tr></thead>
            <tbody>
              {GS.USERS.map(u => (
                <tr key={u.id}>
                  <td><span className="row-flex"><span className="avatar avatar-ink">{u.name.charAt(0)}</span>{u.name}</span></td>
                  <td className="mono t-strong">{u.username}</td>
                  <td><span className="badge badge-default">{u.role}</span></td>
                  <td className="mono t-xs muted">{u.last}</td>
                  <td>{u.active ? <span className="badge badge-ok"><span className="badge-dot"></span>active</span> : <span className="badge badge-default">inactive</span>}</td>
                  <td><I.ChevronR size={14} stroke="var(--ink-4)"/></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "roles" && (
        <div className="card">
          <table className="tbl">
            <thead><tr><th>บทบาท</th><th>POS</th><th>Job</th><th>Inventory</th><th>Payments</th><th>Reports</th><th>Admin</th></tr></thead>
            <tbody>
              {[
                ["เจ้าของ", true, true, true, true, true, true],
                ["ผู้จัดการ", true, true, true, true, true, false],
                ["ที่ปรึกษางานบริการ", true, true, false, true, false, false],
                ["ช่าง", false, true, false, false, false, false],
                ["พนักงานบัญชี", false, false, false, true, true, false],
              ].map(([n,...perms],i) => (
                <tr key={i}>
                  <td className="t-strong">{n}</td>
                  {perms.map((p,j) => <td key={j}>{p ? <I.Check size={15} stroke="var(--ok)"/> : <span className="muted">—</span>}</td>)}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === "company" && (
        <div className="card" style={{maxWidth:760}}>
          <div className="card-head"><div className="card-title">ข้อมูลกิจการ</div></div>
          <div className="card-body" style={{display:"grid",gap:14,gridTemplateColumns:"1fr 1fr"}}>
            <div className="field"><label className="label">ชื่อกิจการ (ไทย)</label><input className="input" defaultValue="อู่สมชาย ออโต้เซอร์วิส"/></div>
            <div className="field"><label className="label">ชื่อกิจการ (อังกฤษ)</label><input className="input" defaultValue="Somchai Auto Service"/></div>
            <div className="field"><label className="label">เลขผู้เสียภาษี</label><input className="input" defaultValue="0123456789012"/></div>
            <div className="field"><label className="label">เบอร์โทร</label><input className="input" defaultValue="02-123-4567"/></div>
            <div className="field" style={{gridColumn:"1/-1"}}><label className="label">ที่อยู่</label><textarea className="input" rows={3} defaultValue="123/45 ถ.พหลโยธิน แขวงลาดยาว เขตจตุจักร กรุงเทพฯ 10900"/></div>
          </div>
          <div className="card-foot"><button className="btn btn-accent">บันทึก</button></div>
        </div>
      )}

      {tab === "branches" && (
        <div className="card">
          <div className="empty">
            <I.Garage size={28} stroke="var(--ink-4)"/>
            <div className="empty-title" style={{marginTop:10}}>1 สาขา (สำนักงานใหญ่)</div>
            <div className="empty-sub">เพิ่มสาขาเพื่อจัดการสต๊อก / ใบงานแยกตามสาขา</div>
            <button className="btn btn-default"><I.Plus size={13}/> เพิ่มสาขา</button>
          </div>
        </div>
      )}
    </div>
  );
}

// ============ LOGIN (showcase) ============
function PageLogin({ setRoute }) {
  return (
    <div style={{position:"fixed",inset:0,background:"var(--bg)",display:"grid",placeItems:"center",zIndex:200,padding:40}}>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:0,maxWidth:920,width:"100%",border:"1px solid var(--line-strong)",borderRadius:8,overflow:"hidden",boxShadow:"var(--shadow-2)"}}>
        <div style={{padding:48,background:"var(--ink)",color:"var(--paper)"}}>
          <div className="row-flex" style={{gap:10,marginBottom:32}}>
            <div style={{width:36,height:36,background:"var(--accent)",borderRadius:6,display:"grid",placeItems:"center"}}><I.Garage size={22} stroke="#fff"/></div>
            <div>
              <div className="thai t-strong" style={{fontSize:18}}>อู่ออนไลน์</div>
              <div className="mono t-xs" style={{opacity:.6,letterSpacing:".08em",textTransform:"uppercase"}}>OO·POS</div>
            </div>
          </div>
          <div className="thai" style={{fontSize:32,fontWeight:600,lineHeight:1.2,marginBottom:14}}>ระบบจัดการอู่ซ่อมรถ<br/>ครบทุกฟังก์ชัน</div>
          <div className="thai" style={{fontSize:14,opacity:.7,lineHeight:1.6,maxWidth:320}}>
            POS · ใบงาน · สต๊อก · ภาษี · เงินเดือน · รับประกัน — ทำงานได้ทั้งบนคอมและแท็บเล็ตในอู่
          </div>
          <hr style={{margin:"32px 0",border:0,borderTop:"1px solid rgba(255,255,255,0.1)"}}/>
          <div className="mono t-xs" style={{opacity:.5,letterSpacing:".08em"}}>v1.0 · 2569</div>
        </div>
        <div style={{padding:48,background:"var(--surface)"}}>
          <div className="thai" style={{fontSize:22,fontWeight:600,marginBottom:6}}>เข้าสู่ระบบ</div>
          <div className="thai t-xs muted" style={{marginBottom:24}}>กรอกข้อมูลเพื่อเข้าใช้งาน</div>
          <div className="field" style={{marginBottom:14}}><label className="label">Username</label><input className="input" defaultValue="owner"/></div>
          <div className="field" style={{marginBottom:14}}><label className="label">Password</label><input className="input" type="password" defaultValue="••••••••"/></div>
          <div className="field" style={{marginBottom:14}}><label className="label">สาขา</label>
            <select className="select"><option>สำนักงานใหญ่ — กรุงเทพ</option></select>
          </div>
          <label className="row-flex" style={{gap:8,marginBottom:20}}><input type="checkbox" defaultChecked/><span className="thai t-xs">จดจำการเข้าสู่ระบบ</span></label>
          <button className="btn btn-accent btn-lg" style={{width:"100%"}} onClick={() => setRoute("home")}>เข้าสู่ระบบ <I.Arrow size={14}/></button>
          <div className="thai t-xs muted" style={{textAlign:"center",marginTop:16}}>ลืมรหัสผ่าน? <a style={{color:"var(--ink)",textDecoration:"underline"}}>ติดต่อผู้ดูแล</a></div>
        </div>
      </div>
    </div>
  );
}

window.Pages4 = { PagePayroll, PageSuppliers, PageWarranty, PageReports, PageTax, PageAdmin, PageLogin };