import React, { useState } from 'react';
import { Eye, EyeOff, User, Lock, AlertCircle } from 'lucide-react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';

// Credenciais estáticas
const STATIC_CREDENTIALS = {
  login: 'IasisAdmin',
  password: 'Ias!s25'
};

const Login = ({ onLogin }) => {
  // Estados do formulário
  const [formData, setFormData] = useState({
    login: '',
    password: ''
  });
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  // Função para lidar com mudanças nos inputs
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
    // Limpa o erro quando o usuário digita
    if (error) {
      setError('');
    }
  };

  // Função de validação das credenciais
  const validateCredentials = (login, password) => {
    return login === STATIC_CREDENTIALS.login && password === STATIC_CREDENTIALS.password;
  };

  // Função para lidar com o submit do formulário
  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');

    // Simula delay de autenticação
    await new Promise(resolve => setTimeout(resolve, 1000));

    const { login, password } = formData;

    // Validação básica
    if (!login || !password) {
      setError('Por favor, preencha todos os campos');
      setIsLoading(false);
      return;
    }

    // Validação das credenciais
    if (!validateCredentials(login, password)) {
      setError('Login ou senha incorretos');
      setIsLoading(false);
      return;
    }

    // Se chegou até aqui, o login foi bem-sucedido
    localStorage.setItem('iasis_authenticated', 'true');
    localStorage.setItem('iasis_user', login);
    onLogin(true);
    setIsLoading(false);
  };

  // Função para alternar visibilidade da senha
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        {/* Logo e título */}
        <div className="text-center">
          <div className="flex justify-center mb-6">
            <div className="w-16 h-16 bg-primary rounded-xl flex items-center justify-center">
              <span className="text-white font-bold text-3xl">I</span>
            </div>
          </div>
          <h2 className="text-3xl font-bold gradient-text mb-2">
            Acesso ao Sistema
          </h2>
          <p className="text-gray-600">
            Entre com suas credenciais para acessar a plataforma IAsis
          </p>
        </div>

        {/* Formulário de login */}
        <Card className="shadow-lg">
          <CardHeader>
            <CardTitle className="text-center">Login</CardTitle>
            <CardDescription className="text-center">
              Faça login para continuar
            </CardDescription>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              {/* Campo de login */}
              <div>
                <label htmlFor="login" className="block text-sm font-medium text-gray-700 mb-2">
                  Usuário
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <User className="h-5 w-5 text-gray-400" />
                  </div>
                  <Input
                    id="login"
                    name="login"
                    type="text"
                    required
                    value={formData.login}
                    onChange={handleInputChange}
                    className="pl-10"
                    placeholder="Digite seu usuário"
                    disabled={isLoading}
                  />
                </div>
              </div>

              {/* Campo de senha */}
              <div>
                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
                  Senha
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Lock className="h-5 w-5 text-gray-400" />
                  </div>
                  <Input
                    id="password"
                    name="password"
                    type={showPassword ? 'text' : 'password'}
                    required
                    value={formData.password}
                    onChange={handleInputChange}
                    className="pl-10 pr-10"
                    placeholder="Digite sua senha"
                    disabled={isLoading}
                  />
                  <button
                    type="button"
                    onClick={togglePasswordVisibility}
                    className="absolute inset-y-0 right-0 pr-3 flex items-center"
                    disabled={isLoading}
                  >
                    {showPassword ? (
                      <EyeOff className="h-5 w-5 text-gray-400 hover:text-gray-600" />
                    ) : (
                      <Eye className="h-5 w-5 text-gray-400 hover:text-gray-600" />
                    )}
                  </button>
                </div>
              </div>

              {/* Mensagem de erro */}
              {error && (
                <div className="flex items-center space-x-2 text-red-600 text-sm">
                  <AlertCircle className="h-4 w-4" />
                  <span>{error}</span>
                </div>
              )}

              {/* Botão de login */}
              <Button
                type="submit"
                className="w-full"
                disabled={isLoading}
              >
                {isLoading ? 'Entrando...' : 'Entrar'}
              </Button>
            </form>
          </CardContent>
        </Card>

        {/* Informações de desenvolvimento */}
        <div className="text-center text-sm text-gray-500">
          <p>Sistema de acesso seguro IAsis</p>
          <p className="mt-1">© 2025 IAsis. Todos os direitos reservados.</p>
        </div>
      </div>
    </div>
  );
};

export default Login; 