import React, { useCallback } from "react";
import {
  Container,
  Player,
  PlayerContent,
  PlayerContentBotton,
  PlayerContentBottonSpeed,
  PlayerContentHeader,
  PlayPauseBtnContent,
  PlayPauseControl,
  ProggessSection,
  ProggessSectionHeader,
  Progress,
} from "./style";
import useAudioPlayer from "../useAudioPlayer";
import useTranslation from "../../hooks/useTranslation";
import wordStore from "../../mc/wordStore.json";
import classNames from "classnames";

const formatTime = (seconds) => {
  if (!seconds || isNaN(seconds)) return "00:00";
  const totalSeconds = Math.floor(seconds);
  const minutes = Math.floor(totalSeconds / 60);
  const remainingSeconds = totalSeconds % 60;
  return `${minutes.toString().padStart(2, "0")}:${remainingSeconds
    .toString()
    .padStart(2, "0")}`;
};

const AudioLesson = ({ id, streamUrl, url, label = "" }) => {
  const { findText } = useTranslation(wordStore);
  const {error, isReady, isPlaying, play, pause, speed, updateSpeed, progress } =
    useAudioPlayer({
      fileId: id,
      streamSrc: streamUrl,
      src: url,
    });


  const hasError = !!error
  const handleSpeedToggle = useCallback(() => {
    let nextSpeed = 1;

    if (speed === 1) nextSpeed = 1.5;
    else if (speed === 1.5) nextSpeed = 2;
    else nextSpeed = 1;

    updateSpeed(nextSpeed);
  }, [speed, updateSpeed]);
  const currentTimeStr = formatTime(progress.currentTime || 0);
  const totalDurationStr = formatTime(progress.duration || 0);
  const percentage =
    (progress.duration || 0) > 0
      ? ((progress.currentTime || 0) / (progress.duration || 0)) * 100
      : 0;

  console.log(hasError, "/////", id);
  return (
    <Container className={classNames({ isAudioError: hasError })}>
      <Player>
        <PlayPauseBtnContent className={classNames({ isAudioErrorBtn: hasError })}>
          <PlayPauseControl className={classNames({ isAudioErrorControl: hasError })}>
            <div className="sound_icon sound_icon_left">
              <SoundNoteIcon color={hasError ? "#DFE5E5" : "#FEBF10"} />
            </div>
            <div className="sound_icon sound_icon_right">
              <SoundNoteIcon color={hasError ? "#DFE5E5" : "#FEBF10"} />
            </div>
            {isPlaying ? (
              <button disabled={!isReady} onClick={pause}>
                <PauseIcon />
              </button>
            ) : (
              <button disabled={!isReady} onClick={play}>
                <PlayIcon />
              </button>
            )}
            {isPlaying ? <p>{findText("Pause")}</p> : <p>{findText("Play")}</p>}
          </PlayPauseControl>
        </PlayPauseBtnContent>
        <PlayerContent className={classNames({isAudioErrorContent: hasError})}>
          <PlayerContentHeader>
           {hasError&& <p>{findText("This media is unavailable at the moment")}</p>}
            <SoundNoteFillIcon color={hasError ? "#C6CCCC" : "#FEBF10"} />
          </PlayerContentHeader>

          <PlayerContentBotton>
            <ProggessSection>
              <ProggessSectionHeader className={classNames({isAudioErrorProgressTime: hasError})}>
                <span>00:00</span>
                <span>{totalDurationStr}</span>
              </ProggessSectionHeader>
              <Progress $error={hasError} $value={currentTimeStr} $percentage={percentage} />
            </ProggessSection>
            <PlayerContentBottonSpeed className={classNames({isAudioErrorButtonSpeed: hasError})}>
              <span>{currentTimeStr}</span>
              <button onClick={handleSpeedToggle} disabled={!isReady}>
                <SpeedIcon color={hasError? "#DFE5E5":"#FEBF10"} />
                <span>{speed || 1}x</span>
              </button>
            </PlayerContentBottonSpeed>
          </PlayerContentBotton>
        </PlayerContent>
      </Player>
    </Container>
  );
};

const SoundNoteIcon = ({ color }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <g opacity="0.2" clip-path="url(#clip0_55974_143056)">
      <path
        d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17C6 19.21 7.79 21 10 21C12.21 21 14 19.21 14 17V7H18V3H12ZM10 19C8.9 19 8 18.1 8 17C8 15.9 8.9 15 10 15C11.1 15 12 15.9 12 17C12 18.1 11.1 19 10 19Z"
        fill={color || "#FEBF10"}
      />
    </g>
    <defs>
      <clipPath id="clip0_55974_143056">
        <rect width="24" height="24" fill="white" />
      </clipPath>
    </defs>
  </svg>
);
const SoundNoteFillIcon = ({ color }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="12"
    height="18"
    viewBox="0 0 12 18"
    fill="none"
  >
    <path
      d="M6 0V10.55C5.41 10.21 4.73 10 4 10C1.79 10 0 11.79 0 14C0 16.21 1.79 18 4 18C6.21 18 8 16.21 8 14V4H12V0H6ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16Z"
      fill={color || "#FEBF10"}
    />
  </svg>
);

const SpeedIcon = ({color}) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="17"
    height="15"
    viewBox="0 0 17 15"
    fill="none"
  >
    <path
      d="M15 8.33333C15 10.175 14.2542 11.8417 13.0475 13.0475L14.2258 14.2258C15.0008 13.4528 15.6153 12.5344 16.0342 11.5231C16.4531 10.5119 16.668 9.42788 16.6667 8.33333C16.6667 3.73083 12.9358 0 8.33334 0C3.73084 0 6.31747e-06 3.73083 6.31747e-06 8.33333C-0.0013434 9.42788 0.213594 10.5119 0.632471 11.5231C1.05135 12.5344 1.66591 13.4528 2.44084 14.2258L3.61917 13.0475C2.84398 12.2723 2.27193 11.3178 1.9537 10.2687C1.63548 9.21957 1.58089 8.10816 1.79478 7.03291C2.00868 5.95765 2.48445 4.95174 3.17995 4.10428C3.87545 3.25681 4.76922 2.59394 5.78208 2.17439C6.79495 1.75484 7.89566 1.59156 8.9867 1.699C10.0777 1.80645 11.1255 2.1813 12.037 2.79037C12.9486 3.39943 13.6959 4.22391 14.2127 5.19076C14.7296 6.15762 15 7.23701 15 8.33333ZM11.0775 4.41083L7.08334 7.91667L8.75001 9.58333L12.2558 5.58917L11.0775 4.41083Z"
      fill={color|| "#FEBF10"}
    />
  </svg>
);

const PlayIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="20"
    viewBox="0 0 18 20"
    fill="none"
  >
    <path
      d="M0 10V5.82299C0 0.636928 3.5185 -1.48678 7.82389 1.10626L11.2974 3.19476L14.771 5.28326C19.0763 7.8763 19.0763 12.1237 14.771 14.7167L11.2974 16.8052L7.82389 18.8937C3.5185 21.4868 0 19.3631 0 14.177V10Z"
      fill="white"
    />
  </svg>
);

const PauseIcon = () => (
  <svg
    width="17"
    height="20"
    viewBox="0 0 17 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M14.1667 20C13.3875 20 12.7207 19.7205 12.1663 19.1614C11.6119 18.6024 11.3343 17.9295 11.3333 17.1429V2.85714C11.3333 2.07143 11.611 1.39905 12.1663 0.840002C12.7217 0.280954 13.3884 0.000954802 14.1667 2.42131e-06C14.9449 -0.000949959 15.6121 0.27905 16.1684 0.840002C16.7247 1.40095 17.0019 2.07334 17 2.85714V17.1429C17 17.9286 16.7228 18.6014 16.1684 19.1614C15.614 19.7214 14.9468 20.0009 14.1667 20ZM2.83333 20C2.05417 20 1.38739 19.7205 0.832999 19.1614C0.278611 18.6024 0.000944444 17.9295 0 17.1429V2.85714C0 2.07143 0.277666 1.39905 0.832999 0.840002C1.38833 0.280954 2.05511 0.000954802 2.83333 2.42131e-06C3.61155 -0.000949959 4.2788 0.27905 4.83508 0.840002C5.39136 1.40095 5.66855 2.07334 5.66666 2.85714V17.1429C5.66666 17.9286 5.38947 18.6014 4.83508 19.1614C4.28069 19.7214 3.61344 20.0009 2.83333 20Z"
      fill="white"
    />
  </svg>
);

export default AudioLesson;
