// ─── Lanven — Módulo Usuarios (solo ADMIN) ───────────────────────────────────

const API =
  (location.hostname === 'localhost' || location.hostname === '127.0.0.1')
    ? 'http://localhost:3001'
    : 'https://api.lanven.com.ar';

const ROL_LABEL = {
  ADMIN:       'Admin',
  GERENCIA:    'Gerencia',
  TEAM_LEADER: 'Team Leader',
  BROKER:      'Broker',
  MARKETING:   'Marketing',
};

const ROL_BADGE_COLOR = {
  ADMIN:       { bg: 'bg-slate-100',   fg: 'text-slate-700',   dot: 'bg-slate-500' },
  GERENCIA:    { bg: 'bg-blue-50',     fg: 'text-blue-800',    dot: 'bg-blue-500' },
  TEAM_LEADER: { bg: 'bg-amber-50',    fg: 'text-amber-800',   dot: 'bg-amber-500' },
  BROKER:      { bg: 'bg-emerald-50',  fg: 'text-emerald-800', dot: 'bg-emerald-500' },
  MARKETING:   { bg: 'bg-purple-50',   fg: 'text-purple-800',  dot: 'bg-purple-500' },
};

const ROLES_OPTIONS = ['ADMIN', 'GERENCIA', 'TEAM_LEADER', 'BROKER', 'MARKETING'];

// ── Mapeo Prisma → frontend ───────────────────────────────────────────────────
function adaptarUsuario(u) {
  const esBroker = u.rol === 'BROKER';
  const sueldoRaw = (!esBroker && u.sueldo != null) ? Number(u.sueldo) : null;
  const sueldo = sueldoRaw != null
    ? new Intl.NumberFormat('es-AR', { style: 'currency', currency: 'ARS', maximumFractionDigits: 0 }).format(sueldoRaw)
    : '—';
  return {
    id:        u.id,
    nombre:    u.nombre,
    apellido:  u.apellido   || '',
    email:     u.email,
    rol:       u.rol,
    rolLabel:  ROL_LABEL[u.rol] ?? u.rol,
    sueldo,
    sueldoRaw,
    activo:    u.activo,
  };
}

// ── RolBadge ──────────────────────────────────────────────────────────────────
function RolBadge({ rol }) {
  const c = ROL_BADGE_COLOR[rol] || { bg: 'bg-slate-100', fg: 'text-slate-700', dot: 'bg-slate-400' };
  return (
    <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[11px] font-medium ${c.bg} ${c.fg}`}>
      <span className={`w-1.5 h-1.5 rounded-full ${c.dot}`} />
      {ROL_LABEL[rol] ?? rol}
    </span>
  );
}

// ── Campo de formulario reutilizable ─────────────────────────────────────────
function Field({ label, required, children }) {
  return (
    <div>
      <label className="block text-[11px] uppercase tracking-[0.12em] text-slate-400 mb-1.5">
        {label}{required && ' *'}
      </label>
      {children}
    </div>
  );
}

const inputCls = 'w-full border border-slate-200 rounded px-3 py-2 text-[13px] text-ink focus:outline-none focus:border-slate-400';

// ── Modal CREAR ───────────────────────────────────────────────────────────────
function ModalCrear({ onClose, onCreated }) {
  const [nombre,   setNombre]   = React.useState('');
  const [apellido, setApellido] = React.useState('');
  const [email,    setEmail]    = React.useState('');
  const [rol,      setRol]      = React.useState('BROKER');
  const [password, setPassword] = React.useState('');
  const [sueldo,   setSueldo]   = React.useState('');
  const [loading,  setLoading]  = React.useState(false);
  const [error,    setError]    = React.useState('');

  const esBroker = rol === 'BROKER';

  function handleRolChange(nuevoRol) {
    setRol(nuevoRol);
    if (nuevoRol === 'BROKER') setSueldo('');
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!nombre.trim())  { setError('El nombre es requerido.'); return; }
    if (!email.trim() || !/\S+@\S+\.\S+/.test(email.trim())) { setError('El email no es válido.'); return; }
    if (!password.trim()) { setError('El password es requerido.'); return; }

    setLoading(true);
    setError('');
    fetch(`${API}/api/usuarios`, {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        nombre:   nombre.trim(),
        apellido: apellido.trim(),
        email:    email.trim(),
        password,
        rol,
        sueldo: esBroker ? null : (sueldo !== '' ? Number(sueldo) : null),
      }),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { setError(data.error); setLoading(false); return; }
        onCreated();
      })
      .catch(() => { setError('Error al crear usuario.'); setLoading(false); });
  }

  return (
    <div className="fixed inset-0 z-30 flex items-center justify-center">
      <div className="absolute inset-0 bg-ink/30 backdrop-blur-[2px]" onClick={onClose} />
      <div className="relative bg-white rounded-lg shadow-pop w-[480px] fade-in">
        <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
          <h2 className="font-serif text-[20px] text-ink">Nuevo usuario</h2>
          <button onClick={onClose} className="p-1.5 rounded hover:bg-slate-100 text-slate-500">
            <I.X size={16} />
          </button>
        </div>
        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
          {error && (
            <div className="px-3 py-2 rounded bg-red-50 border border-red-100 text-red-700 text-[12px]">{error}</div>
          )}
          <div className="grid grid-cols-2 gap-3">
            <Field label="Nombre" required>
              <input className={inputCls} value={nombre} onChange={e => setNombre(e.target.value)} placeholder="Nombre" autoFocus />
            </Field>
            <Field label="Apellido">
              <input className={inputCls} value={apellido} onChange={e => setApellido(e.target.value)} placeholder="Apellido" />
            </Field>
          </div>
          <Field label="Email" required>
            <input type="email" className={inputCls} value={email} onChange={e => setEmail(e.target.value)} placeholder="usuario@ejemplo.com" />
          </Field>
          <Field label="Rol" required>
            <select className={`${inputCls} bg-white`} value={rol} onChange={e => handleRolChange(e.target.value)}>
              {ROLES_OPTIONS.map(r => <option key={r} value={r}>{ROL_LABEL[r]}</option>)}
            </select>
          </Field>
          <Field label="Password inicial" required>
            <input type="password" className={inputCls} value={password} onChange={e => setPassword(e.target.value)} placeholder="Mínimo 6 caracteres" />
          </Field>
          {!esBroker && (
            <Field label="Sueldo base (ARS)">
              <input type="number" min="0" step="1" className={inputCls} value={sueldo} onChange={e => setSueldo(e.target.value)} placeholder="Opcional" />
            </Field>
          )}
          <div className="pt-2 flex items-center justify-end gap-2">
            <Button variant="outline" type="button" onClick={onClose}>Cancelar</Button>
            <Button variant="gold" type="submit" disabled={loading}>
              {loading ? 'Creando...' : 'Crear usuario'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ── Modal EDITAR ──────────────────────────────────────────────────────────────
function ModalEditar({ usuario, onClose, onUpdated }) {
  const [nombre,   setNombre]   = React.useState(usuario.nombre);
  const [apellido, setApellido] = React.useState(usuario.apellido);
  const [email,    setEmail]    = React.useState(usuario.email);
  const [rol,      setRol]      = React.useState(usuario.rol);
  const [sueldo,   setSueldo]   = React.useState(usuario.sueldoRaw != null ? String(usuario.sueldoRaw) : '');
  const [loading,  setLoading]  = React.useState(false);
  const [error,    setError]    = React.useState('');

  const esBroker = rol === 'BROKER';

  function handleRolChange(nuevoRol) {
    setRol(nuevoRol);
    if (nuevoRol === 'BROKER') setSueldo('');
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!nombre.trim()) { setError('El nombre es requerido.'); return; }
    if (!email.trim() || !/\S+@\S+\.\S+/.test(email.trim())) { setError('El email no es válido.'); return; }

    setLoading(true);
    setError('');
    fetch(`${API}/api/usuarios/${usuario.id}`, {
      method: 'PUT',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        nombre:   nombre.trim(),
        apellido: apellido.trim(),
        email:    email.trim(),
        rol,
        sueldo: esBroker ? null : (sueldo !== '' ? Number(sueldo) : null),
      }),
    })
      .then(r => r.json())
      .then(data => {
        if (data.error) { setError(data.error); setLoading(false); return; }
        onUpdated();
      })
      .catch(() => { setError('Error al editar usuario.'); setLoading(false); });
  }

  return (
    <div className="fixed inset-0 z-30 flex items-center justify-center">
      <div className="absolute inset-0 bg-ink/30 backdrop-blur-[2px]" onClick={onClose} />
      <div className="relative bg-white rounded-lg shadow-pop w-[480px] fade-in">
        <div className="px-6 py-5 border-b border-slate-100 flex items-center justify-between">
          <h2 className="font-serif text-[20px] text-ink">Editar usuario</h2>
          <button onClick={onClose} className="p-1.5 rounded hover:bg-slate-100 text-slate-500">
            <I.X size={16} />
          </button>
        </div>
        <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
          {error && (
            <div className="px-3 py-2 rounded bg-red-50 border border-red-100 text-red-700 text-[12px]">{error}</div>
          )}
          <div className="grid grid-cols-2 gap-3">
            <Field label="Nombre" required>
              <input className={inputCls} value={nombre} onChange={e => setNombre(e.target.value)} autoFocus />
            </Field>
            <Field label="Apellido">
              <input className={inputCls} value={apellido} onChange={e => setApellido(e.target.value)} />
            </Field>
          </div>
          <Field label="Email" required>
            <input type="email" className={inputCls} value={email} onChange={e => setEmail(e.target.value)} />
          </Field>
          <Field label="Rol" required>
            <select className={`${inputCls} bg-white`} value={rol} onChange={e => handleRolChange(e.target.value)}>
              {ROLES_OPTIONS.map(r => <option key={r} value={r}>{ROL_LABEL[r]}</option>)}
            </select>
          </Field>
          {!esBroker && (
            <Field label="Sueldo base (ARS)">
              <input type="number" min="0" step="1" className={inputCls} value={sueldo} onChange={e => setSueldo(e.target.value)} placeholder="Sin sueldo fijo" />
            </Field>
          )}
          <div className="pt-2 flex items-center justify-end gap-2">
            <Button variant="outline" type="button" onClick={onClose}>Cancelar</Button>
            <Button variant="gold" type="submit" disabled={loading}>
              {loading ? 'Guardando...' : 'Guardar cambios'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ── Módulo principal ──────────────────────────────────────────────────────────
function Usuarios() {
  if (window.CURRENT_USER?.rawRol !== 'ADMIN') return null;

  const [usuarios,    setUsuarios]    = React.useState([]);
  const [loading,     setLoading]     = React.useState(true);
  const [error,       setError]       = React.useState('');
  const [modalCrear,  setModalCrear]  = React.useState(false);
  const [editando,    setEditando]    = React.useState(null);

  function cargar() {
    setLoading(true);
    fetch(`${API}/api/usuarios?activo=true`, { credentials: 'include' })
      .then(r => r.json())
      .then(data => {
        if (Array.isArray(data)) {
          setUsuarios(data.filter(u => u.activo).map(adaptarUsuario));
        } else {
          setError('Respuesta inesperada del servidor.');
        }
        setLoading(false);
      })
      .catch(err => {
        console.error('[usuarios.cargar]', err);
        setError('Error al cargar usuarios.');
        setLoading(false);
      });
  }

  React.useEffect(() => { cargar(); }, []);

  function handleDesactivar(u) {
    const nombreCompleto = [u.nombre, u.apellido].filter(Boolean).join(' ');
    if (!confirm(`¿Desactivar a ${nombreCompleto}?`)) return;
    fetch(`${API}/api/usuarios/${u.id}`, { method: 'DELETE', credentials: 'include' })
      .then(r => r.json())
      .then(data => {
        if (data.error) { alert(data.error); return; }
        cargar();
      })
      .catch(() => alert('Error al desactivar usuario.'));
  }

  return (
    <div>
      <PageHeader
        crumbs={['Administración', 'Usuarios']}
        title="Usuarios"
        sub="Gestión de accesos al sistema"
        actions={
          <Button variant="gold" onClick={() => setModalCrear(true)}>
            <I.Plus size={14} sw={2} />
            Nuevo usuario
          </Button>
        }
      />

      {loading && (
        <div className="py-14 text-center text-[13px] text-slate-400">Cargando usuarios...</div>
      )}

      {!loading && error && (
        <div className="py-14 text-center text-[13px] text-red-500">{error}</div>
      )}

      {!loading && !error && usuarios.length === 0 && (
        <Empty title="Sin usuarios activos" sub="Creá el primer usuario con el botón de arriba." />
      )}

      {!loading && !error && usuarios.length > 0 && (
        <div className="bg-white rounded-md border border-slate-100 shadow-card overflow-hidden">
          <table className="w-full">
            <thead>
              <tr className="border-b border-slate-100 bg-canvas/50">
                <th className="px-5 py-3 text-left text-[11px] uppercase tracking-[0.12em] text-slate-400 font-medium">Nombre</th>
                <th className="px-5 py-3 text-left text-[11px] uppercase tracking-[0.12em] text-slate-400 font-medium">Email</th>
                <th className="px-5 py-3 text-left text-[11px] uppercase tracking-[0.12em] text-slate-400 font-medium">Rol</th>
                <th className="px-5 py-3 text-left text-[11px] uppercase tracking-[0.12em] text-slate-400 font-medium">Sueldo</th>
                <th className="px-5 py-3" />
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {usuarios.map(u => (
                <tr key={u.id} className="hover:bg-canvas/60 transition-colors">
                  <td className="px-5 py-3.5">
                    <div className="text-[13px] text-ink font-medium">
                      {u.nombre}{u.apellido ? ` ${u.apellido}` : ''}
                    </div>
                  </td>
                  <td className="px-5 py-3.5">
                    <div className="text-[13px] text-slate-500">{u.email}</div>
                  </td>
                  <td className="px-5 py-3.5">
                    <RolBadge rol={u.rol} />
                  </td>
                  <td className="px-5 py-3.5">
                    <div className="text-[13px] text-slate-700 font-mono">{u.sueldo}</div>
                  </td>
                  <td className="px-5 py-3.5">
                    <div className="flex items-center gap-2 justify-end">
                      <Button variant="ghost" size="sm" onClick={() => setEditando(u)}>
                        Editar
                      </Button>
                      <Button variant="danger" size="sm" onClick={() => handleDesactivar(u)}>
                        Desactivar
                      </Button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {modalCrear && (
        <ModalCrear
          onClose={() => setModalCrear(false)}
          onCreated={() => { setModalCrear(false); cargar(); }}
        />
      )}
      {editando && (
        <ModalEditar
          usuario={editando}
          onClose={() => setEditando(null)}
          onUpdated={() => { setEditando(null); cargar(); }}
        />
      )}
    </div>
  );
}

window.Usuarios = Usuarios;