'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuth } from '@/lib/auth';
import { SYSTEM_ADMIN_PERMISSION } from '@/lib/iam-constants';
import {
  Building2,
  Users,
  Network,
  Briefcase,
  Shield,
  FolderKanban,
  Globe,
  Sparkles,
  UserCheck,
  ClipboardCheck,
  Layers,
  LayoutGrid,
} from 'lucide-react';

export default function OrganizationLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission } = useAuth();

  // 组织架构模块的导航项
  const allTabs: Array<{
    id: string;
    name: string;
    path: string;
    icon: any;
    requiredPermissions?: string[];
    children?: Array<{ id: string; name: string; path: string; icon: any }>;
  }> = [
    {
      id: 'members',
      name: t.organization.memberManagement,
      path: '/organization/members',
      icon: Users,
    },
    {
      id: 'organizations',
      name: t.organization.orgManagement,
      path: '/organization/organizations',
      icon: Building2,
    },
    {
      id: 'departments',
      name: t.organization.departmentManagement,
      path: '/organization/departments',
      icon: Network,
    },
    {
      id: 'positions',
      name: t.organization.positionManagement,
      path: '/organization/positions',
      icon: Briefcase,
    },
    {
      id: 'regions',
      name: t.organization.regionManagement,
      path: '/organization/regions',
      icon: Globe,
    },
    {
      id: 'roles',
      name: t.organization.roleManagement,
      path: '/organization/roles',
      icon: Shield,
    },
    {
      id: 'ai-tools',
      name: t.organization.aiToolsManagement,
      path: '/organization/ai-tools',
      icon: Sparkles,
      requiredPermissions: ['ai_tool:read'],
    },
    {
      id: 'structure',
      name: t.organization.organizationStructure,
      path: '/organization/structure',
      icon: FolderKanban,
    },
    {
      id: 'structure-grid',
      name: t.organization.organizationStructureGrid,
      path: '/organization/structure/grid',
      icon: LayoutGrid,
    },
    {
      id: 'data-scopes',
      name: t.organization.dataScopesNav,
      path: '/organization/data-scopes',
      icon: Layers,
      requiredPermissions: ['iam_admin:read', 'iam_admin:manage', SYSTEM_ADMIN_PERMISSION],
    },
    {
      id: 'delegations',
      name: t.iamGovernance.delegations.title,
      path: '/organization/delegations',
      icon: UserCheck,
      requiredPermissions: ['delegation:manage', SYSTEM_ADMIN_PERMISSION],
    },
    {
      id: 'access-review',
      name: t.iamGovernance.accessReview.title,
      path: '/organization/access-review',
      icon: ClipboardCheck,
      requiredPermissions: ['access_review:manage', SYSTEM_ADMIN_PERMISSION],
    },
    // 同步相关功能已迁移到"同步中心"模块 (/sync-center)
  ];

  // 根据权限过滤可见的导航项
  const tabs = allTabs.filter((tab) => {
    if (!tab.requiredPermissions) return true;
    return tab.requiredPermissions.some((permission) => hasPermission(permission));
  });

  const isActive = (path: string) => {
    // 精确匹配或匹配其子路径
    return pathname === path || pathname.startsWith(path + '/');
  };

  return (
    <div className="h-full flex">
      {/* 左侧组织管理导航 */}
      <div 
        className="w-56 bg-white flex flex-col border-r shrink-0"
        style={{ borderColor: 'var(--border-color)' }}
      >
        {/* 标题 */}
        <div className="border-b" style={{ borderColor: 'var(--border-color)' }}>
          <div className="h-12 flex items-center px-4">
            <Building2 className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.organization.title}
            </h2>
          </div>
        </div>

        {/* Navigation list */}
        <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);
              const hasChildren = tab.children && tab.children.length > 0;

              return (
                <div key={tab.id}>
                  <button
                    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>
                  {hasChildren && active && (
                    <div className="ml-7 mt-2 mb-1 space-y-1 border-l-2 border-gray-100 pl-2">
                      {tab.children!.map((child: any) => {
                        const ChildIcon = child.icon;
                        const childActive = pathname === child.path || pathname.startsWith(child.path + '/');
                        return (
                          <button
                            key={child.id}
                            onClick={() => router.push(child.path)}
                            className={`
                              w-full flex items-center px-3 py-1.5 rounded-md text-xs transition-colors
                              ${childActive
                                ? 'text-blue-600 font-medium bg-blue-50/50'
                                : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'
                              }
                            `}
                          >
                            <ChildIcon className="w-3.5 h-3.5 mr-2" />
                            <span>{child.name}</span>
                          </button>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </nav>
      </div>

      {/* Right content area */}
      <div className="flex-1 overflow-auto bg-gray-50">
        {children}
      </div>
    </div>
  );
}