import type { Route } from './+types/route'

import * as cookie from 'cookie'
import { Outlet, type ShouldRevalidateFunctionArgs } from 'react-router'

import {
  WorkspaceProvider,
  type Workspace
} from '@/components/workspace-switcher'
import { userContext } from '@repo/auth/context'
import { authMiddleware } from '@repo/auth/middleware/auth'
import { ModeToggle, ThemedImage } from '@repo/ui/components/dark-mode'
import { NavUser } from '@repo/ui/components/nav-user'
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger
} from '@repo/ui/components/ui/sidebar'
import { Toaster } from '@repo/ui/components/ui/sonner'
import { request as req } from '@repo/util/request'

import { AppSidebar } from '@/components/app-sidebar'

export const middleware: Route.MiddlewareFunction[] = [authMiddleware]

export async function loader({ params, context, request }: Route.ActionArgs) {
  const user = context.get(userContext)
  const rawCookie = request.headers.get('cookie') || ''
  const parsedCookies = cookie.parse(rawCookie)
  const { sidebar_state = 'true' } = parsedCookies

  const r = await req({
    url: `/users/${user.sub}/orgs?limit=25`,
    request,
    context
  })

  if (!r.ok) {
    throw new Response(await r.text(), { status: r.status })
  }

  const { items = [] } = (await r.json()) as { items: { sk: string }[] }
  const orgs = items.map(({ sk, ...props }) => ({
    ...props,
    id: sk?.split('#')[1] ?? null
  }))
  const exists = orgs.some(({ id }) => id === params.orgid)

  if (exists) {
    return { user, orgs, sidebar_state }
  }

  throw new Response(null, { status: 401 })
}

export function shouldRevalidate({
  currentParams,
  nextParams
}: ShouldRevalidateFunctionArgs) {
  return currentParams.orgid !== nextParams.orgid
}

export default function Route({ loaderData }: Route.ComponentProps) {
  const { user, orgs, sidebar_state } = loaderData

  return (
    <WorkspaceProvider workspaces={orgs as Workspace[]}>
      <SidebarProvider defaultOpen={sidebar_state === 'true'} className="flex">
        <AppSidebar />

        <SidebarInset className="relative flex flex-col flex-1 min-w-0">
          <header
            className="bg-background/15 backdrop-blur-sm
                       px-4 py-2 lg:py-4 sticky top-0 z-5"
          >
            <div className="container mx-auto flex items-center max-w-7xl">
              <SidebarTrigger className="md:hidden" />
              <ThemedImage className="max-md:hidden" />

              <div className="ml-auto flex gap-2.5 items-center">
                <ModeToggle />
                <NavUser user={user} />
              </div>
            </div>
          </header>

          <div className="p-4">
            <div className="container mx-auto relative max-w-7xl">
              <Outlet />
              <Toaster
                position="top-center"
                richColors={true}
                duration={Infinity}
                closeButton={true}
              />
            </div>
          </div>
        </SidebarInset>
      </SidebarProvider>
    </WorkspaceProvider>
  )
}