import React, { useState } from 'react';
import { Sidebar } from './layout/Sidebar';
import { Topbar } from './layout/Topbar';
import { TranslateView } from './views/TranslateView';
import { ProfileView } from './views/ProfileView';
import { ContextView } from './views/ContextView';
import { ApiKeysView } from './views/ApiKeysView';
import { GlossaryMainView } from './views/GlossaryMainView';
import { PricingView } from './views/PricingView';

type View = 'translate' | 'profile' | 'context' | 'glossary' | 'api-keys' | 'pricing';

export const Dashboard: React.FC<{ onLogout: () => void }> = ({ onLogout }) => {
  const [currentView, setCurrentView] = useState<View>('translate');
  const [profileTab, setProfileTab] = useState<'account' | 'subscription' | 'preferences'>('account');

  return (
    <div className="flex h-screen bg-brand-bg text-brand-dark font-sans">
      <Sidebar currentView={currentView} setCurrentView={setCurrentView} onLogout={onLogout} />

      <main className="flex-1 flex flex-col overflow-hidden">
        <Topbar />

        <div className="flex-1 overflow-y-auto p-16">
          {currentView === 'translate' && <TranslateView />}
          {currentView === 'profile' && <ProfileView tab={profileTab} setTab={setProfileTab} onUpgrade={() => setCurrentView('pricing')} />}
          {currentView === 'context' && <ContextView />}
          {currentView === 'api-keys' && <ApiKeysView />}
          {currentView === 'glossary' && <GlossaryMainView />}
          {currentView === 'pricing' && <PricingView onBack={() => setCurrentView('profile')} />}
        </div>
      </main>
    </div>
  );
};

