/**
 * WorkspaceSettingsPage -- Tabbed settings for the AI Workspace.
 *
 * Tabs: General settings, Neutralization.
 * Voice settings are now in user-level settings (/settings -> "Stimme & Sprache").
 */

import React, { useState } from 'react';
import { useInstanceId } from '../../../hooks/useCurrentInstance';
import { WorkspaceGeneralSettings } from './WorkspaceGeneralSettings';
import NeutralizationPanel from './NeutralizationPanel';
import { useLanguage } from '../../../providers/language/LanguageContext';

type SettingsTab = 'general' | 'neutralization';

export const WorkspaceSettingsPage: React.FC = () => {
  const { t } = useLanguage();
  const instanceId = useInstanceId();
  const [activeTab, setActiveTab] = useState<SettingsTab>('general');

  if (!instanceId) {
    return (
      <div style={{ padding: 32, textAlign: 'center', color: '#999' }}>
        {t('Keine Instanz ausgewählt')}
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <nav style={{
        display: 'flex',
        gap: 0,
        borderBottom: '1px solid var(--border-color, #e0e0e0)',
        background: 'var(--bg-secondary, #fafafa)',
        flexShrink: 0,
      }}>
        {([
          { key: 'general' as SettingsTab, label: t('Generelle Einstellungen') },
          { key: 'neutralization' as SettingsTab, label: t('Neutralisierung') },
        ]).map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              padding: '10px 20px',
              border: 'none',
              borderBottom: activeTab === tab.key
                ? '2px solid var(--primary-color, #F25843)'
                : '2px solid transparent',
              background: 'none',
              cursor: 'pointer',
              fontSize: 14,
              fontWeight: activeTab === tab.key ? 600 : 400,
              color: activeTab === tab.key
                ? 'var(--primary-color, #F25843)'
                : 'var(--text-secondary, #888)',
            }}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px' }}>
        {activeTab === 'general' && (
          <WorkspaceGeneralSettings instanceId={instanceId} />
        )}
        {activeTab === 'neutralization' && (
          <>
            <p style={{ margin: '0 0 12px', fontSize: '0.85rem', color: 'var(--text-secondary, #6b7280)' }}>
              {t(
                'Hier erscheinen die zuletzt an die KI gesendeten neutralisierten Texte und Platzhalter dieser Workspace-Instanz. (Die Benutzer-Einstellungen unter /settings → „Neutralisierung (lokal)“ sind eine andere Seite.)',
              )}
            </p>
            <NeutralizationPanel instanceId={instanceId} />
          </>
        )}
      </div>
    </div>
  );
};

export default WorkspaceSettingsPage;
