import { useState, type FormEvent } from 'react'; // Używamy type FormEvent
import { Cat, ArrowLeft, Loader2, AlertCircle } from 'lucide-react';
import { useAuth } from '../hooks/useAuth';

interface LoginViewProps {
    onBack: () => void;
    onSuccess: () => void;
}

export const LoginView = ({ onBack, onSuccess }: LoginViewProps) => {
    const [isSignUp, setIsSignUp] = useState(false);
    const [name, setName] = useState('');
    const [password, setPassword] = useState('');

    const { signIn, signUp, loading, error, isAuthenticated } = useAuth();

    const handleSubmit = async (e: FormEvent) => { // Zmieniono na FormEvent
        e.preventDefault();
        const result = isSignUp
            ? await signUp(name, password)
            : await signIn(name, password);

        if (result) {
            onSuccess();
        }
    };

    return (
        <div className="flex flex-col items-center justify-center min-h-[80vh] px-4">
            <div className="bg-white p-10 rounded-[3rem] shadow-2xl border-4 border-pink-100 w-full max-w-md relative">
                <div className="absolute -top-10 left-1/2 -translate-x-1/2 bg-pink-400 p-4 rounded-full shadow-lg text-white">
                    <Cat size={40} />
                </div>

                <h2 className="text-3xl font-black text-pink-500 text-center mb-8 mt-4">
                    {isSignUp ? 'Create Kitty Account' : 'Kitty Login'}
                </h2>

                {error && (
                    <div className="mb-6 p-4 bg-red-50 border-2 border-red-100 rounded-2xl text-red-500 text-sm font-bold flex items-center gap-2">
                        <AlertCircle size={18} /> {error}
                    </div>
                )}

                {isAuthenticated && (
                    <div className="mb-6 p-4 bg-green-50 border-2 border-green-100 rounded-2xl text-green-600 text-sm font-bold text-center">
                        Success! Meow! 🐾
                    </div>
                )}

                <form onSubmit={handleSubmit} className="space-y-4">
                    <input
                        type="text"
                        placeholder="Username or Email"
                        className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        required
                    />
                    <input
                        type="password"
                        placeholder="Secret Password"
                        className="w-full p-4 bg-pink-50 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-300 transition-all"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        required
                    />

                    <button
                        type="submit"
                        disabled={loading}
                        className="w-full bg-pink-500 hover:bg-pink-600 disabled:bg-pink-300 text-white py-4 rounded-2xl font-bold shadow-lg transition-all active:scale-95 flex items-center justify-center gap-2"
                    >
                        {loading ? <Loader2 className="animate-spin" /> : (isSignUp ? 'Register Now' : 'Meow In!')}
                    </button>
                </form>

                <div className="mt-6 text-center">
                    <button
                        onClick={() => setIsSignUp(!isSignUp)}
                        className="text-pink-400 text-sm font-bold hover:underline"
                    >
                        {isSignUp ? 'Already have an account? Log in' : 'New here? Create an account'}
                    </button>
                </div>

                <button onClick={onBack} className="w-full mt-4 text-pink-200 text-xs font-bold flex items-center justify-center gap-2">
                    <ArrowLeft size={14} /> Back to home
                </button>
            </div>
        </div>
    );
};