/**
 * TaxiBook Partner - Auth Components
 * ===================================
 * LoginScreen
 */

const LoginScreen = ({ onLogin, toast, setToast }) => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [showPassword, setShowPassword] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();
        if (!username || !password) {
            setToast({ message: 'Veuillez remplir tous les champs', type: 'error' });
            return;
        }

        setLoading(true);
        try {
            const result = await window.partnerAPI.login(username, password);
            if (result.success) {
                onLogin(result.data.partner);
            } else {
                setToast({ message: result.error || 'Identifiants incorrects', type: 'error' });
            }
        } catch (error) {
            setToast({ message: 'Erreur de connexion', type: 'error' });
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="min-h-screen gradient-bg flex items-center justify-center p-6">
            <div className="w-full max-w-md">
                {/* Logo */}
                <div className="text-center mb-10 animate-fade-in">
                    <div className="w-20 h-20 gradient-primary rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-primary-500/30">
                        <i className="fas fa-building text-white text-3xl"></i>
                    </div>
                    <h1 className="text-3xl font-bold text-white mb-2">TaxiBook Partner</h1>
                    <p className="text-dark-400">Portail Partenaire Professionnel</p>
                </div>

                {/* Formulaire */}
                <form onSubmit={handleSubmit} className="glass rounded-2xl p-8 shadow-2xl animate-slide-up">
                    <div className="mb-6">
                        <label className="block text-dark-600 text-sm font-semibold mb-2">
                            Identifiant
                        </label>
                        <div className="relative">
                            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-dark-400">
                                <i className="fas fa-user"></i>
                            </span>
                            <input
                                type="text"
                                value={username}
                                onChange={(e) => setUsername(e.target.value)}
                                className="w-full pl-12 pr-4 py-4 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none transition bg-white"
                                placeholder="Votre identifiant"
                            />
                        </div>
                    </div>

                    <div className="mb-8">
                        <label className="block text-dark-600 text-sm font-semibold mb-2">
                            Mot de passe
                        </label>
                        <div className="relative">
                            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-dark-400">
                                <i className="fas fa-lock"></i>
                            </span>
                            <input
                                type={showPassword ? 'text' : 'password'}
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                                className="w-full pl-12 pr-12 py-4 border-2 border-dark-200 rounded-xl focus:border-primary-500 focus:outline-none transition bg-white"
                                placeholder="••••••••"
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-4 top-1/2 -translate-y-1/2 text-dark-400 hover:text-dark-600"
                            >
                                <i className={`fas ${showPassword ? 'fa-eye-slash' : 'fa-eye'}`}></i>
                            </button>
                        </div>
                    </div>

                    <button
                        type="submit"
                        disabled={loading}
                        className="w-full py-4 gradient-primary text-white font-bold rounded-xl hover:opacity-90 transition disabled:opacity-50 flex items-center justify-center gap-3"
                    >
                        {loading ? (
                            <>
                                <Spinner size="sm" />
                                Connexion...
                            </>
                        ) : (
                            <>
                                <i className="fas fa-sign-in-alt"></i>
                                Se connecter
                            </>
                        )}
                    </button>
                </form>

                <p className="text-center text-dark-500 mt-6 text-sm">
                    Contactez votre gestionnaire TaxiBook pour obtenir vos identifiants
                </p>
            </div>
        </div>
    );
};