
import React, { useState } from 'react';
import { Language, translations } from '../i18n';
import { Screen, UserProfile, RoleType } from '../types';

interface LoginProps {
  onLogin: (user: UserProfile) => void;
  language: Language;
  setLanguage: (lang: Language) => void;
  navigateTo: (screen: Screen) => void;
  allUsers: UserProfile[];
  companyName: string;
  logoUrl?: string;
}

const Login: React.FC<LoginProps> = ({ onLogin, language, setLanguage, navigateTo, allUsers, companyName, logoUrl }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  
  const t = translations[language].login;

  const handleLoginClick = () => {
    if (!email.trim() || !password.trim()) {
      setError(language === 'nl' ? 'Vul alstublieft alle velden in.' : 'Please fill in all fields.');
      return;
    }
    
    // Find user in global registry
    const registeredUser = allUsers.find(u => u.email === email.trim());
    
    if (!registeredUser) {
      setError(language === 'nl' ? 'Gebruiker niet gevonden.' : 'User not found.');
      return;
    }

    // Verify password
    if (registeredUser.password && registeredUser.password !== password) {
      setError(t.invalidCredentials);
      return;
    }

    if (registeredUser.status === 'pending') {
      setError(t.inactiveAccount);
      return;
    }
    
    setError('');
    onLogin(registeredUser);
  };
  
  return (
    <div className="min-h-screen flex flex-col items-center justify-center p-6 relative overflow-hidden bg-background-light dark:bg-background-dark">
      <div className="fixed top-0 left-0 w-full h-1/3 ios-bg-gradient -z-10 opacity-60"></div>
      <div className="fixed -bottom-24 -left-24 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10"></div>
      <div className="fixed top-1/4 -right-16 w-48 h-48 bg-primary/5 rounded-full blur-2xl -z-10"></div>

      <div className="fixed top-0 right-0 p-6 safe-area-pt flex items-center space-x-2 text-sm font-medium z-50">
        <button onClick={() => setLanguage('nl')} className={`${language === 'nl' ? 'text-primary font-bold' : 'text-primary/60 hover:text-primary'}`}>NL</button>
        <span className="text-primary/30">|</span>
        <button onClick={() => setLanguage('en')} className={`${language === 'en' ? 'text-primary font-bold' : 'text-primary/60 hover:text-primary'}`}>EN</button>
      </div>

      <div className="w-full max-w-sm flex flex-col items-center z-10">
        <div className="mb-10 text-center">
          <div className="w-20 h-20 bg-white dark:bg-slate-800 rounded-full flex items-center justify-center mb-4 mx-auto border-2 border-primary/20 shadow-sm overflow-hidden p-2">
            {logoUrl ? (
              <img src={logoUrl} alt={companyName} className="w-full h-full object-contain" />
            ) : (
              <span className="material-icons text-primary text-4xl">health_and_safety</span>
            )}
          </div>
          <h1 className="text-2xl font-bold text-primary dark:text-primary tracking-tight">{companyName}</h1>
          <p className="text-primary/70 dark:text-primary/60 text-sm mt-1">{t.subtitle}</p>
        </div>

        {error && (
          <div className="w-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-6 flex items-center gap-2 animate-in fade-in slide-in-from-top-2">
            <span className="material-icons text-sm">error_outline</span>
            {error}
          </div>
        )}

        <div className="w-full space-y-4">
          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.email}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">mail_outline</span>
              <input value={email} onChange={(e) => setEmail(e.target.value)} className="w-full pl-10 pr-4 py-3 bg-surface-light dark:bg-surface-dark border border-slate-200 dark:border-slate-800 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="name@example.com" type="email" />
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-xs font-semibold uppercase tracking-wider text-primary/80 dark:text-primary/60 px-1">{t.password}</label>
            <div className="relative">
              <span className="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-primary/40 text-lg">lock_outline</span>
              <input value={password} onChange={(e) => setPassword(e.target.value)} className="w-full pl-10 pr-12 py-3 bg-surface-light dark:bg-surface-dark border border-slate-200 dark:border-slate-800 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all text-gray-800 dark:text-white" placeholder="••••••••" type={showPassword ? "text" : "password"} />
              <button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-primary/40 hover:text-primary transition-colors"><span className="material-icons text-lg">{showPassword ? "visibility_off" : "visibility"}</span></button>
            </div>
          </div>

          <button onClick={handleLoginClick} className="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3.5 rounded-lg shadow-lg shadow-primary/20 active:scale-[0.98] transition-all flex items-center justify-center space-x-2 mt-4">
            <span>{t.submit}</span>
            <span className="material-icons text-lg">login</span>
          </button>
        </div>

        <div className="mt-8 text-center">
          <p className="text-sm text-primary/80 dark:text-primary/70">
            {t.noAccount} <button onClick={() => navigateTo('signup')} className="font-bold text-primary hover:underline">{t.signupLink}</button>
          </p>
        </div>
      </div>
    </div>
  );
};

export default Login;
