import { createRootRoute, createRoute, createRouter, Outlet } from '@tanstack/react-router'
import { AppLayoutGuard } from './components/layout/AppLayoutGuard'
import { HomeView } from './routes/home'
import { GroupsView } from './routes/groups'
import { PaymentsView } from './routes/payments'
import { SettingsView } from './routes/settings'
import { ProfileView } from './routes/profile'
import { SecurityPage } from './routes/security'
import { LoginPage } from './routes/auth/login'
import { SignupPage } from './routes/auth/signup'
import { VerifyEmailPage } from './routes/auth/verify-email'
import { OnboardingView } from './routes/onboarding'
import { GroupDetailView } from './routes/group-detail'
import { CreateGroupView } from './routes/create-group'
import { JoinGroupView } from './routes/join-group'

const rootRoute = createRootRoute({
  component: () => <Outlet />,
})

const loginRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/login',
  component: LoginPage,
})

const signupRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/signup',
  component: SignupPage,
})

const verifyEmailRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/verify-email',
  component: VerifyEmailPage,
})

const onboardingRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/onboarding',
  component: OnboardingView,
})

const joinGroupRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: '/join/$token',
  component: JoinGroupView,
})

// Capa con la navegación de la app autenticada (Sidebar + BottomNav).
// El guard redirige a /onboarding a quien no completó el onboarding.
const appLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: 'app',
  component: AppLayoutGuard,
})

const indexRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/',
  component: HomeView,
})

const groupsRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/groups',
  component: GroupsView,
})

const createGroupRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/groups/new',
  component: CreateGroupView,
})

const groupDetailRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/groups/$groupId',
  component: GroupDetailView,
})

const paymentsRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/payments',
  component: PaymentsView,
})

const settingsRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/settings',
  component: SettingsView,
})

const securityRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/seguridad',
  component: SecurityPage,
})

const profileRoute = createRoute({
  getParentRoute: () => appLayoutRoute,
  path: '/profile',
  component: ProfileView,
})

const routeTree = rootRoute.addChildren([
  loginRoute,
  signupRoute,
  verifyEmailRoute,
  onboardingRoute,
  joinGroupRoute,
  appLayoutRoute.addChildren([
    indexRoute,
    groupsRoute,
    createGroupRoute,
    groupDetailRoute,
    paymentsRoute,
    settingsRoute,
    securityRoute,
    profileRoute,
  ]),
])

export const router = createRouter({ routeTree })

declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}