'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import {
  FileText,
  LayoutDashboard,
  List,
  BarChart3,
  Shield,
  DollarSign,
  AlertTriangle,
  HelpCircle,
  Search,
} from 'lucide-react';

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

  // 定义二级导航 Tabs（带权限控制）
  const tabs = [
    {
      id: 'overview',
      name: t.audit.nav.overview,
      path: '/audit',
      icon: LayoutDashboard,
      requirePermission: 'audit:read',
    },
    {
      id: 'logs',
      name: t.audit.nav.logs,
      path: '/audit/logs',
      icon: List,
      requirePermission: 'audit:read',
    },
    {
      id: 'search',
      name: t.audit.nav.search,
      path: '/audit/search',
      icon: Search,
      requirePermission: 'audit:read',
    },
  ];

  // 分析菜单
  const analysisTabs = [
    {
      id: 'statistics',
      name: t.audit.nav.statistics,
      path: '/audit/statistics',
      icon: BarChart3,
      requirePermission: 'audit:statistics',
    },
    {
      id: 'financial',
      name: t.audit.nav.financial,
      path: '/audit/financial',
      icon: DollarSign,
      requirePermission: 'audit:read:financial',
    },
    {
      id: 'sensitive',
      name: t.audit.nav.sensitive,
      path: '/audit/sensitive',
      icon: AlertTriangle,
      requirePermission: 'audit:read:sensitive',
    },
  ];

  // 管理菜单
  const adminTabs = [
    {
      id: 'integrity',
      name: t.audit.nav.integrity,
      path: '/audit/integrity',
      icon: Shield,
      requirePermission: 'audit:verify',
    },
  ];

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

  const visibleTabs = filterTabs(tabs);
  const visibleAnalysisTabs = filterTabs(analysisTabs);
  const visibleAdminTabs = filterTabs(adminTabs);

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

        {/* Tab 导航 */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          {/* 主要菜单 */}
          {visibleTabs.length > 0 && (
            <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-indigo-50 text-indigo-600'
                        : 'text-gray-700 hover:bg-gray-50'
                      }
                    `}
                  >
                    <Icon className="w-4 h-4 mr-3" />
                    <span>{tab.name}</span>
                  </button>
                );
              })}
            </div>
          )}

          {/* 分析菜单分隔线 */}
          {visibleAnalysisTabs.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.audit.analysis || '分析'}
                </span>
              </div>
              <div className="space-y-1">
                {visibleAnalysisTabs.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-indigo-50 text-indigo-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-indigo-50 text-indigo-600'
                          : 'text-gray-700 hover:bg-gray-50'
                        }
                      `}
                    >
                      <Icon className="w-4 h-4 mr-3" />
                      <span>{tab.name}</span>
                    </button>
                  );
                })}
              </div>
            </>
          )}

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

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