/* ==========================================================================
 * ADMIN NEXT — page-bonushist.jsx  (แยกไฟล์ละหน้า; โหลดผ่าน <script type="text/babel">)
 * ========================================================================== */

/* ---------- ประวัติโบนัส — /bonus-history ---------- */
function BonusHistoryPage({ toast }) {
  const [d,setD]=useState(null),[loading,setLoading]=useState(true),[err,setErr]=useState(null);
  const [q,setQ]=useState(""),[type,setType]=useState(""),[range,setRange]=useState("30d"),[custom,setCustom]=useState({from:bkkDate(29),to:bkkDate(0)});
  const [page,setPage]=useState(1),[size,setSize]=useState(50);
  const debRef=useRef(null);
  const load=useCallback(async(query,tp,rg,cust)=>{ setLoading(true); setErr(null);
    try{ const {from,to}=rangeToDates(rg,cust); const p=new URLSearchParams({limit:"300",from,to}); if(query)p.set("q",query); if(tp)p.set("type",tp);
      setD(await api("/bonus-history?"+p.toString())); }
    catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail&&window.__nxAuthFail();} setErr(e.status===403?"ไม่มีสิทธิ์ดูประวัติโบนัส":(e.message||"โหลดไม่สำเร็จ")); }
    finally{ setLoading(false); } },[]);
  useEffect(()=>{ load(q.trim(),type,range,custom); },[type,range,load]);
  useEffect(()=>{ if(debRef.current)clearTimeout(debRef.current); debRef.current=setTimeout(()=>load(q.trim(),type,range,custom),350); return ()=>clearTimeout(debRef.current); },[q]);
  const rows=(d&&d.rows)||[], s=(d&&d.summary)||{}, types=(d&&d.types)||{};
  useEffect(()=>{ setPage(1); },[q,type,range,rows.length]);
  const paged=rows.slice((page-1)*size,page*size);
  return (<div className="space-y-3">
    <HistToolbar q={q} setQ={setQ} range={range} setRange={setRange} custom={custom} setCustom={setCustom} onReload={()=>load(q.trim(),type,range,custom)} loading={loading} count={rows.length} placeholder="ค้นหา ชื่อ / ยูส…">
      <select value={type} onChange={(e)=>setType(e.target.value)} className="h-9 rounded-lg border border-line bg-surface px-2 text-sm text-fg-2"><option value="">ทุกประเภท</option>{Object.entries(types).map(([k,l])=><option key={k} value={k}>{l}</option>)}</select>
    </HistToolbar>
    {err ? <HistErr msg={err} onRetry={()=>load(q.trim(),type,range,custom)}/> : (<>
      <div className="grid grid-cols-3 gap-3">
        <StatMini k="จำนวนรายการ" v={Number(s.items||0).toLocaleString()} sub={Number(s.users||0)+" คน"}/>
        <StatMini k="ยอดโบนัสรวม" v={money2(s.total_amount)} color="var(--warn)"/>
        <StatMini k="เฉลี่ย/รายการ" v={money2(s.items>0?Math.round(Number(s.total_amount||0)/Number(s.items)):0)}/>
      </div>
      <div className="overflow-hidden rounded-xl border border-line bg-surface shadow-sm"><div className="overflow-x-auto"><table className="w-full min-w-[780px] border-collapse text-sm">
        <thead className="border-b-2 border-accent/25 bg-accent-soft"><tr>{histTh("เวลา")}{histTh("สมาชิก")}{histTh("ประเภท")}{histTh("ยอด","text-right")}{histTh("ก่อน→หลัง","text-right pr-4")}</tr></thead>
        <tbody>
          {loading ? Array.from({length:8}).map((_,i)=>(<tr key={i} className="border-b border-line-soft"><td className="px-3 py-3" colSpan="5"><div className="skel h-5 w-full"/></td></tr>))
            : rows.length===0 ? (<tr><td colSpan="5" className="px-4 py-16 text-center text-sm font-medium text-fg-2">ไม่มีรายการ</td></tr>)
            : paged.map((r,i)=>(<tr key={r.id||i} className="border-b border-line-soft transition-colors last:border-0 hover:bg-sunken/50">
              <td className="whitespace-nowrap px-3 py-2.5 text-xs text-fg-2">{fmtDT(r.created_at)}</td>
              <td className="px-3"><div className="min-w-0"><div className="truncate font-semibold text-accent">{r.username||r.full_name||"-"}</div><div className="truncate text-[11px] text-muted">{r.full_name&&r.full_name!==r.username?r.full_name:""}</div></div></td>
              <td className="px-3"><Badge tone="warn">{r.type_label||r.ref_type||"-"}</Badge></td>
              <td className="whitespace-nowrap px-3 text-right font-semibold tnum text-warn">+{money2(r.amount)}</td>
              <td className="whitespace-nowrap pr-4 text-right tnum text-[11px] text-muted">{money2(r.balance_before)} → {money2(r.balance_after)}</td>
            </tr>))}
        </tbody>
      </table></div>{!loading && !err && <Pager page={page} setPage={setPage} total={rows.length} size={size} setSize={setSize}/>}</div>
    </>)}
  </div>);
}