import { state } from './state.js';
import { Login } from './login.js';
import { Onboarding } from './onboarding.js';
import { Dashboard } from './dashboard.js';

const App = {
    async init() {
        state.load();
        this.render();
    },

    async transition(to) {
        const container = document.getElementById('view-container');
        const loader = document.getElementById('loader');
        
        await gsap.to(container, { opacity: 0, y: -20, duration: 0.5, ease: "power2.inOut" });
        
        loader.classList.remove('hidden');
        gsap.fromTo(loader, { opacity: 0 }, { opacity: 1, duration: 0.4 });
        
        state.view = to;
        state.save();

        setTimeout(() => {
            this.render();
            gsap.to(loader, { opacity: 0, duration: 0.4, onComplete: () => loader.classList.add('hidden') });
            gsap.fromTo(container, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.8, ease: "power3.out" });
        }, 1000);
    },

    render() {
        if (!state.isLoggedIn) {
            Login.render(() => this.transition('onboarding'));
        } else if (state.view === 'onboarding') {
            Onboarding.render(() => this.transition('dashboard'));
        } else {
            Dashboard.render();
        }
        lucide.createIcons();
    }
};

window.addEventListener('DOMContentLoaded', () => App.init());
export default App;