import { createRouter, createWebHistory } from 'vue-router';
import Layout from '../shared/components/layout/Layout.vue';
import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
import ChapterPage from '../domain/reader/presentation/pages/ChapterPage.vue';
import ActivityPage from '../domain/activity/presentation/pages/ActivityPage.vue';

// Placeholder component for new routes
const PlaceholderComponent = {
    props: {
        title: {
            type: String,
            required: true
        }
    },
    template: `
    <div class="container mx-auto px-4 py-8">
      <h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
      <p class="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
    </div>
  `
};

const routes = [
    {
        path: '/',
        component: Layout,
        children: [
            {
                path: '',
                name: 'home',
                redirect: '/manga'
            },
            {
                path: '/manga',
                name: 'manga',
                component: HomePage
            },
            {
                path: '/manga/:id',
                name: 'manga-details',
                component: MangaDetails
            },
            {
                path: '/add',
                name: 'add-manga',
                component: PlaceholderComponent,
                props: { title: 'Ajouter un manga' }
            },
            {
                path: '/reader/:chapterId',
                name: 'reader',
                component: ChapterPage,
                props: { title: 'Lecteur' }
            },
            // Pages placeholder avec chargement différé
            {
                path: '/import',
                name: 'import',
                component: PlaceholderComponent,
                props: { title: 'Import de bibliothèque' }
            },
            {
                path: '/discover',
                name: 'discover',
                component: PlaceholderComponent,
                props: { title: 'Découvrir' }
            },
            {
                path: '/convert',
                name: 'convert',
                component: PlaceholderComponent,
                props: { title: 'Convertir CBR en CBZ' }
            },
            {
                path: '/calendar',
                name: 'calendar',
                component: PlaceholderComponent,
                props: { title: 'Calendrier' }
            },
            {
                path: '/activity',
                name: 'activity',
                component: ActivityPage
            },
            // Paramètres
            {
                path: '/settings',
                name: 'settings',
                component: PlaceholderComponent,
                props: { title: 'Paramètres' }
            },
            {
                path: '/settings/general',
                name: 'settings-general',
                component: PlaceholderComponent,
                props: { title: 'Paramètres généraux' }
            },
            {
                path: '/settings/folders',
                name: 'settings-folders',
                component: PlaceholderComponent,
                props: { title: 'Gestion des dossiers' }
            },
            {
                path: '/settings/scrappers',
                name: 'settings-scrappers',
                component: PlaceholderComponent,
                props: { title: 'Configuration des scrappers' }
            },
            {
                path: '/settings/ui',
                name: 'settings-ui',
                component: PlaceholderComponent,
                props: { title: "Paramètres de l'interface" }
            },
            // Système
            {
                path: '/system',
                name: 'system',
                component: PlaceholderComponent,
                props: { title: 'Système' }
            },
            {
                path: '/system/status',
                name: 'system-status',
                component: PlaceholderComponent,
                props: { title: 'Status du système' }
            },
            {
                path: '/system/backup',
                name: 'system-backup',
                component: PlaceholderComponent,
                props: { title: 'Sauvegarde' }
            },
            {
                path: '/system/logs',
                name: 'system-logs',
                component: PlaceholderComponent,
                props: { title: 'Journaux système' }
            },
            {
                path: '/system/updates',
                name: 'system-updates',
                component: PlaceholderComponent,
                props: { title: 'Mises à jour' }
            }
        ]
    }
];

export const router = createRouter({
    history: createWebHistory('/vue/'),
    routes
});