'use client';

import { useState } from 'react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import { useAuth } from './auth-context';
import {
  LayoutDashboard,
  FileText,
  Briefcase,
  Box,
  Layers,
  Image,
  BarChart3,
  Newspaper,
  LogOut,
  Menu,
  X,
  ChevronDown,
  Settings,
  Users,
  Phone,
  Shield,
  UserCog,
  Bell,
} from 'lucide-react';

const menuItems = [
  {
    label: '内容管理',
    icon: FileText,
    children: [
      { label: '新闻资讯', href: '/admin/content/news', icon: Newspaper },
      { label: '案例研究', href: '/admin/content/case-study', icon: Briefcase },
      { label: '服务管理', href: '/admin/content/service', icon: Settings },
      { label: '产品管理', href: '/admin/content/product', icon: Box },
      { label: '解决方案', href: '/admin/content/solution', icon: Layers },
      { label: 'Hero Banner', href: '/admin/content/hero-banner', icon: Image },
      { label: '数据指标', href: '/admin/content/stat-item', icon: BarChart3 },
    ],
  },
  {
    label: '页面管理',
    icon: FileText,
    children: [
      { label: '关于我们', href: '/admin/content/about-page', icon: Users },
      { label: '团队介绍', href: '/admin/content/team-page', icon: Users },
      { label: '联系我们', href: '/admin/content/contact-page', icon: Phone },
      { label: '法律页面', href: '/admin/content/legal-page', icon: Shield },
    ],
  },
  {
    label: '页面配置',
    icon: Layers,
    children: [
      { label: '首页区域', href: '/admin/zones', icon: LayoutDashboard },
    ],
  },
  {
    label: '资源管理',
    icon: Image,
    children: [
      { label: '媒体库', href: '/admin/media', icon: Image },
    ],
  },
  {
    label: '系统管理',
    icon: Shield,
    children: [
      { label: '用户管理', href: '/admin/users', icon: Users },
      { label: '角色权限', href: '/admin/roles', icon: UserCog },
    ],
  },
  {
    label: '通知',
    icon: Bell,
    children: [
      { label: '通知中心', href: '/admin/notifications', icon: Bell },
    ],
  },
];

export function AdminLayout({ children }: { children: React.ReactNode }) {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [expandedMenus, setExpandedMenus] = useState<Set<string>>(new Set(['内容管理']));
  const { user, logout } = useAuth();
  const pathname = usePathname();
  const router = useRouter();

  const toggleMenu = (label: string) => {
    setExpandedMenus((prev) => {
      const next = new Set(prev);
      if (next.has(label)) next.delete(label);
      else next.add(label);
      return next;
    });
  };

  const handleLogout = () => {
    logout();
    router.push('/admin/login');
  };

  const isActive = (href: string) => pathname === href || pathname?.startsWith(href + '/');

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Mobile overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <aside
        className={`fixed top-0 left-0 z-50 h-full w-64 bg-white border-r border-gray-200 transform transition-transform duration-200 ease-in-out lg:translate-x-0 ${
          sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="flex items-center justify-between h-16 px-4 border-b border-gray-200">
          <Link href="/admin" className="flex items-center gap-2">
            <span className="text-lg font-bold text-gray-900">Novalon CMS</span>
          </Link>
          <button
            onClick={() => setSidebarOpen(false)}
            className="lg:hidden p-1 rounded hover:bg-gray-100"
          >
            <X className="w-5 h-5" />
          </button>
        </div>

        <nav className="flex-1 overflow-y-auto p-3 space-y-1">
          {/* Dashboard */}
          <Link
            href="/admin"
            className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
              pathname === '/admin'
                ? 'bg-gray-900 text-white'
                : 'text-gray-600 hover:bg-gray-100'
            }`}
          >
            <LayoutDashboard className="w-4 h-4" />
            仪表盘
          </Link>

          {/* Menu groups */}
          {menuItems.map((group) => (
            <div key={group.label}>
              <button
                onClick={() => toggleMenu(group.label)}
                className="flex items-center justify-between w-full px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors"
              >
                <span className="flex items-center gap-3">
                  <group.icon className="w-4 h-4" />
                  {group.label}
                </span>
                <ChevronDown
                  className={`w-4 h-4 transition-transform ${
                    expandedMenus.has(group.label) ? 'rotate-180' : ''
                  }`}
                />
              </button>

              {expandedMenus.has(group.label) && (
                <div className="ml-4 mt-1 space-y-1">
                  {group.children.map((item) => (
                    <Link
                      key={item.href}
                      href={item.href}
                      className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${
                        isActive(item.href)
                          ? 'bg-gray-900 text-white'
                          : 'text-gray-500 hover:bg-gray-100'
                      }`}
                    >
                      <item.icon className="w-3.5 h-3.5" />
                      {item.label}
                    </Link>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* User info */}
        <div className="border-t border-gray-200 p-3">
          <div className="flex items-center gap-3 px-3 py-2">
            <div className="w-8 h-8 rounded-full bg-gray-900 text-white flex items-center justify-center text-sm font-medium">
              {user?.nickname?.charAt(0) || 'A'}
            </div>
            <div className="flex-1 min-w-0">
              <p className="text-sm font-medium text-gray-900 truncate">
                {user?.nickname || user?.username}
              </p>
              <p className="text-xs text-gray-500">{user?.role === 'admin' ? '管理员' : '编辑'}</p>
            </div>
            <button
              onClick={handleLogout}
              className="p-1.5 rounded hover:bg-gray-100 text-gray-400 hover:text-red-500 transition-colors"
              title="退出登录"
            >
              <LogOut className="w-4 h-4" />
            </button>
          </div>
        </div>
      </aside>

      {/* Main content */}
      <div className="lg:pl-64">
        {/* Top bar */}
        <header className="sticky top-0 z-30 h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 lg:px-6">
          <button
            onClick={() => setSidebarOpen(true)}
            className="lg:hidden p-2 rounded hover:bg-gray-100"
          >
            <Menu className="w-5 h-5" />
          </button>

          <div className="flex-1" />

          <div className="flex items-center gap-4">
            <Link
              href="/"
              target="_blank"
              className="text-sm text-gray-500 hover:text-gray-700 transition-colors"
            >
              查看网站
            </Link>
          </div>
        </header>

        {/* Page content */}
        <main className="p-4 lg:p-6">{children}</main>
      </div>
    </div>
  );
}