import React, { useState } from 'react';
import { useAuth } from '../context/AuthContext';
import { toast } from 'sonner';
import { Siren } from 'lucide-react';

export default function LoginPage() {
  const { login } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      await login(email, password);
    } catch (err) {
      toast.error(err.message || 'Credenciales inválidas');
    }
    setLoading(false);
  };

  return (
    <div className="min-h-screen bg-zinc-950 flex items-center justify-center p-4">
      <div className="w-full max-w-sm space-y-8">
        <div className="text-center">
          <div className="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-red-500/10 mb-4">
            <Siren className="h-10 w-10 text-red-500" />
          </div>
          <h1 className="text-3xl font-black text-white tracking-tight">4Alarm</h1>
          <p className="text-zinc-400 text-sm mt-1">Sistema de Alarmas Comunitarias</p>
        </div>
        <form onSubmit={handleSubmit} className="space-y-4">
          <input
            type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)}
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
            required data-testid="login-email"
          />
          <input
            type="password" placeholder="Contraseña" value={password} onChange={e => setPassword(e.target.value)}
            className="w-full h-12 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder:text-zinc-500 focus:ring-2 focus:ring-red-500 focus:border-transparent outline-none"
            required data-testid="login-password"
          />
          <button
            type="submit" disabled={loading}
            className="w-full h-12 rounded-xl bg-red-500 hover:bg-red-600 text-white font-bold text-lg transition-all disabled:opacity-50"
            data-testid="login-submit"
          >
            {loading ? 'Ingresando...' : 'Ingresar'}
          </button>
        </form>
      </div>
    </div>
  );
}