// Page: Boss Inbox + Staff + Cashier
const { useState: u5S, useEffect: u5E } = React;

// ============ BOSS INBOX ============
function PageBossInbox({ setRoute }) {
  const [filter, setFilter] = u5S("all");
  const [issues, setIssues] = u5S(GS.BOSS_ISSUES);
  const [selected, setSel] = u5S(GS.BOSS_ISSUES[0]?.id);
  const [now, setNow] = u5S(new Date(2026,3,27,11,15,0));

  u5E(() => {
    const id = setInterval(() => setNow(n => new Date(n.getTime()+1000)), 1000);
    return () => clearInterval(id);
  }, []);

  const counts = {
    all: issues.length,
    open: issues.filter(i => i.status === "open").length,
    high: issues.filter(i => i.severity === "high" && i.status === "open").length,
    approval: issues.filter(i => i.kind === "approval" && i.status === "open").length,
    resolved: issues.filter(i => i.status === "resolved").length,
  };
  const list = issues.filter(i => {
    if (filter === "all") return true;
    if (filter === "open") return i.status === "open";
    if (filter === "high") return i.severity === "high";
    if (filter === "approval") return i.kind === "approval";
    if (filter === "resolved") return i.status === "resolved";
    return true;
  });

  const sel = issues.find(i => i.id === selected) || list[0];
  const fmtClock = (d) => `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}:${String(d.getSeconds()).padStart(2,'0')}`;

  const resolve = (id) => setIssues(xs => xs.map(x => x.id === id ? {...x, status:"resolved", resolvedAt: fmtClock(now)} : x));
  const escalate = (id) => setIssues(xs => xs.map(x => x.id === id ? {...x, severity:"high"} : x));

  const sevLabel = { high: "ด่วนมาก", med: "สำคัญ", low: "ปกติ" };
  const kindLabel = {
    approval: "ขออนุมัติ", discount: "ขอลดราคา", refund: "ขอคืนเงิน",
    overdue: "ลูกค้าค้างชำระ", stockout: "ของหมดสต๊อก", complaint: "ลูกค้าไม่พอใจ",
    delay: "งานเลย ETA", warranty: "เคลมประกัน", price: "ขออนุมัติราคาพิเศษ",
  };
  const kindIcon = {
    approval: "Check", discount: "Coin", refund: "Money", overdue: "Money",
    stockout: "Box", complaint: "Bell", delay: "Clock", warranty: "Shield", price: "Coin"
  };

  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>เรื่องที่ลูกน้องตัดสินใจไม่ได้ — รอลุงวุ้นตอบกลับ</span>
            </span>
          </div>
          <h1 className="page-title">รายงานปัญหาให้ลุงวุ้น <span className="muted t-xs mono" style={{marginLeft:8,fontSize:13}}>Boss Inbox</span></h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Bell size={13}/> แจ้งเตือน LINE</button>
          <button className="btn btn-default btn-sm"><I.Download size={13}/> Export</button>
        </div>
      </div>

      <div className="grid grid-4" style={{marginBottom:16}}>
        <div className="kpi" style={{borderLeft:"3px solid var(--accent)"}}>
          <div className="kpi-label">ด่วนมาก</div>
          <div className="kpi-value"><span style={{color:"var(--accent)"}}>{counts.high}</span><span className="unit">เรื่อง</span></div>
        </div>
        <div className="kpi" style={{borderLeft:"3px solid var(--warn)"}}>
          <div className="kpi-label">รออนุมัติ</div>
          <div className="kpi-value">{counts.approval}<span className="unit">เรื่อง</span></div>
        </div>
        <div className="kpi" style={{borderLeft:"3px solid var(--ink-3)"}}>
          <div className="kpi-label">ทั้งหมดที่ค้าง</div>
          <div className="kpi-value">{counts.open}<span className="unit">เรื่อง</span></div>
        </div>
        <div className="kpi" style={{borderLeft:"3px solid var(--ok)"}}>
          <div className="kpi-label">เคลียร์แล้ววันนี้</div>
          <div className="kpi-value"><span style={{color:"var(--ok)"}}>{counts.resolved}</span><span className="unit">เรื่อง</span></div>
        </div>
      </div>

      <div className="filter-bar">
        {[["all","ทั้งหมด"],["open","ค้างอยู่"],["high","ด่วนมาก"],["approval","รออนุมัติ"],["resolved","เคลียร์แล้ว"]].map(([v,l]) => (
          <button key={v} className={"chip"+(filter===v?" active":"")} onClick={()=>setFilter(v)}>{l} <span className="mono t-xs muted" style={{marginLeft:4}}>{counts[v]||0}</span></button>
        ))}
      </div>

      <div className="grid" style={{gridTemplateColumns:"1.4fr 1fr",gap:14}}>
        <div>
          {list.map(it => {
            const Icon = I[kindIcon[it.kind]] || I.Bell;
            const tech = it.fromTech ? GS.TECHS.find(t => t.id === it.fromTech) : null;
            const c = it.custId ? GS.CUSTOMERS.find(c => c.id === it.custId) : null;
            const active = sel?.id === it.id;
            return (
              <div key={it.id}
                className={`boss-card severity-${it.severity}${it.unread?" unread":""}`}
                style={{ borderColor: active ? "var(--ink)" : "var(--line)", boxShadow: active ? "0 0 0 1px var(--ink)" : undefined, position:"relative", opacity: it.status === "resolved" ? 0.6 : 1 }}
                onClick={() => setSel(it.id)}>
                <div className={`boss-icon ${it.severity}`}><Icon size={16}/></div>
                <div style={{flex:1,minWidth:0}}>
                  <div className="row-flex between" style={{marginBottom:4}}>
                    <div className="row-flex" style={{gap:6,flex:1,minWidth:0}}>
                      <span className="badge badge-outline" style={{fontSize:9.5}}>{kindLabel[it.kind]}</span>
                      <span className={`badge ${it.severity==="high"?"badge-danger":it.severity==="med"?"badge-warn":"badge-info"}`} style={{fontSize:9.5}}>● {sevLabel[it.severity]}</span>
                      {it.status === "resolved" && <span className="badge badge-ok" style={{fontSize:9.5}}>● เคลียร์แล้ว</span>}
                    </div>
                    <span className="mono t-xs muted">{it.created}</span>
                  </div>
                  <div className="thai t-strong" style={{fontSize:13,marginBottom:2,lineHeight:1.35}}>{it.title}</div>
                  <div className="thai" style={{fontSize:12,color:"var(--ink-3)",lineHeight:1.4,marginBottom:6,display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{it.detail}</div>
                  <div className="row-flex" style={{gap:8,fontSize:11,color:"var(--ink-4)"}}>
                    {tech && <span className="row-flex" style={{gap:4}}><span className={`avatar avatar-sm avatar-${tech.color}`} style={{width:16,height:16,fontSize:8}}>{tech.initials}</span><span className="thai">{tech.name}</span></span>}
                    {c && <><span>·</span><span className="thai">{c.name}</span></>}
                    {it.jobId && <><span>·</span><span className="code">{it.jobId}</span></>}
                    {it.amount && <><span>·</span><span className="mono t-strong" style={{color:"var(--ink-2)"}}>{GS.fmtMoney(it.amount, true)} ฿</span></>}
                  </div>
                </div>
              </div>
            );
          })}
          {list.length === 0 && (
            <div className="card"><div className="empty">
              <I.Check size={28} stroke="var(--ok)"/>
              <div className="empty-title" style={{marginTop:10}}>เคลียร์หมดแล้ว</div>
              <div className="empty-sub">ไม่มีปัญหาค้างอยู่ในตอนนี้</div>
            </div></div>
          )}
        </div>

        <div className="card" style={{position:"sticky",top:14,alignSelf:"start"}}>
          {sel ? <BossDetail issue={sel} onResolve={() => resolve(sel.id)} onEscalate={() => escalate(sel.id)} sevLabel={sevLabel} kindLabel={kindLabel}/> :
            <div className="empty"><div className="empty-title">เลือกเรื่องเพื่อดูรายละเอียด</div></div>}
        </div>
      </div>
    </div>
  );
}

function BossDetail({ issue, onResolve, onEscalate, sevLabel, kindLabel }) {
  const tech = issue.fromTech ? GS.TECHS.find(t => t.id === issue.fromTech) : null;
  const c = issue.custId ? GS.CUSTOMERS.find(c => c.id === issue.custId) : null;
  const sevColor = { high: "var(--accent)", med: "var(--warn)", low: "var(--info)" }[issue.severity];

  return (
    <>
      <div className="card-head" style={{borderLeft:`3px solid ${sevColor}`,paddingLeft:14}}>
        <div style={{flex:1}}>
          <div className="row-flex" style={{gap:6,marginBottom:6}}>
            <span className="badge badge-outline" style={{fontSize:9.5}}>{kindLabel[issue.kind]}</span>
            <span className={`badge ${issue.severity==="high"?"badge-danger":issue.severity==="med"?"badge-warn":"badge-info"}`} style={{fontSize:9.5}}>● {sevLabel[issue.severity]}</span>
          </div>
          <div className="thai t-strong" style={{fontSize:15}}>{issue.title}</div>
          <div className="mono t-xs muted" style={{marginTop:2}}>{issue.id} · เข้ามา {issue.created}</div>
        </div>
      </div>
      <div className="card-body" style={{display:"flex",flexDirection:"column",gap:14}}>
        <div>
          <div className="thai t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>รายละเอียด</div>
          <div className="thai" style={{fontSize:13,lineHeight:1.6,color:"var(--ink-2)"}}>{issue.detail}</div>
        </div>
        {(tech || c || issue.jobId || issue.amount) && (
          <div style={{padding:12,background:"var(--surface-2)",border:"1px solid var(--line)",borderRadius:6,display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
            {tech && <div><div className="thai t-xs muted">จากช่าง</div><div className="row-flex" style={{gap:6,marginTop:2}}><span className={`avatar avatar-sm avatar-${tech.color}`}>{tech.initials}</span><span className="t-strong" style={{fontSize:13}}>{tech.name}</span></div></div>}
            {c && <div><div className="thai t-xs muted">ลูกค้า</div><div className="thai t-strong" style={{fontSize:13,marginTop:2}}>{c.name}</div><div className="mono t-xs muted">{c.phone}</div></div>}
            {issue.jobId && <div><div className="thai t-xs muted">ใบงาน</div><div className="code t-strong" style={{fontSize:13,marginTop:2}}>{issue.jobId}</div></div>}
            {issue.amount && <div><div className="thai t-xs muted">จำนวนเงิน</div><div className="mono t-strong" style={{fontSize:14,marginTop:2,color:"var(--accent)"}}>{GS.fmtMoney(issue.amount, true)} ฿</div></div>}
          </div>
        )}
        {issue.options && (
          <div>
            <div className="thai t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>ลูกน้องเสนอมา</div>
            <ul style={{margin:0,paddingLeft:18,fontSize:12.5,lineHeight:1.7,color:"var(--ink-3)"}} className="thai">
              {issue.options.map((o,i) => (
                <li key={i}>
                  <span style={{color:"var(--ink-2)"}}>{o.label}</span>
                  {o.note && <span className="muted"> — {o.note}</span>}
                  {o.cost ? <span className="mono" style={{marginLeft:6,color: o.cost > 0 ? "var(--accent)" : "var(--ok)"}}>({o.cost > 0 ? "+" : ""}{GS.fmtMoney(o.cost, true)} ฿)</span> : null}
                </li>
              ))}
            </ul>
          </div>
        )}
        <div>
          <div className="thai t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>ตอบกลับลูกน้อง</div>
          <textarea className="input" rows={4} placeholder="พิมพ์คำตอบ/คำสั่งให้ลูกน้อง…" style={{resize:"vertical",fontFamily:"var(--font-thai)",fontSize:13}}/>
        </div>
      </div>
      <div className="card-foot" style={{flexDirection:"column",gap:8,alignItems:"stretch"}}>
        {issue.status === "open" ? (
          <>
            <div className="row-flex" style={{gap:8}}>
              <button className="btn btn-accent" style={{flex:1}} onClick={onResolve}><I.Check size={14}/> ส่งคำตอบ</button>
              <button className="btn btn-default" style={{flex:1}}>พักไว้ก่อน</button>
            </div>
            <div className="row-flex" style={{gap:6}}>
              <button className="btn btn-ghost btn-sm" style={{flex:1}} onClick={onEscalate}>มาร์กว่าด่วนมาก</button>
              <button className="btn btn-ghost btn-sm" style={{flex:1}}>โทรหาช่าง</button>
              <button className="btn btn-ghost btn-sm" style={{flex:1}}>ส่ง LINE</button>
            </div>
          </>
        ) : (
          <div className="row-flex between" style={{padding:"6px 0"}}>
            <span className="row-flex" style={{gap:6}}><I.Check size={14} stroke="var(--ok)"/><span className="thai t-strong" style={{color:"var(--ok)"}}>เคลียร์แล้ว เมื่อ {issue.resolvedAt}</span></span>
            <button className="btn btn-ghost btn-sm">เปิดใหม่</button>
          </div>
        )}
      </div>
    </>
  );
}

// ============ STAFF ============
function PageStaff({ setRoute }) {
  const STAFF_EX = {
    T01: { phone:"081-234-5678", joined:"2562-03-15", status:"working", base:18000, jobsM:38, attendance:96, address:"คลองเตย กทม.", emergency:"คุณนิด 089-111-2233", note:"" },
    T02: { phone:"082-345-6789", joined:"2563-08-01", status:"working", base:15000, jobsM:32, attendance:94, address:"บางนา กทม.", emergency:"คุณแอน 089-222-3344", note:"" },
    T03: { phone:"083-456-7890", joined:"2564-01-20", status:"leave",   base:15000, jobsM:29, attendance:88, address:"พระประแดง สมุทรปราการ", emergency:"คุณบี 089-333-4455", note:"ลากิจ 27–28 เม.ย." },
    T04: { phone:"084-567-8901", joined:"2565-06-10", status:"working", base:12000, jobsM:18, attendance:99, address:"บางรัก กทม.", emergency:"คุณเอ 089-444-5566", note:"ใหม่ — ผ่านงาน 10 เดือน" },
  };
  const NON_TECH = [
    { id:"S05", name:"มาลี", initials:"มล", role:"ที่ปรึกษางานบริการ", color:"blue",   phone:"085-678-9012", joined:"2562-09-01", status:"working", base:16000, jobsM:0, attendance:98, address:"ลาดพร้าว กทม.", emergency:"คุณตู่ 089-555-6677", note:"" },
    { id:"S06", name:"จุฑา", initials:"จท", role:"พนักงานบัญชี",       color:"violet", phone:"086-789-0123", joined:"2563-04-15", status:"working", base:18000, jobsM:0, attendance:97, address:"ห้วยขวาง กทม.", emergency:"คุณกอล์ฟ 089-666-7788", note:"" },
    { id:"S07", name:"นัด",  initials:"นด", role:"แม่บ้าน/ล้างรถ",     color:"green",  phone:"087-890-1234", joined:"2566-02-01", status:"working", base:11000, jobsM:24, attendance:92, address:"คลองเตย กทม.", emergency:"คุณแม่ 089-777-8899", note:"" },
    { id:"S08", name:"ฟ้า",  initials:"ฟา", role:"แคชเชียร์",          color:"red",    phone:"088-901-2345", joined:"2565-11-05", status:"working", base:14000, jobsM:0, attendance:99, address:"ดินแดง กทม.", emergency:"คุณป้อม 089-888-9900", note:"" },
  ];
  const ALL = [
    ...GS.TECHS.map(t => ({ ...t, ...STAFF_EX[t.id] })),
    ...NON_TECH,
  ];

  const [tab, setTab] = u5S("all");
  const [sel, setSel] = u5S(ALL[0].id);
  const counts = {
    all: ALL.length,
    working: ALL.filter(s => s.status === "working").length,
    leave: ALL.filter(s => s.status === "leave").length,
  };
  const list = tab === "all" ? ALL : ALL.filter(s => s.status === tab);
  const selected = ALL.find(s => s.id === sel) || ALL[0];
  const tenureYears = (j) => {
    const [y,m,d] = j.split("-").map(Number);
    const now = new Date(2026,3,27);
    const ms = now - new Date(y-543, m-1, d);
    const yrs = ms / (365.25 * 86400000);
    return yrs >= 1 ? `${yrs.toFixed(1)} ปี` : `${Math.round(yrs*12)} เดือน`;
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">Staff · ทะเบียนพนักงาน</div>
          <h1 className="page-title">พนักงาน</h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Calendar size={13}/> ตารางกะ</button>
          <button className="btn btn-default btn-sm" onClick={()=>setRoute("payroll")}><I.Wallet size={13}/> เงินเดือน</button>
          <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="grid grid-4" style={{marginBottom:16}}>
        <div className="kpi"><div className="kpi-label">พนักงานทั้งหมด</div><div className="kpi-value">{counts.all}<span className="unit">คน</span></div></div>
        <div className="kpi" style={{borderLeft:"3px solid var(--ok)"}}><div className="kpi-label">มาทำงานวันนี้</div><div className="kpi-value"><span style={{color:"var(--ok)"}}>{counts.working}</span><span className="unit">คน</span></div></div>
        <div className="kpi" style={{borderLeft:"3px solid var(--warn)"}}><div className="kpi-label">ลา/ขาด</div><div className="kpi-value"><span style={{color:"var(--warn)"}}>{counts.leave}</span><span className="unit">คน</span></div></div>
        <div className="kpi"><div className="kpi-label">เงินเดือนรวม/เดือน</div><div className="kpi-value mono">{GS.fmtMoney(ALL.reduce((s,p)=>s+p.base,0), true)}<span className="unit">฿</span></div></div>
      </div>

      <div className="filter-bar">
        {[["all","ทั้งหมด"],["working","มาทำงาน"],["leave","ลา/ขาด"]].map(([v,l]) => (
          <button key={v} className={"chip"+(tab===v?" active":"")} onClick={()=>setTab(v)}>{l} <span className="mono t-xs muted" style={{marginLeft:4}}>{counts[v]||0}</span></button>
        ))}
        <span style={{flex:1}}></span>
        <span className="thai t-xs muted">เรียง:</span>
        <button className="chip active">เริ่มงาน</button>
        <button className="chip">ตำแหน่ง</button>
      </div>

      <div className="grid" style={{gridTemplateColumns:"1.4fr 1fr",gap:14}}>
        <div className="card" style={{padding:0}}>
          <table className="tbl">
            <thead><tr>
              <th style={{width:30}}></th>
              <th>พนักงาน</th>
              <th>ตำแหน่ง</th>
              <th>เบอร์</th>
              <th className="num">อายุงาน</th>
              <th className="num">งาน/เดือน</th>
              <th className="num">มาทำ</th>
              <th>สถานะ</th>
            </tr></thead>
            <tbody>
              {list.map(s => (
                <tr key={s.id} onClick={()=>setSel(s.id)} style={{cursor:"pointer", background: sel===s.id ? "var(--surface-2)" : undefined}}>
                  <td><span className={`avatar avatar-sm avatar-${s.color}`}>{s.initials}</span></td>
                  <td><div className="t-strong thai">{s.name}</div><div className="mono t-xs muted">{s.id}</div></td>
                  <td><span className="badge badge-outline" style={{fontSize:9.5}}>{s.role}</span></td>
                  <td className="mono t-xs">{s.phone}</td>
                  <td className="num mono t-xs">{tenureYears(s.joined)}</td>
                  <td className="num mono">{s.jobsM || "—"}</td>
                  <td className="num mono" style={{color: s.attendance >= 95 ? "var(--ok)" : s.attendance >= 90 ? "var(--ink-2)" : "var(--warn)"}}>{s.attendance}%</td>
                  <td>{s.status === "working" ? <span className="badge badge-ok"><span className="badge-dot"></span>มาทำงาน</span> : <span className="badge badge-warn"><span className="badge-dot"></span>ลา</span>}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="card" style={{position:"sticky",top:14,alignSelf:"start"}}>
          <div className="card-head">
            <div className="row-flex" style={{gap:10}}>
              <span className={`avatar avatar-${selected.color}`} style={{width:42,height:42,fontSize:14}}>{selected.initials}</span>
              <div>
                <div className="thai t-strong" style={{fontSize:16}}>{selected.name}</div>
                <div className="thai t-xs muted">{selected.role} · {selected.id}</div>
              </div>
            </div>
            <button className="btn btn-default btn-sm">แก้ไข</button>
          </div>
          <div className="card-body" style={{display:"flex",flexDirection:"column",gap:14}}>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,padding:12,background:"var(--surface-2)",border:"1px solid var(--line)",borderRadius:6}}>
              <div><div className="thai t-xs muted">เบอร์โทร</div><div className="mono t-strong" style={{fontSize:13,marginTop:2}}>{selected.phone}</div></div>
              <div><div className="thai t-xs muted">เริ่มงาน</div><div className="mono t-strong" style={{fontSize:13,marginTop:2}}>{selected.joined} <span className="muted t-xs">({tenureYears(selected.joined)})</span></div></div>
              <div><div className="thai t-xs muted">ที่อยู่</div><div className="thai" style={{fontSize:12.5,marginTop:2}}>{selected.address}</div></div>
              <div><div className="thai t-xs muted">ติดต่อฉุกเฉิน</div><div className="thai" style={{fontSize:12.5,marginTop:2}}>{selected.emergency}</div></div>
            </div>
            <div>
              <div className="thai t-xs muted" style={{textTransform:"uppercase",letterSpacing:".06em",marginBottom:6}}>เดือนนี้ (เม.ย. 2569)</div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8}}>
                <div style={{padding:10,border:"1px solid var(--line)",borderRadius:6}}><div className="thai t-xs muted">งาน</div><div className="mono t-strong" style={{fontSize:18,marginTop:2}}>{selected.jobsM || 0}</div></div>
                <div style={{padding:10,border:"1px solid var(--line)",borderRadius:6}}><div className="thai t-xs muted">มาทำงาน</div><div className="mono t-strong" style={{fontSize:18,marginTop:2,color: selected.attendance>=95?"var(--ok)":"var(--ink-2)"}}>{selected.attendance}%</div></div>
                <div style={{padding:10,border:"1px solid var(--line)",borderRadius:6}}><div className="thai t-xs muted">ฐาน</div><div className="mono t-strong" style={{fontSize:14,marginTop:4}}>{GS.fmtMoney(selected.base, true)}</div></div>
              </div>
            </div>
            {selected.note && (
              <div style={{padding:10,background:"var(--warn-soft)",border:"1px solid var(--warn)",borderRadius:6}}>
                <div className="thai t-xs t-strong" style={{color:"var(--warn)",marginBottom:2}}>หมายเหตุ</div>
                <div className="thai" style={{fontSize:12.5}}>{selected.note}</div>
              </div>
            )}
          </div>
          <div className="card-foot" style={{gap:6}}>
            <button className="btn btn-default btn-sm" style={{flex:1}}>โทร</button>
            <button className="btn btn-default btn-sm" style={{flex:1}}>LINE</button>
            <button className="btn btn-default btn-sm" style={{flex:1}}>ดูใบงาน</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ CASHIER (เปิด-ปิดรอบ + ลิ้นชัก) ============
function PageCashier({ setRoute }) {
  const [shift, setShift] = u5S({
    open: true,
    openedAt: "08:00",
    openedBy: "ฟ้า (S08)",
    openingFloat: 2000,
    cashSales: 8430,
    qrSales: 12200,
    cardSales: 4500,
    transferSales: 3000,
    refundsCash: 200,
    paidOutCash: 350,
  });
  const [count, setCount] = u5S({
    "1000": 8, "500": 4, "100": 12, "50": 6, "20": 14, "10": 9, "5": 3, "1": 7,
  });
  const denoms = [1000, 500, 100, 50, 20, 10, 5, 1];

  const expectedCash = shift.openingFloat + shift.cashSales - shift.refundsCash - shift.paidOutCash;
  const countedCash = denoms.reduce((s,d) => s + d * (count[String(d)] || 0), 0);
  const diff = countedCash - expectedCash;

  const [tab, setTab] = u5S("count");

  const txns = [
    { t:"11:42", id:"R-2604-0042", method:"cash",     amount: 1605, ref:"J2604-000007", note:"" },
    { t:"11:25", id:"R-2604-0041", method:"qr",       amount: 700,  ref:"J2604-000004", note:"" },
    { t:"11:08", id:"R-2604-0040", method:"transfer", amount: 3000, ref:"INV-2604-0019", note:"ฟลีท บ. ส่งด่วน" },
    { t:"10:55", id:"R-2604-0039", method:"cash",     amount: 350,  ref:"POS-walkin", note:"ขายน้ำมันเครื่อง" },
    { t:"10:30", id:"R-2604-0038", method:"card",     amount: 4500, ref:"INV-2604-0018", note:"" },
    { t:"10:12", id:"R-2604-0037", method:"qr",       amount: 1750, ref:"J2604-000002", note:"" },
    { t:"09:58", id:"R-2604-0036", method:"qr",       amount: 9750, ref:"INV-2604-0017", note:"" },
    { t:"09:30", id:"R-2604-0035", method:"cash",     amount: 6475, ref:"J2603-000201", note:"" },
    { t:"09:05", id:"REFUND",      method:"refund",   amount:-200,  ref:"J2603-000189", note:"คืน — ดูเต็มในใบเสร็จ" },
    { t:"08:40", id:"PAYOUT",      method:"payout",   amount:-350,  ref:"PO-cash",      note:"ซื้อกาแฟ + น้ำดื่มลูกค้า" },
  ];
  const methodMeta = {
    cash:     { label:"เงินสด",  color:"var(--ok)",  icon:"Money" },
    qr:       { label:"QR",      color:"var(--info)",icon:"Qr" },
    card:     { label:"บัตร",    color:"var(--ink-2)",icon:"Card" },
    transfer: { label:"โอน",     color:"var(--ink-3)",icon:"Bank" },
    refund:   { label:"คืน",     color:"var(--accent)",icon:"Arrow" },
    payout:   { label:"จ่ายออก", color:"var(--warn)",icon:"Arrow" },
  };

  return (
    <div>
      <div className="page-head">
        <div>
          <div className="page-sub">
            <span className="row-flex" style={{gap:6}}>
              <span className="live-dot small"></span>
              <span className="mono" style={{color:shift.open?"var(--ok)":"var(--ink-3)",fontWeight:600}}>{shift.open?"รอบเปิด":"รอบปิด"}</span>
              <span style={{color:"var(--ink-4)"}}>·</span>
              <span>เปิดรอบเมื่อ {shift.openedAt} โดย {shift.openedBy}</span>
            </span>
          </div>
          <h1 className="page-title">แคชเชียร์ <span className="muted t-xs mono" style={{marginLeft:8,fontSize:13}}>Cashier · เปิด-ปิดรอบ</span></h1>
        </div>
        <div className="page-actions">
          <button className="btn btn-default btn-sm"><I.Receipt size={13}/> พิมพ์ใบสรุปรอบ</button>
          <button className="btn btn-default btn-sm"><I.Download size={13}/> Export</button>
          <button className="btn btn-accent" onClick={()=>setShift({...shift,open:false})}><I.Lock size={13}/> ปิดรอบ</button>
        </div>
      </div>

      <div className="grid grid-4" style={{marginBottom:16}}>
        <div className="kpi"><div className="kpi-label">ยอดขายในรอบ</div><div className="kpi-value mono">{GS.fmtMoney(shift.cashSales+shift.qrSales+shift.cardSales+shift.transferSales, true)}<span className="unit">฿</span></div></div>
        <div className="kpi" style={{borderLeft:"3px solid var(--ok)"}}><div className="kpi-label">เงินสดในลิ้นชัก (ตามระบบ)</div><div className="kpi-value mono"><span style={{color:"var(--ok)"}}>{GS.fmtMoney(expectedCash, true)}</span><span className="unit">฿</span></div></div>
        <div className="kpi" style={{borderLeft:"3px solid var(--ink)"}}><div className="kpi-label">นับจริง</div><div className="kpi-value mono">{GS.fmtMoney(countedCash, true)}<span className="unit">฿</span></div></div>
        <div className="kpi" style={{borderLeft:`3px solid ${diff===0?"var(--ok)":Math.abs(diff)<50?"var(--warn)":"var(--accent)"}`}}>
          <div className="kpi-label">ส่วนต่าง</div>
          <div className="kpi-value mono"><span style={{color:diff===0?"var(--ok)":Math.abs(diff)<50?"var(--warn)":"var(--accent)"}}>{diff>0?"+":""}{GS.fmtMoney(diff, true)}</span><span className="unit">฿</span></div>
        </div>
      </div>

      <div className="filter-bar">
        <button className={"chip"+(tab==="count"?" active":"")} onClick={()=>setTab("count")}>นับเงินลิ้นชัก</button>
        <button className={"chip"+(tab==="txns"?" active":"")} onClick={()=>setTab("txns")}>รายการรับเงิน <span className="mono t-xs muted" style={{marginLeft:4}}>{txns.length}</span></button>
        <button className={"chip"+(tab==="summary"?" active":"")} onClick={()=>setTab("summary")}>สรุปแยกประเภท</button>
        <button className={"chip"+(tab==="payout"?" active":"")} onClick={()=>setTab("payout")}>เบิกเงินสด</button>
      </div>

      {tab === "count" && (
        <div className="grid" style={{gridTemplateColumns:"1.2fr 1fr",gap:14}}>
          <div className="card">
            <div className="card-head"><div className="card-title">นับเงินสดในลิ้นชัก</div><span className="thai t-xs muted">นับเสร็จก่อนปิดรอบ</span></div>
            <div className="card-body">
              <table className="tbl" style={{margin:0}}>
                <thead><tr>
                  <th>ใบ/เหรียญ</th>
                  <th className="num">จำนวน</th>
                  <th className="num">รวม</th>
                </tr></thead>
                <tbody>
                  {denoms.map(d => (
                    <tr key={d}>
                      <td><span className="row-flex" style={{gap:8}}><span style={{display:"inline-block",width:48,height:24,border:"1px solid var(--line)",borderRadius:3,background: d>=100?"var(--surface-2)":"var(--surface)",fontSize:11,fontFamily:"var(--font-mono)",fontWeight:600,textAlign:"center",lineHeight:"22px",color: d>=500?"var(--accent)":d>=100?"var(--ok)":"var(--ink-3)"}}>฿{d}</span></span></td>
                      <td className="num">
                        <input className="input" type="number" min="0" value={count[String(d)] || 0}
                          onChange={e => setCount({...count, [String(d)]: parseInt(e.target.value)||0})}
                          style={{width:80,textAlign:"right",fontFamily:"var(--font-mono)"}}/>
                      </td>
                      <td className="num mono t-strong">{GS.fmtMoney(d * (count[String(d)]||0), true)}</td>
                    </tr>
                  ))}
                </tbody>
                <tfoot>
                  <tr style={{borderTop:"2px solid var(--ink)"}}>
                    <td className="thai t-strong">รวม</td>
                    <td className="num mono muted">{denoms.reduce((s,d)=>s+(count[String(d)]||0),0)} ใบ/เหรียญ</td>
                    <td className="num mono t-strong" style={{fontSize:15}}>{GS.fmtMoney(countedCash, true)}</td>
                  </tr>
                </tfoot>
              </table>
            </div>
          </div>

          <div>
            <div className="card" style={{marginBottom:12}}>
              <div className="card-head"><div className="card-title">เปรียบเทียบ</div></div>
              <div className="card-body" style={{display:"flex",flexDirection:"column",gap:8}}>
                <div className="row-flex between"><span className="thai">เงินทอนเปิดรอบ</span><span className="mono">{GS.fmtMoney(shift.openingFloat, true)}</span></div>
                <div className="row-flex between"><span className="thai">+ ขายเงินสด</span><span className="mono" style={{color:"var(--ok)"}}>+{GS.fmtMoney(shift.cashSales, true)}</span></div>
                <div className="row-flex between"><span className="thai">− คืนเงิน</span><span className="mono" style={{color:"var(--accent)"}}>−{GS.fmtMoney(shift.refundsCash, true)}</span></div>
                <div className="row-flex between"><span className="thai">− จ่ายออก</span><span className="mono" style={{color:"var(--accent)"}}>−{GS.fmtMoney(shift.paidOutCash, true)}</span></div>
                <div style={{borderTop:"1px solid var(--line)",paddingTop:8}} className="row-flex between"><span className="thai t-strong">ควรมี</span><span className="mono t-strong">{GS.fmtMoney(expectedCash, true)} ฿</span></div>
                <div className="row-flex between"><span className="thai t-strong">นับจริง</span><span className="mono t-strong">{GS.fmtMoney(countedCash, true)} ฿</span></div>
                <div style={{borderTop:"2px solid var(--ink)",paddingTop:8}} className="row-flex between">
                  <span className="thai t-strong">ส่วนต่าง</span>
                  <span className="mono t-strong" style={{fontSize:16,color:diff===0?"var(--ok)":Math.abs(diff)<50?"var(--warn)":"var(--accent)"}}>{diff>0?"+":""}{GS.fmtMoney(diff, true)} ฿</span>
                </div>
              </div>
              {diff !== 0 && (
                <div className="card-foot" style={{flexDirection:"column",alignItems:"stretch",gap:6}}>
                  <textarea className="input" rows={2} placeholder="อธิบายส่วนต่าง (ทอนเกิน/ขาด)…" style={{fontFamily:"var(--font-thai)",fontSize:12.5}}/>
                </div>
              )}
            </div>
          </div>
        </div>
      )}

      {tab === "txns" && (
        <div className="card" style={{padding:0}}>
          <table className="tbl">
            <thead><tr>
              <th>เวลา</th><th>เลขรับเงิน</th><th>วิธี</th><th>อ้างอิง</th><th>หมายเหตุ</th><th className="num">จำนวน</th><th></th>
            </tr></thead>
            <tbody>
              {txns.map(x => {
                const m = methodMeta[x.method];
                return (
                  <tr key={x.t+x.id}>
                    <td className="mono t-xs">{x.t}</td>
                    <td className="mono t-xs">{x.id}</td>
                    <td><span className="badge badge-outline" style={{fontSize:9.5,color:m.color,borderColor:m.color}}>● {m.label}</span></td>
                    <td className="mono t-xs">{x.ref}</td>
                    <td className="thai t-xs muted">{x.note || "—"}</td>
                    <td className="num mono t-strong" style={{color: x.amount < 0 ? "var(--accent)" : "var(--ink)"}}>{x.amount<0?"−":""}{GS.fmtMoney(Math.abs(x.amount), true)}</td>
                    <td><button className="btn btn-ghost btn-sm">พิมพ์</button></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      )}

      {tab === "summary" && (
        <div className="grid grid-4">
          {[
            {k:"เงินสด",     v:shift.cashSales,     n: txns.filter(t=>t.method==="cash").length, c:"var(--ok)"},
            {k:"QR",        v:shift.qrSales,       n: txns.filter(t=>t.method==="qr").length,   c:"var(--info)"},
            {k:"บัตรเครดิต", v:shift.cardSales,     n: txns.filter(t=>t.method==="card").length, c:"var(--ink-2)"},
            {k:"โอน",       v:shift.transferSales, n: txns.filter(t=>t.method==="transfer").length, c:"var(--ink-3)"},
          ].map(m => (
            <div key={m.k} className="card" style={{padding:14,borderLeft:`3px solid ${m.c}`}}>
              <div className="thai t-xs muted">{m.k}</div>
              <div className="mono t-strong" style={{fontSize:22,marginTop:4}}>{GS.fmtMoney(m.v, true)} ฿</div>
              <div className="mono t-xs muted" style={{marginTop:4}}>{m.n} รายการ</div>
            </div>
          ))}
        </div>
      )}

      {tab === "payout" && (
        <div className="grid" style={{gridTemplateColumns:"1.2fr 1fr",gap:14}}>
          <div className="card">
            <div className="card-head"><div className="card-title">ประวัติเบิกเงินสดในรอบ</div></div>
            <table className="tbl" style={{margin:0}}>
              <thead><tr><th>เวลา</th><th>เรื่อง</th><th>ผู้เบิก</th><th className="num">จำนวน</th><th>สถานะ</th></tr></thead>
              <tbody>
                <tr><td className="mono t-xs">10:30</td><td className="thai">ซื้อกาแฟ + น้ำดื่ม</td><td className="thai">นัด</td><td className="num mono">350</td><td><span className="badge badge-ok"><span className="badge-dot"></span>อนุมัติ</span></td></tr>
                <tr><td className="mono t-xs">09:15</td><td className="thai">ค่าส่งของผู้ขาย</td><td className="thai">มาลี</td><td className="num mono">200</td><td><span className="badge badge-ok"><span className="badge-dot"></span>อนุมัติ</span></td></tr>
              </tbody>
            </table>
          </div>
          <div className="card">
            <div className="card-head"><div className="card-title">เบิกใหม่</div></div>
            <div className="card-body" style={{display:"flex",flexDirection:"column",gap:10}}>
              <div className="field"><label className="label">เรื่อง</label><input className="input" placeholder="เช่น ซื้อน้ำมัน, ค่าส่ง"/></div>
              <div className="field"><label className="label">ผู้เบิก</label>
                <select className="input">
                  {GS.TECHS.map(t=><option key={t.id}>{t.name}</option>)}
                  <option>มาลี (S05)</option><option>จุฑา (S06)</option><option>นัด (S07)</option>
                </select>
              </div>
              <div className="field"><label className="label">จำนวน (฿)</label><input className="input" type="number" placeholder="0.00" style={{fontFamily:"var(--font-mono)",fontSize:18,textAlign:"right"}}/></div>
              <div className="field"><label className="label">หมายเหตุ</label><textarea className="input" rows={2}/></div>
            </div>
            <div className="card-foot"><button className="btn btn-default btn-sm" style={{flex:1}}>ยกเลิก</button><button className="btn btn-accent" style={{flex:1}}>บันทึก + พิมพ์ใบเบิก</button></div>
          </div>
        </div>
      )}
    </div>
  );
}

window.Pages5 = { PageBossInbox, PageStaff, PageCashier };