"use client";

import React from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();

  if (pathname === '/admin/login') {
    return <>{children}</>;
  }

  const handleLogout = async () => {
    document.cookie = "admin_session=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    router.push('/admin/login');
    router.refresh();
  };

  const navItems = [
    { name: 'Projeler', href: '/admin/projects' },
  ];

  return (
    <div className="min-h-screen bg-[#050505] text-white flex font-sans selection:bg-cyan-500/30">
      {/* Sidebar */}
      <motion.aside 
        initial={{ x: -100, opacity: 0 }}
        animate={{ x: 0, opacity: 1 }}
        className="w-64 border-r border-white/10 bg-black/40 backdrop-blur-xl p-6 flex flex-col gap-8 sticky top-0 h-screen z-20"
      >
        <div className="flex items-center gap-3 px-2">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/20 flex items-center justify-center font-bold text-lg">A</div>
          <span className="text-xl font-bold tracking-tight">AYCANUR <span className="text-cyan-400 text-[10px] font-mono ml-1 uppercase">Admin</span></span>
        </div>

        <nav className="flex flex-col gap-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
                  ${isActive 
                    ? 'bg-gradient-to-r from-cyan-500/10 to-transparent text-cyan-400 border-l-2 border-cyan-500' 
                    : 'text-gray-400 hover:text-white hover:bg-white/5'}`}
              >
                <div className={`w-1.5 h-1.5 rounded-full transition-all duration-300 
                  ${isActive ? 'bg-cyan-400 scale-110 shadow-[0_0_8px_rgba(34,211,238,0.8)]' : 'bg-transparent'}`} 
                />
                <span className="font-medium">{item.name}</span>
              </Link>
            );
          })}
          
          <button
            onClick={handleLogout}
            className="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 text-gray-500 hover:text-rose-400 hover:bg-rose-500/5 mt-4 group"
          >
            <div className="w-1.5 h-1.5 rounded-full bg-transparent group-hover:bg-rose-400" />
            <span className="font-medium">Çıkış Yap</span>
          </button>
        </nav>

        <div className="mt-auto bg-gradient-to-br from-white/5 to-transparent p-4 rounded-2xl border border-white/5">
          <p className="text-[10px] text-gray-500 mb-2 font-mono uppercase tracking-widest">Sistem Durumu</p>
          <div className="flex items-center gap-2">
            <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            <p className="text-xs text-emerald-400">Tüm sistemler aktif</p>
          </div>
        </div>
      </motion.aside>

      {/* Main Content Area */}
      <div className="flex-1 relative">
        <div className="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden -z-10">
          <div className="absolute top-[-10%] right-[-5%] w-[40%] h-[40%] bg-cyan-500/10 rounded-full blur-[120px]" />
          <div className="absolute bottom-[-10%] left-[-5%] w-[30%] h-[30%] bg-purple-500/10 rounded-full blur-[120px]" />
        </div>
        
        <main className="min-h-screen p-8 overflow-y-auto">
          {children}
        </main>
      </div>

      <style jsx global>{`
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
      `}</style>
    </div>
  );
}