'use client';

import { usePathname, useRouter } from 'next/navigation';
import {
  Database,
  Users,
  Truck,
  Handshake,
  MapPin,
  BookOpen,
  Coins,
} from 'lucide-react';
import { colors } from '@/styles/theme';

interface NavItem {
  id: string;
  name: string;
  path: string;
  icon: typeof Users;
  group?: 'master' | 'reference';
}

/**
 * Platform Master 模块布局（L1 平台公共主数据）
 *
 * 业务模块（robot-manager / sales / service / finance...）通过 /platform-master/* 链接
 * 跳到这些独立维护页面，而不是在自己的 sidebar 里嵌入 — 单一事实源 + 跨模块零重复 UI。
 */
export default function PlatformMasterLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();

  const tabs: NavItem[] = [
    // L1a 主数据
    { id: 'customers', name: '客户', path: '/platform-master/customers', icon: Users, group: 'master' },
    { id: 'suppliers', name: '供应商', path: '/platform-master/suppliers', icon: Truck, group: 'master' },
    { id: 'partners', name: '合作伙伴', path: '/platform-master/partners', icon: Handshake, group: 'master' },
    { id: 'locations', name: '位置', path: '/platform-master/locations', icon: MapPin, group: 'master' },
    // L1b 字典 / 参考数据
    { id: 'currencies', name: '货币', path: '/platform-master/currencies', icon: Coins, group: 'reference' },
    { id: 'dictionaries', name: '字典 / 参考数据', path: '/platform-master/dictionaries', icon: BookOpen, group: 'reference' },
  ];

  const isActive = (path: string) =>
    pathname === path || pathname.startsWith(path + '/');

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

  const groupKeys: Array<'master' | 'reference'> = ['master', 'reference'];

  return (
    <div className="h-full flex">
      {/* Left sidebar */}
      <div
        className="w-56 flex flex-col shrink-0"
        style={{ backgroundColor: colors.bgPrimary, borderRight: `1px solid ${colors.border}` }}
      >
        <div style={{ borderBottom: `1px solid ${colors.border}` }}>
          <div className="h-12 flex items-center px-4">
            <Database className="w-5 h-5 mr-2" style={{ color: colors.primary }} />
            <h2 className="text-base font-semibold" style={{ color: colors.textPrimary }}>
              主数据
            </h2>
          </div>
        </div>

        <nav className="flex-1 py-4 px-2 overflow-y-auto">
          {groupKeys.map((key, idx) => {
            const items = tabs.filter((t) => t.group === key);
            if (items.length === 0) return null;
            return (
              <div key={key}>
                {idx > 0 && (
                  <div className="my-3" style={{ borderTop: `1px solid ${colors.border}` }} />
                )}
                <div className="space-y-1">{items.map(renderNavItem)}</div>
              </div>
            );
          })}
        </nav>
      </div>

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