/**
 * 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';

type SettingsTab = 'general' | 'neutralization';

const _TABS: { key: SettingsTab; label: string }[] = [
  { key: 'general', label: 'Generelle Einstellungen' },
  { key: 'neutralization', label: 'Neutralisierung (Workspace)' },
];

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

  if (!instanceId) {
    return (
      <div style={{ padding: 32, textAlign: 'center', color: '#999' }}>
        Keine Workspace-Instanz ausgewaehlt.
      </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,
      }}>
        {_TABS.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)' }}>
              Hier erscheinen die zuletzt an die KI gesendeten neutralisierten Texte und Platzhalter dieser
              Workspace-Instanz. (Die Benutzer-Einstellungen unter <strong>/settings</strong> → „Neutralisierung (lokal)“
              ist eine andere Seite.)
            </p>
            <NeutralizationPanel instanceId={instanceId} />
          </>
        )}
      </div>
    </div>
  );
};

export default WorkspaceSettingsPage;