import React, { useState } from "react";
import { askLLM } from "@/shared/ai/llmClient";

export default function VoiceAssistant() {
  const [listening, setListening] = useState(false);
  const [transcript, setTranscript] = useState("");
  const [response, setResponse] = useState("");

  const startListening = () => {
    const recognition = new (window.SpeechRecognition ||
      window.webkitSpeechRecognition)();
    recognition.lang = "en-US";
    recognition.start();

    recognition.onresult = (event: any) => {
      const text = event.results[0][0].transcript;
      setTranscript(text);
      sendToAI(text); // auto-send to AI
    };

    recognition.onend = () => setListening(false);
    setListening(true);
  };

  const speakText = (text: string) => {
    const synth = window.speechSynthesis;
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = "en-US";
    synth.speak(utterance);
  };

  const sendToAI = async (prompt: string) => {
    const result = await askLLM(prompt);
    setResponse(result);
    speakText(result);
  };

  return (
    <div className="p-6 text-center">
      <h1 className="text-2xl font-bold mb-4">🎙️ AI Voice Coding Assistant</h1>
      <button
        onClick={startListening}
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        {listening ? "Listening..." : "🎤 Start Talking"}
      </button>

      <p className="mt-4">Transcript: {transcript}</p>

      <div className="mt-6">
        <strong>AI Response:</strong>
        <pre className="bg-gray-100 p-3 rounded mt-2">{response}</pre>
      </div>
    </div>
  );
}