'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import {
  Ticket,
  LayoutDashboard,
  List,
  Plus,
  Settings,
  FolderTree,
  Users,
  BarChart3,
} from 'lucide-react';

/**
 * 工单系统布局 - 包含左侧二级导航
 * 遵循 APP_NAVIGATION_ARCHITECTURE.md 规范
 */
export default function TicketsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();

  // 定义二级导航 Tabs（带权限控制）
  const tabs = [
    {
      id: 'overview',
      name: t.tickets.nav.overview,
      path: '/tickets',
      icon: LayoutDashboard,
    },
    {
      id: 'list',
      name: t.tickets.nav.list,
      path: '/tickets/list',
      icon: List,
    },
    {
      id: 'my',
      name: t.tickets.nav.my,
      path: '/tickets/my',
      icon: Ticket,
    },
    {
      id: 'new',
      name: t.tickets.nav.new,
      path: '/tickets/new',
      icon: Plus,
    },
  ];

  // 管理菜单
  const adminTabs = [
    {
      id: 'categories',
      name: t.tickets.admin.categories,
      path: '/tickets/admin/categories',
      icon: FolderTree,
      requirePermission: 'ticket:admin',
    },
    {
      id: 'groups',
      name: t.tickets.admin.groups,
      path: '/tickets/admin/groups',
      icon: Users,
      requirePermission: 'ticket:admin',
    },
    {
      id: 'stats',
      name: t.tickets.admin.stats,
      path: '/tickets/admin/stats',
      icon: BarChart3,
      requirePermission: 'ticket:stats',
    },
  ];

  // 过滤有权限的 tabs
  const visibleAdminTabs = adminTabs.filter(tab => {
    if (tab.requirePermission) {
      return isAdmin || hasPermission(tab.requirePermission);
    }
    return true;
  });

  const isActive = (path: string) => {
    if (path === '/tickets') {
      return pathname === '/tickets';
    }
    return pathname.startsWith(path);
  };

  return (
    <div className="h-full flex">
      {/* 左侧二级导航 - 飞书/钉钉风格 */}
      <div 
        className="w-56 bg-white flex flex-col border-r"
        style={{ borderColor: 'var(--border-color)' }}
      >
        {/* 应用标题 */}
        <div className="border-b" style={{ borderColor: 'var(--border-color)' }}>
          <div className="h-12 flex items-center px-4">
            <Ticket className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.tickets.title}
            </h2>
          </div>
        </div>

        {/* Tab 导航 */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          {/* 主要菜单 */}
          <div className="space-y-1">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              const active = isActive(tab.path);
              
              return (
                <button
                  key={tab.id}
                  onClick={() => router.push(tab.path)}
                  className={`
                    w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors
                    ${active
                      ? 'bg-blue-50 text-blue-600'
                      : 'text-gray-700 hover:bg-gray-50'
                    }
                  `}
                >
                  <Icon className="w-4 h-4 mr-3" />
                  <span>{tab.name}</span>
                </button>
              );
            })}
          </div>

          {/* 管理菜单分隔线 */}
          {visibleAdminTabs.length > 0 && (
            <>
              <div className="my-4 border-t" style={{ borderColor: 'var(--border-color)' }} />
              <div className="px-3 mb-2">
                <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">
                  {t.common?.admin || '管理'}
                </span>
              </div>
              <div className="space-y-1">
                {visibleAdminTabs.map((tab) => {
                  const Icon = tab.icon;
                  const active = isActive(tab.path);
                  
                  return (
                    <button
                      key={tab.id}
                      onClick={() => router.push(tab.path)}
                      className={`
                        w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors
                        ${active
                          ? 'bg-blue-50 text-blue-600'
                          : 'text-gray-700 hover:bg-gray-50'
                        }
                      `}
                    >
                      <Icon className="w-4 h-4 mr-3" />
                      <span>{tab.name}</span>
                    </button>
                  );
                })}
              </div>
            </>
          )}
        </nav>
      </div>

      {/* 右侧内容区域 */}
      <div className="flex-1 overflow-auto bg-gray-50">
        {children}
      </div>
    </div>
  );
}