"use client";

import { Button } from "@/components/ui/button";
import { SubtitleState } from "./ChatCallContainer";
import { useAtomValue } from "jotai";
import { hasReceivedAiGreetingAtom } from "@/atoms/im";
import { VoiceWaveAnimation } from "@/components/ui/voice-wave-animation";

const ChatCallStatus = ({
  isConnected,
  subtitleState,
  onInterrupt,
}: {
  isConnected: boolean;
  subtitleState: SubtitleState;
  onInterrupt?: () => void;
}) => {
  const hasReceivedAiGreeting = useAtomValue(hasReceivedAiGreetingAtom);

  const renderAction = () => {
    if (!subtitleState.hideInterrupt) {
      return (
        <Button variant="tertiary" size="large" onClick={onInterrupt}>Click to interrupt</Button>
      )
    }


    if (subtitleState.isAiThinking) {
      return (
        <div className="flex flex-col gap-6 items-center justify-center">
          {/* 三个圆点动画 */}
          <div className="flex gap-2 items-center justify-center">
            <div className="w-3 h-3 bg-white rounded-full animate-calling-dots-1" />
            <div className="w-4 h-4 bg-white rounded-full animate-calling-dots-2" />
            <div className="w-3 h-3 bg-white rounded-full animate-calling-dots-3" />
          </div>
          <div className="txt-label-m text-txt-secondary-normal text-center">
            Thinking...
          </div>
        </div>
      ) 
    }

    
    return (
      <div className="flex flex-col justify-center gap-3">
        <VoiceWaveAnimation animated={subtitleState.isUserSpeaking} barCount={22} />
        <div className="text-center txt-label-m text-txt-secondary-normal">
          Listening...
        </div>
      </div>
    );
  }

  if (!hasReceivedAiGreeting) {
    return (
      <div className="flex flex-col gap-6 items-center justify-center">
        {/* 三个圆点动画 */}
        <div className="flex gap-2 items-center justify-center">
          <div className="w-3 h-3 bg-white rounded-full animate-calling-dots-1" />
          <div className="w-4 h-4 bg-white rounded-full animate-calling-dots-2" />
          <div className="w-3 h-3 bg-white rounded-full animate-calling-dots-3" />
        </div>
        <div className="txt-label-m text-txt-secondary-normal text-center">
          Waiting to be connected
        </div>
      </div>
    );
  }

  return (
    <div className="content-stretch flex flex-col gap-4 items-center justify-between relative size-full min-h-[220px] my-4">
      <div className="txt-body-l text-center max-w-[60vw]">{subtitleState.aiSubtitle}</div>
      {renderAction()}
    </div>
  )


  // if (subtitleState.isAiSpeaking) {
  //   return (
  //     <div className="content-stretch flex flex-col gap-4 items-center justify-center relative size-full">
  //       {/* AI字幕显示区域 */}
  //       <div className="flex flex-col font-['Poppins',_sans-serif] justify-center relative shrink-0 w-full max-w-[496px] px-6">
  //         <div className="text-center">
  //           <p className="break-words">
  //             {/* 解析字幕文本，分离内心想法和实际对话 */}
  //             {(() => {
  //               const subtitle = subtitleState.aiSubtitle;
  //               const thoughtMatch = subtitle?.match(/^[\(（](.*?)[\)）]\s*(.*)$/);
                
  //               if (thoughtMatch) {
  //                 const [, thought, speech] = thoughtMatch;
  //                 return (
  //                   <>
  //                     <span className="txt-body-l text-txt-secondary-normal">
  //                       ({thought}) 
  //                     </span>
  //                     <span className="txt-body-l text-txt-primary-normal">
  //                       {speech}
  //                     </span>
  //                   </>
  //                 );
  //               } else {
  //                 return (
  //                   <span className="txt-body-l text-txt-primary-normal">
  //                     {subtitle}
  //                   </span>
  //                 );
  //               }
  //             })()}
  //           </p>
  //         </div>
  //       </div>
        
  //       {/* 打断按钮 */}
  //       {!subtitleState.hideInterrupt && <Button variant="tertiary" size="large" onClick={onInterrupt}>Click to interrupt</Button>}
  //     </div>
  //   )
  // }

  // if (subtitleState.isAiThinking) {
  //   return (
  //     <div className="txt-label-l text-txt-primary-specialmap-normal flex items-center">
  //       <span>Thinking</span>
  //       <span className="animate-listening-dot-1">.</span>
  //       <span className="animate-listening-dot-2">.</span>
  //       <span className="animate-listening-dot-3">.</span>
  //     </div>
  //   )
  // }

  // return (
  //   <div className="txt-label-l text-txt-primary-specialmap-normal flex items-center">
  //     <span>Listening</span>
  //     <span className="animate-listening-dot-1">.</span>
  //     <span className="animate-listening-dot-2">.</span>
  //     <span className="animate-listening-dot-3">.</span>
  //   </div>
  // )
}
 
export default ChatCallStatus;