import { useState } from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useThemeStore, useMenuStore } from '@/store';
import {
  LayoutDashboard,
  Server,
  Cloud,
  Rocket,
  Bell,
  CheckSquare,
  PlayCircle,
  Settings,
  ChevronDown,
  ChevronRight,
  Terminal,
  Cpu,
  Database,
  FileCode,
  Shield,
  Users,
  Menu,
  X,
  Network,
  CloudCog,
  Globe,
  MapPin,
  Key,
  Brain,
  FileTerminal,
  Activity,
  BarChart3,
  GitBranch,
  Monitor,
  Bot,
  AlertTriangle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ScrollArea } from '@/components/ui/scroll-area';

interface MenuItem {
  id: string;
  name: string;
  icon: React.ElementType;
  path?: string;
  children?: MenuItem[];
}

const menuItems: MenuItem[] = [
  { id: 'dashboard', name: '仪表盘', icon: LayoutDashboard, path: '/' },
  {
    id: 'assets',
    name: '资产管理',
    icon: Server,
    children: [
      { id: 'servers', name: '服务器管理', icon: Database, path: '/servers' },
      { id: 'cloud-accounts', name: '云账号管理', icon: Key, path: '/cloud-accounts' },
      { id: 'domains', name: '域名管理', icon: Globe, path: '/domains' },
      { id: 'regions', name: '区域管理', icon: MapPin, path: '/regions' },
      { id: 'platforms', name: '云平台', icon: CloudCog, path: '/platforms' },
      { id: 'cloud-billing', name: '云账单', icon: BarChart3, path: '/cloud-billing' },
      { id: 'agent-monitor', name: 'Agent监控', icon: Activity, path: '/agent-monitor' },
    ],
  },
  {
    id: 'k8s',
    name: 'Kubernetes',
    icon: Cloud,
    children: [
      { id: 'clusters', name: '集群列表', icon: Cloud, path: '/clusters' },
      { id: 'nodes', name: '节点管理', icon: Cpu, path: '/nodes' },
      { id: 'workloads', name: '工作负载', icon: Database, path: '/workloads' },
      { id: 'topology', name: '架构拓扑', icon: Network, path: '/topology' },
    ],
  },
  {
    id: 'deploy',
    name: '应用发布',
    icon: Rocket,
    children: [
      { id: 'pipelines', name: '流水线管理', icon: GitBranch, path: '/pipelines' },
      { id: 'releases', name: '发布管理', icon: Rocket, path: '/releases' },
    ],
  },
  {
    id: 'monitor',
    name: '监控告警',
    icon: Bell,
    children: [
      { id: 'metrics', name: '指标监控', icon: Cpu, path: '/metrics' },
      { id: 'alert-center', name: '告警中心', icon: Bell, path: '/alert-center' },
      { id: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
      { id: 'grafana', name: '监控大屏', icon: Monitor, path: '/grafana' },
      { id: 'agent-alerts', name: 'Agent告警', icon: AlertTriangle, path: '/agent-alerts' },
    ],
  },
  {
    id: 'automation',
    name: '自动化运维',
    icon: PlayCircle,
    children: [
      { id: 'cronjobs', name: '定时任务', icon: PlayCircle, path: '/cronjobs' },
      { id: 'scripts', name: '脚本库', icon: FileCode, path: '/scripts' },
      { id: 'ansible', name: 'Ansible', icon: FileTerminal, path: '/ansible' },
    ],
  },
  {
    id: 'aiops',
    name: 'AIOps智能',
    icon: Brain,
    children: [
      { id: 'ai-assistant', name: '智能助手', icon: Bot, path: '/ai-assistant' },
      { id: 'ai-alert-analyzer', name: '告警分析', icon: AlertTriangle, path: '/ai-alert-analyzer' },
      { id: 'ai-predictive', name: '容量预测', icon: BarChart3, path: '/ai-predictive' },
    ],
  },
  { id: 'approval', name: '资源申请', icon: CheckSquare, path: '/approval' },
  {
    id: 'system',
    name: '系统管理',
    icon: Settings,
    children: [
      { id: 'users', name: '用户管理', icon: Users, path: '/users' },
      { id: 'roles', name: '角色权限', icon: Shield, path: '/roles' },
      { id: 'logs-audit', name: '操作审计', icon: FileCode, path: '/logs-audit' },
      { id: 'terminal-audit', name: '终端审计', icon: Terminal, path: '/terminal-audit' },
      { id: 'settings', name: '系统设置', icon: Settings, path: '/settings' },
    ],
  },
];

function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number }) {
  const location = useLocation();
  const { openMenus, toggleMenu, activeMenu, setActiveMenu } = useMenuStore();
  const { sidebarCollapsed } = useThemeStore();
  const hasChildren = item.children && item.children.length > 0;
  const isOpen = openMenus.includes(item.id);
  const isActive = item.path === location.pathname || activeMenu === item.id;

  const handleClick = () => {
    if (hasChildren) {
      toggleMenu(item.id);
    } else if (item.path) {
      setActiveMenu(item.id);
    }
  };

  if (sidebarCollapsed && depth === 0) {
    return (
      <div className="relative group">
        <Button
          variant={isActive ? 'secondary' : 'ghost'}
          size="icon"
          className={cn(
            'w-10 h-10 mx-auto mb-1',
            isActive && 'bg-blue-600/20 text-blue-400'
          )}
          asChild={!hasChildren}
        >
          {hasChildren ? (
            <span onClick={handleClick}>
              <item.icon className="h-5 w-5" />
            </span>
          ) : (
            <NavLink to={item.path || '#'} onClick={handleClick}>
              <item.icon className="h-5 w-5" />
            </NavLink>
          )}
        </Button>
        {/* Tooltip */}
        <div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-1.5 bg-slate-800 text-slate-100 text-sm rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 border border-slate-700">
          {item.name}
          {hasChildren && (
            <div className="absolute left-0 top-0 mt-2 ml-2 w-48 bg-slate-800 rounded-md border border-slate-700 shadow-lg py-1">
              {item.children?.map((child) => (
                <NavLink
                  key={child.id}
                  to={child.path || '#'}
                  className={({ isActive }) =>
                    cn(
                      'block px-4 py-2 text-sm hover:bg-slate-700 transition-colors',
                      isActive ? 'text-blue-400 bg-blue-600/10' : 'text-slate-300'
                    )
                  }
                >
                  {child.name}
                </NavLink>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className={cn('mb-0.5', depth > 0 && 'ml-4')}> 
      {hasChildren ? (
        <>
          <Button
            variant={isActive ? 'secondary' : 'ghost'}
            className={cn(
              'w-full justify-between h-9 px-3 text-sm font-normal',
              isActive ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800'
            )}
            onClick={handleClick}
          >
            <span className="flex items-center gap-2">
              <item.icon className="h-4 w-4" />
              <span>{item.name}</span>
            </span>
            {isOpen ? (
              <ChevronDown className="h-4 w-4 text-slate-500" />
            ) : (
              <ChevronRight className="h-4 w-4 text-slate-500" />
            )}
          </Button>
          {isOpen && (
            <div className="mt-0.5 space-y-0.5">
              {item.children?.map((child) => (
                <NavLink
                  key={child.id}
                  to={child.path || '#'}
                  onClick={() => setActiveMenu(child.id)}
                  className={({ isActive }) =>
                    cn(
                      'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
                      isActive
                        ? 'bg-blue-600/20 text-blue-400'
                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800'
                    )
                  }
                >
                  <child.icon className="h-3.5 w-3.5" />
                  <span>{child.name}</span>
                </NavLink>
              ))}
            </div>
          )}
        </>
      ) : (
        <NavLink
          to={item.path || '#'}
          onClick={handleClick}
          className={({ isActive }) =>
            cn(
              'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
              isActive
                ? 'bg-blue-600/20 text-blue-400'
                : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800'
            )
          }
        >
          <item.icon className="h-4 w-4" />
          <span>{item.name}</span>
        </NavLink>
      )}
    </div>
  );
}

export function Sidebar() {
  const { sidebarCollapsed, toggleSidebar } = useThemeStore();

  return (
    <aside
      className={cn(
        'fixed left-0 top-0 z-40 h-screen bg-slate-900 border-r border-slate-800 transition-all duration-300',
        sidebarCollapsed ? 'w-16' : 'w-64'
      )}
    >
      {/* Logo */}
      <div className="flex items-center justify-between h-14 px-4 border-b border-slate-800">
        {!sidebarCollapsed && (
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
              <Cloud className="h-5 w-5 text-white" />
            </div>
            <span className="font-semibold text-slate-100">AIOps平台</span>
          </div>
        )}
        {sidebarCollapsed && (
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mx-auto">
            <Cloud className="h-5 w-5 text-white" />
          </div>
        )}
        {!sidebarCollapsed && (
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 text-slate-400 hover:text-slate-100"
            onClick={toggleSidebar}
          >
            <Menu className="h-4 w-4" />
          </Button>
        )}
      </div>

      {/* Menu */}
      <ScrollArea className="h-[calc(100vh-3.5rem)]">
        <div className={cn('p-2', sidebarCollapsed && 'px-1')}>
          {menuItems.map((item) => (
            <MenuItemComponent key={item.id} item={item} />
          ))}
        </div>
      </ScrollArea>
    </aside>
  );
}