import { useState } from 'react';
import { Navbar } from './components/Navbar';
import { Generator } from './components/Generator';
import { LoginView } from './components/LoginView';
import { HistoryView } from './components/HistoryView';
import { KittyGame } from './components/KittyGame';
import { FlappyCat } from './components/FlappyCat';
import { useAuth } from './hooks/useAuth';

// Eksportujemy typ, aby inne pliki mogły go użyć
export type View = 'home' | 'login' | 'history' | 'jump-game' | 'flappy-game';

function App() {
    const [url, setUrl] = useState('');
    const [view, setView] = useState<View>('home');
    const { isAuthenticated, logout } = useAuth();

    const renderView = () => {
        switch (view) {
            case 'login':
                return <LoginView onBack={() => setView('home')} onSuccess={() => setView('home')} />;
            case 'history':
                return <HistoryView onBack={() => setView('home')} />;
            case 'jump-game':
                return <KittyGame onBack={() => setView('home')} />;
            case 'flappy-game':
                return <FlappyCat onBack={() => setView('home')} />;
            default:
                return <Generator url={url} setUrl={setUrl} onGenerate={() => alert('Meow!')} />;
        }
    };

    return (
        <div className="min-h-screen bg-[#fff5f8] text-slate-700 font-sans">
            <Navbar
                onNavigate={(v: View) => setView(v)}
                isAuthenticated={isAuthenticated}
                onLogout={logout}
            />
            <main>{renderView()}</main>
        </div>
    );
}

export default App;