'use client';

import { useEffect, useState } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import Link from 'next/link';
import { LayoutDashboard, FolderKanban, BookOpen, Settings, LogOut, MessageSquare, Briefcase, Award } from 'lucide-react';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
    const [loading, setLoading] = useState(true);
    const router = useRouter();
    const pathname = usePathname();

    useEffect(() => {
        const token = localStorage.getItem('token');
        if (!token) {
            router.push('/login');
        } else {
            setLoading(false);
        }
    }, [router]);

    if (loading) return <div className="min-h-screen bg-black flex items-center justify-center text-white">Verifying...</div>;

    const handleLogout = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('user');
        router.push('/login');
    };

    const menu = [
        { name: 'Dashboard', icon: LayoutDashboard, path: '/admin' },
        { name: 'Projects', icon: FolderKanban, path: '/admin/projects' },
        { name: 'Blog', icon: BookOpen, path: '/admin/blogs' },
        { name: 'Skills', icon: Award, path: '/admin/skills' },
        { name: 'Services', icon: Briefcase, path: '/admin/services' },
        { name: 'Messages', icon: MessageSquare, path: '/admin/messages' },
        { name: 'Settings', icon: Settings, path: '/admin/settings' },
    ];

    return (
        <div className="min-h-screen bg-[#070707] text-white flex">
            {/* Sidebar */}
            <aside className="w-64 border-r border-white/5 p-6 flex flex-col">
                <div className="text-2xl font-black gradient-text mb-12">ADMIN.</div>

                <nav className="flex-1 space-y-2">
                    {menu.map((item) => (
                        <Link
                            key={item.name}
                            href={item.path}
                            className={`flex items-center gap-4 px-4 py-3 rounded-xl transition-all ${pathname === item.path ? 'bg-blue-500/10 text-blue-400 font-bold border border-blue-500/20' : 'text-white/40 hover:text-white hover:bg-white/5'}`}
                        >
                            <item.icon size={20} />
                            <span className="text-sm">{item.name}</span>
                        </Link>
                    ))}
                </nav>

                <button
                    onClick={handleLogout}
                    className="flex items-center gap-4 px-4 py-3 rounded-xl text-red-500 hover:bg-red-500/10 transition-all mt-auto"
                >
                    <LogOut size={20} />
                    <span className="text-sm font-bold">Logout</span>
                </button>
            </aside>

            {/* Main Content */}
            <main className="flex-1 p-10 overflow-y-auto">
                {children}
            </main>
        </div>
    );
}