'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import {
  Activity,
  LayoutDashboard,
  Search,
  AlertTriangle,
  Clock,
  GitBranch,
  Settings,
  Bell,
  BarChart3,
  HelpCircle,
  type LucideIcon,
} from 'lucide-react';

interface NavTab {
  id: string;
  name: string;
  path: string;
  icon: LucideIcon;
  requirePermission?: string;
}

/**
 * 一组导航 tab（带可选分组标题）
 */
function NavSection({
  tabs,
  groupLabel,
  isActive,
  onNavigate,
}: {
  tabs: NavTab[];
  groupLabel?: string;
  isActive: (path: string) => boolean;
  onNavigate: (path: string) => void;
}) {
  if (tabs.length === 0) return null;

  return (
    <>
      {groupLabel && (
        <>
          <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">
              {groupLabel}
            </span>
          </div>
        </>
      )}
      <div className="space-y-1">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const active = isActive(tab.path);
          return (
            <button
              key={tab.id}
              onClick={() => onNavigate(tab.path)}
              className={`
                w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors
                ${active
                  ? 'bg-emerald-50 text-emerald-600'
                  : 'text-gray-700 hover:bg-gray-50'
                }
              `}
            >
              <Icon className="w-4 h-4 mr-3" />
              <span>{tab.name}</span>
            </button>
          );
        })}
      </div>
    </>
  );
}

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

  // 定义二级导航 Tabs（带权限控制）
  const mainTabs: NavTab[] = [
    {
      id: 'overview',
      name: t.logs.nav.overview,
      path: '/logs',
      icon: LayoutDashboard,
      requirePermission: 'log:read',
    },
    {
      id: 'query',
      name: t.logs.nav.query,
      path: '/logs/query',
      icon: Search,
      requirePermission: 'log:read',
    },
    {
      id: 'errors',
      name: t.logs.nav.errors,
      path: '/logs/errors',
      icon: AlertTriangle,
      requirePermission: 'log:read',
    },
    {
      id: 'slow-requests',
      name: t.logs.nav.slowRequests,
      path: '/logs/slow-requests',
      icon: Clock,
      requirePermission: 'log:read',
    },
    {
      id: 'trace',
      name: t.logs.nav.trace,
      path: '/logs/trace',
      icon: GitBranch,
      requirePermission: 'log:read',
    },
  ];

  // 分析菜单
  const analysisTabs: NavTab[] = [
    {
      id: 'statistics',
      name: t.logs.nav.statistics,
      path: '/logs/statistics',
      icon: BarChart3,
      requirePermission: 'log:read',
    },
  ];

  // 管理菜单
  const adminTabs: NavTab[] = [
    {
      id: 'config',
      name: t.logs.nav.config,
      path: '/logs/config',
      icon: Settings,
      requirePermission: 'log:config',
    },
    {
      id: 'alerts',
      name: t.logs.nav.alerts,
      path: '/logs/alerts',
      icon: Bell,
      requirePermission: 'log:alert',
    },
  ];

  // 过滤有权限的 tabs
  const filterTabs = (tabList: NavTab[]) =>
    tabList.filter(tab => !tab.requirePermission || isAdmin || hasPermission(tab.requirePermission));

  const visibleMainTabs = filterTabs(mainTabs);
  const visibleAnalysisTabs = filterTabs(analysisTabs);
  const visibleAdminTabs = filterTabs(adminTabs);

  const isActive = (path: string) =>
    path === '/logs' ? pathname === '/logs' : 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">
            <Activity className="w-5 h-5 mr-2 text-emerald-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.logs.title}
            </h2>
          </div>
        </div>

        {/* Tab 导航 */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          <NavSection tabs={visibleMainTabs} isActive={isActive} onNavigate={router.push} />
          <NavSection
            tabs={visibleAnalysisTabs}
            groupLabel={t.logs.nav.statistics}
            isActive={isActive}
            onNavigate={router.push}
          />
          <NavSection
            tabs={visibleAdminTabs}
            groupLabel={t.common.admin}
            isActive={isActive}
            onNavigate={router.push}
          />

          {/* 使用说明：独立放在所有菜单最底部 */}
          <div className="my-4 border-t" style={{ borderColor: 'var(--border-color)' }} />
          <div className="space-y-1">
            <button
              onClick={() => router.push('/logs/help')}
              className={`
                w-full flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors
                ${isActive('/logs/help')
                  ? 'bg-emerald-50 text-emerald-600'
                  : 'text-gray-700 hover:bg-gray-50'
                }
              `}
            >
              <HelpCircle className="w-4 h-4 mr-3" />
              <span>{t.logs.help.nav}</span>
            </button>
          </div>
        </nav>

        {/* 底部信息 */}
        <div className="p-4 border-t text-xs text-gray-400" style={{ borderColor: 'var(--border-color)' }}>
          <div className="flex items-center">
            <Activity className="w-3 h-3 mr-1" />
            <span>{t.logs.techOps || '技术运维'}</span>
          </div>
        </div>
      </div>

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