import { useRef, useState, useCallback } from "preact/hooks";
import type { SpeechRecognizer } from "@palace/sdk/speech";
import { useSpeechRecognizer } from "@palace/sdk/speech/preact";
import { sendChatStream } from "../../lib/api";
import { renderMarkdown } from "../../lib/render-md";

interface Props {
  threadId: string;
  recognizer: SpeechRecognizer;
  onSent: () => void;
}

export default function ChatReply({ threadId, recognizer, onSent }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);
  const [responseHtml, setResponseHtml] = useState<string | null>(null);
  const [status, setStatus] = useState<string | null>(null);

  const onTranscribed = useCallback((text: string) => {
    if (inputRef.current) {
      inputRef.current.value += (inputRef.current.value ? " " : "") + text;
      inputRef.current.focus();
    }
  }, []);

  const { recording, transcribing, toggle } = useSpeechRecognizer(recognizer, { onResult: onTranscribed, onStatus: setStatus });

  const send = useCallback(async () => {
    const msg = inputRef.current?.value.trim();
    if (!msg || busy) return;
    inputRef.current!.value = "";
    setBusy(true);
    setResponseHtml(null);
    let full = "";
    try {
      await sendChatStream(threadId, msg, (chunk) => {
        full += chunk;
        setResponseHtml(renderMarkdown(full));
      });
      setResponseHtml(renderMarkdown(full));
      onSent();
    } catch (e: any) {
      setResponseHtml("<span style='color:#f85149'>Error: " + e.message + "</span>");
    }
    setBusy(false);
  }, [threadId, busy, onSent]);

  const micClass = `chat-reply-mic${recording ? " recording" : ""}${transcribing ? " transcribing" : ""}`;

  return (
    <>
      <div class="chat-reply">
        <input
          ref={inputRef}
          class="chat-reply-input"
          type="text"
          placeholder="Reply..."
          autoComplete="off"
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); send(); } }}
          disabled={busy}
        />
        <button class={micClass} onClick={toggle} title="Tap to record">
          &#x1F3A4;
        </button>
        <button class="chat-reply-send" onClick={send} disabled={busy}>
          Send
        </button>
      </div>
      {status && <div class="chat-waiting">{status}</div>}
      {busy && !responseHtml && !status && <div class="chat-waiting">Thinking...</div>}
      {responseHtml && <div class="chat-response" dangerouslySetInnerHTML={{ __html: responseHtml }} />}
    </>
  );
}