import { useState } from 'react';
import { ChatTab } from './tabs/chat-tab';
import { ExtractTab } from './tabs/extract-tab';
import { ImageTab } from './tabs/image-tab';
import { SpeechTab } from './tabs/speech-tab';
import { TranscribeTab } from './tabs/transcribe-tab';
import { VideoTab } from './tabs/video-tab';
import type { ModalityTab } from './types';

const TABS: Array<{ id: ModalityTab; label: string }> = [
  { id: 'chat', label: 'Chat' },
  { id: 'extract', label: 'Extract' },
  { id: 'image', label: 'Image' },
  { id: 'speech', label: 'Speech' },
  { id: 'transcribe', label: 'Transcribe' },
  { id: 'video', label: 'Video' },
];

export function App() {
  const [tab, setTab] = useState<ModalityTab>('chat');

  return (
    <main className="app-shell">
      <header className="header">
        <p className="eyebrow">{'{{APP_NAME}}'}</p>
        <h1>Kazzle AI playground</h1>
      </header>

      <nav className="tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            className={t.id === tab ? 'tab active' : 'tab'}
            onClick={() => setTab(t.id)}
            data-testid={`tab-${t.id}`}
          >
            {t.label}
          </button>
        ))}
      </nav>

      <section className="panel">
        {tab === 'chat' ? <ChatTab /> : null}
        {tab === 'extract' ? <ExtractTab /> : null}
        {tab === 'image' ? <ImageTab /> : null}
        {tab === 'speech' ? <SpeechTab /> : null}
        {tab === 'transcribe' ? <TranscribeTab /> : null}
        {tab === 'video' ? <VideoTab /> : null}
      </section>
    </main>
  );
}