import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import Head from 'next/head';
import { 
  HomeIcon, 
  UsersIcon, 
  PhoneIcon, 
  CalendarIcon,
  DocumentTextIcon,
  CurrencyDollarIcon,
  ChartBarIcon,
  CogIcon,
  BellIcon,
  UserGroupIcon,
  ClipboardDocumentListIcon,
  Bars3Icon,
  XMarkIcon,
  BuildingOfficeIcon,
  FolderIcon,
  DocumentIcon,
  ReceiptPercentIcon,
  ChevronDownIcon,
  ChevronRightIcon,
  LanguageIcon,
  ArrowRightOnRectangleIcon
} from '@heroicons/react/24/outline';

interface DashboardLayoutProps {
  children: React.ReactNode;
  title?: string;
}

const navigation = [
  { name: '仪表盘', href: '/dashboard', icon: HomeIcon },
  { name: '用户管理', href: '/dashboard/users', icon: UsersIcon },
  { name: '翻译员管理', href: '/dashboard/interpreters', icon: LanguageIcon },
  { 
    name: '订单管理', 
    icon: DocumentTextIcon,
    children: [
      { name: '订单列表', href: '/dashboard/orders' },
      { name: '发票管理', href: '/dashboard/invoices' }
    ]
  },
  { name: '通话记录', href: '/dashboard/calls', icon: PhoneIcon },
  { name: '企业服务', href: '/dashboard/enterprise', icon: BuildingOfficeIcon },
  { name: '文档管理', href: '/dashboard/documents', icon: FolderIcon },
  { name: '系统设置', href: '/dashboard/settings', icon: CogIcon },
];

export default function DashboardLayout({ children, title = '管理后台' }: DashboardLayoutProps) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [isDemoMode, setIsDemoMode] = useState(true); // 始终启用演示模式
  const [expandedItems, setExpandedItems] = useState<string[]>([]);
  const router = useRouter();

  useEffect(() => {
    // 演示模式始终启用
    setIsDemoMode(true);
  }, []);

  const handleLogout = () => {
    // 清除本地存储并跳转到登录页
    localStorage.removeItem('access_token');
    localStorage.removeItem('user');
    router.push('/auth/login');
  };

  const toggleExpanded = (itemName: string) => {
    setExpandedItems(prev => 
      prev.includes(itemName) 
        ? prev.filter(name => name !== itemName)
        : [...prev, itemName]
    );
  };

  const isItemActive = (item: any) => {
    if (item.href) {
      return router.pathname === item.href;
    }
    if (item.children) {
      return item.children.some((child: any) => router.pathname === child.href);
    }
    return false;
  };

  const renderNavItem = (item: any) => {
    const hasChildren = item.children && item.children.length > 0;
    const isActive = isItemActive(item);
    const isExpanded = expandedItems.includes(item.name);

    if (hasChildren) {
      return (
        <div key={item.name}>
          <button
            onClick={() => toggleExpanded(item.name)}
            className={`${
              isActive
                ? 'bg-blue-100 text-blue-900'
                : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
            } group flex items-center w-full px-2 py-2 text-sm font-medium rounded-md`}
          >
            <item.icon
              className={`${
                isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
              } mr-3 flex-shrink-0 h-6 w-6`}
            />
            {item.name}
            {isExpanded ? (
              <ChevronDownIcon className="ml-auto h-4 w-4" />
            ) : (
              <ChevronRightIcon className="ml-auto h-4 w-4" />
            )}
          </button>
          {isExpanded && (
            <div className="ml-8 mt-1 space-y-1">
              {item.children.map((child: any) => (
                <Link
                  key={child.name}
                  href={child.href}
                  className={`${
                    router.pathname === child.href
                      ? 'bg-blue-50 text-blue-700 border-r-2 border-blue-500'
                      : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
                  } group flex items-center px-2 py-2 text-sm font-medium rounded-md`}
                >
                  {child.name}
                </Link>
              ))}
            </div>
          )}
        </div>
      );
    }

    return (
      <Link
        key={item.name}
        href={item.href}
        className={`${
          isActive
            ? 'bg-blue-100 text-blue-900'
            : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'
        } group flex items-center px-2 py-2 text-sm font-medium rounded-md`}
      >
        <item.icon
          className={`${
            isActive ? 'text-blue-500' : 'text-gray-400 group-hover:text-gray-500'
          } mr-3 flex-shrink-0 h-6 w-6`}
        />
        {item.name}
      </Link>
    );
  };

  return (
    <>
      <Head>
        <title>{title} - 口译服务管理平台</title>
        <meta name="description" content="口译服务管理平台管理后台" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="h-screen flex overflow-hidden bg-gray-100">
        {/* 移动端侧边栏 */}
        <div className={`fixed inset-0 flex z-40 md:hidden ${sidebarOpen ? '' : 'hidden'}`}>
          <div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
          <div className="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-white">
            <div className="absolute top-0 right-0 -mr-12 pt-2">
              <button
                type="button"
                className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
                onClick={() => setSidebarOpen(false)}
              >
                <XMarkIcon className="h-6 w-6 text-white" />
              </button>
            </div>
            <div className="flex-shrink-0 flex items-center px-4">
              <h1 className="text-xl font-bold text-gray-900">口译管理系统</h1>
              {isDemoMode && (
                <span className="ml-2 px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                  演示模式
                </span>
              )}
            </div>
            <div className="mt-5 flex-1 h-0 overflow-y-auto">
              <nav className="px-2 space-y-1">
                {navigation.map(renderNavItem)}
              </nav>
            </div>
            <div className="flex-shrink-0 p-4 border-t border-gray-200">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                  <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center">
                    <span className="text-sm font-medium text-white">管</span>
                  </div>
                </div>
                <div className="ml-3">
                  <p className="text-sm font-medium text-gray-700">管理员</p>
                  <p className="text-xs text-gray-500">admin@demo.com</p>
                </div>
              </div>
              <button
                onClick={handleLogout}
                className="mt-3 w-full bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-2 rounded-md text-sm font-medium flex items-center justify-center"
              >
                <ArrowRightOnRectangleIcon className="h-4 w-4 mr-2" />
                退出登录
              </button>
            </div>
          </div>
        </div>

        {/* 桌面端侧边栏 */}
        <div className="hidden md:flex md:flex-shrink-0">
          <div className="flex flex-col w-64">
            <div className="flex flex-col h-0 flex-1">
              <div className="flex items-center h-16 flex-shrink-0 px-4 bg-white border-b border-gray-200">
                <h1 className="text-xl font-bold text-gray-900">口译管理系统</h1>
                {isDemoMode && (
                  <span className="ml-2 px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                    演示模式
                  </span>
                )}
              </div>
              <div className="flex-1 flex flex-col overflow-y-auto bg-white border-r border-gray-200">
                <nav className="flex-1 px-2 py-4 space-y-1">
                  {navigation.map(renderNavItem)}
                </nav>
                <div className="flex-shrink-0 p-4 border-t border-gray-200">
                  <div className="flex items-center">
                    <div className="flex-shrink-0">
                      <div className="h-8 w-8 rounded-full bg-blue-500 flex items-center justify-center">
                        <span className="text-sm font-medium text-white">管</span>
                      </div>
                    </div>
                    <div className="ml-3">
                      <p className="text-sm font-medium text-gray-700">管理员</p>
                      <p className="text-xs text-gray-500">admin@demo.com</p>
                    </div>
                  </div>
                  <button
                    onClick={handleLogout}
                    className="mt-3 w-full bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-2 rounded-md text-sm font-medium flex items-center justify-center"
                  >
                    <ArrowRightOnRectangleIcon className="h-4 w-4 mr-2" />
                    退出登录
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 主内容区域 */}
        <div className="flex flex-col w-0 flex-1 overflow-hidden">
          <div className="relative z-10 flex-shrink-0 flex h-16 bg-white shadow md:hidden">
            <button
              type="button"
              className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 md:hidden"
              onClick={() => setSidebarOpen(true)}
            >
              <Bars3Icon className="h-6 w-6" />
            </button>
            <div className="flex-1 px-4 flex justify-between items-center">
              <h1 className="text-lg font-semibold text-gray-900">{title}</h1>
              {isDemoMode && (
                <span className="px-2 py-1 text-xs bg-green-100 text-green-800 rounded-full">
                  演示模式
                </span>
              )}
            </div>
          </div>

          <main className="flex-1 relative overflow-y-auto focus:outline-none">
            <div className="py-6">
              <div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
                {children}
              </div>
            </div>
          </main>
        </div>
      </div>
    </>
  );
}