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

import { UserAuthGuard } from "@/components/user/user-auth-guard";
import { UserHeaderInfo } from "@/components/user/user-header-info";
import { UserHeaderUser } from "@/components/user/user-header-user";
import { UserSidebar } from "@/components/user/user-sidebar";
import { AppLogo } from "@/components/app-logo";

export const metadata: Metadata = {
  title: "Espace utilisateur - SyndicPro",
  description: "Espace personnel du copropriétaire",
};

export default function UserLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <UserAuthGuard>
      <div className="flex h-[100dvh] min-h-0 flex-col overflow-hidden bg-muted/40">
        <header className="sticky top-0 z-20 shrink-0 border-b border-border/60 bg-card/80 backdrop-blur-md">
          <div className="flex h-14 w-full min-w-0 items-center justify-between gap-3 px-4 sm:h-16 sm:px-6">
            <UserHeaderInfo />
            <div className="flex shrink-0 items-center gap-2 sm:gap-3">
              <UserHeaderUser />
            </div>
          </div>
        </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-64 md:shrink-0 md:border-b-0 md:border-r md:min-h-0 md:overflow-y-auto">
            <Link
              href="/user"
              className="flex items-center gap-3 border-b border-border/60 px-5 py-4 transition-colors hover:bg-muted/50"
            >
              <AppLogo />
            </Link>
            <UserSidebar />
          </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>
    </UserAuthGuard>
  );
}