import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { loginClient } from '../../services/billing_api';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleLogin = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);

    try {
      await loginClient(email, password);
      localStorage.setItem('gise_token', 'secure_token_alphanumerique_factice');
      navigate('/dashboard');
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex justify-center mt-[10vh] px-5">
      <div className="w-full max-w-100 bg-[#242424] p-8 border-t-4 border-cyan-400 shadow-[0_10px_30px_rgba(0,0,0,0.5)]">
        <h2 className="text-white uppercase mb-1 text-2xl text-center font-sans font-bold">
          Connexion au Nexus
        </h2>
        <p className="text-[#888] font-mono text-sm mb-6 text-center">
          [ IDENTIFICATION REQUISE ]
        </p>

        {error && (
          <div className="text-[#ff003c] border border-[#ff003c] bg-[#ff003c]/10 p-3 mb-5 font-mono text-sm">
            [ ALERTE ] : {error}
          </div>
        )}

        <form onSubmit={handleLogin} className="font-mono">
          <label className="block text-[#888] mb-1 text-xs tracking-widest uppercase">Identifiant (E-mail)</label>
          <input 
            type="email" 
            value={email} 
            onChange={(e) => setEmail(e.target.value)} 
            required 
            placeholder="admin@gise.be" 
            className="w-full p-3 mb-5 bg-[#1A1A1A] text-cyan-400 border border-[#333] outline-none focus:border-cyan-400 transition-colors"
          />

          <label className="block text-[#888] mb-1 text-xs tracking-widest uppercase">Clé d'accès sécurisée</label>
          <input 
            type="password" 
            value={password} 
            onChange={(e) => setPassword(e.target.value)} 
            required 
            placeholder="••••••••" 
            className="w-full p-3 mb-5 bg-[#1A1A1A] text-cyan-400 border border-[#333] outline-none focus:border-cyan-400 transition-colors"
          />

          <button 
            type="submit" 
            disabled={loading}
            className="w-full p-3 mt-2 font-bold uppercase tracking-widest transition-colors disabled:bg-[#333] disabled:text-[#888] disabled:cursor-not-allowed bg-cyan-400 hover:bg-cyan-300 text-black shadow-[0_0_15px_rgba(0,229,255,0.2)]"
          >
            {loading ? 'VÉRIFICATION...' : 'OUVRIR LE SAS'}
          </button>
        </form>

        <div className="mt-5 text-center text-sm font-mono text-[#888]">
          Aucun accès réseau ?{' '}
          <Link to="/register" className="text-cyan-400 hover:text-cyan-300 transition-colors no-underline">
            S'enregistrer &gt;
          </Link>
        </div>
      </div>
    </div>
  );
}