"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";
import { X } from "lucide-react";
import type { Session } from "next-auth";
import ScrollToTop from "@/components/ui/ScrollToTop";
import DashboardAside from "@/components/dashboard/DashboardAside";
import DashboardHeader from "@/components/dashboard/DashboardHeader";

type DashboardShellProps = {
  user: Session["user"];
  children: ReactNode;
  aula?: { id: number; nombre: string; clave: string };
  aulas?: { id: number; nombre: string; clave: string }[];
};

export default function DashboardShell({ user, children, aula, aulas }: DashboardShellProps) {
  const dialog = useRef<HTMLDialogElement>(null);
  const previousOverflow = useRef("");
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(
    () => () => {
      document.body.style.overflow = previousOverflow.current;
    },
    [],
  );

  function openMenu() {
    if (!dialog.current || dialog.current.open) return;
    previousOverflow.current = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    dialog.current.showModal();
    setMenuOpen(true);
  }

  function closeMenu() {
    dialog.current?.close();
  }

  return (
    <main className="dashboard-workspace flex min-h-dvh w-full">
      <div className="sticky top-0 hidden h-dvh w-60 shrink-0 lg:block">
        <DashboardAside aula={aula} aulas={aulas} role={user.role} />
      </div>
      <div className="flex min-w-0 flex-1 flex-col">
        <DashboardHeader aula={aula} user={user} menuOpen={menuOpen} onOpenMenu={openMenu} />
        {children}
      </div>
      <dialog
        ref={dialog}
        id="mobile-dashboard-menu"
        aria-label="Menú de navegación"
        className="fixed inset-y-0 left-0 m-0 h-dvh max-h-none w-[min(20rem,85vw)] max-w-none border-0 bg-white p-0 shadow-2xl backdrop:bg-zinc-950/40 backdrop:backdrop-blur-sm"
        onClose={() => {
          document.body.style.overflow = previousOverflow.current;
          setMenuOpen(false);
        }}
        onClick={(event) => {
          if (event.target !== event.currentTarget) return;
          const bounds = event.currentTarget.getBoundingClientRect();
          if (
            event.clientX < bounds.left ||
            event.clientX > bounds.right ||
            event.clientY < bounds.top ||
            event.clientY > bounds.bottom
          )
            closeMenu();
        }}
      >
        <div className="relative h-full">
          <button
            type="button"
            onClick={closeMenu}
            aria-label="Cerrar menú"
            className="absolute top-4 right-3 rounded-lg p-2 text-zinc-500 hover:bg-zinc-100 focus-visible:outline-2 focus-visible:outline-[#9d2449]"
          >
            <X className="size-5" />
          </button>
          <DashboardAside role={user.role} onNavigate={closeMenu} />
        </div>
      </dialog>
      <ScrollToTop />
    </main>
  );
}