"use client";

import { useEffect, useState } from "react";
import { useRouter, usePathname } from "next/navigation";
import { useAuthStore } from "@/lib/store/useAuthStore";
import { getPB } from "@/lib/pocketbase";
import Sidebar from "@/components/layout/Sidebar";
import MobileNav from "@/components/layout/MobileNav";
import Topbar from "@/components/layout/Topbar";
import type { User } from "@/lib/types";
import { hasModulePermission, moduleForPath, PERMISSION_MODULES, type PermissionModule, type UserPermission } from "@/lib/permissions/domain";

import { UnsavedChangesProvider } from "@/lib/useUnsavedChangesGuard";

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const { user, permissions, setUser, refresh, refreshPermissions } = useAuthStore();
  const [mounted, setMounted] = useState(false);

  // After mount, force-sync from PB authStore (handles hard refresh + new tab).
  useEffect(() => {
    const pb = getPB();
    if (pb.authStore.isValid && pb.authStore.record && !user) {
      setUser(pb.authStore.record as unknown as User);
    }
    setMounted(true);
    void refreshPermissions();
  }, [setUser, user]);

  // Once mounted, route based on auth.
  useEffect(() => {
    if (!mounted) return;
    if (!user) {
      const next = encodeURIComponent(pathname || "/inicio");
      router.replace(`/login?next=${next}`);
      return;
    }
    refresh();
  }, [mounted, user, router, pathname, refresh]);

  useEffect(() => {
    if (!mounted || !user) return;
    const module = moduleForPath(pathname || "/inicio");
    if (hasModulePermission(user.role, module, "can_view", permissions)) return;
    router.replace(firstAllowedPath(user.role, permissions));
  }, [mounted, user, permissions, pathname, router]);

  if (!mounted) {
    return (
      <div className="min-h-dvh grid place-items-center text-faint text-sm">
        Cargando…
      </div>
    );
  }
  if (!user) {
    return (
      <div className="min-h-dvh grid place-items-center text-faint text-sm">
        Verificando sesión…
      </div>
    );
  }

  return (
    <UnsavedChangesProvider>
      <div className="min-h-dvh flex bg-canvas">
        <Sidebar />
        <div className="flex-1 flex flex-col min-w-0">
          <Topbar />
          <main className="flex-1 p-5 pb-24 md:p-8">{children}</main>
        </div>
        <MobileNav />
      </div>
    </UnsavedChangesProvider>
  );
}

function firstAllowedPath(role: User["role"], permissions: UserPermission[]): string {
  const preferred: PermissionModule[] = [
    "calculadora",
    "presupuestos",
    "pedidos",
    "pipeline",
    "cortes",
    "calendario",
    "clientes",
    ...PERMISSION_MODULES,
  ];
  const allowed = preferred.find((module) => hasModulePermission(role, module, "can_view", permissions));
  return allowed ? `/${allowed}` : "/login";
}