'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  LayoutGrid,
  FileText,
  ListChecks,
  Languages,
  LayoutTemplate,
  ChevronRight,
  BarChart3,
  ClipboardCheck,
  Layers,
} from 'lucide-react';
import { useTranslation } from '@/hooks/useTranslation';

export default function FormsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const { t } = useTranslation();

  // Full screen mode pages (hide left navigation)
  const isFullscreenMode = pathname.includes('/design') || 
                           pathname.includes('/builder') ||
                           pathname.includes('/editor');

  // ✅ 添加 key 强制重新挂载，避免 removeChild 错误
  const layoutKey = pathname;

  const navItems = [
    {
      title: t.forms.nav.overview,
      href: '/forms',
      icon: LayoutGrid,
      exact: true,
    },
    {
      title: t.forms.nav.definitions,
      href: '/forms/definitions',
      icon: FileText,
    },
    {
      title: t.forms.nav.review,
      href: '/forms/review',
      icon: ClipboardCheck,
    },
    {
      title: t.forms.nav.templates,
      href: '/forms/templates',
      icon: LayoutTemplate,
    },
    {
      title: t.forms.nav.translations,
      href: '/forms/translations',
      icon: Languages,
    },
    {
      title: t.forms.nav.statistics,
      href: '/forms/statistics',
      icon: BarChart3,
    },
  ];

  const isActive = (href: string, exact?: boolean) => {
    if (exact) {
      return pathname === href;
    }
    return pathname.startsWith(href);
  };

  // Full screen mode: render content directly without navigation
  if (isFullscreenMode) {
    return (
      <div className="h-full bg-gray-50">
        {children}
      </div>
    );
  }

  return (
    <div key={layoutKey} className="flex h-full bg-gray-50">
      {/* Left Navigation */}
      <aside className="w-56 bg-white border-r border-gray-200 flex-shrink-0 overflow-y-auto">
        <div className="border-b border-gray-200">
          <div className="h-12 flex items-center px-4">
            <Layers className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.forms.title}
            </h2>
          </div>
        </div>

        <nav className="p-2">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = isActive(item.href, item.exact);

            return (
              <Link
                key={item.href}
                href={item.href}
                className={`
                  flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-all
                  ${
                    active
                      ? 'bg-blue-50 text-blue-600 font-medium'
                      : 'text-gray-700 hover:bg-gray-50'
                  }
                `}
              >
                <Icon className="w-4 h-4" />
                <span className="text-sm flex-1">{item.title}</span>
                {active && <ChevronRight className="w-4 h-4" />}
              </Link>
            );
          })}
        </nav>

        {/* Bottom Tip */}
        <div className="p-4 mt-auto">
          <div className="p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg text-xs text-gray-600">
            <p className="font-medium text-gray-700 mb-1">{t.forms.overview.tipTitle}</p>
            <p>{t.forms.overview.tipDesc}</p>
          </div>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 overflow-auto">
        <div className="h-full">{children}</div>
      </main>
    </div>
  );
}