import { useState } from 'react';
import PlatformConfigPage from './PlatformConfigPage';
import AuditRulesPage from './AuditRulesPage';
import AnnouncementPage from './AnnouncementPage';
import NotificationPage from './NotificationPage';
import LdapConfigPage from './LdapConfigPage';
import AppearanceSettings from './AppearanceSettings';

const tabs = [
  { id: 'appearance', label: '外观设置', icon: '🎨' },
  { id: 'platform', label: '平台配置', icon: '⚙️' },
  { id: 'rules', label: '审核规则', icon: '🛡️' },
  { id: 'notification', label: '消息推送', icon: '🔔' },
  { id: 'ldap', label: 'LDAP', icon: '🔐' },
] as const;

type TabId = typeof tabs[number]['id'];

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState<TabId>('appearance');

  return (
    <div className="space-y-5">
      <div>
        <h1 className="text-xl font-semibold">系统设置</h1>
        <p className="text-sm text-[var(--dg-text-muted)] mt-1">管理平台外观、配置、审核规则、消息推送和 LDAP 认证</p>
      </div>

      {/* Tab 导航 */}
      <div className="flex gap-1 p-1 bg-[var(--dg-bg-tertiary)] rounded-xl w-fit">
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
              activeTab === tab.id
                ? 'bg-[var(--dg-bg-primary)] text-[var(--dg-text-primary)] shadow-sm'
                : 'text-[var(--dg-text-muted)] hover:text-[var(--dg-text-secondary)]'
            }`}
          >
            <span>{tab.icon}</span>
            {tab.label}
          </button>
        ))}
      </div>

      {/* 内容区 */}
      <div>
        {activeTab === 'appearance' && <AppearanceSettings />}
        {activeTab === 'platform' && <PlatformConfigPage />}
        {activeTab === 'rules' && <AuditRulesPage />}
        {activeTab === 'notification' && <NotificationPage />}
        {activeTab === 'ldap' && <LdapConfigPage />}
      </div>
    </div>
  );
}