import React, { useEffect, useRef, useState } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  List,
  ListItem,
  ListItemText,
  ListItemButton,
  Divider,
  Slider,
  CircularProgress,
} from "@mui/material";
import ReactPlayer from "react-player";
import {
  RehearsalSessionData,
  getTimeInHoursMinutes,
  getTimeInSeconds,
} from "@/app/interfaces";
import SpeechBubble from "../../../participant/layout/shared/components/SpeechBubble";

interface RehearsalSessionDialogProps {
  open: boolean;
  onClose: (event: object, reason: string) => void;
  data: RehearsalSessionData | null;
}

const RehearsalSessionDialog: React.FC<RehearsalSessionDialogProps> = ({
  open,
  onClose,
  data,
}) => {
  // ReactPlayer ref
  const playerRef = useRef<ReactPlayer>(null);
  const audioRef = useRef<HTMLAudioElement>(null);

  // Feedback & self-rating
  const [feedback, setFeedBack] = useState<FeedBack_List[]>([]);
  const [selfRating, setSelfRating] = useState<Question[]>([]);
  const [currentFeedback, setCurrentFeedback] = useState<string>("");

  // Video states
  const [isReady, setIsReady] = useState<boolean>(false);
  const [isBuffering, setIsBuffering] = useState<boolean>(false);

  // --- MAIN STATES FOR TWO-PLAY LOGIC ---
  // 1) "isHiddenPlayback": The first, fully muted background playback with black screen
  const [isHiddenPlayback, setIsHiddenPlayback] = useState<boolean>(true);

  // 2) "isPlaying": The normal user-driven play/pause after hidden playback finishes
  const [isPlaying, setIsPlaying] = useState<boolean>(false);

  // Slider progress fraction (0..1)
  const [playedFraction, setPlayedFraction] = useState<number>(0);
  // Video total duration (seconds)
  const [videoDuration, setVideoDuration] = useState<number>(0);

  // --- ROTATING MESSAGES FOR SPINNER ---
  const hiddenPlaybackMessages = [
    "Preparing video resources...",
    "Loading your presentation...",
    "Almost ready...",
  ];
  const [messageIndex, setMessageIndex] = useState<number>(0);

  // The video/audio URLs
  let videoSrc: string | undefined;
  let audioSrc: string | undefined;
  if (data?.video_recording) {
    videoSrc = `${process.env.NEXT_PUBLIC_MEDIA_URL}${data.video_recording}`;
  }
  if (data?.audio_recording) {
    audioSrc = `${process.env.NEXT_PUBLIC_MEDIA_URL}${data.audio_recording}`;
  }

  // Parse the JSON for feedback and self-rating
  useEffect(() => {
    if (data) {
      try {
        const parsedFeedbackList = data.feedback_list?.toString()
          ? JSON.parse(data.feedback_list.toString())
          : [];
        const parsedSelfRating = data.self_rating?.toString()
          ? JSON.parse(data.self_rating.toString())
          : [];

        setFeedBack(parsedFeedbackList);
        setSelfRating(parsedSelfRating);
      } catch (error) {
        console.error("Failed to parse feedback or self-rating:", error);
      }
    }
  }, [data]);

  /**
   * Whenever the dialog "open" becomes true, we want to
   * reset to the initial states:
   * - hidden playback is active
   * - video is at 0
   * - the user hasn't pressed play yet
   */
  useEffect(() => {
    if (open) {
      // Reset all states
      setIsHiddenPlayback(true);
      setIsPlaying(false);
      setIsReady(false);
      setIsBuffering(false);
      setPlayedFraction(0);
      setVideoDuration(0);
      setCurrentFeedback("");
    }
  }, [open]);

  /**
   * Also rotate text messages while hidden playback is active.
   * We'll cycle them every 2 seconds.
   */
  useEffect(() => {
    let intervalId: NodeJS.Timeout | null = null;

    if (isHiddenPlayback) {
      // Start from first message
      setMessageIndex(0);

      intervalId = setInterval(() => {
        setMessageIndex((prev) => (prev + 1) % hiddenPlaybackMessages.length);
      }, 2000);
    } else {
      // If no longer hidden playback, stop rotating messages
      setMessageIndex(0);
    }

    return () => {
      if (intervalId) clearInterval(intervalId);
    };
  }, [isHiddenPlayback]);

  /**
   * Called when metadata is loaded => we know the total duration in seconds
   */
  const handleDuration = (secs: number) => {
    setVideoDuration(secs);
  };

  /**
   * onProgress: called repeatedly (every progressInterval ms) during playback
   */
  const handleProgress = (state: {
    played: number; // fraction 0..1
    playedSeconds: number;
    loaded: number;
    loadedSeconds: number;
  }) => {
    // Use the fraction from ReactPlayer directly
    setPlayedFraction(state.played);

    // Show feedback messages only during the second watch (not hidden playback)
    if (!isHiddenPlayback && feedback.length > 0) {
      const currentTime = state.playedSeconds;
      const currentLog = feedback.find((log) => {
        const startInSecs = timeStringToSeconds(log.start);
        const endInSecs = timeStringToSeconds(log.end);
        return currentTime >= startInSecs && currentTime <= endInSecs;
      });

      if (currentLog) {
        setCurrentFeedback(currentLog.annotations.feedbackMessage);
      } else {
        setCurrentFeedback("");
      }
    }
  };

  /**
   * Called when the video ends. If it's hidden playback, that means
   * the entire video was auto-played in the background => switch to visible mode.
   */
  const handleEnded = () => {
    if (isHiddenPlayback) {
      // End hidden playback
      setIsHiddenPlayback(false);
      // Seek back to start
      playerRef.current?.seekTo(0, "seconds");
      setPlayedFraction(0);
      // Start paused => user can press "Play" for second watch
      setIsPlaying(false);
    } else {
      // Normal end of second watch
      setPlayedFraction(1);
    }
  };

  /**
   * Convert "00:00:12.817" => numeric seconds
   */
  const timeStringToSeconds = (timeString: string): number => {
    const [hh, mm, sss] = timeString.split(":");
    const [whole, frac] = sss.split(".");
    return (
      Number(hh) * 3600 +
      Number(mm) * 60 +
      Number(whole) +
      (frac ? Number(frac) / 1000 : 0)
    );
  };

  /**
   * Seek the video to a specific second for Mistakes list
   */
  const handleVideoSeek = (time: number) => {
    if (playerRef.current) {
      playerRef.current.seekTo(time, "seconds");
    }
  };

  /**
   * Seek the audio to a specific second
   */
  const handleAudioSeek = (time: number) => {
    if (audioRef.current) {
      audioRef.current.currentTime = time;
      audioRef.current.play();
    }
  };

  /**
   * Toggle normal play/pause (only relevant after hidden playback ends)
   */
  const handleTogglePlay = () => {
    // If user tries to click while buffering, do nothing
    if (isBuffering || isHiddenPlayback) return;
    setIsPlaying((prev) => !prev);
  };

  /**
   * Called when user drags the slider
   */
  const handleSeekChange = (newValue: number | number[]) => {
    if (!Array.isArray(newValue) && playerRef.current) {
      const fraction = newValue / 100;
      setPlayedFraction(fraction);
      playerRef.current.seekTo(fraction, "fraction");
    }
  };

  // If data is null, show error
  if (data === null) {
    return (
      <Dialog
        open={open}
        onClose={(e) => onClose(e, "closeButtonClick")}
        maxWidth="sm"
        fullWidth
      >
        <DialogTitle variant="h5" gutterBottom>
          Error
        </DialogTitle>
        <DialogContent>
          <Typography variant="body1">
            An error occurred while fetching the rehearsal session data.
          </Typography>
        </DialogContent>
        <DialogActions>
          <Button
            color="primary"
            variant="contained"
            onClick={(e) => onClose(e, "closeButtonClick")}
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    );
  }

  // The video is effectively playing if hidden playback is active,
  // or if the user has pressed play in the second watch
  const videoPlaying = isHiddenPlayback || isPlaying;

  return (
    <Dialog
      open={open}
      onClose={(event, reason) => onClose(event, reason)}
      maxWidth="lg"
      fullWidth
      disableEscapeKeyDown
      disableAutoFocus
    >
      <DialogTitle variant="h5" gutterBottom>
        Presentation Rehearsal
        <Button
          color="secondary"
          variant="contained"
          onClick={(event) => onClose(event, "closeButtonClick")}
          sx={{ position: "absolute", right: 15, top: 15 }}
        >
          Close
        </Button>
      </DialogTitle>

      <DialogContent
        sx={{
          display: "flex",
          flexDirection: "row",
          height: "calc(100vh - 200px)",
        }}
      >
        {/* LEFT SIDE: Mistakes, Self Reflection, etc. */}
        <Box sx={{ width: "55%", overflowY: "auto", pr: 2 }}>
          <Typography variant="h6" gutterBottom>
            Duration
          </Typography>
          <Typography paragraph sx={{ mb: 2 }}>
            {data?.duration != null
              ? getTimeInHoursMinutes(data.duration)
              : "Presentation not completed yet."}
          </Typography>

          <Typography variant="h6" gutterBottom>
            Mistakes
          </Typography>
          {feedback && feedback.length > 0 ? (
            <List
              sx={{
                bgcolor: "background.paper",
                overflowY: "auto",
                maxHeight: 300,
                mb: 2,
              }}
            >
              {feedback.map((mistake, index) => (
                <React.Fragment key={index}>
                  <ListItem disablePadding>
                    <ListItemButton
                      onClick={() =>
                        handleVideoSeek(getTimeInSeconds(mistake.start))
                      }
                    >
                      <ListItemText
                        primary={`${mistake.annotations.feedbackMessage} at ${
                          mistake.start
                        }`}
                        secondary={mistake.annotations.feedbackMessage}
                      />
                    </ListItemButton>
                  </ListItem>
                  {index < feedback.length - 1 && <Divider component="li" />}
                </React.Fragment>
              ))}
            </List>
          ) : (
            <Typography variant="body1" color="text.secondary" mb={2}>
              Feedback not found
            </Typography>
          )}

          <Typography variant="h6" gutterBottom>
            Self Reflection
          </Typography>
          {selfRating && selfRating.length > 0 ? (
            <List
              sx={{
                bgcolor: "background.paper",
                overflowY: "auto",
                maxHeight: 300,
                mb: 2,
              }}
            >
              {selfRating.map((question, idx) => (
                <React.Fragment key={idx}>
                  <ListItem disablePadding>
                    <ListItemText
                      secondaryTypographyProps={{
                        variant: "subtitle2",
                        color: "text.primary",
                        fontWeight: 500,
                      }}
                      sx={{ paddingLeft: 2 }}
                      primary={question.question}
                      secondary={question.answer}
                    />
                  </ListItem>
                  {idx < selfRating.length - 1 && <Divider component="li" />}
                </React.Fragment>
              ))}
            </List>
          ) : (
            <Typography variant="body1" color="text.secondary">
              Self Reflection not found
            </Typography>
          )}
        </Box>

        <Divider orientation="vertical" flexItem sx={{ mx: 3 }} />

        {/* RIGHT SIDE: Video + Audio */}
        <Box sx={{ width: "45%", overflowY: "visible" }}>
          <Typography variant="h6" gutterBottom>
            Video
          </Typography>

          <Box sx={{ position: "relative" }}>
            <ReactPlayer
              ref={playerRef}
              url={videoSrc}
              width="100%"
              height="100%"
              playing={videoPlaying}
              muted={isHiddenPlayback} // Mute if hidden playback
              controls={false}
              // Basic buffering callbacks
              onReady={() => {
                setIsReady(true);
                setIsBuffering(false);
              }}
              onBuffer={() => setIsBuffering(true)}
              onBufferEnd={() => setIsBuffering(false)}
              onProgress={handleProgress}
              onDuration={handleDuration}
              onEnded={handleEnded}
              progressInterval={300}
              config={{
                file: {
                  attributes: { preload: "auto" },
                },
              }}
            />

            {/* BLACK SCREEN + SPINNER for hidden playback */}
            {isHiddenPlayback && (
              <Box
                sx={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: "100%",
                  backgroundColor: "black",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  zIndex: 10,
                }}
              >
                <CircularProgress size={60} sx={{ color: "#fff" }} />
                <Typography
                  variant="body1"
                  sx={{ color: "#fff", mt: 2 }}
                  align="center"
                >
                  {hiddenPlaybackMessages[messageIndex]}
                </Typography>
              </Box>
            )}

            {/* FEEDBACK bubble only if second watch (not hidden) */}
            {!isHiddenPlayback && currentFeedback && (
              <Box
                sx={{
                  position: "absolute",
                  top: "1px",
                  left: "1px",
                  padding: "1px 2px",
                  borderRadius: "2px",
                  zIndex: 11,
                  color: "#fff",
                }}
              >
                <Box sx={{ display: "flex", alignItems: "center" }}>
                  <img
                    src="/images/logos/parrot.png"
                    alt="Logo"
                    style={{ marginRight: "10px", height: "30px" }}
                  />
                  <SpeechBubble showTriangle="left">
                    <Typography
                      variant="h2"
                      sx={{
                        fontSize: "1rem",
                        fontWeight: "bold",
                        color: "#000",
                      }}
                    >
                      {currentFeedback}
                    </Typography>
                  </SpeechBubble>
                </Box>
              </Box>
            )}
          </Box>

          {/* CUSTOM CONTROLS: displayed only after hidden playback ends */}
          {!isHiddenPlayback && (
            <Box sx={{ mt: 2, display: "flex", alignItems: "center" }}>
              <Button
                variant="contained"
                color="primary"
                onClick={handleTogglePlay}
                sx={{ marginRight: 2 }}
                disabled={isBuffering} // disable while buffering
              >
                {isPlaying ? "Pause" : "Play"}
              </Button>

              <Slider
                aria-label="Video Progress"
                value={playedFraction * 100}
                onChange={(e, val) => handleSeekChange(val)}
                sx={{ flexGrow: 1 }}
                disabled={isBuffering}
              />
            </Box>
          )}

          <Box sx={{ my: 3 }} />

          <Typography variant="h6" gutterBottom>
            Audio
          </Typography>
          <audio ref={audioRef} controls style={{ width: "100%" }}>
            <source src={audioSrc} type="audio/mp3" />
            Sorry, your browser does not support embedded audio.
          </audio>
        </Box>
      </DialogContent>
    </Dialog>
  );
};

export default RehearsalSessionDialog;