import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import { useAuth } from '../composables/useAuth.js'

const Pricing = () => import('../views/Pricing.vue')
const DashboardLayout = () => import('../views/dashboard/DashboardLayout.vue')
const Overview = () => import('../views/dashboard/Overview.vue')
const SavedStations = () => import('../views/dashboard/SavedStations.vue')
const Preferences = () => import('../views/dashboard/Preferences.vue')
const SettingsLayout = () => import('../views/dashboard/settings/SettingsLayout.vue')
const Profile = () => import('../views/dashboard/settings/Profile.vue')
const Security = () => import('../views/dashboard/settings/Security.vue')
const Appearance = () => import('../views/dashboard/settings/Appearance.vue')

const routes = [
    { path: '/', component: Home, name: 'home' },
    { path: '/pricing', component: Pricing, name: 'pricing' },
    {
        path: '/logout',
        name: 'logout',
        component: { render: () => null },
        beforeEnter: () => {
            window.location.href = '/logout'
            return false
        },
    },
    {
        path: '/dashboard',
        component: DashboardLayout,
        meta: { requiresAuth: true },
        children: [
            { path: '', component: Overview, name: 'dashboard' },
            { path: 'saved-stations', component: SavedStations, name: 'dashboard.saved-stations' },
            { path: 'preferences', component: Preferences, name: 'dashboard.preferences' },
            {
                path: 'settings',
                component: SettingsLayout,
                redirect: '/dashboard/settings/profile',
                children: [
                    { path: 'profile', component: Profile, name: 'dashboard.settings.profile' },
                    { path: 'security', component: Security, name: 'dashboard.settings.security' },
                    { path: 'appearance', component: Appearance, name: 'dashboard.settings.appearance' },
                ],
            },
        ],
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

router.beforeEach(async (to) => {
    if (to.meta.requiresAuth) {
        const { isAuthenticated, fetchUser } = useAuth()
        await fetchUser()
        if (!isAuthenticated.value) {
            window.location.href = '/login'
            return false
        }
    }
})

export default router
