import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
import { AuthGuard } from './shared/layout/AuthGuard';
import { AdminGuard } from './shared/layout/AdminGuard';
import { AuthenticatedShell } from './shared/layout/AuthenticatedShell';
import { LoginPage } from './shared/layout/LoginPage';

// ── Pillar pages (lazy loaded for performance) ────────────────
import { lazy, Suspense } from 'react';
import { PillarSkeleton } from './shared/layout/PillarSkeleton';

const CommandPillar  = lazy(() => import('./pillars/command/CommandPillar'));
const PipelinePillar = lazy(() => import('./pillars/pipeline/PipelinePillar'));
const Client360      = lazy(() => import('./pillars/pipeline/client360/Client360'));
const ShowroomMode   = lazy(() => import('./pillars/pipeline/ShowroomMode'));
const StudioPillar   = lazy(() => import('./pillars/studio/StudioPillar'));
const PropertyEntity = lazy(() => import('./pillars/studio/PropertyEntity'));
const ControlRoom    = lazy(() => import('./control-room/ControlRoom'));
const VaultPublicPage = lazy(() => import('./shared/layout/VaultPublicPage'));

// ── Lazy wrapper with branded skeleton ───────────────────────
const Lazy = ({ children }: { children: React.ReactNode }) => (
  <Suspense fallback={<PillarSkeleton />}>{children}</Suspense>
);

// ── Router definition ─────────────────────────────────────────
const router = createBrowserRouter([
  // ── Unauthenticated ──
  {
    path: '/login',
    element: <LoginPage />,
  },

  // ── Authenticated WebOS Shell ──
  {
    path: '/',
    element: (
      <AuthGuard>
        <AuthenticatedShell />
      </AuthGuard>
    ),
    children: [
      // Default redirect
      { index: true, element: <Navigate to="/command" replace /> },

      // Pillar 1: COMMAND — Morning Briefing (Dashboard + Oracle)
      {
        path: 'command',
        element: <Lazy><CommandPillar /></Lazy>,
      },

      // Pillar 2: PIPELINE — Deal Intelligence (CRM + Comms + Sentinel)
      {
        path: 'pipeline',
        element: <Lazy><PipelinePillar /></Lazy>,
      },
      // Client 360 entity — drills in over Pipeline
      {
        path: 'pipeline/:personId',
        element: <Lazy><Client360 /></Lazy>,
      },
      // Showroom Mode — contextual full-screen overlay
      {
        path: 'showroom',
        element: <Lazy><ShowroomMode /></Lazy>,
      },

      // Pillar 3: STUDIO — Asset + Marketing Hub (Inventory + Catalyst)
      {
        path: 'studio',
        element: <Lazy><StudioPillar /></Lazy>,
      },
      // Property Entity — drills in over Studio
      {
        path: 'studio/:propertyId',
        element: <Lazy><PropertyEntity /></Lazy>,
      },
    ],
  },

  // ── Admin-Only Control Room (RBAC gated at component + API level) ──
  {
    path: '/control-room',
    element: (
      <AuthGuard>
        <AdminGuard>
          <Lazy><ControlRoom /></Lazy>
        </AdminGuard>
      </AuthGuard>
    ),
    children: [
      { index: true, element: <Navigate to="/control-room/system" replace /> },
      { path: 'system',       element: <Lazy><ControlRoom /></Lazy> },
      { path: 'oracle-admin', element: <Lazy><ControlRoom /></Lazy> },
      { path: 'comms-config', element: <Lazy><ControlRoom /></Lazy> },
      { path: 'users',        element: <Lazy><ControlRoom /></Lazy> },
      { path: 'models',       element: <Lazy><ControlRoom /></Lazy> },
    ],
  },

  // ── Public vault links (no auth) ──
  {
    path: '/vault/:trackingHash',
    element: <Lazy><VaultPublicPage /></Lazy>,
  },

  // ── 404 fallback ──
  {
    path: '*',
    element: <Navigate to="/command" replace />,
  },
]);

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