import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'
import { AnimatePresence, motion } from 'framer-motion'
import CommandPalette from '@/components/CommandPalette'
import {
  LayoutDashboard, Users, Shield, MessageSquare, FolderTree, Leaf,
  LogOut, ChevronDown, Menu, FileText, Settings, Book, Home, Monitor,
  Hash, Folder, ChevronRight, Search, Bell, ChevronLeft, Bot, Radio,
  Image, Music, ScrollText, Sun, Moon, Trophy, Award, Star, Gift, List,
} from 'lucide-react'
import { useState, useMemo, useEffect } from 'react'
import { useAuthStore } from '@/store/auth'
import { useAppStore } from '@/store/app'
import type { SystemMenu } from '@/api/system'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { ScrollArea } from '@/components/ui/scroll-area'
import TabBar from '@/components/TabBar'
import {
  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { cn } from '@/lib/utils'

// Icon mapping
const iconMap: Record<string, React.ReactNode> = {
  dashboard: <LayoutDashboard className="h-4 w-4" />,
  home: <Home className="h-4 w-4" />,
  user: <Users className="h-4 w-4" />,
  users: <Users className="h-4 w-4" />,
  role: <Shield className="h-4 w-4" />,
  shield: <Shield className="h-4 w-4" />,
  system: <Settings className="h-4 w-4" />,
  settings: <Settings className="h-4 w-4" />,
  topic: <MessageSquare className="h-4 w-4" />,
  message: <MessageSquare className="h-4 w-4" />,
  post: <FileText className="h-4 w-4" />,
  category: <FolderTree className="h-4 w-4" />,
  tree: <FolderTree className="h-4 w-4" />,
  plant: <Leaf className="h-4 w-4" />,
  leaf: <Leaf className="h-4 w-4" />,
  wiki: <Book className="h-4 w-4" />,
  book: <Book className="h-4 w-4" />,
  menu: <Menu className="h-4 w-4" />,
  monitor: <Monitor className="h-4 w-4" />,
  client: <Monitor className="h-4 w-4" />,
  hash: <Hash className="h-4 w-4" />,
  'file-text': <FileText className="h-4 w-4" />,
  folder: <Folder className="h-4 w-4" />,
  bot: <Bot className="h-4 w-4" />,
  ai: <Bot className="h-4 w-4" />,
  radio: <Radio className="h-4 w-4" />,
  image: <Image className="h-4 w-4" />,
  music: <Music className="h-4 w-4" />,
  scroll: <ScrollText className="h-4 w-4" />,
  log: <ScrollText className="h-4 w-4" />,
  trophy: <Trophy className="h-4 w-4" />,
  award: <Award className="h-4 w-4" />,
  star: <Star className="h-4 w-4" />,
  gift: <Gift className="h-4 w-4" />,
  list: <List className="h-4 w-4" />,
}

function getIcon(iconName?: string): React.ReactNode {
  if (!iconName) return <FileText className="h-4 w-4" />
  const lower = iconName.toLowerCase()
  for (const [key, icon] of Object.entries(iconMap)) {
    if (lower.includes(key)) return icon
  }
  return <FileText className="h-4 w-4" />
}

interface NavItem {
  title: string; href: string; icon: React.ReactNode
  permission?: string; children?: NavItem[]
}

function convertMenuToNavItem(menu: SystemMenu): NavItem {
  return {
    title: menu.title || menu.name,
    href: menu.path || menu.code || `/${menu.name.toLowerCase()}`,
    icon: getIcon(menu.icon),
    permission: menu.permission,
    children: menu.children?.filter(c => c.category !== 2).length ? menu.children.filter(c => c.category !== 2).map(convertMenuToNavItem) : undefined,
  }
}

// ==================== Nav Item ====================

function NavItemComponent({ item, collapsed, level = 0 }: { item: NavItem; collapsed: boolean; level?: number }) {
  const [open, setOpen] = useState(false)
  const hasPermission = useAuthStore(s => s.hasPermission)
  const location = useLocation()
  const hasActiveChild = item.children?.some(c => location.pathname.startsWith(c.href))

  useEffect(() => {
    if (hasActiveChild && !collapsed) setOpen(true)
  }, [hasActiveChild, collapsed])

  if (item.permission && !hasPermission(item.permission)) return null

  if (item.children?.length) {
    const visible = item.children.filter(c => !c.permission || hasPermission(c.permission))
    if (!visible.length) return null

    return (
      <div className="mb-1">
        <button onClick={() => setOpen(!open)}
          className={cn(
            'flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sidebar-foreground transition-all duration-300 hover:bg-sidebar-accent/60 group relative overflow-hidden',
            (open || hasActiveChild) && 'text-primary font-medium bg-sidebar-accent/30',
            level > 0 && 'text-[13px] py-2'
          )}>
          <span className={cn("transition-colors", (open || hasActiveChild) ? "text-primary" : "text-muted-foreground group-hover:text-primary")}>{item.icon}</span>
          {!collapsed && (
            <>
              <span className="flex-1 text-left line-clamp-1 text-sm">{item.title}</span>
              <ChevronDown className={cn('h-3.5 w-3.5 transition-transform text-muted-foreground/70', open && 'rotate-180 text-foreground')} />
            </>
          )}
        </button>
        {open && !collapsed && (
          <div className={cn('mt-1 space-y-0.5 relative', level === 0 ? 'ml-4 pl-3 border-l border-sidebar-border/50' : 'ml-3 pl-3 border-l border-sidebar-border/50')}>
            {visible.map(child => <NavItemComponent key={child.href} item={child} collapsed={collapsed} level={level + 1} />)}
          </div>
        )}
      </div>
    )
  }

  return (
    <NavLink to={item.href} end
      className={({ isActive }) => cn(
        'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sidebar-foreground transition-all duration-300 hover:bg-sidebar-accent/60 mb-1 group relative overflow-hidden',
        isActive && 'bg-primary/10 text-primary font-semibold',
        level > 0 && 'text-[13px] py-2'
      )}>
      <span className={cn("absolute left-0 top-1/2 -translate-y-1/2 w-1 h-0 bg-primary rounded-r-full transition-all duration-300", location.pathname === item.href && "h-3/5")} />
      {level === 0 && <span className="text-muted-foreground group-hover:text-primary transition-colors">{item.icon}</span>}
      {level > 0 && <span className={cn("w-1.5 h-1.5 rounded-full transition-all bg-current opacity-30 group-hover:opacity-70", location.pathname === item.href && "opacity-100 scale-110 bg-primary")} />}
      {!collapsed && <span className="text-sm line-clamp-1">{item.title}</span>}
    </NavLink>
  )
}

// ==================== Breadcrumb ====================

function Breadcrumb() {
  const location = useLocation()
  const menus = useAuthStore(s => s.menus)

  const breadcrumbs = useMemo(() => {
    const segments = location.pathname.split('/').filter(Boolean)
    const crumbs: { title: string; href: string }[] = []
    let currentPath = ''
    const findMenuItem = (items: SystemMenu[], target: string): SystemMenu | undefined => {
      for (const item of items) {
        if (item.path === target || item.code === target) return item
        if (item.children) { const found = findMenuItem(item.children, target); if (found) return found }
      }
    }
    segments.forEach(seg => {
      currentPath += `/${seg}`
      const menuItem = menus ? findMenuItem(menus, currentPath) : null
      crumbs.push({ title: menuItem ? (menuItem.title || menuItem.name) : seg.charAt(0).toUpperCase() + seg.slice(1), href: currentPath })
    })
    return crumbs
  }, [location.pathname, menus])

  if (!breadcrumbs.length) return null
  return (
    <div className="flex items-center text-sm">
      <NavLink to="/dashboard" className="flex items-center text-muted-foreground hover:text-foreground transition-colors"><Home className="h-4 w-4" /></NavLink>
      {breadcrumbs.length > 0 && <ChevronRight className="h-4 w-4 mx-2 text-muted-foreground/40" />}
      {breadcrumbs.map((crumb, i) => (
        <div key={crumb.href} className="flex items-center">
          {i > 0 && <ChevronRight className="h-4 w-4 mx-2 text-muted-foreground/40" />}
          <span className={cn("transition-colors", i === breadcrumbs.length - 1 ? "font-medium text-foreground" : "text-muted-foreground hover:text-foreground")}>
            {i === breadcrumbs.length - 1 ? crumb.title : <NavLink to={crumb.href}>{crumb.title}</NavLink>}
          </span>
        </div>
      ))}
    </div>
  )
}

// ==================== Layout ====================

export default function AdminLayout() {
  const { sidebarOpen, mobileMenuOpen, toggleSidebar, setMobileMenu } = useAppStore()
  const { user, logout, menus } = useAuthStore()
  const navigate = useNavigate()

  const navItems = useMemo(() => {
    if (menus?.length) return menus.filter(m => m.category !== 2).map(convertMenuToNavItem)
    return []
  }, [menus])

  const handleLogout = async () => { await logout(); navigate('/login') }

  return <LayoutShell sidebarOpen={sidebarOpen} mobileMenuOpen={mobileMenuOpen} toggleSidebar={toggleSidebar} setMobileMenu={setMobileMenu} navItems={navItems} user={user} onLogout={handleLogout} />
}

// ==================== Shell Render ====================

import { useRef } from 'react'

function LayoutShell({ sidebarOpen, mobileMenuOpen, toggleSidebar, setMobileMenu, navItems, user, onLogout }: {
  sidebarOpen: boolean; mobileMenuOpen: boolean; toggleSidebar: () => void; setMobileMenu: (v: boolean) => void
  navItems: NavItem[]; user: import('@/api/system').SystemUser | null; onLogout: () => void
}) {
  const { setCmdKOpen } = useAppStore()
  const location = useLocation()
  const spotlightRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (spotlightRef.current) {
        spotlightRef.current.style.background = `radial-gradient(600px circle at ${e.clientX}px ${e.clientY}px, rgba(6,182,212,0.25), transparent 40%)`
      }
    }
    window.addEventListener('mousemove', handleMouseMove)
    return () => window.removeEventListener('mousemove', handleMouseMove)
  }, [])

  return (
    <div className="flex min-h-screen bg-gradient-to-br from-slate-100 via-white to-cyan-50 dark:from-[#080d17] dark:via-[#080d17] dark:to-[#080d17] p-2 lg:p-3 gap-2 lg:gap-3 relative overflow-hidden">
      
      {/* Interactive Cursor Spotlight (Illuminates the glass as you move the mouse) */}
      <div 
        ref={spotlightRef}
        className="pointer-events-none fixed inset-0 z-0 transition-opacity duration-300 opacity-100 dark:opacity-60"
        style={{
          background: `radial-gradient(600px circle at -1000px -1000px, rgba(6,182,212,0.25), transparent 40%)`
        }}
      />

      {/* Global Ambient Background */}
      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
         {/* Cyan Glow Top Left */}
         <div className="absolute top-[-20%] left-[-10%] w-[50vw] h-[50vw] max-w-[800px] max-h-[800px] bg-cyan-200/40 dark:bg-cyan-600/20 rounded-full blur-[100px] dark:blur-[120px] mix-blend-multiply dark:mix-blend-screen" />
         {/* Purple Glow Bottom Right */}
         <div className="absolute bottom-[-20%] right-[-10%] w-[50vw] h-[50vw] max-w-[800px] max-h-[800px] bg-fuchsia-200/40 dark:bg-fuchsia-600/20 rounded-full blur-[100px] dark:blur-[120px] mix-blend-multiply dark:mix-blend-screen" />
         {/* Subtle Tech Grid */}
         <div className="absolute inset-0 opacity-[0.04] dark:opacity-[0.05]" style={{ backgroundImage: 'linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)', backgroundSize: '60px 60px' }} />
      </div>

      <CommandPalette />
      {/* Sidebar */}
      <aside className={cn(
        'fixed inset-y-2 lg:inset-y-3 left-2 lg:left-3 z-40 flex flex-col rounded-2xl border border-white/60 dark:border-white/10 bg-white/60 dark:bg-black/40 backdrop-blur-2xl shadow-lg transition-all duration-300 overflow-hidden',
        sidebarOpen ? 'w-[260px]' : 'w-20',
        mobileMenuOpen ? 'translate-x-0' : '-translate-x-[120%] lg:translate-x-0'
      )}>
        {/* Logo */}
        <div className="flex h-16 items-center justify-between px-5 shrink-0">
          <div className={cn("flex items-center gap-3 overflow-hidden transition-all", !sidebarOpen && "justify-center w-full")}>
            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm overflow-hidden border border-slate-200/60 dark:border-white/10">
              <img src="/logo.png" alt="Logo" className="w-full h-full object-cover" />
            </div>
            {sidebarOpen && <span className="font-bold text-lg tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 truncate">Sundynix Cloud</span>}
          </div>
        </div>
        {/* Nav */}
        <ScrollArea className="flex-1 px-3 py-4">
          <nav className="space-y-0.5">
            {navItems.map(item => <NavItemComponent key={item.href} item={item} collapsed={!sidebarOpen} />)}
          </nav>
        </ScrollArea>
        {/* User */}
        <div className="p-3 shrink-0 bg-sidebar-background/50 border-t border-white/10 dark:border-white/5">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <button className={cn("flex w-full items-center gap-3 rounded-xl p-2 transition-all duration-200 hover:bg-white/50 dark:hover:bg-white/5 outline-none", !sidebarOpen && "justify-center")}>
                <Avatar className="h-9 w-9 ring-2 ring-white/80 dark:ring-white/10 shadow-sm">
                  <AvatarImage src={user?.avatar?.url} alt={user?.name || user?.account} />
                  <AvatarFallback className="bg-emerald-100 text-emerald-700 text-xs font-bold">{(user?.name || user?.account)?.charAt(0).toUpperCase()}</AvatarFallback>
                </Avatar>
                {sidebarOpen && (
                  <div className="flex-1 text-left overflow-hidden">
                    <p className="text-sm font-semibold text-sidebar-foreground truncate leading-none mb-1.5">{user?.name || user?.account}</p>
                    <p className="text-[10px] text-muted-foreground truncate leading-none">管理员</p>
                  </div>
                )}
                {sidebarOpen && <ChevronDown className="h-4 w-4 text-muted-foreground/50" />}
              </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start" className="w-56" side="right" sideOffset={12}>
              <DropdownMenuLabel className="font-normal">
                <p className="text-sm font-medium leading-none">{user?.name}</p>
                <p className="text-xs leading-none text-muted-foreground mt-1">{user?.account}</p>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={onLogout} className="text-destructive cursor-pointer hover:bg-destructive/10 focus:bg-destructive/10">
                <LogOut className="mr-2 h-4 w-4" /> 退出登录
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </aside>

      {/* Mobile overlay */}
      {mobileMenuOpen && <div className="fixed inset-0 z-30 bg-black/60 backdrop-blur-sm lg:hidden animate-in fade-in duration-200" onClick={() => setMobileMenu(false)} />}

      {/* Main */}
      <div className={cn(
        'relative z-10 flex-1 flex flex-col min-h-[calc(100vh-1rem)] lg:min-h-[calc(100vh-1.5rem)] transition-all duration-300 bg-white/60 dark:bg-black/30 rounded-2xl border border-white/60 dark:border-white/10 shadow-xl overflow-hidden backdrop-blur-2xl',
        sidebarOpen ? 'lg:ml-[268px]' : 'lg:ml-[88px]'
      )}>
        {/* Header */}
        <header className="sticky top-0 z-20 flex h-16 items-center justify-between border-b border-white/30 dark:border-white/5 bg-white/30 dark:bg-black/10 backdrop-blur-md px-4 lg:px-6">
          <div className="flex items-center gap-4">
            <Button variant="ghost" size="icon" className="hidden lg:flex h-8 w-8 rounded-full hover:bg-white/50 dark:hover:bg-white/10" onClick={toggleSidebar}>
              {sidebarOpen ? <ChevronLeft className="h-4 w-4 text-muted-foreground" /> : <Menu className="h-4 w-4 text-muted-foreground" />}
            </Button>
            <Button variant="ghost" size="icon" className="lg:hidden h-8 w-8 rounded-full" onClick={() => setMobileMenu(!mobileMenuOpen)}>
              <Menu className="h-4 w-4" />
            </Button>
            <div className="hidden md:flex items-center gap-3">
              <div className="w-px h-4 bg-border/60 mx-1" />
              <Breadcrumb />
            </div>
          </div>
          <div className="flex items-center gap-3">
            <div className="hidden md:flex relative group cursor-pointer" onClick={() => setCmdKOpen(true)}>
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground group-focus-within:text-primary transition-colors" />
              <div className="flex items-center w-56 pl-9 pr-3 bg-white/50 dark:bg-black/20 border border-white/40 dark:border-white/10 hover:bg-white dark:hover:bg-slate-800 hover:border-primary/30 transition-all h-9 text-sm rounded-full shadow-sm text-muted-foreground">
                <span className="flex-1 text-left">搜索菜单...</span>
                <span className="text-[10px] border border-border px-1.5 rounded bg-background/50 leading-tight">⌘K</span>
              </div>
            </div>
            <Button variant="ghost" size="icon" className="relative rounded-full h-9 w-9 hover:bg-white/50 dark:hover:bg-white/10"
              onClick={() => document.documentElement.classList.toggle('dark')}>
              <Sun className="h-4 w-4 text-muted-foreground block dark:hidden" />
              <Moon className="h-4 w-4 text-muted-foreground hidden dark:block" />
            </Button>
            <Button variant="ghost" size="icon" className="relative rounded-full h-9 w-9 hover:bg-white/50 dark:hover:bg-white/10">
              <Bell className="h-4 w-4 text-muted-foreground" />
              <span className="absolute top-2.5 right-2.5 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-slate-900" />
            </Button>
          </div>
        </header>
        {/* TabBar */}
        <TabBar />
        {/* Content */}
        <ScrollArea className="flex-1">
          <main className="p-4 lg:p-6 relative z-0 min-h-full">
            <div className="mx-auto w-full max-w-[1600px] space-y-6">
              <AnimatePresence mode="wait">
                <motion.div
                  key={location.pathname}
                  initial={{ opacity: 0, y: 15 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -15 }}
                  transition={{ duration: 0.2 }}
                >
                  <Outlet />
                </motion.div>
              </AnimatePresence>
            </div>
          </main>
        </ScrollArea>
      </div>
    </div>
  )
}