import React, { useEffect } from "react";
import { FaPause } from "react-icons/fa";
import {
  ResponseAudioBody,
  ResponseAudioContainer,
  ResponseAudioIcon,
  Line,
  ResponseAudioMain,
  ResponseAudioContainerV2,
} from "./style/responseAutio.style";
import SpeakerIcon from "../../../../assets/svg/speakerIcon";
import AudioWaveComponent from "../../../useAudioPlayer/audioWave";
import useAudioPlayer from "../../../useAudioPlayer";
import classNames from "classnames";
import formatDuration from "../../../../utils/formatDuration.";
import { TrashIcon, PlayIcon, PauseIcon } from "./comment";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";

/**
 * ResponseAudioV2 - Audio player for report responses
 * 
 * Props:
 * - url: Direct presigned URL (uploaded_media_url)
 * - streamUrl: Stream URL for HLS playback
 * - audioData: Audio object with { url, uploaded_media_url, id, file_id, ... }
 * - fileId: File ID for automatic URL resolution
 * - onDelete: Optional delete handler
 * - seconds: Optional duration override
 */
const ResponseAudioV2 = ({ url, streamUrl, audioData, onDelete, seconds, fileId }) => {
  const { findText } = useTranslation(wordStore);
  
  // Resolve fileId: explicit prop takes priority, then fall back to audioData
  const resolvedFileId = fileId || audioData?.id || audioData?.file_id;
  
  // Use fileId mode when we have a fileId - let useAudioPlayer resolve the URL
  const useFileIdResolution = !!resolvedFileId;
  
  // When using fileId resolution, don't pass url/streamUrl to avoid conflicts
  const effectiveSrc = useFileIdResolution ? undefined : (audioData?.uploaded_media_url || url);
  const effectiveStreamSrc = useFileIdResolution ? undefined : (audioData?.url || streamUrl);
  
  const { play, isPlaying, isReady, pause, progress } = useAudioPlayer({
    streamSrc: effectiveStreamSrc,
    src: effectiveSrc,
    fileId: resolvedFileId,
  });
  const duration = progress?.duration || 0;
  useEffect(() => {
    return () => {
      if (isPlaying) {
        stop();
      }
    };
  }, [isPlaying]);
  return (
    <ResponseAudioMain>
      {onDelete && (
        <TrashIcon onClick={onDelete} className={findText("trash-icon")} />
      )}
      <ResponseAudioContainerV2
        className={classNames({
          disabled: !isReady,
        })}
      >
        <ResponseAudioBody>
          <AudioWaveComponent
            color={isReady ? '#febf10' : '#c6cccc'}
            type="extra-small"
            count={16}
            playState={isPlaying ? 'play' : 'stop'}
          />
        </ResponseAudioBody>
        {isPlaying ? (
          <PauseIcon onClick={pause} />
        ) : (
          <PlayIcon
            onClick={() => {
              if (!isReady) return;
              play();
            }}
            disabled={!isReady}
            className={classNames({
              disabled: !isReady,
            })}
          />
        )}
      </ResponseAudioContainerV2>
      <p>{formatDuration(seconds || duration)}</p>
    </ResponseAudioMain>
  );
};
const DeleteIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
  >
    <path
      d="M17.5 4.98698C14.725 4.71198 11.9333 4.57031 9.15 4.57031C7.5 4.57031 5.85 4.65365 4.2 4.82031L2.5 4.98698"
      stroke="#F95454"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M7.08594 4.13906L7.26927 3.0474C7.4026 2.25573 7.5026 1.66406 8.91094 1.66406H11.0943C12.5026 1.66406 12.6109 2.28906 12.7359 3.05573L12.9193 4.13906"
      stroke="#F95454"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M15.7057 7.61719L15.1641 16.0089C15.0724 17.3172 14.9974 18.3339 12.6724 18.3339H7.3224C4.9974 18.3339 4.9224 17.3172 4.83073 16.0089L4.28906 7.61719"
      stroke="#F95454"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M8.60938 13.75H11.3844"
      stroke="#F95454"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
    <path
      d="M7.91406 10.4141H12.0807"
      stroke="#F95454"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);
export default ResponseAudioV2;
