import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from 'react'
import { useRouter } from 'solito/navigation'

export type Route =
  | '/'
  | '/signin'
  | '/signin/verify'
  | '/account'
  | '/account/update'
  | '/account/update/verify'
  | '/account/delete'
  | '/membership'

interface PageMetadata {
  title: string | null
  subtitle: string | null
}

interface RouterContextType {
  route: Route
  setRoute: (route: Route) => void
  pop: () => void
  pageTitle: string | null
  pageSubtitle: string | null
}

const RouterContext = createContext<RouterContextType | null>(null)

interface RouterProviderProps {
  children: ReactNode
  productName?: string | null
}

const getPageMetadata = (route: Route, productName: string | null): PageMetadata => {
  switch (route) {
    case '/':
      return {
        title: productName ? `LA VISA for ${productName}` : 'LA VISA',
        subtitle: null,
      }
    case '/signin':
      return {
        title: 'Sign In',
        subtitle: `You can sign in using any email address even if you did not yet create an account with us. You can also change your email at any time in the future.`,
      }
    case '/signin/verify':
      return {
        title: 'Enter Verification Code',
        subtitle: 'Check your email inbox.',
      }
    case '/account':
      return {
        title: 'Manage Account',
        subtitle: null,
      }
    case '/account/update':
      return {
        title: 'Change Email',
        subtitle: null,
      }
    case '/account/update/verify':
      return {
        title: 'Enter Verification Code',
        subtitle: 'Check your email inbox.',
      }
    case '/account/delete':
      return {
        title: 'Delete Account',
        subtitle: 'Danger! This action cannot be undone!',
      }
    case '/membership':
      return {
        title: 'Manage Membership',
        subtitle:
          'You can manage your LA VISA membership on a secure portal hosted and managed by Stripe for the customers of Junwon Company.',
      }
    default:
      return {
        title: null,
        subtitle: null,
      }
  }
}

export function RouterProvider({ children, productName }: RouterProviderProps) {
  const [route, setRoute] = useState<Route>('/')
  const router = useRouter()

  const { title: pageTitle, subtitle: pageSubtitle } = useMemo(
    () => getPageMetadata(route, productName ?? null),
    [route, productName]
  )

  const pop = useCallback(() => {
    if (route === '/') {
      router.back()
      return
    }

    const segments = route.split('/')
    segments.pop()

    if (segments.length <= 1) {
      setRoute('/')
      return
    }

    const newRoute = segments.join('/') as Route
    setRoute(newRoute)
  }, [route, router])

  const value = useMemo(
    () => ({
      route,
      setRoute,
      pop,
      pageTitle,
      pageSubtitle,
    }),
    [route, pop, pageTitle, pageSubtitle]
  )

  return <RouterContext.Provider value={value}>{children}</RouterContext.Provider>
}

export function useRouterContext() {
  const context = useContext(RouterContext)
  if (!context) {
    throw new Error('useRouterContext must be used within a RouterProvider')
  }
  return context
}