// wh-usuarios-section.jsx - extracted UsuariosSection

(() => {

const { useState, useEffect } = React;
const {
  Icon,
  Avatar,
  Badge,
  Modal,
  EmptyState,
  SecHead,
  FormField,
  InlineFeedback,
  apiFetch,
} = window;

const toast = (msg, type, dur) => window.showToast?.(msg, type, dur);
const confirm = async (msg, opts) => window.showConfirm?.(msg, opts) ?? false;

const ROLE_LABEL = { super_admin: 'Super Admin', admin: 'Administrador', agente: 'Agente' };
const ROLE_COLOR = { super_admin: 'brand', admin: 'teal', agente: 'gray' };

function UsuariosSection({ currentUser }) {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');

  const [newModal, setNewModal] = useState(false);
  const [newName, setNewName] = useState('');
  const [newEmail, setNewEmail] = useState('');
  const [newPass, setNewPass] = useState('');
  const [newRole, setNewRole] = useState('agente');

  const [editModal, setEditModal] = useState(false);
  const [editUser, setEditUser] = useState(null);
  const [editName, setEditName] = useState('');

  const [passModal, setPassModal] = useState(false);
  const [passUser, setPassUser] = useState(null);
  const [newPassReset, setNewPassReset] = useState('');

  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState('');

  const isSuperAdmin = currentUser?.role === 'super_admin';

  const load = async () => {
    setLoading(true);
    try {
      const res = await apiFetch('/api/users');
      if (res.ok) setUsers(await res.json());
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

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

  const add = async () => {
    if (!newName.trim() || !newEmail.trim() || newPass.length < 6) return;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail.trim())) {
      setErr('El correo tiene un formato inválido.');
      return;
    }
    setBusy(true);
    setErr('');
    try {
      const res = await apiFetch('/api/users', {
        method: 'POST',
        body: JSON.stringify({
          full_name: newName.trim(),
          email: newEmail.trim(),
          password: newPass,
          role: newRole,
        }),
      });
      if (!res.ok) {
        const e = await res.json();
        setErr(e.error);
        return;
      }
      setNewModal(false);
      setNewName('');
      setNewEmail('');
      setNewPass('');
      setNewRole('agente');
      toast('Usuario creado correctamente.', 'success');
      await load();
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  };

  const openEdit = (u) => {
    setEditUser(u);
    setEditName(u.full_name || '');
    setErr('');
    setEditModal(true);
  };

  const saveEdit = async () => {
    setBusy(true);
    setErr('');
    try {
      const res = await apiFetch(`/api/users/${editUser.id}`, {
        method: 'PATCH',
        body: JSON.stringify({ full_name: editName.trim() }),
      });
      if (!res.ok) {
        const e = await res.json();
        setErr(e.error);
        return;
      }
      setUsers(users.map((x) => (x.id === editUser.id ? { ...x, full_name: editName.trim() } : x)));
      setEditModal(false);
      toast('Nombre actualizado.', 'success');
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  };

  const openPass = (u) => {
    setPassUser(u);
    setNewPassReset('');
    setErr('');
    setPassModal(true);
  };

  const savePass = async () => {
    if (newPassReset.length < 6) {
      setErr('Mínimo 6 caracteres.');
      return;
    }
    setBusy(true);
    setErr('');
    try {
      const res = await apiFetch(`/api/users/${passUser.id}/reset-password`, {
        method: 'POST',
        body: JSON.stringify({ password: newPassReset }),
      });
      if (!res.ok) {
        const e = await res.json();
        setErr(e.error);
        return;
      }
      setPassModal(false);
      toast('Contraseña actualizada.', 'success');
    } catch (e) {
      setErr(e.message);
    } finally {
      setBusy(false);
    }
  };

  const toggleStatus = async (u) => {
    if (u.status === 'blocked') {
      const res = await apiFetch(`/api/users/${u.id}/unblock`, { method: 'POST' });
      if (!res.ok) {
        const e = await res.json();
        toast(e.error, 'error');
        return;
      }
      setUsers(users.map((x) => (x.id === u.id ? { ...x, status: 'active', failed_login_attempts: 0 } : x)));
      toast(`${u.full_name || u.email} desbloqueado.`, 'success');
      return;
    }
    const newStatus = u.status === 'active' ? 'inactive' : 'active';
    const res = await apiFetch(`/api/users/${u.id}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: newStatus }),
    });
    if (!res.ok) {
      const e = await res.json();
      toast(e.error, 'error');
      return;
    }
    setUsers(users.map((x) => (x.id === u.id ? { ...x, status: newStatus } : x)));
    toast(`Usuario ${newStatus === 'active' ? 'activado' : 'desactivado'}.`, 'info');
  };

  const changeRole = async (u, role) => {
    const res = await apiFetch(`/api/users/${u.id}`, {
      method: 'PATCH',
      body: JSON.stringify({ role }),
    });
    if (!res.ok) {
      const e = await res.json();
      toast(e.error, 'error');
      return;
    }
    setUsers(users.map((x) => (x.id === u.id ? { ...x, role } : x)));
    toast('Rol actualizado.', 'success');
  };

  const del = async (u) => {
    const ok = await confirm(
      `¿Eliminar a ${u.full_name || u.email}? Esta acción no se puede deshacer.`,
      { title: 'Eliminar usuario', danger: true }
    );
    if (!ok) return;
    const res = await apiFetch(`/api/users/${u.id}`, { method: 'DELETE' });
    if (!res.ok) {
      const e = await res.json();
      toast(e.error, 'error');
      return;
    }
    setUsers(users.filter((x) => x.id !== u.id));
    toast('Usuario eliminado.', 'info');
  };

  const fmt = (iso) => iso
    ? new Date(iso).toLocaleString('es', {
        day: '2-digit',
        month: 'short',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
      })
    : '—';

  const statusBadge = (u) => {
    if (u.status === 'blocked') {
      return (
        <>
          <Badge color="red" dot="red">Bloqueado</Badge>
          {u.failed_login_attempts > 0 && (
            <span style={{ fontSize: 11, color: 'var(--danger)', marginLeft: 4 }}>
              {u.failed_login_attempts} intentos
            </span>
          )}
        </>
      );
    }
    if (u.status === 'active') return <Badge color="green" dot="green">Activo</Badge>;
    return <Badge color="gray" dot="gray">Inactivo</Badge>;
  };

  const toggleStatusTitle = (u) => {
    if (u.status === 'blocked') return 'Desbloquear';
    if (u.status === 'active') return 'Desactivar';
    return 'Activar';
  };

  const toggleStatusIcon = (u) => {
    if (u.status === 'blocked') return 'check-circle';
    if (u.status === 'active') return 'wifi-off';
    return 'check';
  };

  const roleLabel = (role) => ROLE_LABEL[role] || role || '—';
  const roleColor = (role) => ROLE_COLOR[role] || 'gray';
  const lastAccessLabel = (iso) => (iso ? fmt(iso) : 'Sin acceso');
  const filteredUsers = users.filter((u) => {
    const q = search.trim().toLowerCase();
    if (!q) return true;
    return [u.full_name, u.email, ROLE_LABEL[u.role], u.status]
      .filter(Boolean)
      .some((value) => String(value).toLowerCase().includes(q));
  });

  return (
    <div>
      <SecHead
        eyebrow="Administración"
        title="Usuarios"
        actions={(
          <button className="btn btn-primary" onClick={() => { setErr(''); setNewModal(true); }}>
            <Icon name="plus" size={14} />
            Nuevo usuario
          </button>
        )}
      />

      <div className="card">
        <div className="usuarios-search-row">
          <div className="usuarios-search-wrap">
            <Icon name="search" size={13} className="usuarios-search-icon" />
            <input
              className="inp usuarios-search-inp"
              placeholder="Buscar usuarios..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
          </div>
          {search.trim() && (
            <button className="btn btn-ghost btn-sm" onClick={() => setSearch('')}>
              Limpiar
            </button>
          )}
        </div>

        <div className="tbl-wrap">
          <table>
            <thead>
              <tr><th>Usuario</th><th>Rol</th><th>Estado</th><th>Último acceso</th><th></th></tr>
            </thead>
            <tbody>
              {loading
                ? <tr><td colSpan={5} style={{ textAlign: 'center', color: 'var(--muted)', padding: 32 }}>Cargando…</td></tr>
                : users.length === 0
                ? <tr><td colSpan={5}><EmptyState icon="users" title="Sin usuarios" /></td></tr>
                : filteredUsers.length === 0
                ? <tr><td colSpan={5}><EmptyState icon="search" title="Sin resultados" sub="Prueba con otro criterio" /></td></tr>
                : filteredUsers.map((u) => {
                  const isSA = u.role === 'super_admin';
                  return (
                    <tr key={u.id}>
                      <td>
                        <div className="flex-r">
                          <Avatar name={u.full_name || u.email} />
                          <div>
                            <div style={{ fontWeight: 600 }}>{u.full_name || '—'}</div>
                            <div style={{ fontSize: 12, color: 'var(--muted)' }}>{u.email}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        {isSA
                          ? <Badge color={ROLE_COLOR.super_admin}>Super Admin</Badge>
                          : (
                            <select
                              className="sel"
                              style={{ fontSize: 12, padding: '3px 8px' }}
                              value={u.role}
                              onChange={(e) => changeRole(u, e.target.value)}
                            >
                              <option value="admin">Admin</option>
                              <option value="agente">Agente</option>
                            </select>
                          )}
                      </td>
                      <td>{statusBadge(u)}</td>
                      <td className="t-muted t-sm">{fmt(u.last_sign_in)}</td>
                      <td>
                        {isSA
                          ? <span className="t-muted t-sm" style={{ fontSize: 11 }}>—</span>
                          : (
                            <div className="flex-r" style={{ gap: 4 }}>
                              <button
                                className="btn btn-ghost btn-icon btn-sm"
                                onClick={() => openEdit(u)}
                                title="Editar nombre"
                              >
                                <Icon name="edit" size={12} />
                              </button>
                              <button
                                className="btn btn-ghost btn-icon btn-sm"
                                onClick={() => openPass(u)}
                                title="Resetear contraseña"
                              >
                                <Icon name="key" size={12} />
                              </button>
                              <button
                                className="btn btn-ghost btn-icon btn-sm"
                                onClick={() => toggleStatus(u)}
                                title={toggleStatusTitle(u)}
                              >
                                <Icon name={toggleStatusIcon(u)} size={12} />
                              </button>
                              <button className="btn btn-danger btn-icon btn-sm" onClick={() => del(u)} title="Eliminar">
                                <Icon name="trash" size={12} />
                              </button>
                            </div>
                          )}
                      </td>
                    </tr>
                  );
                })}
            </tbody>
          </table>
        </div>

        <div className="usuarios-mobile-list">
          {loading
            ? <div className="usuarios-mobile-empty">Cargando…</div>
            : users.length === 0
            ? <EmptyState icon="users" title="Sin usuarios" sub="Crea el primer usuario" />
            : filteredUsers.length === 0
            ? <EmptyState icon="search" title="Sin resultados" sub="Prueba con otro criterio" />
            : filteredUsers.map((u) => {
              const isSA = u.role === 'super_admin';
              const canModify = isSuperAdmin || !isSA;
              return (
                <div key={u.id} className="usuarios-mobile-card">
                  <div className="usuarios-mobile-top">
                    <Avatar name={u.full_name || u.email} />
                    <div className="usuarios-mobile-main">
                      <div className="usuarios-mobile-name">{u.full_name || '—'}</div>
                      <div className="usuarios-mobile-email">{u.email}</div>
                    </div>
                    {isSA
                      ? <span style={{ width: 28, flexShrink: 0 }} />
                      : (
                        <button
                          className="btn btn-ghost btn-icon btn-sm"
                          onClick={() => openEdit(u)}
                          title="Editar nombre"
                        >
                          <Icon name="edit" size={12} />
                        </button>
                      )}
                  </div>

                  <div className="usuarios-mobile-meta">
                    <Badge color={roleColor(u.role)}>{roleLabel(u.role)}</Badge>
                    {statusBadge(u)}
                  </div>

                  <div className="usuarios-mobile-foot">
                    <span className="usuarios-mobile-label">Último acceso</span>
                    <span className="usuarios-mobile-date">{lastAccessLabel(u.last_sign_in)}</span>
                  </div>

                  {canModify && (
                    <div className="usuarios-mobile-actions">
                      <button className="btn btn-ghost btn-sm" onClick={() => openEdit(u)}>Editar</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => openPass(u)}>Clave</button>
                      <button className="btn btn-ghost btn-sm" onClick={() => toggleStatus(u)}>
                        {toggleStatusTitle(u)}
                      </button>
                      <button className="btn btn-danger btn-sm" onClick={() => del(u)}>Eliminar</button>
                    </div>
                  )}
                </div>
              );
            })}
        </div>
      </div>

      <Modal open={newModal} onClose={() => setNewModal(false)} title="Nuevo usuario" subtitle="Usuarios">
        <div className="stack">
          <FormField label="Nombre completo">
            <input className="inp" placeholder="Nombre" value={newName} onChange={(e) => setNewName(e.target.value)} />
          </FormField>
          <FormField label="Email">
            <input
              className="inp"
              type="email"
              placeholder="email@empresa.com"
              value={newEmail}
              onChange={(e) => setNewEmail(e.target.value)}
            />
            <InlineFeedback tone="danger" className="field-error">{err}</InlineFeedback>
          </FormField>
          <FormField label="Contraseña inicial">
            <input
              className="inp"
              type="password"
              placeholder="mín. 6 caracteres"
              value={newPass}
              onChange={(e) => setNewPass(e.target.value)}
            />
          </FormField>
          <FormField label="Rol">
            <select className="sel" value={newRole} onChange={(e) => setNewRole(e.target.value)}>
              <option value="agente">Agente</option>
              <option value="admin">Administrador</option>
            </select>
          </FormField>
          <div className="flex-r" style={{ justifyContent: 'flex-end', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => setNewModal(false)}>Cancelar</button>
            <button
              className="btn btn-primary"
              onClick={add}
              disabled={!newName.trim() || !newEmail.trim() || newPass.length < 6 || busy}
            >
              {busy ? 'Creando…' : 'Crear usuario'}
            </button>
          </div>
        </div>
      </Modal>

      <Modal open={editModal} onClose={() => setEditModal(false)} title="Editar usuario" subtitle={editUser?.email}>
        <div className="stack">
          <FormField label="Nombre completo">
            <input className="inp" value={editName} onChange={(e) => setEditName(e.target.value)} />
          </FormField>
          <FormField label="Email">
            <input className="inp" value={editUser?.email || ''} disabled style={{ opacity: 0.6 }} />
          </FormField>
          <InlineFeedback tone="danger">{err}</InlineFeedback>
          <div className="flex-r" style={{ justifyContent: 'flex-end', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => setEditModal(false)}>Cancelar</button>
            <button className="btn btn-primary" onClick={saveEdit} disabled={!editName.trim() || busy}>
              {busy ? 'Guardando…' : 'Guardar'}
            </button>
          </div>
        </div>
      </Modal>

      <Modal open={passModal} onClose={() => setPassModal(false)} title="Resetear contraseña" subtitle={passUser?.email}>
        <div className="stack">
          <p className="t-sm t-muted">Ingresá una nueva contraseña temporal para este usuario.</p>
          <FormField label="Nueva contraseña">
            <input
              className="inp"
              type="password"
              placeholder="mín. 6 caracteres"
              value={newPassReset}
              onChange={(e) => setNewPassReset(e.target.value)}
            />
          </FormField>
          <InlineFeedback tone="danger">{err}</InlineFeedback>
          <div className="flex-r" style={{ justifyContent: 'flex-end', gap: 10 }}>
            <button className="btn btn-ghost" onClick={() => setPassModal(false)}>Cancelar</button>
            <button className="btn btn-primary" onClick={savePass} disabled={newPassReset.length < 6 || busy}>
              {busy ? 'Guardando…' : 'Actualizar contraseña'}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Object.assign(window, { UsuariosSection });

})();