'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import {
  Bot,
  LayoutDashboard,
  FileText,
  Ticket,
  BookOpen,
  Settings,
  BarChart3,
} from 'lucide-react';

/**
 * AI 助手管理模块布局 - 包含左侧二级导航
 * 遵循 APP_NAVIGATION_ARCHITECTURE.md 规范
 */
export default function AIAssistantLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();

  // 定义二级导航 Tabs（带权限控制）
  const tabs = [
    {
      id: 'dashboard',
      name: t.aiAssistant.admin.dashboard,
      path: '/ai-assistant',
      icon: LayoutDashboard,
    },
    {
      id: 'prompts',
      name: t.aiAssistant.admin.prompts,
      path: '/ai-assistant/prompts',
      icon: FileText,
      requireAdmin: true,
    },
    {
      id: 'tickets',
      name: t.aiAssistant.admin.tickets,
      path: '/ai-assistant/tickets',
      icon: Ticket,
    },
    {
      id: 'knowledge',
      name: t.aiAssistant.admin.knowledge,
      path: '/ai-assistant/knowledge',
      icon: BookOpen,
      requireAdmin: true,
    },
    {
      id: 'stats',
      name: t.aiAssistant.admin.stats,
      path: '/ai-assistant/stats',
      icon: BarChart3,
      requireAdmin: true,
    },
    {
      id: 'config',
      name: t.aiAssistant.admin.config,
      path: '/ai-assistant/config',
      icon: Settings,
      requireAdmin: true,
    },
  ];

  // 过滤有权限的 tabs
  const visibleTabs = tabs.filter(tab => {
    if (tab.requireAdmin) {
      return isAdmin || hasPermission('ai-assistant:admin');
    }
    return true;
  });

  const isActive = (path: string) => {
    if (path === '/ai-assistant') {
      return pathname === '/ai-assistant';
    }
    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">
            <Bot className="w-5 h-5 mr-2 text-purple-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.aiAssistant.title}
            </h2>
          </div>
        </div>

        {/* Tab 导航 */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          <div className="space-y-1">
            {visibleTabs.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-purple-50 text-purple-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>
  );
}