import {
  createRootRoute,
  createRoute,
  createRouter,
} from '@tanstack/react-router';
import { z } from 'zod';
import AppShell from './components/AppShell';
import Home from './pages/Home';
import Artists from './pages/Artists';
import ArtistDetail from './pages/ArtistDetail';
import Albums from './pages/Albums';
import AlbumDetail from './pages/AlbumDetail';
import Tracks from './pages/Tracks';
import Genres from './pages/Genres';
import Vibe from './pages/Vibe';
import Discover from './pages/Discover';
import Search from './pages/Search';
import Settings from './pages/Settings';
import Quarantine from './pages/Quarantine';
import Jobs from './pages/Jobs';

// Root route renders the AppShell (NavRail + TopBar + PlaybackBar + NowPlayingPanel)
// with an <Outlet/> where the active child route renders.
export const rootRoute = createRootRoute({
  component: AppShell,
});

export const homeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Home,
});

export const artistsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/artists',
  component: Artists,
});

export const artistDetailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/artists/$artistId',
  component: ArtistDetail,
});

export const albumsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/albums',
  component: Albums,
});

export const albumDetailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/albums/$albumId',
  component: AlbumDetail,
});

export const tracksRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/tracks',
  component: Tracks,
});

export const genresRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/genres',
  component: Genres,
});

export const vibeRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/vibe',
  component: Vibe,
});

export const discoverRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/discover',
  component: Discover,
});

export const searchRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/search',
  component: Search,
  validateSearch: z.object({
    q: z.string().optional(),
  }),
});

export const settingsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/settings',
  component: Settings,
});

export const quarantineRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/quarantine',
  component: Quarantine,
});

export const jobsRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/jobs',
  component: Jobs,
});

const routeTree = rootRoute.addChildren([
  homeRoute,
  artistsRoute,
  artistDetailRoute,
  albumsRoute,
  albumDetailRoute,
  tracksRoute,
  genresRoute,
  vibeRoute,
  discoverRoute,
  searchRoute,
  settingsRoute,
  quarantineRoute,
  jobsRoute,
]);

export const router = createRouter({ routeTree });

// Type-safety: register the router instance type globally.
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router;
  }
}
