'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuth } from '@/lib/auth';
import { useOrganization } from '@/contexts/OrganizationContext';
import { useEffect } from 'react';
import {
  LayoutDashboard,
  Target,
  Users,
  Calendar,
  Scale,
  FileText,
  BarChart3,
  Settings,
  TrendingUp,
  Compass,
} from 'lucide-react';

interface TabItem {
  id: string;
  name: string;
  path: string;
  icon: typeof LayoutDashboard;
  requiredPermissions?: string[];
}

export default function PerformanceLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = useAuth();
  const { organizations, currentOrganization, setCurrentOrganization, loading } = useOrganization();

  // 普通用户菜单
  const userTabs: TabItem[] = [
    {
      id: 'overview',
      name: t.performance.overview.title,
      path: '/performance',
      icon: LayoutDashboard,
    },
    {
      id: 'my-kpi',
      name: t.performance.kpi.my,
      path: '/performance/kpi',
      icon: Target,
    },
    {
      id: 'team-kpi',
      name: t.performance.kpi.teamKpi || '团队 KPI',
      path: '/performance/kpi/team',
      icon: Users,
      requiredPermissions: ['performance:kpi:view:team'],
    },
    {
      id: '360',
      name: t.performance.e360.title,
      path: '/performance/360',
      icon: Users,
    },
  ];

  // 管理菜单
  const adminTabs: TabItem[] = [
    {
      id: 'admin-overview',
      name: t.performance.adminOverview?.title || '配置概览',
      path: '/performance/admin',
      icon: LayoutDashboard,
      requiredPermissions: ['performance:cycle:manage', 'performance:grade-config:manage'],
    },
    {
      id: 'cycles',
      name: t.performance.cycle.title,
      path: '/performance/cycles',
      icon: Calendar,
      requiredPermissions: ['performance:cycle:manage'],
    },
    {
      id: 'strategic-objectives',
      name: t.performance.strategic?.title || '战略目标',
      path: '/performance/strategic-objectives',
      icon: Compass,
      requiredPermissions: ['performance:strategic-objective:view'],
    },
    {
      id: 'calibration',
      name: t.performance.calibration.title,
      path: '/performance/calibration',
      icon: Scale,
      requiredPermissions: ['performance:calibration:view'],
    },
    {
      id: 'results-admin',
      name: t.performance.result.admin,
      path: '/performance/results/admin',
      icon: FileText,
      requiredPermissions: ['performance:result:view:all'],
    },
    {
      id: 'analytics',
      name: t.performance.analytics.title,
      path: '/performance/analytics',
      icon: BarChart3,
      requiredPermissions: ['performance:result:view:all'],
    },
    {
      id: 'settings-grades',
      name: t.performance.settings.grades.title,
      path: '/performance/settings/grades',
      icon: Settings,
      requiredPermissions: ['performance:grade-config:manage'],
    },
    {
      id: 'settings-360-templates',
      name: t.performance.settings?.e360Templates?.title || '360 模板',
      path: '/performance/settings/360-templates',
      icon: Users,
      requiredPermissions: ['performance:360-template:view'],
    },
  ];

  // 根据权限过滤管理菜单
  const visibleAdminTabs = adminTabs.filter((tab) => {
    if (!tab.requiredPermissions) return isAdmin;
    return isAdmin || tab.requiredPermissions.some((p) => hasPermission(p));
  });

  const isActive = (path: string) => {
    if (path === '/performance') {
      return pathname === '/performance';
    }
    if (pathname === path) return true;
    if (pathname.startsWith(path + '/')) {
      const allPaths = [...userTabs, ...adminTabs].map((t) => t.path);
      const hasMoreSpecific = allPaths.some(
        (p) => p !== path && p.startsWith(path + '/') && (pathname === p || pathname.startsWith(p + '/'))
      );
      return !hasMoreSpecific;
    }
    return false;
  };

  const renderNavItem = (tab: TabItem) => {
    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>
    );
  };

  // 如果没有选中组织，默认选第一个
  useEffect(() => {
    if (!loading && organizations.length > 0 && !currentOrganization) {
      setCurrentOrganization(organizations[0]);
    }
  }, [loading, organizations, currentOrganization, setCurrentOrganization]);

  // 路由级权限守卫：管理页面直接访问 URL 时检查权限
  const adminPaths = adminTabs.map((tab) => tab.path);
  const isAdminPage = adminPaths.some(
    (p) => pathname === p || pathname.startsWith(p + '/')
  );

  useEffect(() => {
    if (!loading && isAdminPage) {
      // 找到当前路径匹配的管理 tab
      const matchedTab = adminTabs.find(
        (tab) => pathname === tab.path || pathname.startsWith(tab.path + '/')
      );
      if (matchedTab) {
        const hasAccess =
          isAdmin ||
          (matchedTab.requiredPermissions?.some((p) => hasPermission(p)) ?? false);
        if (!hasAccess) {
          router.replace('/performance');
        }
      }
    }
  }, [pathname, loading, isAdmin]); // eslint-disable-line react-hooks/exhaustive-deps

  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">
            <TrendingUp className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.performance.title}
            </h2>
          </div>
        </div>

        {/* 导航列表 */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          {/* 普通用户菜单（部分菜单需按权限过滤） */}
          <div className="space-y-1">
            {userTabs.filter((tab) => {
              if (!tab.requiredPermissions) return true;
              return isAdmin || tab.requiredPermissions.some((p) => hasPermission(p));
            }).map(renderNavItem)}
          </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.performance.nav.admin}
                </span>
              </div>
              <div className="space-y-1">
                {visibleAdminTabs.map(renderNavItem)}
              </div>
            </>
          )}
        </nav>
      </div>

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