import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router';
import { useAuthStore } from '@/stores/auth';

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        name: 'landing',
        component: () => import('@/pages/public/LandingPage.vue'),
    },
    {
        path: '/login',
        name: 'login',
        component: () => import('@/pages/auth/LoginPage.vue'),
        meta: { guest: true },
    },
    {
        path: '/app',
        component: () => import('@/components/layout/AppLayout.vue'),
        meta: { requiresAuth: true },
        children: [
            {
                path: 'dashboard',
                name: 'dashboard',
                component: () => import('@/pages/dashboard/DashboardPage.vue'),
                meta: { permission: 'view-dashboard', title: 'Dashboard' },
            },
            {
                path: 'executive-dashboard',
                name: 'executive-dashboard',
                component: () => import('@/pages/dashboard/ExecutiveDashboardPage.vue'),
                meta: { permission: 'view-report', title: 'Dashboard AI' },
            },
            // Master Data
            {
                path: 'satkers',
                name: 'satkers',
                component: () => import('@/pages/master/SatkerPage.vue'),
                meta: { permission: 'view-satker', title: 'Satuan Kerja' },
            },
            {
                path: 'employees',
                name: 'employees',
                component: () => import('@/pages/master/EmployeePage.vue'),
                meta: { permission: 'view-employee', title: 'Pegawai' },
            },
            {
                path: 'hierarchies',
                name: 'hierarchies',
                component: () => import('@/pages/master/HierarchyPage.vue'),
                meta: { permission: 'edit-employee', title: 'Pengaturan Hirarki' },
            },
            {
                path: 'periods',
                name: 'periods',
                component: () => import('@/pages/master/PeriodPage.vue'),
                meta: { permission: 'view-period', title: 'Periode' },
            },
            {
                path: 'questions',
                name: 'questions',
                component: () => import('@/pages/master/QuestionPage.vue'),
                meta: { permission: 'view-question', title: 'Instrumen Penilaian' },
            },
            // Assessment
            {
                path: 'assessments',
                name: 'assessments',
                component: () => import('@/pages/assessment/AssessmentListPage.vue'),
                meta: { permission: 'view-assessment', title: 'Penilaian' },
            },
            {
                path: 'assessments/:id',
                name: 'assessment-form',
                component: () => import('@/pages/assessment/AssessmentFormPage.vue'),
                meta: { permission: 'view-assessment', title: 'Form Penilaian' },
            },
            {
                path: 'integrity-pacts',
                name: 'integrity-pacts',
                component: () => import('@/pages/assessment/IntegrityPactPage.vue'),
                meta: { permission: 'view-integrity-pact', title: 'Pakta Penguatan Integritas' },
            },
            // Reports
            {
                path: 'reports',
                name: 'reports',
                component: () => import('@/pages/report/ReportPage.vue'),
                meta: { permission: 'view-report', title: 'Laporan' },
            },
            // Audit
            {
                path: 'audit-logs',
                name: 'audit-logs',
                component: () => import('@/pages/audit/AuditLogPage.vue'),
                meta: { permission: 'view-audit', title: 'Audit Trail' },
            },
            // User Management
            {
                path: 'users',
                name: 'users',
                component: () => import('@/pages/admin/UserPage.vue'),
                meta: { permission: 'manage-users', title: 'Manajemen Pengguna' },
            },
            {
                path: 'roles',
                name: 'roles',
                component: () => import('@/pages/system/RolePage.vue'),
                meta: { permission: 'manage-users', title: 'Peran & Akses' }, // Just piggyback on manage-users permission for now since only super_admin_pt is allowed via middleware on API, but frontend can just use manage-users or a specific role. Wait, I should use `role: 'super_admin_pt'` if meta supports it. But wait, `meta: { roles: ['super_admin_pt'] }`? Let's check how router handles roles. I'll just use manage-users, since backend API is protected by super_admin_pt.
            },
            // Profile
            {
                path: 'profile',
                name: 'profile',
                component: () => import('@/pages/profile/ProfilePage.vue'),
                meta: { title: 'Profil Saya' },
            },
            // SDM Dashboard
            {
                path: 'sdm-dashboard',
                name: 'sdm-dashboard',
                component: () => import('@/pages/sdm-dashboard/SdmDashboardPage.vue'),
                meta: { title: 'Dashboard SDM' },
            },
            // SIKEP Sync
            {
                path: 'sikep-sync',
                name: 'sikep-sync',
                component: () => import('@/pages/admin/SikepSyncPage.vue'),
                meta: { permission: 'sync-sikep', title: 'Sinkronisasi SIKEP' },
            },
        ],
    },
    {
        path: '/:pathMatch(.*)*',
        redirect: '/',
    },
];

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

// Navigation guard
router.beforeEach(async (to, _from, next) => {
    const auth = useAuthStore();

    // Initialize auth state if not done
    if (!auth.initialized) {
        await auth.fetchUser();
    }

    // Guest routes (login page)
    if (to.meta.guest) {
        if (auth.isAuthenticated) {
            return next({ name: 'dashboard' });
        }
        return next();
    }

    // Protected routes
    if (to.meta.requiresAuth || to.matched.some(r => r.meta.requiresAuth)) {
        if (!auth.isAuthenticated) {
            return next({ name: 'login' });
        }

        // Permission check
        const permission = to.meta.permission as string | undefined;
        if (permission && !auth.hasPermission(permission)) {
            return next({ name: 'dashboard' });
        }
    }

    next();
});

export default router;