/* ==========================================================================
 * ADMIN NEXT — page-dashboard.jsx  (แยกจาก index.html เดิม; โหลดผ่าน <script type="text/babel">)
 * โหลดตามลำดับใน index.html — ทุกไฟล์แชร์ scope เดียวกัน (babel-standalone)
 * ========================================================================== */
function Dashboard({ toast }) {
  const [range,setRange]=useState("today");
  const [scope,setScope]=useState("all");
  const [custom,setCustom]=useState({from:bkkDate(6),to:bkkDate(0)});
  const [data,setData]=useState(null);
  const [sum,setSum]=useState(null);
  const [bonusSum,setBonusSum]=useState(null);
  const [loading,setLoading]=useState(true);
  const [err,setErr]=useState(null);

  const load=useCallback(async(key,cust)=>{
    setLoading(true); setErr(null);
    try { const {from,to}=rangeToDates(key,cust); const d=await api(`/summary/period?from=${from}&to=${to}`); setData(d); }
    catch(e){
      if(e.status===401){ window.__nxAuthFail&&window.__nxAuthFail(); }
      setErr(e.status===403 ? "บัญชีนี้ไม่มีสิทธิ์ดูรายงานสรุป (summary)" : (e.message||"โหลดข้อมูลไม่สำเร็จ"));
    } finally { setLoading(false); }
  },[]);
  useEffect(()=>{ if(range!=="custom") load(range); },[range,load]);
  useEffect(()=>{ api("/summary").then(setSum).catch(()=>{}); },[]);
  useEffect(()=>{ api("/reports/bonus-summary").then(setBonusSum).catch(()=>{}); },[]);

  const prev = (data&&data.prev)||{};
  const ratio = data ? (N(data.deposit.amount)>0 ? N(data.net)/N(data.deposit.amount)*100 : 0) : 0;
  const prevRatio = (prev.deposit && N(prev.deposit.amount)>0) ? N(prev.net)/N(prev.deposit.amount)*100 : 0;
  const allTiles = data ? [
    {k:"ยอดฝาก", v:money2(data.deposit.amount), d:{val:dBaht(data.deposit.amount, prev.deposit&&prev.deposit.amount),unit:"baht"}, icon:"dep", color:"#10B981", cat:"finance"},
    {k:"ยอดถอน", v:money2(data.withdrawal.amount), d:{val:dBaht(data.withdrawal.amount, prev.withdrawal&&prev.withdrawal.amount),unit:"baht",inverse:true}, icon:"wdr", color:"#EF4444", cat:"finance"},
    {k:"โบนัส", v:money2(data.bonus.amount), d:{val:dBaht(data.bonus.amount, prev.bonus&&prev.bonus.amount),unit:"baht"}, icon:"gift", color:"#F59E0B", cat:"bonus"},
    {k:"ยอดคืนเสียค้าง", v:money2(data.cashback&&data.cashback.pending), sub:"ยังไม่ได้กดรับในช่วงวันที่เลือก", icon:"gift", color:"#D946EF", cat:"bonus"},
    {k:"ยอดคืนเสียที่รับแล้ว", v:money2(data.cashback&&data.cashback.paid&&data.cashback.paid.amount), d:{val:dBaht(data.cashback?.paid?.amount, prev.cashback?.paid?.amount),unit:"baht"}, icon:"gift", color:"#14B8A6", cat:"bonus"},
    {k:"กำไรสุทธิ", v:money2(data.net), d:{val:dBaht(data.net, prev.net),unit:"baht"}, icon:"chart", color:"#22C55E", cat:"finance"},
    {k:"สมาชิกใหม่", v:N(data.newUsers).toLocaleString()+" คน", d:{val:dCnt(data.newUsers, prev.newUsers),unit:"count"}, icon:"people", color:"#F59E0B", cat:"member"},
    {k:"สมาชิกที่ฝากเงิน", v:N(data.depositingMembers).toLocaleString()+" คน", d:{val:dCnt(data.depositingMembers, prev.depositingMembers),unit:"count"}, icon:"users", color:"#0EA5E9", cat:"member"},
    {k:"สมาชิกออนไลน์ตอนนี้", v:N(data.onlineMembers).toLocaleString()+" คน", live:true, icon:"people", color:"#22C55E", cat:"member"},
    {k:"กำไรต่อยอดฝาก", v:ratio.toFixed(1)+" %", d:{val:ratio-prevRatio,unit:"pct"}, icon:"up", color:"#6366F1", cat:"finance"},
    {k:"ยอดเล่น (เทิร์นโอเวอร์)", v:money2(data.bets&&data.bets.bet_amount), d:null, sub:"รวม AMB", icon:"game", color:"#EC4899", cat:"game"},
    {k:"กงล้อ", v:N(data.wheel&&data.wheel.spins).toLocaleString()+" หมุน", d:null, sub:"รางวัล "+money2(data.wheel&&data.wheel.total_reward), icon:"wheel", color:"#D946EF", cat:"game"},
  ] : [];
  const SCOPES=[["all","ทั้งหมด"],["member","สมาชิก"],["finance","การเงิน"],["bonus","โบนัส"],["game","เกม"]];
  const tiles = scope==="all" ? allTiles : allTiles.filter(t=>t.cat===scope);

  return (<div className="space-y-5">
    {/* ตัวควบคุมช่วงเวลา */}
    <div className="rounded-xl border border-line bg-surface p-3 shadow-sm">
      <div className="flex flex-wrap items-center gap-2">
        <span className="mr-1 flex items-center gap-1.5 text-xs font-medium text-muted"><Ic d={I.filter} size={14}/> ช่วงเวลา</span>
        <div className="flex flex-wrap items-center gap-1 rounded-lg border border-line bg-sunken p-0.5">
          {RANGES.map(([k,l])=>(<button key={k} onClick={()=>setRange(k)} className={"rounded-md px-2.5 py-1 text-xs font-medium transition-colors "+(range===k?"bg-accent text-accent-fg shadow-sm":"text-fg-2 hover:text-fg")}>{l}</button>))}
        </div>
        {range==="custom" && (<div className="flex flex-wrap items-center gap-2">
          <input type="date" value={custom.from} onChange={(e)=>setCustom(c=>({...c,from:e.target.value}))} className="h-8 rounded-lg border border-line bg-surface px-2 text-xs text-fg"/>
          <span className="text-xs text-faint">ถึง</span>
          <input type="date" value={custom.to} onChange={(e)=>setCustom(c=>({...c,to:e.target.value}))} className="h-8 rounded-lg border border-line bg-surface px-2 text-xs text-fg"/>
          <button onClick={()=>load("custom",custom)} className="h-8 rounded-lg bg-accent px-3 text-xs font-semibold text-accent-fg hover:bg-accent-h">ดู</button>
        </div>)}
        {data && !loading && <span className="ml-auto text-xs text-muted tnum">{data.from} – {data.to}{typeof data.onlineMembers==="number" && <span className="ml-2 inline-flex items-center gap-1 text-success"><span className="h-1.5 w-1.5 rounded-full bg-success"/>ออนไลน์ {data.onlineMembers}</span>}</span>}
      </div>
    </div>

    {/* ภาพรวมทั้งระบบ (ปัจจุบัน) — ไม่ขึ้นกับช่วงเวลา ดึงจาก /summary */}
    <div>
      <div className="mb-2 flex items-center gap-1.5 text-xs font-medium text-muted"><Ic d={I.grid} size={14}/> ภาพรวมทั้งระบบ (ปัจจุบัน)</div>
      <div className="grid gap-4" style={{gridTemplateColumns:"repeat(auto-fit,minmax(min(100%,220px),1fr))"}}>
        {(sum ? [
          {k:"สมาชิกทั้งหมด", v:N(sum.users&&sum.users.total).toLocaleString()+" คน", sub:"วันนี้ +"+N(sum.users&&sum.users.today)+" · สัปดาห์นี้ +"+N(sum.usersWeek), icon:"users", color:"#6366F1"},
          {k:"ยอดเงินยูสทั้งระบบ", v:money2(sum.wallets&&sum.wallets.balance), sub:N(sum.wallets&&sum.wallets.wallets).toLocaleString()+" กระเป๋า", icon:"coins", color:"#0EA5E9"},
          {k:"โบนัสรวมในระบบ", v:money2(sum.wallets&&sum.wallets.bonus), sub:"โบนัสค้างในกระเป๋าผู้เล่น", icon:"gift", color:"#F59E0B"},
          {k:"เกมเปิดใช้งาน", v:N(sum.games&&sum.games.enabled).toLocaleString(), sub:"จากทั้งหมด "+N(sum.games&&sum.games.total)+" เกม", icon:"game", color:"#EC4899"},
        ] : Array.from({length:4}).map(()=>({}))).map((t,i)=><KpiTile key={i} tile={t} loading={!sum}/>)}
      </div>
    </div>

    {err ? (
      <div className="rounded-xl border border-line bg-surface px-4 py-16 text-center shadow-sm">
        <div className="mx-auto mb-2 grid h-10 w-10 place-items-center rounded-full text-danger" style={{background:"var(--danger-soft)"}}><Ic d={I.warn2} size={20}/></div>
        <div className="text-sm font-medium text-fg-2">{err}</div>
        <button onClick={()=>range==="custom"?load("custom",custom):load(range)} className="mt-3 rounded-lg border border-line px-3 py-1.5 text-xs font-medium text-fg-2 hover:bg-sunken">ลองใหม่</button>
      </div>
    ) : (<>
      {/* ตัวกรองหมวด */}
      <div className="flex flex-wrap items-center gap-2">
        <span className="mr-1 flex items-center gap-1.5 text-xs font-medium text-muted"><Ic d={I.filter} size={14}/> แสดง</span>
        {SCOPES.map(([k,l])=>(<button key={k} onClick={()=>setScope(k)} className={"rounded-lg border px-2.5 py-1 text-xs font-medium transition-colors "+(scope===k?"border-accent bg-accent-soft text-accent":"border-line text-fg-2 hover:bg-sunken")}>{l}</button>))}
      </div>
      <div className="grid gap-4" style={{gridTemplateColumns:"repeat(auto-fit,minmax(min(100%,220px),1fr))"}}>
        {(loading ? Array.from({length:8}).map(()=>({})) : tiles).map((t,i)=><KpiTile key={i} tile={t} loading={loading}/>)}
      </div>
      {/* กราฟ 7 วัน + สัดส่วนช่องทาง */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <div className="rounded-xl border border-line bg-surface p-4 shadow-sm lg:col-span-2">
          <div className="mb-3 flex items-center justify-between"><div className="text-sm font-semibold">ยอดฝาก–ถอน 7 วันล่าสุด</div>
            <div className="flex items-center gap-3 text-xs"><span className="flex items-center gap-1.5"><span className="h-2.5 w-2.5 rounded-sm" style={{background:"var(--success)"}}/>ฝาก</span><span className="flex items-center gap-1.5"><span className="h-2.5 w-2.5 rounded-sm" style={{background:"var(--danger)"}}/>ถอน</span></div></div>
          {!sum ? <div className="skel h-[190px] w-full"/> : <Bars7d dep={sum.deposit7d} wdr={sum.withdraw7d}/>}
        </div>
        <div className="rounded-xl border border-line bg-surface p-4 shadow-sm">
          <div className="mb-3 text-sm font-semibold">สัดส่วนช่องทางฝาก</div>
          {!sum ? <div className="skel h-[120px] w-full"/> : <ChannelBreak rows={sum.depositsByChannel}/>}
        </div>
      </div>

      {/* ท็อปฝาก + สมาชิกใหม่ล่าสุด */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <MiniList title="20 อันดับฝากสูงสุด" icon="coins" color="#F59E0B" sub={sum?(sum.topDepositors||[]).length+" ราย":""}>
          {!sum ? Array.from({length:4}).map((_,i)=><div key={i} className="px-4 py-2.5"><div className="skel h-5 w-full"/></div>)
            : (sum.topDepositors||[]).slice(0,10).map((r,i)=>(
            <div key={i} className="flex items-center gap-3 px-4 py-2">
              <span className="grid h-6 w-6 shrink-0 place-items-center rounded-full text-[11px] font-bold" style={{background:i<3?"var(--warn-soft)":"var(--sunken)",color:i<3?"var(--warn)":"var(--muted)"}}>{i+1}</span>
              <div className="min-w-0 flex-1"><div className="truncate text-sm font-semibold text-fg">{r.username||r.full_name}</div><div className="truncate text-[11px] text-faint">{r.full_name&&r.full_name!==r.username ? r.full_name+" · " : ""}{r.count} ครั้ง</div></div>
              <span className="text-sm font-semibold tnum text-success">{money2(r.amount)}</span>
            </div>))}
        </MiniList>
        <MiniList title="สมาชิกใหม่ล่าสุด" icon="people" color="#0EA5E9" sub={sum?(sum.latestUsers||[]).length+" คน":""}>
          {!sum ? Array.from({length:4}).map((_,i)=><div key={i} className="px-4 py-2.5"><div className="skel h-5 w-full"/></div>)
            : (sum.latestUsers||[]).slice(0,10).map((u,i)=>(
            <div key={i} className="flex items-center gap-3 px-4 py-2">
              <div className="grid h-8 w-8 shrink-0 place-items-center rounded-full text-sm font-semibold text-white" style={{background:avc(u.username||u.full_name)}}>{initials(u.username||u.full_name)}</div>
              <div className="min-w-0 flex-1"><div className="truncate text-sm font-semibold text-fg">{u.username||u.full_name}</div><div className="truncate text-[11px] text-faint">{u.full_name&&u.full_name!==u.username ? u.full_name : ""}</div></div>
              <span className="text-[11px] text-muted">{fmtDT(u.created_at)}</span>
            </div>))}
        </MiniList>
      </div>

      {/* ตัดเครดิตล่าสุด + สรุปโบนัส */}
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <MiniList title="ตัดเครดิตล่าสุด (Manual)" icon="wdr" color="#EF4444" sub={sum?(sum.latestDeductions||[]).length+" รายการ":""}>
          {!sum ? Array.from({length:3}).map((_,i)=><div key={i} className="px-4 py-2.5"><div className="skel h-5 w-full"/></div>)
            : (sum.latestDeductions||[]).length===0 ? <div className="py-6 text-center text-sm text-muted">ไม่มีรายการ</div>
            : (sum.latestDeductions||[]).slice(0,8).map((d,i)=>(
            <div key={i} className="flex items-center gap-3 px-4 py-2">
              <div className="min-w-0 flex-1"><div className="truncate text-sm font-medium">{d.username}</div><div className="truncate text-[11px] text-faint">{d.reason||"-"} · โดย {d.admin_username||"-"} · {fmtDT(d.created_at)}</div></div>
              <span className="text-sm font-semibold tnum text-danger">-{money2(d.amount)}</span>
            </div>))}
        </MiniList>
        <div className="rounded-xl border border-line bg-surface p-4 shadow-sm">
          <div className="mb-3 flex items-center gap-2"><span className="grid h-6 w-6 place-items-center rounded-lg text-accent" style={{background:"var(--accent-soft)"}}><Duo name="gift" size={15}/></span><div className="text-sm font-semibold">สรุปโบนัส</div></div>
          {!sum ? <div className="space-y-2"><div className="skel h-6 w-full"/><div className="skel h-6 w-full"/></div> : (
            <div className="grid grid-cols-2 gap-3">
              <div className="rounded-lg bg-sunken p-3"><div className="text-[11px] text-muted">โบนัสวันนี้</div><div className="mt-0.5 text-lg font-semibold tnum">{money2(sum.bonusToday&&sum.bonusToday.today_amount)}</div><div className="text-[11px] text-faint">{N(sum.bonusToday&&sum.bonusToday.today_count)} รายการ</div></div>
              <div className="rounded-lg bg-sunken p-3"><div className="text-[11px] text-muted">โบนัสเดือนนี้</div><div className="mt-0.5 text-lg font-semibold tnum">{money2(sum.bonusToday&&sum.bonusToday.month_amount)}</div><div className="text-[11px] text-faint">{N(sum.bonusToday&&sum.bonusToday.month_count)} รายการ</div></div>
              {sum.withdrawalsPending && <div className="col-span-2 flex items-center justify-between rounded-lg border border-line px-3 py-2"><span className="text-xs text-muted">ถอนรออนุมัติ</span><span className="text-sm font-semibold tnum text-warn">{money2(sum.withdrawalsPending.amount)} ({N(sum.withdrawalsPending.count)})</span></div>}
            </div>
          )}
        </div>
      </div>

      {/* สรุปโบนัสตามแหล่ง (วันนี้ / เดือนนี้) — /reports/bonus-summary */}
      <div className="rounded-xl border border-line bg-surface shadow-sm">
        <div className="flex flex-wrap items-center gap-2 border-b border-line px-4 py-3">
          <span className="grid h-6 w-6 place-items-center rounded-lg text-warn" style={{background:"var(--warn-soft)"}}><Duo name="gift" size={15}/></span>
          <div className="text-sm font-semibold">สรุปโบนัสตามแหล่ง</div>
          {bonusSum && <span className="ml-auto text-xs text-muted">โปรแอคทีฟ {N(bonusSum.promoActive)} โปร · เดือนนี้แจกรวม <b className="tnum text-warn">{money2(bonusSum.totalMonth)}</b></span>}
        </div>
        {!bonusSum ? <div className="space-y-2 p-4">{Array.from({length:3}).map((_,i)=><div key={i} className="skel h-6 w-full"/>)}</div>
          : (bonusSum.rows||[]).length===0 ? <div className="py-8 text-center text-sm text-muted">ยังไม่มีการแจกโบนัส</div>
          : (<div className="overflow-x-auto"><table className="w-full min-w-[520px] border-collapse text-sm">
            <thead className="border-b-2 border-accent/25 bg-accent-soft"><tr>
              <th className="px-4 py-2.5 text-left text-[13px] font-bold text-fg-2">แหล่งโบนัส</th>
              <th className="px-3 py-2.5 text-right text-[13px] font-bold text-fg-2">ครั้ง/วันนี้</th>
              <th className="px-3 py-2.5 text-right text-[13px] font-bold text-fg-2">โบนัส/วันนี้</th>
              <th className="px-3 py-2.5 text-right text-[13px] font-bold text-fg-2">ครั้ง/เดือนนี้</th>
              <th className="px-4 py-2.5 text-right text-[13px] font-bold text-fg-2">โบนัส/เดือนนี้</th>
            </tr></thead>
            <tbody>
              {(bonusSum.rows||[]).map((r,i)=>(<tr key={i} className="border-b border-line-soft last:border-0 hover:bg-sunken/40">
                <td className="whitespace-nowrap px-4 py-2 font-medium text-fg-2">{r.label}</td>
                <td className="px-3 py-2 text-right tnum text-muted">{N(r.count_today).toLocaleString()}</td>
                <td className="px-3 py-2 text-right tnum font-semibold text-warn">{money2(r.amount_today)}</td>
                <td className="px-3 py-2 text-right tnum text-muted">{N(r.count_month).toLocaleString()}</td>
                <td className="px-4 py-2 text-right tnum font-semibold text-warn">{money2(r.amount_month)}</td>
              </tr>))}
              <tr className="border-t border-line bg-sunken/40 font-semibold">
                <td className="px-4 py-2.5">รวมทั้งหมด</td>
                <td className="px-3 py-2.5"/>
                <td className="px-3 py-2.5 text-right tnum text-warn">{money2(bonusSum.totalToday)}</td>
                <td className="px-3 py-2.5"/>
                <td className="px-4 py-2.5 text-right tnum text-warn">{money2(bonusSum.totalMonth)}</td>
              </tr>
            </tbody>
          </table></div>)}
      </div>
    </>)}
  </div>);
}