import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from '@/pages/Home';
import Database from '@/pages/Database';
import MainLayout from '@/components/Layouts/MainLayout';
import Brands from '@/pages/Brands';
import CreatorInbox from '@/pages/CreatorInbox';
import DividLayout from '@/components/Layouts/DividLayout';
import BrandsDetail from '@/pages/BrandsDetail';
import CampaignDetail from '@/pages/CampaignDetail';
import Login from '@/pages/Login';
import CreatorDiscovery from '@/pages/CreatorDiscovery';
import PrivateCreator from '../pages/PrivateCreator';
import CreatorDetail from '../pages/CreatorDetail';

// Routes configuration object
const routes = [
    {
        path: '/',
        element: <Home />,
    },
    {
        path: '/creator-discovery',
        element: <CreatorDiscovery />,
    },
    {
        path: '/creator-database',
        children: [
            {
                path: '',
                element: <Database path='tiktok'/>,
            },
            {
                path: 'tiktok',
                element: <Database path='tiktok' />,
            },
            {
                path: 'instagram',
                element: <Database path='instagram' />,
            },
            {
                path: 'youtube',
                element: <Database path='youtube' />,
            },
        ],
    },
    {
        path: '/private-creators',
        children: [
            {
                path: '',
                element: <PrivateCreator path='tiktok' />,
            },
            {
                path: 'tiktok',
                element: <PrivateCreator path='tiktok' />,
            },
            {
                path: 'instagram',
                element: <PrivateCreator path='instagram' />,
            },
            {
                path: 'youtube',
                element: <PrivateCreator path='youtube' />,
            },
        ],
    },
    {
        path: '/deep-analysis',
        element: <Home />,
    },
    {
        path: '/brands',
        element: <Brands />,
    },
    {
        path: '/brands/:id',
        element: <BrandsDetail />,
    },
    {
        path: '/brands/:brandId/campaigns/:campaignId',
        element: <CampaignDetail />,
    },
    {
        path: '/settings',
        element: <Home />,
    },
    {
        path: '/creator/:id',
        element: <CreatorDetail />,
    },
];

// Create router with routes wrapped in the layout
const router = createBrowserRouter([
    {
        path: '/',
        element: <MainLayout />,
        children: routes,
    },
    {
        path: '/login',
        element: <Login />,
    },
    {
        path: '/creator-inbox',
        element: <DividLayout />,
        children: [
            {
                path: '',
                element: <CreatorInbox />,
            },
            {
                path: 'templates',
                element: <Home />,
            },
        ],
    },
]);

export default function Router() {
    return <RouterProvider router={router} />;
}

export { routes };