import React, { useState } from 'react';
import { Agent, ClientUser, AppSettings } from '../types';
import { Lock, User, Mail, Briefcase, ArrowRight, AlertCircle } from 'lucide-react';

interface AuthScreenProps {
  settings: AppSettings;
  onClientLogin: (email: string, password: string) => boolean;
  onAgentLogin: (email: string, password: string) => boolean;
  onClientRegister: (name: string, email: string, password: string, company: string) => void;
}

export const AuthScreen: React.FC<AuthScreenProps> = ({ settings, onClientLogin, onAgentLogin, onClientRegister }) => {
  const [activeTab, setActiveTab] = useState<'client' | 'agent'>('client');
  const [isRegistering, setIsRegistering] = useState(false);
  const [error, setError] = useState<string | null>(null);
  
  // Form States
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [company, setCompany] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError(null);
    let success = false;

    if (activeTab === 'agent') {
      success = onAgentLogin(email, password);
    } else {
      if (isRegistering) {
        onClientRegister(name, email, password, company);
        success = true; // Assume success for mock registration
      } else {
        success = onClientLogin(email, password);
      }
    }

    if (!success) {
      setError("Credenziali non valide. Per favore controlla email e password.");
    }
  };

  const handleTabChange = (tab: 'client' | 'agent') => {
    setActiveTab(tab);
    setIsRegistering(false);
    setError(null);
    setEmail('');
    setPassword('');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center items-center p-4">
      <div className="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
        <div className="bg-white p-8 pb-0 text-center">
          <div 
            className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold text-2xl"
            style={{ backgroundColor: settings.branding.primaryColor }}
          >
            {settings.branding.appName.substring(0, 2)}
          </div>
          <h2 className="text-2xl font-bold text-gray-900">{settings.branding.appName}</h2>
          <p className="text-gray-500 mt-2 text-sm">Piattaforma di Supporto & Assistenza</p>
        </div>

        <div className="flex border-b border-gray-200 mt-8">
          <button 
            onClick={() => handleTabChange('client')}
            className={`flex-1 py-4 text-sm font-medium transition ${activeTab === 'client' ? 'border-b-2 text-gray-900' : 'text-gray-400 hover:text-gray-600'}`}
            style={activeTab === 'client' ? { borderColor: settings.branding.primaryColor } : {}}
          >
            Cliente
          </button>
          <button 
            onClick={() => handleTabChange('agent')}
            className={`flex-1 py-4 text-sm font-medium transition ${activeTab === 'agent' ? 'border-b-2 text-gray-900' : 'text-gray-400 hover:text-gray-600'}`}
            style={activeTab === 'agent' ? { borderColor: settings.branding.primaryColor } : {}}
          >
            Agente / Staff
          </button>
        </div>

        <div className="p-8">
          <h3 className="text-lg font-bold text-gray-800 mb-6">
            {activeTab === 'agent' ? 'Accesso Area Riservata' : (isRegistering ? 'Crea un nuovo account' : 'Accedi al tuo account')}
          </h3>

          {error && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center text-red-700 text-sm animate-pulse">
              <AlertCircle className="w-5 h-5 mr-2 flex-shrink-0" />
              {error}
            </div>
          )}
          
          <form onSubmit={handleSubmit} className="space-y-4">
            {isRegistering && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Nome Completo</label>
                <div className="relative">
                  <User className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
                  <input 
                    type="text" 
                    required 
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
                    placeholder="Mario Rossi"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                  />
                </div>
              </div>
            )}

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
              <div className="relative">
                <Mail className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
                <input 
                  type="email" 
                  required 
                  className={`w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 bg-white text-gray-900 ${error ? 'border-red-300 focus:ring-red-200' : 'border-gray-300 focus:ring-blue-500'}`}
                  placeholder="nome@esempio.com"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); setError(null); }}
                />
              </div>
            </div>

            {isRegistering && (
               <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Azienda (Opzionale)</label>
                <div className="relative">
                  <Briefcase className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
                  <input 
                    type="text" 
                    className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
                    placeholder="La tua azienda"
                    value={company}
                    onChange={(e) => setCompany(e.target.value)}
                  />
                </div>
              </div>
            )}

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
              <div className="relative">
                <Lock className="absolute left-3 top-2.5 text-gray-400 w-5 h-5" />
                <input 
                  type="password" 
                  required 
                  className={`w-full pl-10 pr-4 py-2 border rounded-lg focus:ring-2 bg-white text-gray-900 ${error ? 'border-red-300 focus:ring-red-200' : 'border-gray-300 focus:ring-blue-500'}`}
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => { setPassword(e.target.value); setError(null); }}
                />
              </div>
            </div>

            <button 
              type="submit"
              className="w-full py-3 rounded-lg text-white font-bold shadow-md hover:opacity-90 transition flex justify-center items-center mt-6"
              style={{ backgroundColor: settings.branding.primaryColor }}
            >
              {activeTab === 'agent' ? 'Entra in Dashboard' : (isRegistering ? 'Registrati' : 'Accedi')}
              <ArrowRight className="ml-2 w-4 h-4" />
            </button>
          </form>

          {activeTab === 'client' && (
            <div className="mt-6 text-center">
              <p className="text-sm text-gray-600">
                {isRegistering ? 'Hai già un account?' : 'Non hai un account?'}
                <button 
                  type="button"
                  onClick={() => { setIsRegistering(!isRegistering); setError(null); }}
                  className="font-bold ml-1 hover:underline"
                  style={{ color: settings.branding.primaryColor }}
                >
                  {isRegistering ? 'Accedi' : 'Registrati ora'}
                </button>
              </p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};