import { ReactNode } from "react";
import { useLocation } from "react-router-dom";
import { Header } from "@/components/header";
import { PageTransition } from "@/components/PageTransition";

interface MainLayoutProps {
  children: ReactNode;
}

export function MainLayout({ children }: MainLayoutProps) {
  const location = useLocation();

  // Exclure le layout pour les pages d'authentification
  const authPages = ["/auth/login", "/auth/register"];

  if (authPages.includes(location.pathname)) {
    return <>{children}</>;
  }

  return (
    <div className="relative flex min-h-screen flex-col bg-gradient-to-b from-amber-50/60 via-orange-50/30 to-background dark:from-slate-950 dark:via-slate-950 dark:to-slate-900">
      {/* Texture ambiante discrète — taches colorées floues en arrière-plan */}
      <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
        <div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-orange-300/20 blur-3xl dark:bg-orange-900/10" />
        <div className="absolute top-1/3 -right-32 h-96 w-96 rounded-full bg-amber-300/20 blur-3xl dark:bg-amber-900/10" />
        <div className="absolute bottom-0 left-1/3 h-[500px] w-[500px] rounded-full bg-yellow-200/15 blur-3xl dark:bg-yellow-900/5" />
      </div>

      <Header />

      <main className="flex-1">
        <div className="mx-auto max-w-7xl">
          <PageTransition>{children}</PageTransition>
        </div>
      </main>

      <footer className="border-t border-border/40 backdrop-blur-sm bg-white/30 dark:bg-slate-950/30 safe-pb">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 md:h-16 md:py-0">
          <div className="flex flex-col items-center justify-between gap-4 md:flex-row">
            <p className="text-center text-xs sm:text-sm text-muted-foreground md:text-left">
              &copy; {new Date().getFullYear()} Freedge. Fait avec amour pour les gourmands.
            </p>
            <div className="flex items-center gap-5 text-xs sm:text-sm text-muted-foreground">
              <a href="#" className="hover:text-orange-600 transition-colors">Mentions légales</a>
              <a href="#" className="hover:text-orange-600 transition-colors">Confidentialité</a>
              <a href="#" className="hover:text-orange-600 transition-colors">Contact</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}
