import { Inter } from "next/font/google";
import "@/app/globals.css";
import { cookies } from "next/headers";
import { logout } from "@/app/actions/auth";
import Link from "next/link";
import SidebarNav from "./components/SidebarNav";
import { User, LogOut } from "lucide-react";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Admin Panel - Kite Beach",
  description: "Kite Beach Akyaka Admin Paneli",
};

export default async function AdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const cookieStore = await cookies();
  const isLoggedIn = cookieStore.get("admin_session")?.value === "true";

  return (
    <html lang="tr" suppressHydrationWarning>
      <body className={`${inter.className} bg-[#f8f9fa] text-gray-900 min-h-screen flex flex-col`} suppressHydrationWarning>
        {isLoggedIn ? (
          <div className="flex flex-1 min-h-screen">
            {/* Sidebar (Dark Glassmorphism) */}
            <aside className="w-72 bg-dark/95 backdrop-blur-xl border-r border-white/10 text-white flex flex-col shadow-2xl z-20">
              <div className="p-8 flex items-center justify-center border-b border-white/5">
                <span className="font-serif font-black tracking-widest uppercase text-2xl text-transparent bg-clip-text bg-gradient-to-r from-white to-white/60">
                  Kite Beach
                </span>
              </div>
              
              <SidebarNav />

              <div className="p-6 border-t border-white/5 bg-white/5">
                <form action={logout}>
                  <button type="submit" className="w-full flex items-center justify-center gap-3 bg-red-500/10 hover:bg-red-500/20 text-red-400 hover:text-red-300 px-4 py-3 rounded-xl transition-all duration-300 group font-medium text-sm tracking-wide">
                    <LogOut className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
                    Oturumu Kapat
                  </button>
                </form>
              </div>
            </aside>
            
            {/* Main Content */}
            <main className="flex-1 flex flex-col overflow-auto relative">
              {/* Decorative Background Blob */}
              <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-primary/5 rounded-full blur-[120px] pointer-events-none" />

              <header className="bg-white/70 backdrop-blur-lg p-5 flex justify-between items-center border-b border-gray-100 sticky top-0 z-10">
                <div className="text-gray-500 text-sm font-medium">Hoş Geldiniz, Yönetici</div>
                <div className="flex items-center gap-3">
                  <div className="w-9 h-9 rounded-full bg-accent/10 flex items-center justify-center text-accent">
                    <User className="w-5 h-5" />
                  </div>
                </div>
              </header>
              
              <div className="p-8 relative z-0 animate-fade-up">
                {children}
              </div>
            </main>
          </div>
        ) : (
          <main className="flex-grow flex flex-col">
            {children}
          </main>
        )}
      </body>
    </html>
  );
}
