"use client";

import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { Play } from "lucide-react";
import type {
  AwemeData,
  ImageData,
  Neighbors,
  VideoData,
  VideoTranscript,
} from "./types.ts";
import { BackgroundCanvas } from "./components/BackgroundCanvas";
import { CommentPanel } from "./components/CommentPanel";
import { ImageCarousel } from "./components/ImageCarousel";
import { ImageNavigationButtons } from "./components/ImageNavigationButtons";
import { MediaControls } from "./components/MediaControls";
import { NavigationButtons } from "./components/NavigationButtons";
import { TranscriptPanel } from "./components/TranscriptPanel";
import { VideoPlayer } from "./components/VideoPlayer";
import { useBackgroundCanvas } from "./hooks/useBackgroundCanvas";
import { useCommentState } from "./hooks/useCommentState";
import { useImageCarousel } from "./hooks/useImageCarousel";
import { useNavigation } from "./hooks/useNavigation";
import { usePlayerState } from "./hooks/usePlayerState";
import { useVideoPlayer } from "./hooks/useVideoPlayer";

const SEGMENT_MS = 4000;

interface AwemeDetailClientProps {
  data: AwemeData;
  neighbors: Neighbors;
  transcript: VideoTranscript | null;
}

export default function AwemeDetailClient({
  data,
  neighbors,
  transcript,
}: AwemeDetailClientProps) {
  const router = useRouter();
  const isVideo = data.type === "video";

  // 状态管理
  const playerState = usePlayerState();
  const commentState = useCommentState();
  const [transcriptOpen, setTranscriptOpen] = useState(false);

  // 引用
  const mediaContainerRef = useRef<HTMLDivElement | null>(null);
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const scrollerRef = useRef<HTMLDivElement | null>(null);
  const backgroundCanvasRef = useRef<HTMLCanvasElement | null>(null);

  const pauseImageMedia = useCallback((reset = false) => {
    const audioEl = audioRef.current;
    if (audioEl) {
      audioEl.pause();
      if (reset) audioEl.currentTime = 0;
    }

    scrollerRef.current?.querySelectorAll("video").forEach((videoEl) => {
      videoEl.pause();
      if (reset) videoEl.currentTime = 0;
    });
  }, []);

  // 图文轮播状态
  const images = isVideo ? [] : (data as ImageData).images;
  const imageCarouselState = useImageCarousel({
    images,
    isPlaying: playerState.isPlaying,
    loopMode: playerState.loopMode,
    neighbors,
    volume: playerState.volume,
    audioRef,
    setProgress: playerState.setProgress,
    segmentMs: SEGMENT_MS,
  });

  // 视频播放器 hooks
  if (isVideo) {
    useVideoPlayer({
      awemeId: data.aweme_id,
      videoRef,
      volume: playerState.volume,
      rate: playerState.rate,
      loopMode: playerState.loopMode,
      neighbors,
      progressRestored: playerState.progressRestored,
      setIsPlaying: playerState.setIsPlaying,
      setProgress: playerState.setProgress,
      setProgressRestored: playerState.setProgressRestored,
    });
  }

  // 媒体操作函数
  const seekTo = (ratio: number) => {
    ratio = Math.min(1, Math.max(0, ratio));
    if (isVideo) {
      const v = videoRef.current;
      if (!v || !v.duration) return;
      v.currentTime = v.duration * ratio;
      return;
    }
    if (!images?.length) return;
    imageCarouselState.seekTo(ratio);
  };

  const seekImageByVisualRatio = (ratio: number) => {
    if (!images?.length) return;

    const clampedRatio = Math.min(1, Math.max(0, ratio));
    const rawSegment = clampedRatio * images.length;
    const targetIndex = Math.min(images.length - 1, Math.floor(rawSegment));
    const segmentProgress = Math.min(1, Math.max(0, rawSegment - targetIndex));
    imageCarouselState.goToIndex(targetIndex, segmentProgress);
  };

  const handleControlSeek = (ratio: number) => {
    if (isVideo) {
      seekTo(ratio);
      return;
    }
    seekImageByVisualRatio(ratio);
  };

  const togglePlay = async () => {
    if (isVideo) {
      const v = videoRef.current;
      if (!v) return;
      if (v.paused) await v.play().catch(() => {});
      else v.pause();
      return;
    }
    const el = audioRef.current;
    if (!playerState.isPlaying) {
      playerState.setIsPlaying(true);
      try {
        await el?.play().catch(() => {});
      } catch {}
    } else {
      playerState.setIsPlaying(false);
      pauseImageMedia();
    }
  };

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      if (document.body.requestFullscreen) {
        document.body.requestFullscreen().catch(() => {});
        return;
      }
      const vRef = videoRef.current;
      if (vRef && vRef.requestFullscreen) {
        vRef.requestFullscreen().catch(() => {});
        return;
      }
      // @ts-ignore
      if (vRef && vRef.webkitEnterFullscreen) {
        // @ts-ignore
        vRef.webkitEnterFullscreen();
      }
    } else {
      document.exitFullscreen().catch(() => {});
    }
  };

  const prevImg = () => {
    if (!images?.length) return;
    const next = Math.max(0, imageCarouselState.idxRef.current - 1);
    imageCarouselState.goToIndex(next);
  };

  const nextImg = () => {
    if (!images?.length) return;
    const next = Math.min(
      images.length - 1,
      imageCarouselState.idxRef.current + 1,
    );
    imageCarouselState.goToIndex(next);
  };

  const handleDownload = () => {
    if (isVideo) {
      const videoUrl = (data as VideoData).video_url;
      const link = document.createElement("a");
      link.href = videoUrl;
      link.download = `video_${data.aweme_id}.mp4`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      if (!images?.length) return;
      const currentImage = images[imageCarouselState.idx];
      const link = document.createElement("a");
      link.href = currentImage.url;
      link.download = `image_${data.aweme_id}_${imageCarouselState.idx + 1}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  };

  // 导航相关
  useNavigation({
    neighbors,
    isVideo,
    mediaContainerRef,
    videoRef,
    prevImg,
    nextImg,
    togglePlay,
  });

  // 背景画布
  useBackgroundCanvas({
    isVideo,
    idx: imageCarouselState.idx,
    videoRef,
    scrollerRef,
    backgroundCanvasRef,
  });

  useEffect(() => {
    if (isVideo) return;

    const pauseForPageLifecycle = () => {
      playerState.setIsPlaying(false);
      pauseImageMedia();
    };
    const handleVisibilityChange = () => {
      if (document.hidden) pauseForPageLifecycle();
    };

    window.addEventListener("pagehide", pauseForPageLifecycle);
    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      window.removeEventListener("pagehide", pauseForPageLifecycle);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      pauseImageMedia();
    };
  }, [isVideo, pauseImageMedia, playerState.setIsPlaying]);

  // Media Session API 集成
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (!("mediaSession" in navigator)) return;

    const ms = (navigator as any).mediaSession as MediaSession;

    // 元信息：标题、作者、专辑（使用创建时间），封面图（优先当前图片，其次作者头像）
    const title = data.desc || `作品 ${data.aweme_id}`;
    const artist = data.author.nickname || "作者";
    const album = new Date(data.created_at).toLocaleString();
    // 单一封面图：使用作品 cover_url
    const coverUrl = (data as AwemeData).cover_url as string | undefined;
    const coverSize = (data as AwemeData).cover_size as
      | { w: number; h: number }
      | undefined;
    const artwork = coverUrl
      ? [
          {
            src: coverUrl,
            size: `${coverSize?.w || 512}x${coverSize?.h || 512}`,
          },
        ]
      : [];

    try {
      ms.metadata = new MediaMetadata({ title, artist, album, artwork });
    } catch {}

    // 更新播放状态
    try {
      ms.playbackState = playerState.isPlaying ? "playing" : "paused";
    } catch {}

    const getImagesTotalMs = () => imageCarouselState.totalDurationMs;

    const updatePosition = () => {
      try {
        // @ts-ignore: setPositionState 可能不存在
        if (!ms.setPositionState) return;
        if (isVideo) {
          const v = videoRef.current;
          if (!v || !isFinite(v.duration) || isNaN(v.duration)) return;
          // @ts-ignore
          ms.setPositionState({
            duration: Math.max(0, v.duration),
            position: Math.max(0, v.currentTime),
            playbackRate: playerState.rate ?? 1,
          });
        } else if (images?.length) {
          const totalMs = getImagesTotalMs();
          const duration = totalMs / 1000;
          const position = Math.max(
            0,
            Math.min(duration, (playerState.progress * totalMs) / 1000),
          );
          // @ts-ignore
          ms.setPositionState({ duration, position, playbackRate: 1 });
        }
      } catch {}
    };

    // 绑定视频事件以同步状态
    let timeUpdateTimer: number | null = null;
    const v = videoRef.current;
    if (isVideo && v) {
      const onPlay = () => {
        try {
          ms.playbackState = "playing";
        } catch {}
        updatePosition();
      };
      const onPause = () => {
        try {
          ms.playbackState = "paused";
        } catch {}
        updatePosition();
      };
      const onTimeUpdate = () => updatePosition();

      v.addEventListener("play", onPlay);
      v.addEventListener("pause", onPause);
      v.addEventListener("timeupdate", onTimeUpdate);
      // 初始同步
      updatePosition();

      // 清理
      timeUpdateTimer = null;
      return () => {
        v.removeEventListener("play", onPlay);
        v.removeEventListener("pause", onPause);
        v.removeEventListener("timeupdate", onTimeUpdate);
      };
    } else if (!isVideo && images?.length) {
      // 图文用定时器定期同步位置
      const id = window.setInterval(updatePosition, 1000);
      // 初始同步
      updatePosition();
      return () => window.clearInterval(id);
    }
    // 依赖：当这些变化时刷新元信息与位置状态
  }, [
    isVideo,
    data.aweme_id,
    data.desc,
    data.author.nickname,
    data.author.avatar_url,
    data.created_at,
    imageCarouselState.idx,
    imageCarouselState.totalDurationMs,
    images,
    playerState.isPlaying,
    playerState.progress,
    playerState.rate,
  ]);

  // 绑定系统媒体控件的操作处理程序
  useEffect(() => {
    if (typeof window === "undefined") return;
    if (!("mediaSession" in navigator)) return;
    const ms = (navigator as any).mediaSession as MediaSession;

    const getImagesTotalMs = () => imageCarouselState.totalDurationMs;

    const handlePlay = async () => {
      if (isVideo) {
        const v = videoRef.current;
        try {
          await v?.play();
        } catch {}
      } else {
        playerState.setIsPlaying(true);
        try {
          await audioRef.current?.play();
        } catch {}
      }
    };
    const handlePause = () => {
      if (isVideo) {
        const v = videoRef.current;
        v?.pause();
      } else {
        playerState.setIsPlaying(false);
        pauseImageMedia();
      }
    };
    const handleStop = () => {
      if (isVideo) {
        const v = videoRef.current;
        if (v) {
          v.pause();
          v.currentTime = 0;
        }
      } else {
        playerState.setIsPlaying(false);
        pauseImageMedia(true);
        seekTo(0);
      }
    };
    const handleSeekDelta = (deltaSec: number) => {
      if (isVideo) {
        const v = videoRef.current;
        if (v)
          v.currentTime = Math.max(
            0,
            Math.min(v.duration || Infinity, v.currentTime + deltaSec),
          );
      } else if (images?.length) {
        const totalMs = getImagesTotalMs();
        if (totalMs <= 0) return;
        const deltaRatio = (deltaSec * 1000) / totalMs;
        seekTo(playerState.progress + deltaRatio);
      }
    };
    const handleSeekTo = (seekTimeSec: number) => {
      if (isVideo) {
        const v = videoRef.current;
        if (v && isFinite(v.duration)) {
          v.currentTime = Math.max(0, Math.min(v.duration, seekTimeSec));
        }
      } else if (images?.length) {
        const totalMs = getImagesTotalMs();
        const totalSec = totalMs / 1000;
        if (totalSec > 0) seekTo(seekTimeSec / totalSec);
      }
    };

    ms.setActionHandler("play", handlePlay);
    ms.setActionHandler("pause", handlePause);
    ms.setActionHandler("stop", handleStop);
    ms.setActionHandler("seekbackward", (details: any) =>
      handleSeekDelta(-((details?.seekOffset as number) || 10)),
    );
    ms.setActionHandler("seekforward", (details: any) =>
      handleSeekDelta((details?.seekOffset as number) || 10),
    );
    ms.setActionHandler("seekto", (details: any) => {
      if (typeof details?.seekTime === "number") handleSeekTo(details.seekTime);
    });
    ms.setActionHandler("previoustrack", () => {
      if (!isVideo && images?.length > 1) {
        prevImg();
      } else if (neighbors.prev) {
        router.push(`/aweme/${neighbors.prev.aweme_id}`);
      }
    });
    ms.setActionHandler("nexttrack", () => {
      if (!isVideo && images?.length > 1) {
        nextImg();
      } else if (neighbors.next) {
        router.push(`/aweme/${neighbors.next.aweme_id}`);
      }
    });

    return () => {
      try {
        ms.setActionHandler("play", null);
        ms.setActionHandler("pause", null);
        ms.setActionHandler("stop", null);
        ms.setActionHandler("seekbackward", null);
        ms.setActionHandler("seekforward", null);
        ms.setActionHandler("seekto", null);
        ms.setActionHandler("previoustrack", null);
        ms.setActionHandler("nexttrack", null);
      } catch {}
    };
  }, [
    isVideo,
    images,
    neighbors.prev,
    neighbors.next,
    router,
    playerState.progress,
    pauseImageMedia,
    imageCarouselState.totalDurationMs,
  ]);

  return (
    <div className="h-screen w-full">
      <BackgroundCanvas ref={backgroundCanvasRef} />

      <div className="relative h-full landscape:flex landscape:flex-row">
        {/* 主媒体区域 */}
        <section
          ref={mediaContainerRef}
          className="relative isolate h-screen landscape:flex-1"
        >
          <div className="relative isolate h-screen overflow-hidden">
            <div className="absolute inset-0 z-0">
              {isVideo ? (
                <VideoPlayer
                  ref={videoRef}
                  videoUrl={(data as VideoData).video_url}
                  rotation={playerState.rotation}
                  objectFit={playerState.objectFit}
                  loop={playerState.loopMode !== "sequential"}
                  onTogglePlay={togglePlay}
                />
              ) : (
                <ImageCarousel
                  ref={scrollerRef}
                  images={images}
                  currentIndex={imageCarouselState.idx}
                  isPlaying={playerState.isPlaying}
                  segmentProgress={imageCarouselState.segProgress}
                  mediaSyncToken={imageCarouselState.mediaSyncToken}
                  loopMode={playerState.loopMode}
                  onTogglePlay={togglePlay}
                  onAnimatedDuration={imageCarouselState.setSegmentDuration}
                />
              )}
            </div>

            {/* 暂停图标 */}
            {!playerState.isPlaying && (
              <div className="pointer-events-none absolute inset-0 z-30 grid place-items-center">
                <div className="rounded-full bg-black/40 p-6 backdrop-blur-sm">
                  <Play size={64} className="text-white" fill="white" />
                </div>
              </div>
            )}

            {/* 图文切换按钮 */}
            {!isVideo && images.length > 1 && (
              <ImageNavigationButtons
                onPrev={prevImg}
                onNext={nextImg}
                currentIndex={imageCarouselState.idx}
                totalImages={images.length}
              />
            )}

            {/* 媒体控制栏 */}
            <MediaControls
              isVideo={isVideo}
              isPlaying={playerState.isPlaying}
              progress={playerState.progress}
              volume={playerState.volume}
              rate={playerState.rate}
              rotation={playerState.rotation}
              objectFit={playerState.objectFit}
              loopMode={playerState.loopMode}
              isFullscreen={playerState.isFullscreen}
              author={data.author}
              createdAt={data.created_at}
              desc={data.desc}
              videoRef={videoRef}
              currentIndex={imageCarouselState.idx}
              totalSegments={images.length}
              segmentProgress={imageCarouselState.segProgress}
              musicUrl={isVideo ? undefined : (data as ImageData).music_url}
              audioRef={audioRef}
              hasTranscript={isVideo && !!transcript?.speech_detected}
              onShowTranscript={() => setTranscriptOpen(true)}
              onTogglePlay={togglePlay}
              onSeek={handleControlSeek}
              onVolumeChange={playerState.setVolume}
              onRateChange={playerState.setRate}
              onRotationChange={playerState.setRotation}
              onObjectFitChange={playerState.setObjectFit}
              onLoopModeChange={playerState.setLoopMode}
              onDownload={handleDownload}
              onToggleFullscreen={toggleFullscreen}
            />
          </div>

          {/* 导航按钮 */}
          <NavigationButtons
            neighbors={neighbors}
            commentsCount={data.commentsCount}
            likesCount={data.likesCount}
            onNavigatePrev={() =>
              neighbors.prev && router.push(`/aweme/${neighbors.prev.aweme_id}`)
            }
            onNavigateNext={() =>
              neighbors.next && router.push(`/aweme/${neighbors.next.aweme_id}`)
            }
            onToggleComments={() => commentState.setOpen((v) => !v)}
          />
        </section>

        {/* 评论面板 */}
        <CommentPanel
          open={commentState.open}
          onClose={() => commentState.setOpen(false)}
          author={data.author}
          createdAt={data.created_at}
          awemeId={data.aweme_id}
          mounted={commentState.mounted}
        />

        {/* 转录面板 */}
        <TranscriptPanel
          open={transcriptOpen}
          onClose={() => setTranscriptOpen(false)}
          transcript={transcript}
        />
      </div>
    </div>
  );
}