// ─────────────────────────────────────────────────────
// AUTH — Login screen + useAuth hook. POST /api/auth/login.
// ─────────────────────────────────────────────────────

function useAuth() {
  const [user, setUser] = React.useState(() => API.getUser());
  React.useEffect(() => {
    const onChange = () => setUser(API.getUser());
    window.addEventListener('erp:auth-changed', onChange);
    window.addEventListener('storage', (e) => {
      if (e.key === 'crm_user' || e.key === 'crm_token') onChange();
    });
    return () => window.removeEventListener('erp:auth-changed', onChange);
  }, []);
  const logout = () => API.clearSession();
  return { user, logout };
}

const Login = ({ onLogin }) => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setBusy(true);
    try {
      const data = await API.post('/api/auth/login', { username: username.trim(), password });
      const u = {
        username: data.username,
        rol: data.rol,
        permisos: data.permisos || ['leads'],
        permisosEfectivos: data.permisosEfectivos || null,
      };
      API.setSession(data.token, u);
      onLogin && onLogin(u);
    } catch (e) {
      setErr(e.data?.error || e.message === 'Failed to fetch' ? 'Error de conexión' : (e.message || 'Error al iniciar sesión'));
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-shell">
      <form className="login-card" onSubmit={submit}>
        <div className="login-brand">
          <img src="/kurtenglass-logo.webp" alt="Kurtenglass" className="login-logo"/>
          <h1>ERPkurten</h1>
        </div>
        <label>
          <span>Usuario</span>
          <input type="text" autoFocus autoComplete="username" value={username} onChange={e=>setUsername(e.target.value)} required/>
        </label>
        <label>
          <span>Contraseña</span>
          <input type="password" autoComplete="current-password" value={password} onChange={e=>setPassword(e.target.value)} required/>
        </label>
        {err && <div className="login-error">{err}</div>}
        <button type="submit" className="btn btn-primary" disabled={busy}>{busy ? 'Entrando…' : 'Entrar'}</button>
      </form>
    </div>
  );
};

const ChangePasswordModal = ({ onClose }) => {
  const [cur, setCur] = React.useState('');
  const [nw, setNw]   = React.useState('');
  const [cf, setCf]   = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (nw !== cf) { setErr('Las contraseñas nuevas no coinciden'); return; }
    setBusy(true); setErr('');
    try {
      await API.put('/api/auth/password', { currentPassword: cur, newPassword: nw });
      onClose(true);
    } catch (e) {
      setErr(e.data?.error || 'Error al cambiar la contraseña');
    } finally { setBusy(false); }
  };

  return (
    <div className="modal-backdrop" onClick={(e)=>{ if(e.target===e.currentTarget) onClose(false); }}>
      <form className="modal-card" onSubmit={submit}>
        <header><h2>Cambiar contraseña</h2><button type="button" className="x" onClick={()=>onClose(false)}>×</button></header>
        <label><span>Contraseña actual</span><input type="password" value={cur} onChange={e=>setCur(e.target.value)} required/></label>
        <label><span>Nueva contraseña</span><input type="password" value={nw} onChange={e=>setNw(e.target.value)} required minLength={6}/></label>
        <label><span>Confirmar nueva</span><input type="password" value={cf} onChange={e=>setCf(e.target.value)} required/></label>
        {err && <div className="login-error">{err}</div>}
        <footer>
          <button type="button" className="btn" onClick={()=>onClose(false)}>Cancelar</button>
          <button type="submit" className="btn btn-primary" disabled={busy}>{busy?'Guardando…':'Guardar'}</button>
        </footer>
      </form>
    </div>
  );
};

window.useAuth = useAuth;
window.Login = Login;
window.ChangePasswordModal = ChangePasswordModal;