const { useState: useStateDr, useEffect: useEffectDr, useCallback: useCallbackDr } = React;

async function fetchDrivers(sb) {
  const { data: partners } = await sb
    .from('delivery_partners')
    .select('user_id, status, vehicle_type, coverage_city, rating, total_deliveries, completed_deliveries, total_earnings, current_month_earnings, is_online, is_active')
    .order('total_deliveries', { ascending: false })
    .limit(300);

  const rows = partners || [];
  const ids = rows.map(r => r.user_id).filter(Boolean);
  if (ids.length === 0) return [];

  const { data: profiles } = await sb.from('user_profiles').select('id, display_name').in('id', ids);
  const pm = {};
  (profiles || []).forEach(p => { pm[p.id] = p.display_name || '—'; });

  return rows.map(r => ({ ...r, display_name: pm[r.user_id] || '—' }));
}

window.DriversPage = function DriversPage() {
  const I = window.Icons;
  const sb = window.supabaseClient;
  const [drivers, setDrivers] = useStateDr([]);
  const [loading, setLoading] = useStateDr(true);
  const [filter, setFilter] = useStateDr('all');
  const [search, setSearch] = useStateDr('');

  const load = useCallbackDr(async () => {
    if (!sb) return;
    setLoading(true);
    setDrivers(await fetchDrivers(sb));
    setLoading(false);
  }, []);

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

  const online = drivers.filter(d => d.is_online).length;
  const pending = drivers.filter(d => d.status === 'pending_approval').length;
  const avgRating = drivers.length
    ? (drivers.reduce((s, d) => s + Number(d.rating || 0), 0) / drivers.filter(d => d.rating).length || 0)
    : 0;
  const monthPayouts = drivers.reduce((s, d) => s + Number(d.current_month_earnings || 0), 0);

  const filtered = drivers.filter(d => {
    if (filter === 'online' && !d.is_online) return false;
    if (filter === 'active' && !d.is_active) return false;
    if (filter === 'pending' && d.status !== 'pending_approval') return false;
    if (search && !d.display_name.toLowerCase().includes(search.toLowerCase()) && !(d.coverage_city || '').toLowerCase().includes(search.toLowerCase())) return false;
    return true;
  });

  return (
    <div className="page" data-screen-label="Drivers">
      <div className="page-h">
        <div>
          <div className="ts"><span className="live">live</span> · delivery fleet</div>
          <h1>Drivers</h1>
        </div>
        <div className="acts">
          <button className="btn" onClick={load}><I.refresh size={12}/>Refresh</button>
        </div>
      </div>

      <div className="kpi-grid" style={{ marginBottom: 16 }}>
        <div className="kpi">
          <div className="lbl">Total drivers</div>
          <div className="val">{loading ? '—' : drivers.length.toLocaleString()}</div>
          <div className="sub"><span className="muted">all statuses</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">Online now</div>
          <div className="val" style={{ color: online > 0 ? 'var(--pos)' : undefined }}>{loading ? '—' : online}</div>
          <div className="sub"><span className="muted">of {drivers.filter(d => d.is_active).length} active</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">Avg rating</div>
          <div className="val">{loading ? '—' : avgRating.toFixed(2)}</div>
          <div className="sub"><span className="muted">rated drivers only</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">This month payouts</div>
          <div className="val">{loading ? '—' : window.PipalData.compactCurrency(monthPayouts)}</div>
          <div className="sub"><span className="muted">this month, all drivers</span></div>
        </div>
        <div className="kpi">
          <div className="lbl">Pending approval</div>
          <div className="val" style={{ color: pending > 0 ? 'var(--warn)' : undefined }}>{loading ? '—' : pending}</div>
          <div className="sub"><span className="muted">awaiting review</span></div>
        </div>
      </div>

      <div className="panel">
        <div className="panel-h" style={{ height: 'auto', minHeight: 38, flexWrap: 'wrap', gap: 8 }}>
          <div className="ftabs" style={{ borderBottom: 'none' }}>
            {[
              ['all', 'All'],
              ['online', 'Online'],
              ['active', 'Active'],
              ['pending', 'Pending'],
            ].map(([id, name]) => (
              <div key={id} className={'ftab' + (filter === id ? ' active' : '')} onClick={() => setFilter(id)}>{name}</div>
            ))}
          </div>
          <div className="right">
            <input
              placeholder="Search name or city…"
              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: 200, fontFamily: 'var(--font-sans)' }}
            />
          </div>
        </div>
        <div className="t-wrap">
          <table className="t">
            <thead><tr>
              <th>Driver</th>
              <th>Vehicle</th>
              <th>Coverage</th>
              <th style={{ textAlign: 'right' }}>Deliveries</th>
              <th style={{ textAlign: 'right' }}>Rating</th>
              <th style={{ textAlign: 'right' }}>This month</th>
              <th>Status</th>
            </tr></thead>
            <tbody>
              {loading && <tr><td colSpan={7} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '28px 0' }}>Loading…</td></tr>}
              {!loading && filtered.length === 0 && <tr><td colSpan={7} style={{ textAlign: 'center', color: 'var(--ink-3)', padding: '28px 0' }}>No drivers found</td></tr>}
              {!loading && filtered.map(d => (
                <tr key={d.user_id}>
                  <td><window.EntityLink type="user" id={d.user_id} label={d.display_name} /></td>
                  <td className="muted">{d.vehicle_type || '—'}</td>
                  <td className="muted">{d.coverage_city || '—'}</td>
                  <td className="num" style={{ textAlign: 'right' }}>{d.completed_deliveries || 0}<span className="muted"> / {d.total_deliveries || 0}</span></td>
                  <td style={{ textAlign: 'right' }}>{d.rating ? <span className="chip accent">{Number(d.rating).toFixed(1)} ★</span> : <span className="muted">—</span>}</td>
                  <td className="num" style={{ textAlign: 'right' }}>{window.PipalData.compactCurrency(d.current_month_earnings || 0)}</td>
                  <td>
                    <span className="row gap-2">
                      <span className={`chip dot ${d.is_online ? 'pos' : ''}`}>{d.is_online ? 'online' : 'offline'}</span>
                      {d.status === 'pending_approval' && <span className="chip warn">pending</span>}
                      {!d.is_active && d.status !== 'pending_approval' && <span className="chip neg">inactive</span>}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};