photum/pages/Login.tsx

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

interface LoginProps {
  onNavigate?: (page: string) => void;
}

export const Login: React.FC<LoginProps> = ({ onNavigate }) => {
  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 flex-col lg:flex-row bg-white">
      {/* Left Side - Image */}
      <div className="hidden lg:flex 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-gradient-to-br from-[#492E61]/90 to-[#492E61]/70 flex items-center justify-center">
            <div className="text-center text-white p-12">
                <h1 className="text-5xl font-serif font-bold mb-4">Photum Formaturas</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-4 sm:p-6 md:p-8 lg:p-16">
        <div className="max-w-md w-full space-y-6 sm:space-y-8 fade-in">
          <div className="text-center lg:text-left">
            <span className="font-bold tracking-widest uppercase text-xs sm:text-sm" style={{color: '#B9CF33'}}>Bem-vindo de volta</span>
            <h2 className="mt-2 text-2xl sm:text-3xl font-serif font-bold text-gray-900">Acesse sua conta</h2>
            <p className="mt-2 text-xs sm:text-sm text-gray-600">
              Não tem uma conta?{' '}
              <button
                type="button"
                onClick={() => onNavigate?.('register')}
                className="font-medium hover:opacity-80 transition-opacity"
                style={{color: '#B9CF33'}}
              >
                Cadastre-se
              </button>
            </p>
          </div>

          <form className="mt-6 sm:mt-8 space-y-4 sm:space-y-6" onSubmit={handleLogin}>
            <div className="space-y-3 sm:space-y-4">
              <div>
                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                  E-MAIL CORPORATIVO OU PESSOAL
                </label>
                <input
                  type="email"
                  required
                  placeholder="nome@exemplo.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:border-transparent transition-all"
                  style={{focusRing: '2px solid #B9CF33'}}
                  onFocus={(e) => e.target.style.borderColor = '#B9CF33'}
                  onBlur={(e) => e.target.style.borderColor = '#d1d5db'}
                />
                {error && <span className="text-xs text-red-500 mt-1 block">{error}</span>}
              </div>
              <div>
                <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-1.5 sm:mb-2">
                  SENHA
                </label>
                <div className="relative">
                  <input
                    type="password"
                    placeholder="••••••••"
                    readOnly
                    className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg bg-gray-50 cursor-not-allowed"
                  />
                  <button type="button" className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className="w-full px-6 sm:px-10 py-3 sm:py-4 text-white font-bold text-base sm:text-lg rounded-lg transition-all duration-300 transform hover:scale-[1.02] hover:shadow-xl active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
              style={{backgroundColor: '#4E345F'}}
            >
              {isLoading ? 'Entrando...' : 'Entrar no Sistema'}
            </button>
          </form>

          {/* Demo Users Quick Select */}
          <div className="mt-6 sm:mt-10 pt-6 sm:pt-10 border-t border-gray-200">
            <p className="text-[10px] sm:text-xs uppercase tracking-widest mb-3 sm:mb-4 text-center text-gray-400">Usuários de Demonstração (Clique para preencher)</p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
              {availableUsers.map(user => (
                <button
                  key={user.id}
                  onClick={() => fillCredentials(user.email)}
                  className="flex flex-col items-start p-3 sm:p-4 border-2 rounded-lg hover:bg-gray-50 transition-all duration-300 text-left group transform hover:scale-[1.02]"
                  style={{borderColor: '#e5e7eb'}}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.borderColor = '#B9CF33';
                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(185, 207, 51, 0.15)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.borderColor = '#e5e7eb';
                    e.currentTarget.style.boxShadow = 'none';
                  }}
                >
                  <span className="text-xs sm:text-sm font-bold text-gray-900">{user.name}</span>
                  <span className="text-[10px] sm:text-xs uppercase tracking-wide mt-0.5 sm:mt-1 font-semibold" style={{color: '#B9CF33'}}>{getRoleLabel(user.role)}</span>
                  <span className="text-[10px] sm:text-xs text-gray-500 mt-0.5 sm:mt-1 truncate w-full">{user.email}</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};