'use client';

import { usePathname, useRouter } from 'next/navigation';
import { PermissionGuard } from '@/components/common/PermissionGuard';
import { useTranslation } from '@/hooks/useTranslation';
import { SYSTEM_ADMIN_PERMISSION } from '@/lib/iam-constants';
import {
  Shield,
  AlertTriangle,
  ScrollText,
  LayoutGrid,
  HelpCircle,
} from 'lucide-react';

const IAM_ADMIN_PERMS = [
  'iam_admin:read',
  'iam_admin:manage',
  SYSTEM_ADMIN_PERMISSION,
];

export default function IamAdminLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <PermissionGuard permissions={IAM_ADMIN_PERMS}>
      <IamAdminContent>{children}</IamAdminContent>
    </PermissionGuard>
  );
}

function IamAdminContent({ children }: { children: React.ReactNode }) {
  const { t } = useTranslation();
  const pathname = usePathname();
  const router = useRouter();

  const tabs = [
    { id: 'overview', name: t.iamAdmin.nav.overview, path: '/iam-admin', icon: LayoutGrid, exact: true },
    { id: 'emergency-bypass', name: t.iamAdmin.nav.emergencyBypass, path: '/iam-admin/emergency-bypass', icon: AlertTriangle },
    { id: 'audit-logs', name: t.iamAdmin.nav.auditLogs, path: '/iam-admin/audit-logs', icon: ScrollText },
  ];

  const isActive = (tab: (typeof tabs)[number]) =>
    tab.exact ? pathname === tab.path : pathname === tab.path || pathname.startsWith(tab.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">
            <Shield className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.iamAdmin.title}
            </h2>
          </div>
        </div>

        <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);
              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>
              );
            })}
          </div>

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

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