/**
 * router.tsx
 * Rotas da aplicação com proteção por autenticação.
 */

import { createBrowserRouter, Navigate } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import AppLayout from '@/components/layout/AppLayout';
import PageLoader from '@/components/ui/PageLoader';
import { ProtectedRoute } from '@/components/auth/ProtectedRoute';

// ─── Lazy pages ───────────────────────────────────────────────────────────────
const LoginPage        = lazy(() => import('@/pages/LoginPage'));
const DashboardPage    = lazy(() => import('@/pages/DashboardPage'));
const NewTicketPage    = lazy(() => import('@/pages/NewTicketPage'));
const TicketDetailPage = lazy(() => import('@/pages/TicketDetailPage'));
const UsersPage        = lazy(() => import('@/pages/UsersPage'));
const SettingsPage     = lazy(() => import('@/pages/SettingsPage'));

function Lazy({ children }: { children: React.ReactNode }) {
  return <Suspense fallback={<PageLoader />}>{children}</Suspense>;
}

// ─── Router ───────────────────────────────────────────────────────────────────
export const router = createBrowserRouter([
  // ── Rota pública: login (sem AppLayout) ───────────────────────────────────
  {
    path: '/login',
    element: <Lazy><LoginPage /></Lazy>,
  },

  // ── Rotas protegidas (requerem autenticação) ──────────────────────────────
  {
    path: '/',
    element: (
      <ProtectedRoute>
        <AppLayout />
      </ProtectedRoute>
    ),
    children: [
      {
        index: true,
        element: <Navigate to="/dashboard" replace />,
      },
      {
        path: 'dashboard',
        element: <Lazy><DashboardPage /></Lazy>,
      },
      {
        path: 'tickets/new',
        element: <Lazy><NewTicketPage /></Lazy>,
      },
      {
        path: 'tickets/:id',
        element: <Lazy><TicketDetailPage /></Lazy>,
      },
      {
        path: 'users',
        element: <Lazy><UsersPage /></Lazy>,
      },
      {
        path: 'settings',
        element: <Lazy><SettingsPage /></Lazy>,
      },
    ],
  },

  // Fallback
  { path: '*', element: <Navigate to="/dashboard" replace /> },
]);