'use client';

import { usePathname, useRouter } from 'next/navigation';
import { useTranslation } from '@/hooks/useTranslation';
import { usePermissions } from '@/hooks/usePermissions';
import {
  MessageSquare,
  MessageSquarePlus,
  Settings,
} from 'lucide-react';

/**
 * 反馈模块布局 - 包含左侧二级导航
 * 遵循 APP_NAVIGATION_ARCHITECTURE.md 规范
 */
export default function FeedbackLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const pathname = usePathname();
  const router = useRouter();
  const { t } = useTranslation();
  const { hasPermission, isAdmin } = usePermissions();

  // 定义二级导航 Tabs（带权限控制）
  const tabs = [
    {
      id: 'my',
      name: t.feedback.myFeedback,
      path: '/feedback',
      icon: MessageSquare,
    },
    {
      id: 'manage',
      name: t.feedback.feedbackManagement,
      path: '/settings/feedback',
      icon: Settings,
      // 需要管理员或 feedback:read 权限
      requireAdmin: true,
    },
  ];

  // 过滤有权限的 tabs
  const visibleTabs = tabs.filter(tab => {
    if (tab.requireAdmin) {
      return isAdmin || hasPermission('feedback:read');
    }
    return true;
  });

  const isActive = (path: string) => {
    if (path === '/feedback') {
      return pathname === '/feedback';
    }
    return pathname.startsWith(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">
            <MessageSquarePlus className="w-5 h-5 mr-2 text-blue-600" />
            <h2 className="text-base font-semibold text-gray-900">
              {t.feedback.title}
            </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>
      </div>

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