(function() {
  const { useState, useEffect } = React;

  function InvestorsPage({ t, lang, navigate, user }) {
    const [tab, setTab] = useState('all');
    const [allRows, setAllRows] = useState([]);   // โหลดทั้งหมดครั้งเดียว → นับจำนวนต่อสถานะ + กรองในเครื่อง
    const [loading, setLoading] = useState(true);
    const [rejectModal, setRejectModal] = useState(null); // userId
    const [reason, setReason] = useState('');
    const [detail, setDetail] = useState(null); // investor object

    function load() {
      setLoading(true);
      window.api.investors('')
        .then(d => { setAllRows(d.investors || []); setLoading(false); })
        .catch(() => setLoading(false));
    }
    useEffect(() => { load(); }, []);
    // นับจำนวนต่อสถานะ (สำหรับการ์ด) + กรองรายการตามการ์ดที่เลือก
    const counts = { all: allRows.length, pending: 0, verified: 0, rejected: 0, unverified: 0 };
    allRows.forEach(r => { if (counts[r.approval_status] != null) counts[r.approval_status]++; });
    const rows = tab === 'all' ? allRows : allRows.filter(r => r.approval_status === tab);

    async function approve(userId) {
      try { await window.api.approveInvestor(userId); load(); }
      catch (e) { alert((lang==='th'?'อนุมัติไม่สำเร็จ: ':'Approve failed: ') + e.message); }
    }
    async function reject(userId) {
      try { await window.api.rejectInvestor(userId, reason); setRejectModal(null); setReason(''); load(); }
      catch (e) { alert((lang==='th'?'ปฏิเสธไม่สำเร็จ: ':'Reject failed: ') + e.message); }
    }
    // ลบนักลงทุนถาวร (ลบ user → investor_profiles หายตาม CASCADE + ปลดเบอร์) — เฉพาะ super_admin
    async function deleteInvestor(userId, email) {
      if (!window.confirm((lang==='th'?'ลบนักลงทุน ':'Delete investor ') + email + (lang==='th'?' ออกจากระบบถาวร?\n(ลบโปรไฟล์ + ปลดเบอร์/อีเมล ให้สมัครใหม่ได้)':' permanently?'))) return;
      try {
        const token = await window.firebaseAuth.currentUser?.getIdToken();
        const res = await fetch(window.ADMIN_CONFIG.apiUrl + '/admin/users/' + userId, { method: 'DELETE', headers: { Authorization: 'Bearer ' + token } });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) { alert((lang==='th'?'ลบไม่สำเร็จ: ':'Delete failed: ') + (data.error || ('HTTP ' + res.status))); return; }
        setDetail(null); load();
      } catch (e) { alert((lang==='th'?'ลบไม่สำเร็จ: ':'Delete failed: ') + (e.message || e)); }
    }

    const tabs = [
      { id: 'all', label: lang === 'th' ? 'ทั้งหมด' : 'All', color: '#2A6BE0', bg: '#EAF1FD', icon: 'ph-users-three' },
      { id: 'pending', label: lang === 'th' ? 'รอตรวจ' : 'Pending', color: '#B5860B', bg: '#FFF7E6', icon: 'ph-clock-countdown' },
      { id: 'verified', label: lang === 'th' ? 'ยืนยันแล้ว' : 'Verified', color: '#15976A', bg: '#E8F7F0', icon: 'ph-seal-check' },
      { id: 'rejected', label: lang === 'th' ? 'ปฏิเสธ' : 'Rejected', color: '#D8567A', bg: '#FDF1F5', icon: 'ph-x-circle' },
      { id: 'unverified', label: lang === 'th' ? 'ยังไม่ยื่น' : 'Unverified', color: '#64748B', bg: '#F1F5F9', icon: 'ph-user' },
    ];
    const statusBadge = (s) => {
      const m = { unverified: ['badge-gray', lang==='th'?'ยังไม่ยื่น':'Unverified'],
                  pending: ['badge-yellow', lang==='th'?'รอตรวจ':'Pending'],
                  verified: ['badge-green', lang==='th'?'ยืนยันแล้ว':'Verified'],
                  rejected: ['badge-red', lang==='th'?'ปฏิเสธ':'Rejected'] }[s] || ['badge-gray', s];
      return <span className={'badge '+m[0]}>{m[1]}</span>;
    };
    const fmt = (n) => n == null ? '-' : Number(n).toLocaleString();

    // ตัวอักษรแรกของชื่อ/อีเมล → avatar วงกลม (ให้ตารางอ่านง่ายขึ้น)
    const avatarInitial = r => ((r.display_name || r.email || '?').trim()[0] || '?').toUpperCase();
    const cols = [
      { label: '#', render: (r, i) => <span style={{color:'var(--text-2)', fontVariantNumeric:'tabular-nums'}}>{i + 1}</span> },
      { label: lang==='th'?'นักลงทุน':'Investor', sortKey: 'display_name', render: r => (
        // คลิกที่ชื่อ = เปิดโปรไฟล์เลย (ไม่มีปุ่ม "ดูโปรไฟล์" แล้ว)
        <div className="row gap-10" style={{cursor:'pointer'}} onClick={() => setDetail(r)} title={lang==='th'?'คลิกดูโปรไฟล์':'View profile'}>
          <span style={{width:34,height:34,borderRadius:'50%',flexShrink:0,display:'grid',placeItems:'center',
            background:'#E7F0FE',color:'#2A6BE0',fontWeight:700,fontSize:14}}>{avatarInitial(r)}</span>
          <div style={{minWidth:0}}>
            <div style={{fontWeight:700,color:'var(--blue)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.display_name || (lang==='th'?'(ยังไม่มีชื่อ)':'(No name)')}</div>
            <div style={{fontSize:12,color:'var(--text-2)',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>{r.email}</div>
          </div>
        </div>
      ) },
      { label: lang==='th'?'เบอร์':'Phone', sortKey: 'phone', render: r => r.phone || <span style={{color:'var(--text-2)'}}>—</span> },
      { label: lang==='th'?'สถานะ':'Status', sortKey: 'approval_status', render: r => statusBadge(r.approval_status) },
      { label: lang==='th'?'สมัคร':'Applied', sortKey: 'created_at', render: r => new Date(r.created_at).toLocaleDateString('th-TH') },
      { label: lang==='th'?'จัดการ':'Actions', render: r => (
        <div className="row gap-6">
          {r.approval_status !== 'unverified' && r.approval_status !== 'verified' &&
            <window.ApproveBtn disabled={!r.phone} title={!r.phone ? (lang==='th'?'ต้องมีเบอร์ที่ยืนยันแล้วก่อน':'Requires a verified phone') : (lang==='th'?'ยืนยัน':'Verify')} onClick={() => r.phone && approve(r.user_id)} />}
          {r.approval_status !== 'unverified' && r.approval_status !== 'rejected' &&
            <window.RejectBtn title={lang==='th'?'ปฏิเสธ':'Reject'} onClick={() => setRejectModal(r.user_id)} />}
          {user?.role === 'super_admin' && <window.DeleteBtn title={lang==='th'?'ลบถาวร':'Delete'} onClick={() => deleteInvestor(r.user_id, r.email)} />}
        </div>
      )},
    ];

    const ts = window.useTableSort(rows, 'created_at', 'desc');

    return (
      <div className="page">
        <div className="page-header"><h1><i className="ph ph-wallet" style={{marginRight:8,color:'#4A6079'}}></i>{lang==='th'?'อนุมัตินักลงทุน':'Investor approval'}</h1></div>
        {/* การ์ดกรองตามสถานะ — โชว์จำนวน + กดกรอง (component ใช้ซ้ำได้) */}
        <window.FilterCards
          items={tabs.map(tb => ({ ...tb, count: counts[tb.id] || 0, hot: tb.id === 'pending' && (counts.pending || 0) > 0 }))}
          active={tab} onSelect={setTab} />
        <div className="card" style={{marginTop:16}}>
          <Table columns={cols} data={ts.sorted} loading={loading} empty={lang==='th'?'ไม่มีรายการ':'No investors'} sort={ts.sort} onSort={ts.onSort} />
        </div>

        {/* Reject modal */}
        {rejectModal && <Modal title={lang==='th'?'เหตุผลที่ปฏิเสธ':'Reject reason'} onClose={() => setRejectModal(null)}>
          <textarea className="input" placeholder={lang==='th'?'ระบุเหตุผล (จะแสดงให้นักลงทุนเห็น)':'Reason (shown to investor)'} value={reason} onChange={e => setReason(e.target.value)} rows={3} />
          <div className="row gap-10" style={{marginTop:16}}>
            <button className="btn btn-danger" onClick={() => reject(rejectModal)}>{lang==='th'?'ยืนยันปฏิเสธ':'Confirm reject'}</button>
            <button className="btn btn-ghost" onClick={() => setRejectModal(null)}>{lang==='th'?'ยกเลิก':'Cancel'}</button>
          </div>
        </Modal>}

        {/* Profile detail modal */}
        {detail && <Modal title={lang==='th'?'โปรไฟล์การลงทุน':'Investment profile'} onClose={() => setDetail(null)}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,fontSize:14}}>
            <Field label={lang==='th'?'ชื่อ':'Name'} v={detail.display_name} />
            <Field label={lang==='th'?'อีเมล':'Email'} v={detail.email} />
            <Field label={lang==='th'?'เบอร์ (ยืนยันแล้ว)':'Phone (verified)'} v={detail.phone} />
            <Field label={lang==='th'?'สถานะ':'Status'} v={detail.approval_status} />
            <Field label={lang==='th'?'งบลงทุน':'Budget'} v={(fmt(detail.budget_min))+' - '+fmt(detail.budget_max)+' ฿'} />
            <Field label={lang==='th'?'ผลตอบแทนขั้นต่ำ':'Min return'} v={detail.min_return ? detail.min_return+'%' : '-'} />
            <Field label={lang==='th'?'LTV สูงสุดที่รับได้':'Max LTV'} v={detail.max_ltv ? detail.max_ltv+'%' : '-'} />
            <Field label={lang==='th'?'ความเสี่ยงที่รับได้':'Risk appetite'} v={detail.risk_appetite || '-'} />
            <Field label={lang==='th'?'ประเภทที่สนใจ':'Types'} v={(detail.interested_types||[]).join(', ') || '-'} full />
            <Field label={lang==='th'?'ทำเลที่สนใจ':'Provinces'} v={(detail.interested_provinces||[]).join(', ') || '-'} full />
            {detail.reject_reason && <Field label={lang==='th'?'เหตุผลปฏิเสธ':'Reject reason'} v={detail.reject_reason} full />}
          </div>

          {/* ข้อมูลที่ยื่นขอยืนยันตัวตน */}
          {(detail.verify_real_name || detail.verify_requested_at) && (
            <div style={{marginTop:16,padding:'14px 16px',background:'#F0F7FF',border:'1px solid #DDE9FC',borderRadius:10}}>
              <div style={{fontWeight:700,color:'#1F58C4',marginBottom:8}}><i className="ph ph-identification-card" style={{marginRight:6}}></i>{lang==='th'?'ข้อมูลที่ยื่นขอยืนยันตัวตน':'Verification request'}</div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12,fontSize:14}}>
                <Field label={lang==='th'?'ชื่อจริง':'Real name'} v={detail.verify_real_name} />
                <Field label={lang==='th'?'อาชีพ':'Occupation'} v={detail.verify_occupation} />
                <Field label={lang==='th'?'ที่อยู่':'Address'} v={detail.verify_address} full />
                <Field label={lang==='th'?'ช่องทางติดต่อ':'Contact'} v={detail.verify_contact} />
                <Field label={lang==='th'?'ความสนใจ/งบ':'Interest / budget'} v={detail.verify_note} full />
                <Field label={lang==='th'?'ยื่นเมื่อ':'Requested at'} v={detail.verify_requested_at ? new Date(detail.verify_requested_at).toLocaleString('th-TH') : '-'} full />
              </div>
            </div>
          )}

          <div className="row gap-10" style={{marginTop:20}}>
            {detail.approval_status !== 'unverified' && detail.approval_status !== 'verified' && <button className="btn btn-success" disabled={!detail.phone} style={!detail.phone?{opacity:.45,cursor:'not-allowed'}:{}} title={!detail.phone?(lang==='th'?'ต้องมีเบอร์ที่ยืนยันแล้วก่อน':'Requires a verified phone'):''} onClick={() => { if(detail.phone){ approve(detail.user_id); setDetail(null); } }}>{lang==='th'?'ยืนยัน':'Verify'}</button>}
            {detail.approval_status !== 'unverified' && detail.approval_status !== 'verified' && !detail.phone && <span style={{fontSize:12,color:'#B5860B',alignSelf:'center'}}><i className="ph ph-warning" style={{marginRight:4}}></i>{lang==='th'?'ยืนยันไม่ได้ — นักลงทุนยังไม่มีเบอร์ที่ยืนยัน':'Cannot verify — no verified phone'}</span>}
            {detail.approval_status !== 'unverified' && detail.approval_status !== 'rejected' && <button className="btn btn-danger" onClick={() => { setRejectModal(detail.user_id); setDetail(null); }}>{lang==='th'?'ปฏิเสธ':'Reject'}</button>}
            {user?.role === 'super_admin' && <button className="btn btn-danger" onClick={() => deleteInvestor(detail.user_id, detail.email)}><i className="ph ph-trash" style={{marginRight:6}}></i>{lang==='th'?'ลบนักลงทุน':'Delete'}</button>}
            <button className="btn btn-ghost" onClick={() => setDetail(null)}>{lang==='th'?'ปิด':'Close'}</button>
          </div>
        </Modal>}
      </div>
    );
  }

  function Field({ label, v, full }) {
    return (
      <div style={full ? {gridColumn:'1/-1'} : {}}>
        <div style={{fontSize:12,color:'var(--text-2)',marginBottom:2}}>{label}</div>
        <div style={{fontWeight:600,color:'var(--text-1)'}}>{v || '-'}</div>
      </div>
    );
  }

  window.InvestorsPage = InvestorsPage;
})();