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

import { useToggle } from 'ahooks'
import { MenuIcon } from 'lucide-react'
import { Link, NavLink, Outlet } from 'react-router'
import { toast } from 'sonner'

import { Toaster } from '@repo/ui/components/ui/sonner'
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 { Button } from '@repo/ui/components/ui/button'
import {
  NavigationMenu,
  NavigationMenuLink,
  NavigationMenuList
} from '@repo/ui/components/ui/navigation-menu'
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@repo/ui/components/ui/sheet'
import type { User } from '@repo/auth/auth'
import { createSessionStorage } from '@repo/auth/session'
import { data } from 'react-router'
import { useEffect } from 'react'

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

export async function loader({ context, request }: Route.ActionArgs) {
  const user = context.get(userContext) as User
  const sessionStorage = createSessionStorage(context.cloudflare.env)
  const session = await sessionStorage.getSession(request.headers.get('cookie'))

  const flash = {
    error: session.get('error'),
    success: session.get('success'),
    info: session.get('info')
  }

  return data(
    { user, flash },
    {
      headers: new Headers({
        'Set-Cookie': await sessionStorage.commitSession(session)
      })
    }
  )
}

const navMain = [
  {
    title: 'Meus cursos',
    url: '/'
  },
  // {
  //   title: 'Certificados',
  //   url: '/certs'
  // },
  {
    title: 'Histórico de compras',
    url: '/history'
  }
]

export default function Component({
  loaderData: { user, flash }
}: Route.ComponentProps) {
  const [isOpen, { toggle }] = useToggle()

  useEffect(() => {
    if (flash.error) toast.error(flash.error)
    if (flash.success) toast.success(flash.success)
    if (flash.info) toast.info(flash.info)
  }, [flash])

  return (
    <div className="relative flex flex-col flex-1 min-w-0 h-screen overflow-y-auto">
      <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">
          {/* Desktop Menu */}
          <div className="hidden lg:flex items-center gap-8">
            <Link to="/">
              <ThemedImage />
            </Link>

            <NavigationMenu>
              <NavigationMenuList>
                {navMain.map(({ url, title }, key) => (
                  <NavigationMenuLink
                    key={key}
                    className="font-medium aria-[current=page]:bg-muted"
                    asChild
                  >
                    <NavLink to={url}>{title}</NavLink>
                  </NavigationMenuLink>
                ))}
              </NavigationMenuList>
            </NavigationMenu>
          </div>

          {/* Mobile Menu */}
          <div className="lg:hidden">
            <Sheet open={isOpen} onOpenChange={toggle}>
              <SheetTrigger asChild>
                <Button variant="outline" size="icon" className="">
                  <MenuIcon />
                </Button>
              </SheetTrigger>
              <SheetContent side="left" className="w-64 overflow-y-auto">
                <SheetHeader>
                  <SheetTitle>
                    <Link to="/">
                      <ThemedImage />
                    </Link>
                  </SheetTitle>
                </SheetHeader>

                <ul className="px-2">
                  {navMain.map(({ url, title }, key) => (
                    <li key={key}>
                      <NavLink
                        to={url}
                        className="px-2 py-0.5 block"
                        onClick={toggle}
                      >
                        {title}
                      </NavLink>
                    </li>
                  ))}
                </ul>
              </SheetContent>
            </Sheet>
          </div>

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

      <Outlet />
      <Toaster
        position="top-center"
        richColors={true}
        duration={Infinity}
        closeButton={true}
      />
    </div>
  )
}