'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import { PermissionGuard } from '@/components/common/PermissionGuard';
import { Button } from '@/components/ui/button';
import {
  Package,
  Plus,
  List,
  ArrowRightLeft,
  Settings2,
  ScanLine,
  Tag,
  Warehouse,
  MapPin,
} from 'lucide-react';

export default function PartsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, hasAnyPermission, isAdmin } = usePermissions();

  // 定义二级导航 Tabs（带权限控制）
  const tabs = [
    {
      id: 'overview',
      name: t.parts.overview,
      path: '/parts',
      icon: Package,
      permissions: ['parts:read'],
    },
    {
      id: 'create',
      name: t.parts.createPart,
      path: '/parts/create',
      icon: Plus,
      permissions: ['parts:create'],
    },
    {
      id: 'manage',
      name: t.parts.partManagement,
      path: '/parts/manage',
      icon: List,
      permissions: ['parts:read'],
    },
    {
      id: 'inventory',
      name: t.parts.inventoryOperation,
      path: '/parts/inventory-ops',
      icon: ArrowRightLeft,
      permissions: ['parts:checkin', 'parts:checkout', 'parts:transfer'],
    },
    {
      id: 'scan',
      name: t.scan.title,
      path: '/scan-inventory',
      icon: ScanLine,
      permissions: ['parts:checkin', 'parts:checkout'],
    },
    {
      id: 'labels',
      name: t.parts.labelManagement,
      path: '/parts/labels',
      icon: Tag,
      permissions: ['parts:label'],
    },
    {
      id: 'warehouses',
      name: t.parts.warehouseManagement,
      path: '/parts/warehouses',
      icon: Warehouse,
      permissions: ['parts:update'],
    },
    {
      id: 'stations',
      name: t.parts.stationManagement,
      path: '/parts/stations',
      icon: MapPin,
      permissions: ['parts:update'],
    },
    {
      id: 'attributes',
      name: t.parts.attributeManagement,
      path: '/parts/attributes',
      icon: Settings2,
      permissions: ['parts:update'],
    },
  ];

  // 过滤有权限的 tabs
  const visibleTabs = tabs.filter(tab => 
    isAdmin || hasAnyPermission(tab.permissions)
  );

  const isActive = (path: string) => {
    if (path === '/parts') {
      return pathname === '/parts';
    }
    return pathname.startsWith(path);
  };

  return (
    <PermissionGuard 
      permissions={['parts:read']}
      redirectTo="/overview"
    >
      <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">
              <Package className="w-5 h-5 mr-2 text-blue-600" />
              <h2 className="text-base font-semibold text-gray-900">
                {t.nav.parts}
              </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-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>
          </nav>

          {/* 底部快捷操作（需要创建权限） */}
          {(isAdmin || hasPermission('parts:create')) && (
            <div className="p-4 border-t" style={{ borderColor: 'var(--border-color)' }}>
              <Button
                variant="outline"
                size="sm"
                className="w-full"
                onClick={() => router.push('/parts/import')}
              >
                {t.parts.import}
              </Button>
            </div>
          )}
        </div>

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