import { useNavigation, redirect, useNavigate } from 'react-router'
import { fetchAuthSession } from 'aws-amplify/auth'
import {
  AcademicCapIcon,
  PresentationChartLineIcon,
  UserGroupIcon,
  ShoppingBagIcon,
  Bars3BottomLeftIcon,
} from '@heroicons/react/24/outline'
import { NavLink } from 'react-router'
import { Outlet } from 'react-router'
import { Container } from '~/components/container'
import { Smallest, Regular } from '~/components/logo'
import { clsx } from 'clsx'
import { UserMenu } from './_user-menu'

export async function clientLoader() {
  const session = await fetchAuthSession()

  if (!session?.tokens?.idToken) {
    throw redirect('/auth')
  }
}

export default function Layout() {
  const navigation = useNavigation()
  const isNavigating = Boolean(navigation.location)

  return (
    <div>
      <aside
        role="navigation"
        className="p-4 w-80 h-full fixed top-0 left-0 bg-yellow-terciary dark:bg-green-primary z-40 overflow-y-auto max-lg:hidden"
      >
        <div className="space-y-6">
          <Logo className="h-12 lg:h-14" />

          <ul className="space-y-1 font-medium">
            <Link to="/" icon={PresentationChartLineIcon}>
              <>Visão geral</>
            </Link>

            <Link to="/orders" icon={ShoppingBagIcon}>
              <>Pagamentos</>
            </Link>

            <Link to="/users" icon={UserGroupIcon}>
              <>Usuários</>
            </Link>

            <Link to="/enrollments" icon={AcademicCapIcon}>
              Matriculas
            </Link>
          </ul>
        </div>
      </aside>

      <section className="lg:ml-80">
        <header className="flex items-center bg-slate-50/50 dark:bg-gray-900/50 backdrop-blur backdrop-filter sticky top-0 border-b border-gray-200 dark:border-gray-700 lg:border-0 z-20 h-16 px-4 lg:px-8">
          {/* Mobile menu button */}
          <button className="lg:hidden" onClick={() => setIsOpen(true)}>
            <span className="sr-only">Abrir barra lateral</span>
            <Bars3BottomLeftIcon className="w-6" />
          </button>

          <div className="ml-auto flex items-center">
            <UserMenu />
          </div>
        </header>

        <main className="p-4 lg:p-8 space-y-5">
          {isNavigating ? <Loading /> : <Outlet />}
        </main>
      </section>
    </div>
  )
}

function Link({ children, icon: Icon, ...props }) {
  return (
    <li>
      <NavLink
        className="aria-[current=page]:text-white aria-[current=page]:bg-green-dark hover:bg-green-secondary dark:hover:text-white p-2.5 rounded-lg flex gap-2 transition"
        {...props}
      >
        <Icon className="w-6" />
        <span>{children}</span>
      </NavLink>
    </li>
  )
}

function Loading() {
  return (
    <Container>
      <div className="animate-pulse flex flex-col gap-2.5 lg:w-2/4 [&>*]:bg-gray-200 dark:[&>*]:bg-gray-700 [&>*]:h-5 [&>*]:rounded">
        <div className="w-2/6" />
        <div className="w-4/6" />
        <div className="w-5/6" />
        <div className="w-5/6" />
        <div className="w-6/6" />
        <div className="w-6/6" />
        <div className="w-3/6" />
        <div className="w-5/6" />
        <div className="w-4/6" />
        <div className="w-4/6" />
      </div>
    </Container>
  )
}

function Logo({ className }) {
  return (
    <div>
      <Regular className={clsx(className)} />
      {/* <Smallest className={clsx('lg:hidden w-full', className)} /> */}
    </div>
  )
}