'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { useAuth } from '@/lib/auth';
import { colors } from '@/styles/theme';
import { useHotkeys } from './_lib/useHotkeys';
import { GlobalSearch } from './_lib/GlobalSearch';
import { QRScanButton } from './_lib/QRScanner';
import { useState } from 'react';
import {
  Bot,
  Monitor,
  LayoutDashboard,
  BarChart3,
  HelpCircle,
  Package,
  Search,
  Tags,
  ShoppingCart,
  Receipt,
  Send,
  DollarSign,
  Wrench,
  Key,
  Workflow,
  ClipboardList,
  Upload,
} from 'lucide-react';

interface NavItem {
  id: string;
  name: string;
  path: string;
  icon: typeof Bot;
  requiredPermissions?: string[];
  group?: 'business' | 'archive' | 'reference';
}

export default function RobotManagerLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = useAuth();
  const [globalSearchOpen, setGlobalSearchOpen] = useState(false);

  // 全局快捷键：c 创建, / 打开全局搜索, ? 打开帮助
  useHotkeys({
    c: () => router.push('/robot-manager/create'),
    '?': () => router.push('/robot-manager/help'),
    '/': () => setGlobalSearchOpen(true),
    'mod+k': () => setGlobalSearchOpen(true),
  });

  const userTabs: NavItem[] = [
    {
      id: 'my-work',
      name: t.robotManager.nav.myWork ?? '快捷处理',
      path: '/robot-manager/my-work',
      icon: ClipboardList,
    },
    {
      id: 'dashboard',
      name: t.robotManager.dashboard.title,
      path: '/robot-manager/dashboard',
      icon: LayoutDashboard,
    },
    {
      id: 'manage',
      name: t.robotManager.nav.deviceManage,
      path: '/robot-manager',
      icon: Monitor,
    },
    {
      id: 'reports',
      name: t.robotManager.reports,
      path: '/robot-manager/reports',
      icon: BarChart3,
    },
  ];

  const adminTabs: NavItem[] = [
    // 业务（v3 L3 业务表）— 所有 robot-manager:read 都可看
    { id: 'biz-purchase-orders', name: t.robotManager.nav.purchaseOrders, path: '/robot-manager/purchase-orders', icon: ShoppingCart, group: 'business' },
    { id: 'biz-sales-orders', name: t.robotManager.nav.salesOrders, path: '/robot-manager/sales-orders', icon: Receipt, group: 'business' },
    { id: 'biz-deliveries', name: t.robotManager.nav.deliveries, path: '/robot-manager/deliveries', icon: Send, group: 'business' },
    { id: 'biz-payments', name: t.robotManager.nav.payments, path: '/robot-manager/payments', icon: DollarSign, group: 'business' },
    { id: 'biz-service-tickets', name: t.robotManager.nav.serviceTickets, path: '/robot-manager/service-tickets', icon: Wrench, group: 'business' },
    { id: 'biz-rentals', name: t.robotManager.nav.rentals, path: '/robot-manager/rentals', icon: Key, group: 'business' },
    // robot-manager 模块内基础数据（Model/SKU 是机器人专属概念，留本模块）
    { id: 'admin-models', name: t.robotManager.nav.modelManage, path: '/robot-manager/admin/models', icon: Package, requiredPermissions: ['robot-manager:manage:models'], group: 'archive' },
    { id: 'admin-skus', name: t.robotManager.nav.skuManage, path: '/robot-manager/admin/skus', icon: Tags, requiredPermissions: ['robot-manager:manage:models'], group: 'archive' },
    // 数据导入工具（M1: PO；M2+ 扩展到 RobotUnit/主数据/售后）
    { id: 'admin-import', name: t.robotManager.nav.importData, path: '/robot-manager/import', icon: Upload, requiredPermissions: ['robot-manager:create'], group: 'archive' },
    // 跨模块主数据已迁到独立 /platform-master 模块（主菜单"主数据"入口），sidebar 不再嵌入快捷方式
    // 参考资料
    { id: 'workflow', name: t.robotManager.nav.workflow, path: '/robot-manager/workflow', icon: Workflow, group: 'reference' },
  ];

  const visibleAdminTabs = adminTabs.filter((tab) => {
    // 业务 + 参考 group 默认对所有 robot-manager:read 用户可见
    if (tab.group === 'business' || tab.group === 'reference') {
      return isAdmin || hasPermission('robot-manager:read');
    }
    if (!tab.requiredPermissions) return isAdmin;
    return isAdmin || tab.requiredPermissions.some((p) => hasPermission(p));
  });

  const isActive = (path: string) => {
    if (path === '/robot-manager') {
      return pathname === '/robot-manager';
    }
    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: NavItem) => {
    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"
        style={
          active
            ? { backgroundColor: `${colors.primary}10`, color: colors.primary }
            : { color: colors.textPrimary }
        }
        onMouseEnter={(e) => {
          if (!active) {
            e.currentTarget.style.backgroundColor = colors.bgSecondary;
          }
        }}
        onMouseLeave={(e) => {
          if (!active) {
            e.currentTarget.style.backgroundColor = 'transparent';
          }
        }}
      >
        <Icon className="w-4 h-4 mr-3" />
        <span>{tab.name}</span>
      </button>
    );
  };

  return (
    <div className="h-full flex">
      {/* Left sidebar navigation */}
      <div
        className="w-56 flex flex-col shrink-0"
        style={{ backgroundColor: colors.bgPrimary, borderRight: `1px solid ${colors.border}` }}
      >
        {/* Title */}
        <div style={{ borderBottom: `1px solid ${colors.border}` }}>
          <div className="h-12 flex items-center justify-between px-4">
            <div className="flex items-center">
              <Bot className="w-5 h-5 mr-2" style={{ color: colors.primary }} />
              <h2 className="text-base font-semibold" style={{ color: colors.textPrimary }}>
                {t.robotManager.title}
              </h2>
            </div>
            <div className="flex items-center gap-2">
              <QRScanButton />
              <button
                onClick={() => setGlobalSearchOpen(true)}
                title={`${t.robotManager.search.triggerHint} (/)`}
                className="w-7 h-7 rounded flex items-center justify-center transition-colors"
                style={{ color: colors.textTertiary }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = colors.bgSecondary;
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                }}
              >
                <Search className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>

        {/* Navigation list */}
        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          <div className="space-y-1">
            {userTabs.map(renderNavItem)}
          </div>

          {visibleAdminTabs.length > 0 && (() => {
            const groupOrder: Array<{ key: 'business' | 'archive' | 'reference'; label: string }> = [
              { key: 'business', label: t.robotManager.nav.groupBusiness },
              { key: 'archive', label: t.robotManager.nav.groupArchive },
              { key: 'reference', label: t.robotManager.nav.groupReference },
            ];
            return groupOrder.map((grp, idx) => {
              const tabs = visibleAdminTabs.filter((t) => t.group === grp.key);
              if (tabs.length === 0) return null;
              return (
                <div key={grp.key}>
                  <div className="my-4" style={{ borderTop: `1px solid ${colors.border}` }} />
                  <div className="px-3 mb-2">
                    <span className="text-xs font-medium uppercase tracking-wider" style={{ color: colors.textTertiary }}>
                      {grp.label}
                    </span>
                  </div>
                  <div className="space-y-1">{tabs.map(renderNavItem)}</div>
                </div>
              );
            });
          })()}

          {/* 使用说明：独立放在所有菜单最底部 */}
          <div
            className="mt-4 pt-4"
            style={{ borderTop: `1px solid ${colors.border}` }}
          >
            {renderNavItem({
              id: 'help',
              name: t.robotManager.help.title,
              path: '/robot-manager/help',
              icon: HelpCircle,
            })}
          </div>
        </nav>
      </div>

      {/* Right content area */}
      <div className="flex-1 overflow-auto" style={{ backgroundColor: colors.bgSecondary }}>
        {children}
      </div>

      {/* Global search modal */}
      <GlobalSearch open={globalSearchOpen} onClose={() => setGlobalSearchOpen(false)} />
    </div>
  );
}