import { useEffect, useRef } from "react";
import { useStore } from "./state/store";
import { isConfigured } from "./lib/config";
import { useTts } from "./hooks/useTts";
import { ConfigScreen } from "./components/ConfigScreen";
import { DerezLogoLink } from "./components/DerezLogo";
import { Sidebar } from "./components/Sidebar";
import { ChatView } from "./components/ChatView";
import { SettingsPanel } from "./components/SettingsPanel";
import { Toast } from "./components/Toast";

function AutoSpeak() {
  const messages = useStore((s) => s.messages);
  const streaming = useStore((s) => s.streaming);
  const speakReplies = useStore((s) => s.config.speakReplies);
  const { speak } = useTts();
  const lastSpoken = useRef<string | null>(null);

  useEffect(() => {
    if (!speakReplies || streaming) return;
    const last = messages[messages.length - 1];
    if (!last || last.role !== "assistant") return;
    if (!last.id || last.id === lastSpoken.current) return;
    if (!last.content.trim()) return;
    lastSpoken.current = last.id;
    speak(last.content);
  }, [messages, streaming, speakReplies, speak]);

  return null;
}

export function App() {
  const ready = useStore((s) => s.ready);
  const config = useStore((s) => s.config);
  const connectionError = useStore((s) => s.connectionError);
  const showSettings = useStore((s) => s.showSettings);
  const bootstrap = useStore((s) => s.bootstrap);
  const connect = useStore((s) => s.connect);

  useEffect(() => {
    void bootstrap();
  }, [bootstrap]);

  if (!ready) {
    return (
      <div className="screen">
        <div className="spinner" />
      </div>
    );
  }

  if (!isConfigured(config)) {
    return (
      <>
        <ConfigScreen />
        {showSettings && <SettingsPanel />}
        <Toast />
      </>
    );
  }

  if (connectionError) {
    return (
      <div className="screen">
        <div className="card">
          <div style={{ marginBottom: 18 }}>
            <DerezLogoLink height={30} />
          </div>
          <h1>Can’t reach Hermes</h1>
          <p className="lead">{connectionError}</p>
          <div className="actions">
            <button className="btn" onClick={() => useStore.getState().setShowSettings(true)}>
              Settings
            </button>
            <button className="btn primary" onClick={() => connect()}>
              Retry
            </button>
          </div>
        </div>
        {showSettings && <SettingsPanel />}
        <Toast />
      </div>
    );
  }

  return (
    <>
      <div className="app">
        <Sidebar />
        <ChatView />
      </div>
      <AutoSpeak />
      {showSettings && <SettingsPanel />}
      <Toast />
    </>
  );
}