import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { AISettingsPage } from './AISettings';
import { ProactiveAISettings } from './ProactiveAISettings';
import { SettingsMcpPage } from './SettingsMcp';

export function SettingsAIPage() {
  const { t } = useTranslation();
  const [activeTab, setActiveTab] = useState<'assistant' | 'proactive' | 'mcp'>('assistant');

  const tabs = [
    { key: 'assistant' as const, label: t('nav.aiAssistant', 'KI Assistent') },
    { key: 'proactive' as const, label: t('settings.aiProactive', 'Proaktive KI') },
    { key: 'mcp' as const, label: t('settings.mcp', 'MCP') },
  ];

  return (
    <div data-testid="settings-ai-page">
      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('settings.aiTitle', 'KI Einstellungen')}</h1>
      <div className="border-b border-secondary-200 mb-6">
        <nav className="flex gap-1" role="tablist">
          {tabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.key
                  ? 'border-primary-600 text-primary-600'
                  : 'border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300'
              }`}
              role="tab"
              aria-selected={activeTab === tab.key}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>
      <div className="mt-4">
        {activeTab === 'assistant' && <AISettingsPage />}
        {activeTab === 'proactive' && <ProactiveAISettings />}
        {activeTab === 'mcp' && <SettingsMcpPage />}
      </div>
    </div>
  );
}