import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Truck, ArrowLeft, ShieldCheck, Mail, Lock } from 'lucide-react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useAuthContext } from '@/components/shared/AuthProvider';

export const FleetLogin = () => {
  const navigate = useNavigate();
  const { login, loading, error } = useAuthContext();
  const [formData, setFormData] = useState({ email: '', password: '' });

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(formData, 'fleet');
    if (success) {
      navigate('/plataforma/fleet/dashboard');
    }
  };

  return (
    <div className="min-h-screen grid lg:grid-cols-2 bg-background">
      <div className="hidden lg:flex bg-blue-600 items-center justify-center p-12 text-white relative overflow-hidden">
        <div className="relative z-10 space-y-6">
          <Truck size={80} className="mb-8" />
          <h1 className="text-5xl font-bold leading-tight">Mova sua frota com inteligência.</h1>
          <p className="text-blue-100 text-xl max-w-md">
            O padrão PRALOG para otimização logística e controle financeiro integrado.
          </p>
        </div>
        <div className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 w-96 h-96 bg-blue-500 rounded-full blur-3xl opacity-50" />
      </div>

      <div className="flex items-center justify-center p-8 bg-card">
        <motion.div 
          initial={{ opacity: 0, x: 20 }}
          animate={{ opacity: 1, x: 0 }}
          className="w-full max-w-md space-y-8"
        >
          <Button 
            variant="ghost" 
            onClick={() => navigate('/plataforma/')}
            className="gap-2 text-muted-foreground -ml-4"
          >
            <ArrowLeft size={16} /> Voltar ao Portal
          </Button>

          <div className="space-y-2">
            <h2 className="text-3xl font-bold text-foreground">Login Frota</h2>
            <p className="text-muted-foreground">Insira suas credenciais corporativas PRALOG.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">Email corporativo</label>
              <div className="relative">
                <Mail className="absolute left-3 top-3 text-muted-foreground" size={18} />
                <Input 
                  className="pl-10 h-12" 
                  placeholder="usuario@pralog.com.br" 
                  type="email" 
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  required 
                />
              </div>
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium">Senha</label>
              <div className="relative">
                <Lock className="absolute left-3 top-3 text-muted-foreground" size={18} />
                <Input 
                  className="pl-10 h-12" 
                  placeholder="••••••••" 
                  type="password"
                  value={formData.password}
                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                  required 
                />
              </div>
            </div>

            {error && (
              <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive text-xs font-semibold">
                {error}
              </div>
            )}

            <Button 
              className="w-full bg-blue-600 hover:bg-blue-700 h-12 text-lg font-bold" 
              type="submit"
              disabled={loading}
            >
              {loading ? 'Autenticando...' : 'Acessar Painel'}
            </Button>
          </form>

          <div className="pt-6 border-t flex items-center justify-center gap-2 text-xs text-muted-foreground">
            <ShieldCheck size={14} /> Sistema Criptografado Integra Finance
          </div>
        </motion.div>
      </div>
    </div>
  );
};
