import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Users, ArrowLeft, HeartHandshake, Mail, Lock, ShieldCheck } 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';
import { useDocumentMetadata } from '@/hooks/useDocumentMetadata';

export const HRLogin = () => {
  useDocumentMetadata('Login | Integra RH', 'rh');
  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, 'hr');
    if (success) {
      navigate('/plataforma/hr/dashboard');
    }
  };

  return (
    <div className="min-h-screen grid lg:grid-cols-2 bg-background">
      <div className="flex items-center justify-center p-8 bg-card order-2 lg:order-1">
        <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">Portal RH</h2>
            <p className="text-muted-foreground">Acesse sua conta Integra Finance HR.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4">
            <div className="space-y-2">
              <label className="text-sm font-medium">CPF ou 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="admin@pralog.com" 
                  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-emerald-600 hover:bg-emerald-700 h-12 text-lg font-bold" 
              type="submit"
              disabled={loading}
            >
              {loading ? 'Entrando...' : 'Entrar no Portal'}
            </Button>
          </form>

          <div className="p-4 bg-emerald-50 rounded-xl border border-emerald-100 flex items-center gap-3 text-xs text-emerald-800 font-medium">
             <ShieldCheck size={16} /> Autenticação protegida por padrões PRALOG.
          </div>
        </motion.div>
      </div>

      <div className="hidden lg:flex bg-emerald-600 items-center justify-center p-12 text-white relative overflow-hidden order-1 lg:order-2">
        <div className="relative z-10 space-y-6">
          <HeartHandshake size={80} className="mb-8" />
          <h1 className="text-5xl font-bold leading-tight">Gestão Humana de Alta Performance.</h1>
          <p className="text-emerald-100 text-xl max-w-md">
            Integramos pessoas e processos para o crescimento acelerado da sua carreira.
          </p>
        </div>
        <div className="absolute top-0 left-0 -translate-y-1/2 -translate-x-1/2 w-96 h-96 bg-emerald-500 rounded-full blur-3xl opacity-50" />
      </div>
    </div>
  );
};
