import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { db, users, eq } from "@epicure/db";
import { SettingsSidebar } from "@/components/settings/settings-sidebar";
import { getMessages } from "@/lib/i18n/server";
import { canSelfServeDeveloperAccess } from "@/lib/permissions";

export default async function SettingsLayout({ children }: { children: React.ReactNode }) {
  const session = await auth.api.getSession({ headers: await headers() });
  const m = getMessages((session?.user as { locale?: string })?.locale);

  const dbUser = session
    ? (await db.select({ isDeveloper: users.isDeveloper, tier: users.tier }).from(users).where(eq(users.id, session.user.id)).limit(1))[0]
    : undefined;
  const showDeveloperNav = !!dbUser && (dbUser.isDeveloper || canSelfServeDeveloperAccess(dbUser));

  return (
    <div className="max-w-5xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold tracking-tight">{m.settings.title}</h1>
        <p className="text-muted-foreground mt-1">{m.settings.subtitle}</p>
      </div>
      <div className="flex flex-col md:flex-row gap-4 md:gap-8 md:items-start">
        <SettingsSidebar showDeveloperNav={showDeveloperNav} />
        <main className="flex-1 min-w-0 space-y-6">{children}</main>
      </div>
    </div>
  );
}
