// User management (super_admin only).
const { useState: useStateU } = React;

function UsersScreen({ onBack }) {
  const [users, setUsers] = useStateU(window.AppData.USERS);
  const [showInvite, setShowInvite] = useStateU(false);
  const [filter, setFilter] = useStateU('all');

  function deactivate(id) {
    setUsers(us => us.map(u => u.id === id ? { ...u, status: u.status === 'Active' ? 'Inactive' : 'Active' } : u));
  }

  function invite(u) {
    setUsers(prev => [{
      id: 'u-' + Date.now(),
      name: u.name, email: u.email, role: u.role,
      lastLogin: null, status: 'Active',
      initials: u.name.split(' ').map(p => p[0]).slice(0, 2).join(''),
    }, ...prev]);
    setShowInvite(false);
  }

  const filtered = filter === 'all' ? users : users.filter(u => u.role === filter);

  return (
    <div data-screen-label="06 User management">
      <button className="back-link" onClick={onBack}><window.I.ArrowLeft size={13} /> Back</button>
      <div className="page-head">
        <div>
          <h1 className="page-title">User management</h1>
          <div className="page-subtitle">All portal accounts are created here. No self-registration.</div>
        </div>
        <button className="btn btn-primary" onClick={() => setShowInvite(s => !s)}>
          <window.I.Plus size={14} /> Invite user
        </button>
      </div>

      <div className="metric-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="card metric">
          <div className="metric-label">Super admins</div>
          <div className="metric-value">{users.filter(u => u.role === 'super_admin').length}</div>
          <div className="metric-trend">Justin · Zac</div>
        </div>
        <div className="card metric">
          <div className="metric-label">Staff admins</div>
          <div className="metric-value">{users.filter(u => u.role === 'staff_admin').length}</div>
          <div className="metric-trend">Val · Stoney</div>
        </div>
        <div className="card metric">
          <div className="metric-label">CS presidents</div>
          <div className="metric-value">{users.filter(u => u.role === 'cs_president').length}</div>
          <div className="metric-trend">full club sport access</div>
        </div>
        <div className="card metric">
          <div className="metric-label">CS helpers</div>
          <div className="metric-value">{users.filter(u => u.role === 'cs_helper').length}</div>
          <div className="metric-trend">read + view only</div>
        </div>
      </div>

      {showInvite && <InviteForm onCancel={() => setShowInvite(false)} onInvite={invite} />}

      <div className="card">
        <div className="flex-between" style={{ padding: '14px 18px', borderBottom: '1px solid var(--border)' }}>
          <div className="flex-gap-8">
            <strong style={{ fontSize: 13 }}>All users</strong>
            <span className="dim" style={{ fontSize: 12 }}>· {filtered.length}</span>
          </div>
          <div className="flex-gap-8">
            {['all','super_admin','staff_admin','cs_president','cs_helper'].map(r => (
              <button
                key={r}
                className={`btn btn-xs ${filter === r ? 'btn-secondary' : 'btn-ghost'}`}
                onClick={() => setFilter(r)}
              >
                {r === 'all' ? 'All' : window.AppData.ROLES[r].label}
              </button>
            ))}
          </div>
        </div>
        <div className="table-wrap">
          <table className="data">
            <thead>
              <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Last login</th>
                <th>Status</th>
                <th style={{ textAlign: 'right' }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => {
                const role = window.AppData.ROLES[u.role];
                return (
                  <tr key={u.id}>
                    <td>
                      <div className="flex-gap-8">
                        <span className="avatar" style={{ width: 28, height: 28, fontSize: 11 }}>{u.initials}</span>
                        <strong>{u.name}</strong>
                      </div>
                    </td>
                    <td className="cell-muted">{u.email}</td>
                    <td><span className={`role-badge ${role.color}`}>{role.label}</span>{u.domain && <span className="dim" style={{ marginLeft: 6, fontSize: 11 }}>{u.domain}</span>}</td>
                    <td className="cell-muted">
                      {u.lastLogin
                        ? window.Fmt.dateTime(u.lastLogin)
                        : <span className="dim">Never</span>}
                    </td>
                    <td>
                      <span className={`badge ${u.status === 'Active' ? 'success' : 'neutral'} dot`}>{u.status}</span>
                    </td>
                    <td style={{ textAlign: 'right' }}>
                      <div className="flex-gap-8" style={{ justifyContent: 'flex-end', gap: 4 }}>
                        <button className="btn btn-ghost btn-xs"><window.I.Mail size={12} /> Resend invite</button>
                        <button className="btn btn-ghost btn-xs" onClick={() => deactivate(u.id)}>
                          {u.status === 'Active' ? 'Deactivate' : 'Reactivate'}
                        </button>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function InviteForm({ onCancel, onInvite }) {
  const [name, setName] = useStateU('');
  const [email, setEmail] = useStateU('');
  const [role, setRole] = useStateU('cs_helper');
  return (
    <div className="inline-form">
      <div className="inline-form-head">
        <span>Invite a new user</span>
        <button className="btn btn-ghost btn-sm" onClick={onCancel}><window.I.X size={14} /></button>
      </div>
      <div className="form-grid cols-3">
        <div>
          <label className="field-label">Full name</label>
          <input className="input" value={name} onChange={e => setName(e.target.value)} placeholder="Sam Carter" />
        </div>
        <div>
          <label className="field-label">Email</label>
          <input className="input" value={email} onChange={e => setEmail(e.target.value)} placeholder="sam.carter@ferris.edu" />
        </div>
        <div>
          <label className="field-label">Role</label>
          <select className="select" value={role} onChange={e => setRole(e.target.value)}>
            <option value="staff_admin">Staff admin</option>
            <option value="cs_president">CS president</option>
            <option value="cs_helper">CS helper</option>
          </select>
        </div>
      </div>
      <div className="flex-between mt-16">
        <span className="dim" style={{ fontSize: 12 }}>An invitation email will be sent. They land in the portal after first sign-in.</span>
        <div className="flex-gap-8">
          <button className="btn btn-ghost btn-sm" onClick={onCancel}>Cancel</button>
          <button className="btn btn-primary btn-sm" onClick={() => name && email && onInvite({ name, email, role })}>Send invite</button>
        </div>
      </div>
    </div>
  );
}

window.UsersScreen = UsersScreen;