import { useCallback, useRef } from "react";
import { useStore } from "../state/store";

/**
 * Speaks text with the browser's on-device speech synthesis. The Hermes API
 * server has no TTS endpoint, so replies are voiced client-side.
 */
export function useTts() {
  const voiceName = useStore((s) => s.config.ttsVoice);
  const audioRef = useRef<SpeechSynthesisUtterance | null>(null);

  const stop = useCallback(() => {
    if (typeof speechSynthesis !== "undefined") speechSynthesis.cancel();
    audioRef.current = null;
  }, []);

  const speak = useCallback(
    (text: string) => {
      const clean = text.trim();
      if (!clean || typeof speechSynthesis === "undefined") return;
      speechSynthesis.cancel();
      const u = new SpeechSynthesisUtterance(clean);
      if (voiceName) {
        const voice = speechSynthesis.getVoices().find((v) => v.name === voiceName);
        if (voice) u.voice = voice;
      }
      audioRef.current = u;
      speechSynthesis.speak(u);
    },
    [voiceName],
  );

  return { speak, stop };
}