"use client";

import { useId, useSyncExternalStore } from "react";

import { SpeakerIcon, StopIcon } from "@/components/icons";
import { useI18n, useLocale } from "@/lib/i18n";
import { isSpeaking, speak, speechAvailable, speechLocale, stopSpeaking, subscribeSpeech } from "@/lib/speech";
import { cn } from "@/lib/utils";

/**
 * Small round "read this aloud" control, placed next to the text a learner is
 * meant to read (a flashcard face, a question, a statement, an instruction).
 * It renders nothing where the browser has no speech synthesis, so no card
 * carries a dead button, and it flips to a stop control while it is the
 * utterance playing.
 */
export function SpeakButton({
  text,
  language,
  className,
}: {
  text: string;
  /** The deck's language, so the voice matches the text. */
  language?: string;
  className?: string;
}) {
  const { t } = useI18n();
  const locale = useLocale();
  const id = useId();
  const speaking = useSyncExternalStore(
    subscribeSpeech,
    () => isSpeaking(id),
    () => false,
  );
  if (!speechAvailable()) return null;
  return (
    <button
      type="button"
      onClick={() => (speaking ? stopSpeaking() : speak(id, text, speechLocale(language, locale)))}
      aria-label={speaking ? t("activity.stopSpeaking") : t("activity.speak")}
      title={speaking ? t("activity.stopSpeaking") : t("activity.speak")}
      className={cn(
        "touch-target grid size-9 shrink-0 place-items-center rounded-full border border-[var(--glass-border)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)]",
        speaking && "border-accent-400/70 text-accent-600 dark:text-accent-200",
        className,
      )}
    >
      {speaking ? <StopIcon className="size-4" /> : <SpeakerIcon className="size-4" />}
    </button>
  );
}