import { auth } from "@/lib/auth";
import { redirect } from "@/i18n/navigation";
import { getTranslations, setRequestLocale } from "next-intl/server";
import { Settings } from "lucide-react";
import SettingsSidebar from "@/components/settings/SettingsSidebar";
import { hasEffectivePermission } from "@/lib/session-utils";

export default async function SettingsLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  setRequestLocale(locale);

  const session = await auth();
  if (!session) {
    redirect({ href: "/login", locale });
    return null;
  }

  if (!hasEffectivePermission(session, "SETTINGS_VIEW")) {
    redirect({ href: "/dashboard", locale });
    return null;
  }

  const t = await getTranslations("settings");

  return (
    <div className="w-full space-y-5 sm:space-y-6">
      <div className="flex items-start gap-3 sm:gap-4">
        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-[var(--accent)]/20 bg-[var(--accent-muted)] text-[var(--accent)]">
          <Settings className="h-5 w-5" />
        </div>
        <div className="min-w-0">
          <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">{t("title")}</h1>
          <p className="mt-1 text-sm text-[var(--text-muted)]">{t("subtitle")}</p>
        </div>
      </div>

      <div className="rounded-2xl border border-[var(--border)] bg-[var(--bg-elevated)]">
        <div className="flex flex-col lg:flex-row lg:items-stretch">
          <div className="border-b border-[var(--border)] p-3 lg:border-b-0 lg:p-0">
            <SettingsSidebar />
          </div>
          <div className="min-w-0 flex-1 p-4 sm:p-6 lg:p-7">{children}</div>
        </div>
      </div>
    </div>
  );
}