import { useState } from 'react'
import './App.css'
import RecordPage from './pages/RecordPage'
import FileConvertPage from './pages/FileConvertPage'
import SettingsPage from './pages/SettingsPage'

type Page = 'record' | 'file' | 'settings'

function App() {
  const [currentPage, setCurrentPage] = useState<Page>('record')

  const renderPage = () => {
    switch (currentPage) {
      case 'record':
        return <RecordPage />
      case 'file':
        return <FileConvertPage />
      case 'settings':
        return <SettingsPage />
      default:
        return <RecordPage />
    }
  }

  return (
    <div className="app">
      <div className="sidebar">
        <div className="logo">
          <span className="logo-icon">🎙️</span>
          <span className="logo-text">impress ASR</span>
        </div>
        <nav className="nav">
          <button
            className={`nav-item ${currentPage === 'record' ? 'active' : ''}`}
            onClick={() => setCurrentPage('record')}
          >
            <span className="nav-icon">🎤</span>
            <span className="nav-label">录音识别</span>
          </button>
          <button
            className={`nav-item ${currentPage === 'file' ? 'active' : ''}`}
            onClick={() => setCurrentPage('file')}
          >
            <span className="nav-icon">📁</span>
            <span className="nav-label">文件转写</span>
          </button>
          <button
            className={`nav-item ${currentPage === 'settings' ? 'active' : ''}`}
            onClick={() => setCurrentPage('settings')}
          >
            <span className="nav-icon">⚙️</span>
            <span className="nav-label">设置</span>
          </button>
        </nav>
        <div className="version">v0.1.0</div>
      </div>
      <main className="main-content">
        {renderPage()}
      </main>
    </div>
  )
}

export default App