import type { Metadata } from "next";
import Link from "next/link";

import { AdminAuthGuard } from "@/components/admin/admin-auth-guard";
import { AdminHeaderUser } from "@/components/admin/admin-header-user";
import { AdminNotificationBell } from "@/components/admin/admin-notification-bell";
import { AdminPeriodeSwitcher } from "@/components/admin/admin-periode-switcher";
import { AdminResidenceSwitcher } from "@/components/admin/admin-residence-switcher";
import { AdminSidebar } from "@/components/admin/admin-sidebar";
import { AppLogo } from "@/components/app-logo";

export const metadata: Metadata = {
  title: "Administration - SyndicPro",
  description: "Tableau de bord syndic",
};

export default function AdminLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <AdminAuthGuard>
    <div className="flex h-[100dvh] min-h-0 flex-col overflow-hidden bg-muted/40">
      <header className="sticky top-0 z-20 shrink-0 bg-white dark:bg-card shadow-[0_1px_4px_rgba(0,0,0,0.07)] border-b border-border/50">
        <div className="flex h-14 w-full min-w-0 items-center px-4 sm:h-[58px] sm:px-6">
          {/* Contexte : résidence + période */}
          <div className="flex min-w-0 flex-1 items-center gap-1.5">
            <AdminResidenceSwitcher />
            <span className="mx-0.5 h-5 w-px shrink-0 bg-border/70" aria-hidden />
            <AdminPeriodeSwitcher />
          </div>
          {/* Actions : notifications + compte */}
          <div className="flex shrink-0 items-center gap-1.5">
            <AdminNotificationBell />
            <span className="mx-0.5 h-5 w-px shrink-0 bg-border/70 hidden sm:block" aria-hidden />
            <AdminHeaderUser />
          </div>
        </div>
        {/* Ligne de gradient en bas */}
        <div className="h-px bg-gradient-to-r from-transparent via-primary/25 to-transparent" />
      </header>

      <div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
        <div className="flex shrink-0 flex-col border-b border-border/60 bg-card md:w-72 md:shrink-0 md:border-b-0 md:border-r md:min-h-0 md:overflow-y-auto">
          <Link
            href="/admin"
            className="flex items-center gap-3 border-b border-border/60 px-5 py-4 transition-colors hover:bg-muted/50"
          >
            <AppLogo />
          </Link>
          <AdminSidebar />
        </div>
        <div className="min-h-0 min-w-0 flex-1 overflow-y-auto">
          <div className="w-full px-4 py-6 sm:px-6 lg:px-8">{children}</div>
        </div>
      </div>
    </div>
    </AdminAuthGuard>
  );
}