'use client';
/**
 * 屏1 配置台（管理员 /config）
 * 产品库 / 标杆笔记 / 违禁词 / API Key 录入
 * 🔴 红线：key 只录不显余额（不做 Token 用量展示）
 */
import { useState } from 'react';
import { ProductsTab } from '@/components/config/ProductsTab';
import { BenchmarksTab } from '@/components/config/BenchmarksTab';
import { BannedWordsTab } from '@/components/config/BannedWordsTab';
import { ApiKeysTab } from '@/components/config/ApiKeysTab';

type TabKey = 'products' | 'benchmarks' | 'banned_words' | 'api_keys';

const TABS: { key: TabKey; label: string }[] = [
  { key: 'products', label: '产品档案' },
  { key: 'benchmarks', label: '标杆笔记' },
  { key: 'banned_words', label: '违禁词库' },
  { key: 'api_keys', label: 'API Key' },
];

export default function ConfigPage() {
  const [activeTab, setActiveTab] = useState<TabKey>('products');

  return (
    <div className="p-6 max-w-5xl">
      <h2 className="text-xl font-bold text-text-primary mb-6">配置台</h2>

      {/* Tab 导航 */}
      <div className="flex gap-1 border-b border-border-default mb-6" role="tablist">
        {TABS.map((tab) => (
          <button
            key={tab.key}
            role="tab"
            aria-selected={activeTab === tab.key}
            aria-controls={`panel-${tab.key}`}
            onClick={() => setActiveTab(tab.key)}
            className={`px-4 py-2 text-sm font-medium rounded-t-lg transition-colors ${
              activeTab === tab.key
                ? 'bg-surface-primary border border-border-default border-b-white text-brand-orange'
                : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab 内容 */}
      <div id={`panel-${activeTab}`} role="tabpanel">
        {activeTab === 'products' && <ProductsTab />}
        {activeTab === 'benchmarks' && <BenchmarksTab />}
        {activeTab === 'banned_words' && <BannedWordsTab />}
        {activeTab === 'api_keys' && <ApiKeysTab />}
      </div>
    </div>
  );
}
