// ============================================================
// CamTalk — 主应用组件
// ============================================================

import { useVisionSession } from "./hooks/useVisionSession";
import { VideoPreview } from "./components/VideoPreview";
import { ChatPanel } from "./components/ChatPanel";
import "./App.css";

function App() {
  const {
    messages,
    currentReply,
    isProcessing,
    isSpeaking,
    connectionStatus,
    videoRef,
    stream,
    startSession,
    stopSession,
    interrupt,
  } = useVisionSession();

  return (
    <div className="app">
      <header className="app-header">
        <h1>CamTalk</h1>
        <span className={`status status--${connectionStatus}`}>
          {connectionStatus === "connected" ? "已连接" : connectionStatus === "connecting" ? "连接中..." : "未连接"}
        </span>
      </header>

      <main className="app-main">
        <div className="video-section">
          <VideoPreview ref={videoRef} isStreaming={!!stream} />
          {isSpeaking && <div className="vad-indicator">🎤 正在聆听...</div>}
        </div>

        <div className="chat-section">
          <ChatPanel messages={messages} />
          {currentReply && (
            <div className="chat-message chat-message--assistant chat-message--streaming">
              <div className="chat-message__role">AI</div>
              <div className="chat-message__content">{currentReply}</div>
            </div>
          )}
        </div>
      </main>

      <footer className="app-footer">
        {connectionStatus !== "connected" ? (
          <button className="btn btn--primary" onClick={startSession}>
            开始对话
          </button>
        ) : (
          <>
            <button className="btn btn--secondary" onClick={stopSession}>
              结束对话
            </button>
            {isProcessing && (
              <button className="btn btn--warning" onClick={interrupt}>
                打断
              </button>
            )}
          </>
        )}
      </footer>
    </div>
  );
}

export default App;