/**
 * WorkspaceSettingsPage -- Tabbed settings for the AI Workspace.
 *
 * First tab: Voice / Language (WorkspaceSettings).
 * Additional tabs can be added here as needed.
 */

import React, { useState } from 'react';
import { useInstanceId } from '../../../hooks/useCurrentInstance';
import { WorkspaceSettings } from './WorkspaceSettings';

type SettingsTab = 'voice';

const _TABS: { key: SettingsTab; label: string }[] = [
  { key: 'voice', label: 'Sprache & Stimme' },
];

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

  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, #1976d2)'
                : '2px solid transparent',
              background: 'none',
              cursor: 'pointer',
              fontSize: 14,
              fontWeight: activeTab === tab.key ? 600 : 400,
              color: activeTab === tab.key
                ? 'var(--primary-color, #1976d2)'
                : 'var(--text-secondary, #888)',
            }}
          >
            {tab.label}
          </button>
        ))}
      </nav>

      <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px' }}>
        {activeTab === 'voice' && (
          <WorkspaceSettings instanceId={instanceId} />
        )}
      </div>
    </div>
  );
};

export default WorkspaceSettingsPage;
