import React, { useState } from 'react';
import { useAuth } from '../contexts/AuthContext';
import { Button } from '../components/Button';
import { Input } from '../components/Input';
import { UserRole } from '../types';

export const Login: React.FC = () => {
  const { login, availableUsers } = useAuth();
  const [email, setEmail] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setError('');
    
    const success = await login(email);
    if (!success) {
      setError('Usuário não encontrado. Tente um dos e-mails de demonstração.');
    }
    setIsLoading(false);
  };

  const fillCredentials = (userEmail: string) => {
    setEmail(userEmail);
  };

  const getRoleLabel = (role: UserRole) => {
      switch(role) {
          case UserRole.SUPERADMIN: return "Superadmin";
          case UserRole.BUSINESS_OWNER: return "Empresa";
          case UserRole.PHOTOGRAPHER: return "Fotógrafo";
          case UserRole.EVENT_OWNER: return "Cliente";
          default: return role;
      }
  }

  return (
    <div className="min-h-screen flex bg-white">
      {/* Left Side - Image */}
      <div className="hidden lg:block lg:w-1/2 relative overflow-hidden">
        <img 
          src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80" 
          alt="Photum Login" 
          className="absolute inset-0 w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-brand-black/40 flex items-center justify-center">
            <div className="text-center text-white p-12">
                <h1 className="text-5xl font-serif font-bold mb-4">Photum Manager</h1>
                <p className="text-xl font-light tracking-wide max-w-md mx-auto">Gestão de eventos premium para quem não abre mão da excelência.</p>
            </div>
        </div>
      </div>

      {/* Right Side - Form */}
      <div className="w-full lg:w-1/2 flex items-center justify-center p-8 lg:p-16">
        <div className="max-w-md w-full space-y-8 fade-in">
          <div className="text-center lg:text-left">
            <span className="text-brand-gold font-bold tracking-widest uppercase text-sm">Bem-vindo de volta</span>
            <h2 className="mt-2 text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
          </div>

          <form className="mt-8 space-y-6" onSubmit={handleLogin}>
            <div className="space-y-4">
              <Input 
                label="E-mail Corporativo ou Pessoal"
                type="email" 
                required 
                placeholder="nome@exemplo.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                error={error}
              />
              <Input 
                label="Senha"
                type="password" 
                placeholder="••••••••"
                readOnly
                className="bg-gray-50 cursor-not-allowed"
              />
            </div>

            <Button type="submit" className="w-full" size="lg" isLoading={isLoading}>
              Entrar no Sistema
            </Button>
          </form>

          {/* Demo Users Quick Select */}
          <div className="mt-10 pt-10 border-t border-gray-100">
            <p className="text-xs text-gray-400 uppercase tracking-widest mb-4 text-center">Usuários de Demonstração (Clique para preencher)</p>
            <div className="grid grid-cols-2 gap-3">
              {availableUsers.map(user => (
                <button
                  key={user.id}
                  onClick={() => fillCredentials(user.email)}
                  className="flex flex-col items-start p-3 border border-gray-200 rounded-sm hover:border-brand-gold hover:bg-gray-50 transition-all text-left group"
                >
                  <span className="text-xs font-bold text-gray-700 group-hover:text-brand-black">{user.name}</span>
                  <span className="text-[10px] uppercase tracking-wide text-brand-gold mt-1">{getRoleLabel(user.role)}</span>
                  <span className="text-[10px] text-gray-400 mt-0.5 truncate w-full">{user.email}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};