"use client";
import { useVoxAI } from "@vox-ai/react";
import { useCallback } from "react";

export function VoxConversation() {
  // vox.ai 훅 초기화
  const {
    connect,
    disconnect,
    state,
    messages,
    send,
    audioWaveform,
    toggleMic,
    setVolume,
  } = useVoxAI({
    onConnect: () => console.log("연결됨"),
    onDisconnect: () => console.log("연결 해제됨"),
    onMessage: (message) => console.log("메시지:", message),
    onError: (error) => console.error("오류:", error),
  });

  // 대화 시작 함수
  const startConversation = useCallback(async () => {
    try {
      // 마이크 권한 요청
      await navigator.mediaDevices.getUserMedia({ audio: true });

      // vox.ai 에이전트에 연결
      await connect({
        agentId: "YOUR_AGENT_ID", // 에이전트 ID로 교체하세요
        apiKey: "YOUR_API_KEY", // API 키로 교체하세요
        dynamicVariables: {
          // 대화 커스터마이징을 위한 동적 변수
          userName: "홍길동",
          context: "고객-지원",
        },
        metadata: {
          // 통화에 대한 메타데이터
          callerId: "customer-123",
          departmentId: "support",
        },
      });
    } catch (error) {
      console.error("대화 시작 실패:", error);
    }
  }, [connect]);

  // 대화 종료 함수
  const stopConversation = useCallback(async () => {
    await disconnect();
  }, [disconnect]);

  // UI 렌더링
  return (
    <div className="flex flex-col items-center gap-4">
      {/* 컨트롤 버튼 */}
      <div className="flex gap-2">
        <button
          onClick={startConversation}
          disabled={state !== "disconnected"}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-300"
        >
          대화 시작
        </button>
        <button
          onClick={stopConversation}
          disabled={state === "disconnected"}
          className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-300"
        >
          대화 종료
        </button>

      {/* 상태 표시 */}
      <div className="flex flex-col items-center">
        <p>상태: {state}</p>
        <p>에이전트가 {state === "speaking" ? "말하는 중" : "듣는 중"}</p>
      </div>

      {/* 대화 기록 */}
      <div className="w-full max-w-md mt-4">
        <h2 className="text-xl font-bold mb-2">대화 내용</h2>
        <ul className="rounded p-4 max-h-60 overflow-y-auto">
          {messages.map((msg, index) => (
            <li key={msg.id || index} className="mb-2 p-2 rounded">
              <strong>{msg.name === "agent" ? "에이전트" : "사용자"}:</strong>{" "}
              {msg.message}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

import { VoxConversation } from "./components/VoxConversation";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold mb-8 text-center">
          vox.ai 음성 대화
        </h1>
        <VoxConversation />
      </div>
    </main>
  );
}