/* ==========================================================================
 * ADMIN NEXT — page-providerreports.jsx  (รายงานค่ายเกม)
 * ========================================================================== */

function ProviderReportsPage({ toast }) {
  const [data,setData]=useState(null);
  const [agentData,setAgentData]=useState(null);
  const [loading,setLoading]=useState(true);
  const [err,setErr]=useState(null);

  const load=useCallback(async()=>{ setLoading(true); setErr(null);
    try{
      const [bal,agent]=await Promise.all([api("/reports/provider-balances"),api("/reports/agent-balance")]);
      setData(bal); setAgentData(agent);
    }catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail?.();} setErr(e.message||"โหลดไม่สำเร็จ"); }
    finally{ setLoading(false); } },[]);
  useEffect(()=>{ load(); },[load]);

  if(loading) return <div className="flex items-center gap-2 py-16 justify-center text-sm text-muted"><Ic d={I.refresh} size={16} cls="animate-spin"/> กำลังโหลด…</div>;
  if(err) return <HistErr msg={err} onRetry={load}/>;

  const Card=({title,value,sub})=>(
    <div className="rounded-xl border border-line bg-surface p-4 shadow-sm">
      <div className="text-[11px] font-semibold text-muted uppercase">{title}</div>
      <div className="mt-1 text-lg font-semibold text-fg mono tnum">{value}</div>
      {sub&&<div className="mt-0.5 text-xs text-muted">{sub}</div>}
    </div>);

  const ag=agentData||{};
  const pgh=ag.pghard||{}; const amb=ag.amb||{}; const ufa=ag.ufa||{};

  return (<div className="space-y-5">
    <div className="flex items-center gap-2"><button onClick={load} className="flex h-9 items-center gap-1.5 rounded-lg border border-line bg-surface px-3 text-sm font-medium text-fg-2 hover:bg-sunken"><Ic d={I.refresh} size={16}/> รีเฟรช</button></div>

    <h3 className="text-sm font-semibold text-fg">ยอดเครดิตค่ายเกม</h3>
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <Card title="PGHARD Balance" value={baht(pgh.balance||0)} sub={pgh.quota!=null?`Quota: ${baht(pgh.quota)}`:null}/>
      <Card title="AMB Balance" value={baht(amb.balance||0)}/>
      <Card title="UFA Balance" value={baht(ufa.balance||0)} sub={ufa.creditLimit!=null?`Limit: ${baht(ufa.creditLimit)} / In-game: ${baht(ufa.inGame||0)}`:null}/>
    </div>

    {data&&data.wallet&&(<>
      <h3 className="text-sm font-semibold text-fg mt-6">Wallet Summary</h3>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {Object.entries(data.wallet).map(([k,v])=><Card key={k} title={k.replace(/_/g," ")} value={typeof v==="number"?baht(v):String(v)}/>)}
      </div>
    </>)}

    {ag.todayGame&&(<>
      <h3 className="text-sm font-semibold text-fg mt-6">สถิติเกมวันนี้</h3>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {Object.entries(ag.todayGame).map(([k,v])=><Card key={k} title={k.replace(/_/g," ")} value={typeof v==="number"?baht(v):String(v)}/>)}
      </div>
    </>)}

    {data&&data.ambBets&&(<>
      <h3 className="text-sm font-semibold text-fg mt-6">AMB Bet Stats</h3>
      <div className="overflow-x-auto rounded-xl border border-line bg-surface shadow-sm">
        <table className="w-full text-sm">
          <thead><tr className="border-b border-line bg-sunken/60 text-left text-xs font-semibold text-muted">
            <th className="px-4 py-3">ค่าย</th><th className="px-4 py-3 text-right">ยอดเดิมพัน</th><th className="px-4 py-3 text-right">ชนะ/แพ้</th>
          </tr></thead>
          <tbody>{Object.entries(data.ambBets).map(([k,v])=>(
            <tr key={k} className="border-b border-line last:border-0 hover:bg-sunken/40">
              <td className="px-4 py-3 font-medium">{k}</td>
              <td className="px-4 py-3 text-right mono tnum">{baht(v.bet||v.turnover||0)}</td>
              <td className="px-4 py-3 text-right mono tnum">{baht(v.winlose||v.profit||0)}</td>
            </tr>))}</tbody>
        </table>
      </div>
    </>)}
  </div>);
}