// assets/screen_users.jsx
function ScreenUsers({ go }) {
  const [search, setSearch] = React.useState('');
  const [skip, setSkip] = React.useState(0);
  const [limit, setLimit] = React.useState(50);
  const [statusFilter, setStatusFilter] = React.useState('all');

  const filtered = USERS.filter(u => {
    if (statusFilter === 'active' && !u.is_active) return false;
    if (statusFilter === 'inactive' && u.is_active) return false;
    if (statusFilter === 'verified' && !u.is_verified) return false;
    if (search) {
      const q = search.toLowerCase();
      if (!u.username.includes(q) && !u.email.includes(q) && !u.subdomain.includes(q)) return false;
    }
    return true;
  });
  const pageItems = filtered.slice(skip, skip + limit);

  return (
    <div className="page">
      <div className="page-head">
        <h1>Users</h1>
        <span className="page-sub">{filtered.length.toLocaleString()} of {USERS.length.toLocaleString()}</span>
        <div className="page-actions">
          <button className="btn"><Icon name="download" size={12} /> Export</button>
        </div>
      </div>

      <div className="grid cols-4" style={{ marginBottom: 14 }}>
        <KpiCard label="Total users" value={USERS.length} icon="user" />
        <KpiCard label="Active" value={USERS.filter(u => u.is_active).length} icon="check2" />
        <KpiCard label="Verified" value={USERS.filter(u => u.is_verified).length} icon="shield" />
        <KpiCard label="Inactive / banned" value={USERS.filter(u => !u.is_active).length} icon="ban" />
      </div>

      <div className="card" style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 8, padding: 10, flexWrap: 'wrap', alignItems: 'center' }}>
          <div style={{ position: 'relative', flex: 1, minWidth: 240, maxWidth: 360 }}>
            <Icon name="search" size={12} style={{ position: 'absolute', left: 8, top: 7, color: 'var(--text-tertiary)' }} />
            <input className="input" style={{ paddingLeft: 26 }} placeholder="username / email / subdomain" value={search} onChange={e => { setSearch(e.target.value); setSkip(0); }} />
          </div>
          <select className="select" style={{ width: 'auto' }} value={statusFilter} onChange={e => { setStatusFilter(e.target.value); setSkip(0); }}>
            <option value="all">All</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
            <option value="verified">Verified</option>
          </select>
          <span style={{ flex: 1 }} />
          <span className="dim fs-11">Limit:</span>
          <div className="segmented">
            {[10, 20, 50, 100].map(n => <button key={n} className={limit === n ? 'active' : ''} onClick={() => { setLimit(n); setSkip(0); }}>{n}</button>)}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="table-wrap" style={{ maxHeight: 'calc(100vh - 380px)' }}>
          <table className="tbl">
            <thead><tr>
              <th>User</th>
              <th>Status</th>
              <th>Subdomain</th>
              <th className="num">Projects</th>
              <th className="num">Sessions</th>
              <th>Last active</th>
              <th>Joined</th>
              <th style={{ width: 140 }}>Actions</th>
            </tr></thead>
            <tbody>
              {pageItems.map(u => (
                <tr key={u.id} className="clickable" onClick={() => go('/users/' + u.id)}>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <UserAvatar username={u.username} size={28} />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontWeight: 500 }}>{u.username}</div>
                        <div className="dim mono fs-11">{u.email}</div>
                      </div>
                    </div>
                  </td>
                  <td>
                    <Badge kind={u.is_active ? 'success' : 'neutral'} dot>{u.is_active ? 'active' : 'inactive'}</Badge>
                    {u.is_verified && <span style={{ marginLeft: 4, color: 'var(--accent)', fontSize: 11 }} title="verified"><Icon name="check2" size={12} style={{ verticalAlign: 'middle' }} /></span>}
                  </td>
                  <td className="dim2"><Mono>{u.subdomain}</Mono></td>
                  <td className="num"><Mono>{u.projects_count}</Mono>{u.active_projects_count > 0 && <span className="dim mono fs-11"> · {u.active_projects_count} active</span>}</td>
                  <td className="num"><Mono>{u.sessions_count}</Mono></td>
                  <td className="dim">{u.last_login ? <Mono>{formatRel(u.last_login)}</Mono> : <span className="dim">Never</span>}</td>
                  <td className="dim"><Mono>{fmtDate(u.created_at)}</Mono></td>
                  <td onClick={e => e.stopPropagation()}>
                    <button className="btn xs"><Icon name="eye" size={11} /> View</button>
                    {u.is_active && <button className="btn xs ghost danger"><Icon name="ban" size={11} /></button>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="pagination">
          <span className="dim fs-12">{skip + 1}–{Math.min(skip + limit, filtered.length)} of {filtered.length.toLocaleString()}</span>
          <span className="spacer" />
          <button className="btn sm" disabled={skip === 0} onClick={() => setSkip(s => Math.max(0, s - limit))}><Icon name="chevron" size={12} style={{ transform: 'rotate(180deg)' }} /> Prev</button>
          <button className="btn sm" disabled={skip + limit >= filtered.length} onClick={() => setSkip(s => s + limit)}>Next <Icon name="chevron" size={12} /></button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenUsers });