import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { CondoService } from '../services/mockDb';
import { Building, Lock, Mail, AlertCircle } from 'lucide-react';
import { BrandingConfig } from '../types';

interface LoginProps {
    branding?: BrandingConfig;
}

export const LoginPage: React.FC<LoginProps> = ({ branding }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setLoading(true);

    try {
      await CondoService.login(email, password);
      navigate('/');
    } catch (err) {
      setError('Credenziali non valide o errore di connessione.');
    } finally {
      setLoading(false);
    }
  };

  const appName = branding?.appName || 'CondoPay';
  const logoUrl = branding?.logoUrl;
  const bgUrl = branding?.loginBackgroundUrl;

  return (
    <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4 relative overflow-hidden">
      {/* Dynamic Background */}
      {bgUrl && (
          <div className="absolute inset-0 z-0">
              <img src={bgUrl} alt="Background" className="w-full h-full object-cover opacity-30" />
              <div className="absolute inset-0 bg-blue-900/40 backdrop-blur-sm"></div>
          </div>
      )}

      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-sm sm:max-w-md overflow-hidden relative z-10 transition-all">
        <div className="bg-blue-600 p-8 text-center flex flex-col items-center">
          <div className="inline-flex p-3 bg-white/20 rounded-2xl mb-4 shadow-inner">
            {logoUrl ? (
                <img src={logoUrl} alt="Logo" className="w-14 h-14 object-contain" />
            ) : (
                <Building className="w-10 h-10 text-white" />
            )}
          </div>
          <h1 className="text-3xl font-bold text-white tracking-tight">{appName}</h1>
          <p className="text-blue-100 mt-2 text-sm font-medium">Gestione Condominiale Semplice</p>
        </div>

        <div className="p-8">
          <form onSubmit={handleSubmit} className="space-y-6">
            {error && (
              <div className="bg-red-50 text-red-600 p-4 rounded-xl text-sm flex items-center gap-3 border border-red-100">
                <AlertCircle className="w-5 h-5 flex-shrink-0" />
                {error}
              </div>
            )}

            <div>
              <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Email</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <Mail className="h-5 w-5 text-slate-400" />
                </div>
                <input
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="block w-full pl-11 pr-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all text-slate-700 font-medium"
                  placeholder="admin@condominio.it"
                />
              </div>
            </div>

            <div>
              <label className="block text-xs font-bold text-slate-500 uppercase mb-2">Password</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <Lock className="h-5 w-5 text-slate-400" />
                </div>
                <input
                  type="password"
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="block w-full pl-11 pr-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all text-slate-700 font-medium"
                  placeholder="••••••••"
                />
              </div>
            </div>

            <button
              type="submit"
              disabled={loading}
              className="w-full flex justify-center py-3.5 px-4 border border-transparent rounded-xl shadow-lg shadow-blue-200 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-70 transition-all hover:scale-[1.02] active:scale-[0.98]"
            >
              {loading ? 'Accesso in corso...' : 'Accedi'}
            </button>
          </form>

          <div className="mt-8 text-center text-xs text-slate-400 font-medium">
            &copy; {new Date().getFullYear()} {appName} Manager
          </div>
        </div>
      </div>
    </div>
  );
};