import { redirect } from 'next/navigation';
import { headers } from 'next/headers';
import { eq } from 'drizzle-orm';

import { auth } from '@/lib/auth';
import { db } from '@/lib/db';
import { userPortRoles } from '@/lib/db/schema/users';
import { QueryProvider } from '@/providers/query-provider';
import { SocketProvider } from '@/providers/socket-provider';
import { PortProvider } from '@/providers/port-provider';
import { PermissionsProvider } from '@/providers/permissions-provider';
import { Sidebar } from '@/components/layout/sidebar';
import { Topbar } from '@/components/layout/topbar';

export default async function DashboardLayout({ children }: { children: React.ReactNode }) {
  const session = await auth.api.getSession({ headers: await headers() });
  if (!session?.user) redirect('/login');

  // Load user's port assignments for PortProvider
  const portRoles = await db.query.userPortRoles.findMany({
    where: eq(userPortRoles.userId, session.user.id),
    with: { port: true, role: true },
  });

  const ports = portRoles.map((pr) => pr.port);

  return (
    <QueryProvider>
      <PortProvider ports={ports} defaultPortId={portRoles[0]?.port.id ?? null}>
        <PermissionsProvider>
          <SocketProvider>
            <div className="flex h-screen overflow-hidden bg-background">
              <Sidebar portRoles={portRoles} />
              <div className="flex-1 flex flex-col overflow-hidden min-w-0">
                <Topbar ports={ports} />
                <main className="flex-1 overflow-y-auto bg-background p-6">
                  {children}
                </main>
              </div>
            </div>
          </SocketProvider>
        </PermissionsProvider>
      </PortProvider>
    </QueryProvider>
  );
}