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

/* ---------- ฝากน่าสงสัย — /deposits/suspicious ---------- */
function SuspiciousPage({ toast }) {
  const [data,setData]=useState(null);
  const [loading,setLoading]=useState(true);
  const [err,setErr]=useState(null);
  const [tab,setTab]=useState("slips");
  const load=useCallback(async()=>{
    setLoading(true); setErr(null);
    try{ setData(await api("/deposits/suspicious?limit=200")); }
    catch(e){ if(e.status===401||e.status===403){window.__nxAuthFail&&window.__nxAuthFail();} setErr(e.status===403?"บัญชีนี้ไม่มีสิทธิ์ดูรายการฝากน่าสงสัย":(e.message||"โหลดไม่สำเร็จ")); }
    finally{ setLoading(false); }
  },[]);
  useEffect(()=>{ load(); },[load]);
  const slips=(data&&data.slips)||[], sms=(data&&data.sms)||[], line=(data&&data.line)||[];
  const TABS=[["slips","สลิป",slips.length],["sms","SMS",sms.length],["line","LINE",line.length]];
  const cur = tab==="slips"?slips : tab==="sms"?sms : line;
  const H=({children,extra=""})=>(<th className={"whitespace-nowrap px-3 py-2.5 text-left text-[13px] font-bold text-fg-2 "+extra}>{children}</th>);
  return (<div className="space-y-3">
    <div className="flex flex-wrap items-center gap-2">
      <div className="flex flex-wrap items-center gap-1 rounded-lg border border-line bg-sunken p-0.5">
        {TABS.map(([k,l,n])=>(<button key={k} onClick={()=>setTab(k)} className={"rounded-md px-3 py-1 text-xs font-medium transition-colors "+(tab===k?"bg-accent text-accent-fg shadow-sm":"text-fg-2 hover:text-fg")}>{l}<span className={"ml-1 text-[10px] "+(tab===k?"opacity-80":"text-faint")}>{n}</span></button>))}
      </div>
      <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} cls={loading?"animate-spin":""}/> รีเฟรช</button>
    </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={load} 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="overflow-hidden rounded-xl border border-line bg-surface shadow-sm"><div className="overflow-x-auto"><table className="w-full min-w-[820px] border-collapse text-sm">
      <thead className="border-b-2 border-accent/25 bg-accent-soft"><tr>
        {tab==="slips" ? <><H>เวลา</H><H>สมาชิก</H><H extra="text-right">ยอด</H><H>บัญชีผู้โอน</H><H>เหตุผล</H></>
        : tab==="sms" ? <><H>เวลา</H><H extra="text-right">ยอด</H><H>บัญชีผู้โอน</H><H>ธนาคาร</H><H>ข้อความ</H></>
        : <><H>เวลา</H><H extra="text-right">ยอด</H><H>สถานะจับคู่</H><H>เหตุผล</H></>}
      </tr></thead>
      <tbody>
        {loading ? Array.from({length:6}).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>))
          : cur.length===0 ? (<tr><td colSpan="5" className="px-4 py-16 text-center text-sm font-medium text-fg-2">ไม่มีรายการน่าสงสัย</td></tr>)
          : cur.map((r,i)=>(<tr key={r.id||i} className="border-b border-line-soft transition-colors last:border-0 hover:bg-sunken/50">
            {tab==="slips" ? <>
              <td className="whitespace-nowrap px-3 py-2.5 text-xs text-fg-2">{fmtDT(r.received_at)}</td>
              <td className="px-3"><div className="min-w-0"><div className="truncate font-medium text-fg">{r.username||"-"}</div><div className="truncate mono text-[11px] text-faint">{r.phone||""}</div></div></td>
              <td className="whitespace-nowrap px-3 text-right font-semibold tnum">{money2(r.amount)}</td>
              <td className="px-3 mono text-xs text-fg-2">{r.sender_account||"-"}</td>
              <td className="px-3 text-xs text-muted"><span className="truncate">{r.review_reason||"-"}</span></td>
            </> : tab==="sms" ? <>
              <td className="whitespace-nowrap px-3 py-2.5 text-xs text-fg-2">{fmtDT(r.received_at)}</td>
              <td className="whitespace-nowrap px-3 text-right font-semibold tnum">{money2(r.amount)}</td>
              <td className="px-3 mono text-xs text-fg-2">{r.sender_account||"-"}</td>
              <td className="px-3 text-xs text-fg-2">{r.parsed_bank||"-"}</td>
              <td className="px-3 text-xs text-muted"><span className="line-clamp-1">{r.message||"-"}</span></td>
            </> : <>
              <td className="whitespace-nowrap px-3 py-2.5 text-xs text-fg-2">{fmtDT(r.received_at)}</td>
              <td className="whitespace-nowrap px-3 text-right font-semibold tnum">{money2(r.amount)}</td>
              <td className="px-3"><Badge tone="warn">{r.match_status||"-"}</Badge></td>
              <td className="px-3 text-xs text-muted"><span className="truncate">{r.match_reason||"-"}</span></td>
            </>}
          </tr>))}
      </tbody>
    </table></div></div>)}
  </div>);
}