import { Outlet, Navigate, useNavigate, Link, useLocation } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';
import { logoutApi } from '../api/auth';
import {
    LayoutDashboard,
    ListMusic,
    Mic2,
    Disc3,
    FolderOpen,
    LogOut,
    User as UserIcon,
    ChevronDown,
    Crown
} from 'lucide-react';
import { Button } from '../components/ui/button';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "../components/ui/dropdown-menu"
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"

export default function AdminLayout() {
    const token = useAuthStore((state) => state.token);
    const userInfo = useAuthStore((state) => state.userInfo);
    const logout = useAuthStore((state) => state.logout);
    const navigate = useNavigate();
    const location = useLocation();

    if (!token) {
        return <Navigate to="/login" replace />;
    }

    const handleLogout = async () => {
        try {
            await logoutApi();
        } catch (e) {
            console.warn('登出失败');
        }
        logout();
        navigate('/login');
    };

    const navItems = [
        { name: '工作台', path: '/', icon: LayoutDashboard },
        { name: '频道分类', path: '/radio/category', icon: ListMusic },
        { name: '频道管理', path: '/radio/channel', icon: Mic2 },
        { name: '节目管理', path: '/radio/program', icon: Disc3 },
        { name: 'VIP配置', path: '/radio/vip', icon: Crown },
        { name: '文件管理', path: '/system/oss', icon: FolderOpen },
    ];

    return (
        <div className="flex h-screen bg-[#FAF5E6] dark:bg-[#1A1A1A] overflow-hidden font-sans warm-noise">
            {/* Sidebar */}
            <aside className="fixed inset-y-0 left-0 z-50 w-64 sidebar-noise text-slate-100 hidden md:flex flex-col shadow-2xl border-r border-white/5">
                <div className="flex items-center h-20 px-6 border-b border-white/5 shrink-0">
                    <div className="w-12 h-12 rounded-2xl overflow-hidden mr-3 shadow-lg shadow-orange-500/20 ring-1 ring-white/20 flex items-center justify-center bg-white">
                        <img src="/favicon.jpg" alt="logo" className="w-full h-full object-cover p-1 bg-white" />
                    </div>
                    <div className="flex flex-col">
                        <span className="font-black text-lg tracking-tight leading-none text-white">全声汇</span>
                        <span className="text-[10px] uppercase tracking-[0.2em] text-white/40 mt-1">广播控制台</span>
                    </div>
                </div>

                <div className="flex-1 px-4 py-8 space-y-4 overflow-y-auto custom-scrollbar">
                    {navItems.map((item) => {
                        const isActive = location.pathname === item.path || (item.path !== '/' && location.pathname.startsWith(item.path));
                        return (
                            <Link key={item.path} to={item.path}>
                                <Button
                                    variant="ghost"
                                    className={`w-full justify-start h-12 px-4 rounded-2xl transition-all duration-300 group relative overflow-hidden ${isActive
                                        ? 'text-white bg-white/10 sidebar-halo'
                                        : 'text-white/50 hover:text-white hover:bg-white/5'
                                        }`}
                                >
                                    <item.icon className={`w-5 h-5 mr-3 shrink-0 transition-transform duration-300 ${isActive ? 'text-[#D28F4F]' : 'group-hover:text-[#D28F4F] group-hover:scale-110'}`} />
                                    <span className="font-bold tracking-wide">{item.name}</span>
                                    {isActive && (
                                        <div className="ml-auto w-1.5 h-1.5 rounded-full bg-[#D28F4F] shadow-[0_0_12px_#D28F4F]" />
                                    )}
                                </Button>
                            </Link>
                        )
                    })}
                </div>

                <div className="p-4 border-t border-white/5 shrink-0">
                    <div className="bg-white/5 backdrop-blur-md rounded-[2rem] p-4 flex items-center space-x-3 border border-white/10">
                        <div className="relative">
                            <Avatar className="h-10 w-10 ring-2 ring-white/10">
                                <AvatarImage src={userInfo?.avatar || ''} />
                                <AvatarFallback className="bg-white/10 text-white/80">
                                    <UserIcon className="w-5 h-5" />
                                </AvatarFallback>
                            </Avatar>
                            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-emerald-500 rounded-full border-2 border-[#263238] animate-pulse" />
                        </div>
                        <div className="flex-1 min-w-0">
                            <p className="text-sm font-black truncate text-white">{userInfo?.nickName || '管理员'}</p>
                            <p className="text-[10px] text-white/30 uppercase tracking-tighter truncate font-bold">{userInfo?.account || 'admin'}</p>
                        </div>
                    </div>
                </div>
            </aside>

            {/* Main Area */}
            <div className="flex-1 md:ml-64 flex flex-col h-full overflow-hidden relative">
                {/* Navbar */}
                <header className="h-20 flex items-center justify-between px-8 bg-[#FAF5E6]/60 dark:bg-black/40 backdrop-blur-xl border-b border-[#4A3A2C]/10 shrink-0 z-40 sticky top-0 warm-noise">
                    <div className="flex items-center space-x-4">
                        <div className="md:hidden">
                            <img src="/favicon.jpg" alt="logo" className="w-8 h-8 rounded-lg object-cover" />
                        </div>
                        <div className="flex flex-col">
                            <h2 className="text-[10px] font-black text-[#D28F4F]/60 uppercase tracking-[0.3em] leading-none mb-1">电台工作台</h2>
                            <p className="text-xl font-black tracking-tight text-[#4A3A2C]">
                                {navItems.find(i => i.path === location.pathname)?.name || '控制台'}
                            </p>
                        </div>
                    </div>
                    <div className="flex items-center space-x-6">
                        <div className="flex items-center space-x-2 bg-[#D28F4F]/5 border border-[#D28F4F]/10 px-4 py-2 rounded-2xl">
                            <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shadow-[0_0_8px_#10b981]" />
                            <span className="text-[10px] font-black text-[#8C7E6C] uppercase tracking-widest">系统在线</span>
                        </div>
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="ghost" className="h-12 px-2 rounded-2xl hover:bg-white/40 flex items-center space-x-3 transition-all">
                                    <Avatar className="h-10 w-10 ring-2 ring-[#D28F4F]/20 shadow-lg">
                                        <AvatarImage src={userInfo?.avatar || ''} />
                                        <AvatarFallback className="bg-[#FAF5E6]"><UserIcon className="text-[#D28F4F]" /></AvatarFallback>
                                    </Avatar>
                                    <ChevronDown className="w-4 h-4 text-[#8C7E6C]" />
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent className="w-64 mt-2 rounded-[2.5rem] p-2 glass-card warm-noise border-[#D28F4F]/10" align="end">
                                <DropdownMenuLabel className="font-normal px-4 py-6">
                                    <div className="flex flex-col space-y-1">
                                        <p className="text-lg font-black text-[#4A3A2C]">{userInfo?.nickName || '管理员'}</p>
                                        <p className="text-xs text-[#8C7E6C] font-bold tracking-wide">{userInfo?.account || 'admin'}</p>
                                    </div>
                                </DropdownMenuLabel>
                                <DropdownMenuSeparator className="bg-[#4A3A2C]/5" />
                                <DropdownMenuItem
                                    onClick={handleLogout}
                                    className="cursor-pointer text-rose-600 focus:bg-rose-50 focus:text-rose-700 rounded-2xl p-4 font-black transition-all"
                                >
                                    <LogOut className="mr-3 h-5 w-5" />
                                    <span>安全退出系统</span>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </div>
                </header>

                {/* Page Content */}
                <main className="flex-1 overflow-y-auto p-6 md:p-8 scroll-smooth relative">
                    <div className="absolute top-0 left-0 w-full h-[500px] bg-gradient-to-b from-[#D28F4F]/5 to-transparent pointer-events-none" />
                    <div className="max-w-7xl mx-auto h-full relative">
                        <Outlet />
                    </div>
                </main>
            </div>
        </div>
    );
}