'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { ClipboardList, GanttChartSquare, LayoutDashboard, History } from 'lucide-react';

/**
 * 开发管理布局 - 二级导航
 */
export default function DevtrackerLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();

  const tabs = [
    {
      id: 'overview',
      name: t.devtracker?.nav?.overview,
      path: '/devtracker',
      icon: LayoutDashboard,
    },
    {
      id: 'items',
      name: t.devtracker?.nav?.items,
      path: '/devtracker/items',
      icon: ClipboardList,
    },
    {
      id: 'gantt',
      name: t.devtracker?.nav?.gantt,
      path: '/devtracker/gantt',
      icon: GanttChartSquare,
    },
    {
      id: 'updates',
      name: t.devtracker?.nav?.updates,
      path: '/devtracker/updates',
      icon: History,
    },
  ];

  const isActive = (path: string) => {
    if (path === '/devtracker') {
      return pathname === path;
    }
    if (path === '/devtracker/items') {
      return pathname === path || pathname.startsWith('/devtracker/items/');
    }
    if (path === '/devtracker/updates') {
      return pathname === path || pathname.startsWith('/devtracker/updates/');
    }
    return pathname === path;
  };

  return (
    <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">
            <span className="text-base font-semibold text-gray-900">
              {t.devtracker?.title}
            </span>
          </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.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>
      </div>

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