const { useState: useStateR, useEffect: useEffectR, useCallback: useCallbackR } = React;

function fmtRelR(ts) {
  if (!ts) return '—';
  const diff = Date.now() - new Date(ts).getTime();
  const m = Math.floor(diff / 60000);
  if (m < 1) return 'just now';
  if (m < 60) return `${m}m ago`;
  const h = Math.floor(m / 60);
  if (h < 24) return `${h}h ago`;
  return `${Math.floor(h / 24)}d ago`;
}

async function fetchReferralData(sb, filter) {
  let q = sb
    .from('referral_events')
    .select('*')
    .order('created_at', { ascending: false })
    .limit(200);
  if (filter === 'pending')   q = q.eq('status', 'pending');
  if (filter === 'completed') q = q.eq('status', 'completed');
  if (filter === 'flagged')   q = q; // will filter client-side after device check

  const { data: events, error } = await q;
  if (error || !events?.length) return [];

  const allIds = [...new Set([
    ...events.map(e => e.referrer_id),
    ...events.map(e => e.referree_id),
  ])];

  // Profiles + device fingerprints in parallel
  const [profilesRes, devicesRes] = await Promise.all([
    sb.from('user_profiles')
      .select('id, username, display_name, email, avatar_url')
      .in('id', allIds),
    sb.from('user_device_fingerprints')
      .select('user_id, device_id, ip_address, platform, device_name, inferred_city, inferred_region, login_count, first_seen, last_seen')
      .in('user_id', allIds)
      .order('last_seen', { ascending: false }),
  ]);

  const pm = {};
  (profilesRes.data || []).forEach(p => { pm[p.id] = p; });

  // Group devices by user_id (take most recent per user)
  const dm = {};
  (devicesRes.data || []).forEach(d => {
    if (!dm[d.user_id]) dm[d.user_id] = d;
  });

  // Build a map of device_id → all user_ids on that device (for multi-account detection)
  const deviceUsers = {};
  (devicesRes.data || []).forEach(d => {
    if (!d.device_id) return;
    if (!deviceUsers[d.device_id]) deviceUsers[d.device_id] = new Set();
    deviceUsers[d.device_id].add(d.user_id);
  });

  return events.map(e => {
    const referrerDevice = dm[e.referrer_id] || null;
    const referreeDevice = dm[e.referree_id] || null;

    // Fraud signals
    const sameDevice = !!(
      referrerDevice && referreeDevice &&
      referrerDevice.device_id && referrerDevice.device_id === referreeDevice.device_id
    );
    const sameIp = !!(
      referrerDevice && referreeDevice &&
      referrerDevice.ip_address && referrerDevice.ip_address === referreeDevice.ip_address
    );
    const referrerMultiAccount = referrerDevice?.device_id
      ? (deviceUsers[referrerDevice.device_id]?.size ?? 1) > 1
      : false;
    const referreeMultiAccount = referreeDevice?.device_id
      ? (deviceUsers[referreeDevice.device_id]?.size ?? 1) > 1
      : false;
    const flagged = sameDevice || sameIp || referreeMultiAccount;

    return {
      ...e,
      referrer: pm[e.referrer_id] || null,
      referree: pm[e.referree_id] || null,
      referrerDevice,
      referreeDevice,
      fraud: { sameDevice, sameIp, referrerMultiAccount, referreeMultiAccount, flagged },
    };
  });
}

async function fetchReferralStats(sb) {
  const [total, pending, completed, manaRes] = await Promise.all([
    sb.from('referral_events').select('*', { count: 'exact', head: true }),
    sb.from('referral_events').select('*', { count: 'exact', head: true }).eq('status', 'pending'),
    sb.from('referral_events').select('*', { count: 'exact', head: true }).eq('status', 'completed'),
    sb.from('mana_transactions')
      .select('amount.sum()')
      .in('source', ['referral_signup', 'referral_purchase']),
  ]);

  const { data: topEvents } = await sb
    .from('referral_events')
    .select('referrer_id')
    .limit(500);

  const counts = {};
  (topEvents || []).forEach(e => { counts[e.referrer_id] = (counts[e.referrer_id] || 0) + 1; });
  const topId = Object.entries(counts).sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;

  let topReferrer = null;
  if (topId) {
    const { data: p } = await sb.from('user_profiles').select('username, display_name').eq('id', topId).single();
    topReferrer = p ? { ...p, count: counts[topId] } : null;
  }

  return {
    total: total.count ?? 0,
    pending: pending.count ?? 0,
    completed: completed.count ?? 0,
    totalMana: Number(manaRes.data?.[0]?.sum ?? 0),
    topReferrer,
  };
}

function DeviceCell({ device, multiAccount }) {
  if (!device) return <span className="muted">—</span>;
  return (
    <div className="col" style={{ gap: 2 }}>
      <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--ink-2)' }}>
        {device.platform ?? '?'} · {device.ip_address ?? 'no ip'}
      </span>
      {(device.inferred_city || device.inferred_region) && (
        <span style={{ fontSize: 11, color: 'var(--ink-3)' }}>
          {[device.inferred_city, device.inferred_region].filter(Boolean).join(', ')}
        </span>
      )}
      {multiAccount && (
        <span className="chip neg" style={{ marginTop: 2 }}>multi-account device</span>
      )}
    </div>
  );
}

window.ReferralsPage = function ReferralsPage() {
  const sb = window.supabaseClient;
  const [filter, setFilter] = useStateR('all');
  const [rows, setRows] = useStateR([]);
  const [stats, setStats] = useStateR(null);
  const [loading, setLoading] = useStateR(true);
  const [search, setSearch] = useStateR('');

  const load = useCallbackR(async () => {
    setLoading(true);
    const [data, s] = await Promise.all([
      fetchReferralData(sb, filter),
      fetchReferralStats(sb),
    ]);
    setRows(data);
    setStats(s);
    setLoading(false);
  }, [filter]);

  useEffectR(() => { load(); }, [load]);

  const flaggedCount = rows.filter(r => r.fraud?.flagged).length;

  const filtered = rows.filter(r => {
    if (filter === 'flagged' && !r.fraud?.flagged) return false;
    if (!search) return true;
    const q = search.toLowerCase();
    return (
      r.referrer?.username?.toLowerCase().includes(q) ||
      r.referrer?.email?.toLowerCase().includes(q) ||
      r.referree?.username?.toLowerCase().includes(q) ||
      r.referree?.email?.toLowerCase().includes(q) ||
      r.referral_code?.toLowerCase().includes(q) ||
      r.referrerDevice?.ip_address?.includes(q) ||
      r.referreeDevice?.ip_address?.includes(q)
    );
  });

  const tabCounts = {
    all: stats?.total ?? 0,
    pending: stats?.pending ?? 0,
    completed: stats?.completed ?? 0,
    flagged: flaggedCount,
  };

  return (
    <div className="page">
      <div className="page-h">
        <div>
          <h1>Referrals</h1>
          <div className="ts"><span className="live">live</span> · referral_events</div>
        </div>
        <div className="acts">
          <button className="btn" onClick={load}>↺ Refresh</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(5,1fr)', marginBottom: 20 }}>
        <div className="kpi">
          <div className="lbl">Total Referrals</div>
          <div className="val">{stats?.total ?? '—'}</div>
        </div>
        <div className="kpi">
          <div className="lbl">Pending Purchase</div>
          <div className="val" style={{ color: 'var(--warn)' }}>{stats?.pending ?? '—'}</div>
        </div>
        <div className="kpi">
          <div className="lbl">Fully Completed</div>
          <div className="val" style={{ color: 'var(--pos)' }}>{stats?.completed ?? '—'}</div>
        </div>
        <div className="kpi">
          <div className="lbl">Mana Paid Out</div>
          <div className="val">{stats ? stats.totalMana.toLocaleString() : '—'}<span className="unit"> pts</span></div>
          {stats?.topReferrer && (
            <div className="sub">Top: @{stats.topReferrer.username} · {stats.topReferrer.count} refs</div>
          )}
        </div>
        <div className="kpi">
          <div className="lbl">Flagged (fraud signals)</div>
          <div className="val" style={{ color: flaggedCount > 0 ? 'var(--neg)' : 'var(--ink-3)' }}>
            {loading ? '—' : flaggedCount}
          </div>
          <div className="sub">same device / IP / multi-account</div>
        </div>
      </div>

      <div className="panel">
        <div style={{ display: 'flex', alignItems: 'center', borderBottom: '1px solid var(--hairline)' }}>
          <div className="ftabs" style={{ borderBottom: 'none', flex: 1 }}>
            {['all', 'pending', 'completed', 'flagged'].map(f => (
              <div
                key={f}
                className={`ftab${filter === f ? ' active' : ''}`}
                onClick={() => setFilter(f)}
              >
                {f.charAt(0).toUpperCase() + f.slice(1)}
                {f === 'flagged' && tabCounts.flagged > 0
                  ? <span className="ct" style={{ background: 'var(--neg-soft)', color: 'var(--neg)' }}>{tabCounts.flagged}</span>
                  : <span className="ct">{tabCounts[f]}</span>
                }
              </div>
            ))}
          </div>
          <div style={{ padding: '0 12px' }}>
            <input
              placeholder="Search username, email, IP, code…"
              value={search}
              onChange={e => setSearch(e.target.value)}
              style={{
                height: 26, padding: '0 10px', fontSize: 12,
                border: '1px solid var(--hairline)', borderRadius: 4,
                background: 'var(--surface-2)', color: 'var(--ink)',
                outline: 'none', width: 260, fontFamily: 'var(--font-sans)',
              }}
            />
          </div>
        </div>

        <div className="t-wrap">
          <table className="t">
            <thead>
              <tr>
                <th>Referrer</th>
                <th>Referrer Device</th>
                <th>Code</th>
                <th>Referred User</th>
                <th>Referree Device</th>
                <th>Status</th>
                <th>Signed Up</th>
                <th>First Purchase</th>
                <th>Fraud Signals</th>
              </tr>
            </thead>
            <tbody>
              {loading && (
                <tr><td colSpan={9} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '28px 0' }}>Loading…</td></tr>
              )}
              {!loading && filtered.length === 0 && (
                <tr><td colSpan={9} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '28px 0' }}>No referrals found</td></tr>
              )}
              {!loading && filtered.map(r => (
                <tr key={r.id} style={r.fraud?.flagged ? { background: 'var(--neg-soft)' } : {}}>
                  <td>
                    <div className="col" style={{ gap: 1 }}>
                      <span style={{ color: 'var(--ink)', fontWeight: 500 }}>
                        {r.referrer?.display_name || r.referrer?.username || '—'}
                      </span>
                      <span className="muted" style={{ fontSize: 11 }}>@{r.referrer?.username || '—'}</span>
                    </div>
                  </td>
                  <td><DeviceCell device={r.referrerDevice} multiAccount={r.fraud?.referrerMultiAccount} /></td>
                  <td>
                    <span className="num" style={{ letterSpacing: 1, fontSize: 11 }}>{r.referral_code}</span>
                  </td>
                  <td>
                    <div className="col" style={{ gap: 1 }}>
                      <span style={{ color: 'var(--ink)', fontWeight: 500 }}>
                        {r.referree?.display_name || r.referree?.username || '—'}
                      </span>
                      <span className="muted" style={{ fontSize: 11 }}>@{r.referree?.username || '—'}</span>
                    </div>
                  </td>
                  <td><DeviceCell device={r.referreeDevice} multiAccount={r.fraud?.referreeMultiAccount} /></td>
                  <td>
                    <span className={`chip dot ${r.status === 'completed' ? 'pos' : 'warn'}`}>{r.status}</span>
                  </td>
                  <td>
                    <div className="col" style={{ gap: 1 }}>
                      <span title={r.created_at}>{fmtRelR(r.created_at)}</span>
                      {r.signup_credited_at && <span className="chip pos" style={{ fontSize: 10 }}>+250 pts ✓</span>}
                    </div>
                  </td>
                  <td>
                    <div className="col" style={{ gap: 1 }}>
                      {r.purchase_credited_at
                        ? <><span title={r.purchase_credited_at}>{fmtRelR(r.purchase_credited_at)}</span>
                            <span className="chip pos" style={{ fontSize: 10 }}>+250 pts ✓</span></>
                        : <span className="muted">Not yet</span>}
                    </div>
                  </td>
                  <td>
                    <div className="col" style={{ gap: 3 }}>
                      {r.fraud?.sameDevice  && <span className="chip neg">same device</span>}
                      {r.fraud?.sameIp      && <span className="chip neg">same IP</span>}
                      {r.fraud?.referreeMultiAccount && <span className="chip neg">multi-account</span>}
                      {!r.fraud?.flagged    && <span className="muted" style={{ fontSize: 11 }}>—</span>}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};