import { useFocusEffect } from '@react-navigation/native'
import useSharedAudioPlayer from '../../hooks/useSharedAudioPlayer'
import * as FileSystem from 'expo-file-system'
import { VideoView, useVideoPlayer } from 'expo-video'
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Image, Pressable, View } from 'react-native'
import { background, icons } from '../../assets'
import BorderGradientButton from '../../components/BorderGradientButton'
import GradientButton from '../../components/GradientButton'
import MusicLandHeader from '../../components/MusicLandHeader'
import ProgressSlider from '../../components/player/ProgressSlider'
import Page from '../../layouts/Page'
import { Routes } from '../../navigation'
import { goBack, navigate } from '../../navigation/NavigationService'
import { gutters, Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
const RecordedPlayback = ({ route }) => {
  const { videoUri, project, syncOffsetMs = 0 } = route.params || {}

  const songUrl = project?.songUrl || null
  const audioPlayer = useSharedAudioPlayer(songUrl ? { uri: songUrl } : undefined, {
    id: project?.id ? `recorded-${project.id}` : songUrl ? `recorded-${songUrl}` : undefined,
    title: typeof project?.title === 'string' ? project.title : 'Sans titre',
    artist: typeof project?.userName === 'string' ? project.userName : 'MusicLand',
    artwork: project?.coverUrl || null,
    coverUrl: project?.coverUrl || null,
    metadata: { projectId: project?.id, screen: 'RecordedPlayback' },
  })
  const videoPlayer = useVideoPlayer(videoUri || null, (p) => {
    p.loop = false
    p.muted = true // recorded video has no audio; keep muted anyway
    p.timeUpdateEventInterval = 0.2
  })

  const [progressInfo, setProgressInfo] = useState({
    pos: 0,
    dur: 0,
    isPlaying: false,
  })
  const playbackEndedRef = useRef(false)

  const syncOffsetRef = useRef(Math.max(0, Number(syncOffsetMs) || 0))

  // Start both players on mount
  const stopPlayback = useCallback(async () => {
    try {
      if (audioPlayer) await audioPlayer.pause?.()
    } catch (e) { }
    try {
      videoPlayer?.pause?.()
    } catch (e) { }
  }, [audioPlayer, videoPlayer])

  useFocusEffect(
    useCallback(() => {
      return () => {
        void stopPlayback()
      }
    }, [stopPlayback])
  )

  useEffect(() => {
    playbackEndedRef.current = false
    const start = async () => {
      try {
        if (videoPlayer && syncOffsetRef.current > 0) {
          videoPlayer.currentTime = syncOffsetRef.current / 1000
        }
        if (audioPlayer && songUrl) await audioPlayer.play?.()
        if (videoPlayer) videoPlayer.play()
      } catch (e) { }
    }
    start()
    return () => {
      playbackEndedRef.current = false
      void stopPlayback()
    }
  }, [audioPlayer, songUrl, stopPlayback, videoPlayer])

  // Poll from audio player for progress display; keep video in sync if drifting
  useEffect(() => {
    const id = global.setInterval(() => {
      try {
        const dur = (audioPlayer?.duration || 0) * 1000
        const pos = (audioPlayer?.currentTime || 0) * 1000
        const playing = !!audioPlayer?.playing || !!videoPlayer?.playing
        setProgressInfo({ pos, dur, isPlaying: playing })

        // basic drift correction: if desync > 300ms, align video
        if (videoPlayer && !Number.isNaN(videoPlayer.currentTime)) {
          const offset = syncOffsetRef.current || 0
          const expected = Math.max(0, (pos || 0) + offset)
          const v = (videoPlayer.currentTime || 0) * 1000
          const drift = Math.abs(v - expected)
          if (drift > 350) {
            videoPlayer.currentTime = Math.max(0, expected / 1000)
          }
        }
      } catch (e) { }
    }, 250)
    return () => global.clearInterval(id)
  }, [audioPlayer, videoPlayer])

  const onSeek = async (targetMs) => {
    try {
      const dur = progressInfo.dur || 0
      const pos = Math.max(0, Math.min(dur, Math.floor(targetMs)))
      if (audioPlayer && dur > 0) await audioPlayer.seekTo?.(Math.floor(pos / 1000))
      if (videoPlayer) {
        const offset = syncOffsetRef.current || 0
        videoPlayer.currentTime = Math.max(0, (pos + offset) / 1000)
      }
    } catch (e) { }
  }

  const onSeekStart = useCallback(() => {
    playbackEndedRef.current = false
  }, [])

  const pauseDuringSeek = useCallback(async () => {
    try {
      if (audioPlayer?.playing) await audioPlayer.pause?.()
    } catch (e) { }
    try {
      if (videoPlayer?.playing) videoPlayer.pause()
    } catch (e) { }
  }, [audioPlayer, videoPlayer])

  const resumeAfterSeek = useCallback(async () => {
    try {
      if (audioPlayer?.resume) {
        await audioPlayer.resume?.()
      } else if (audioPlayer) {
        await audioPlayer.play?.()
      }
    } catch (e) { }
    try {
      if (videoPlayer) videoPlayer.play()
    } catch (e) { }
  }, [audioPlayer, videoPlayer])

  const sliderProgress = useMemo(() => {
    return progressInfo.dur ? Math.min(1, (progressInfo.pos || 0) / progressInfo.dur) : 0
  }, [progressInfo])

  useEffect(() => {
    const duration = progressInfo?.dur || 0
    if (!duration) return
    const position = progressInfo?.pos || 0
    if (playbackEndedRef.current && duration - position > 1000) {
      playbackEndedRef.current = false
      return
    }
    const remaining = Math.max(0, duration - position)
    if (remaining <= 400 && !playbackEndedRef.current) {
      playbackEndedRef.current = true
      void stopPlayback()
    }
  }, [progressInfo, stopPlayback])

  const handleTogglePlayback = async () => {
    try {
      const duration = progressInfo?.dur || 0
      const position = progressInfo?.pos || 0
      const isAtEnd = duration > 0 && duration - position < 1000
      const isCurrentlyPlaying = !!audioPlayer?.playing || !!videoPlayer?.playing

      if (isCurrentlyPlaying) {
        playbackEndedRef.current = false
        if (audioPlayer?.playing) await audioPlayer.pause?.()
        if (videoPlayer?.playing) videoPlayer.pause()
        return
      }

      if (isAtEnd) {
        if (audioPlayer) await audioPlayer.seekTo?.(0)
        if (videoPlayer) {
          const offset = syncOffsetRef.current || 0
          videoPlayer.currentTime = Math.max(0, offset / 1000)
        }
      }

      playbackEndedRef.current = false
      if (songUrl && audioPlayer) await audioPlayer.play?.()
      if (videoPlayer) videoPlayer.play()
    } catch (e) { }
  }

  return (
    <Page backgroundColor={Palette.grayMid} headerType="NONE">
      <MusicLandHeader progress={19} onPressBack={goBack} />
      <View style={{ flex: 1, paddingTop: 12, gap: 14, paddingBottom: gutters * 2 }}>
        <View style={{ flex: 1, gap: 22 }}>
          {!!videoUri && (
            <VideoView
              player={videoPlayer}
              nativeControls={false}
              contentFit="contain"
              style={{
                width: '80%',
                flex: 1,
                alignSelf: 'center',
                borderRadius: 16,
                backgroundColor: '#00000066',
                overflow: 'hidden',
              }}
            />
          )}
          <ProgressSlider
            positionMs={progressInfo.pos}
            durationMs={progressInfo.dur}
            isPlaying={progressInfo.isPlaying}
            onSeek={onSeek}
            onSeekStart={onSeekStart}
            onPause={pauseDuringSeek}
            onPlay={resumeAfterSeek}
            disabled={!songUrl}
          />
          <Pressable
            onPress={handleTogglePlayback}
            style={{
              width: 72,
              height: 72,
              borderRadius: 36,
              alignSelf: 'center',
              marginTop: 4,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: 'rgba(10, 5, 24, 0.65)',
              borderWidth: 1,
              borderColor: '#F94697',
            }}
          >
            <Image
              source={progressInfo.isPlaying ? icons.pause : icons.play}
              style={{ width: 26, height: 26 }}
            />
          </Pressable>
        </View>
        <View style={{ width: '80%', alignSelf: 'center', marginTop: 4, gap: 12 }}>
          <GradientButton
            title="Je valide"
            onPress={async () => {
              try {
                await stopPlayback()
              } catch (e) { }
              navigate(Routes.PlaybackDownload, {
                action: 'playback',
                uri: videoUri,
                project,
              })
            }}
          />
          <BorderGradientButton
            title="Recommencer"
            onPress={async () => {
              try {
                await stopPlayback()
              } catch (e) { }
              try {
                if (videoUri) {
                  const info = await FileSystem.getInfoAsync(videoUri)
                  if (info?.exists)
                    await FileSystem.deleteAsync(videoUri, {
                      idempotent: true,
                    })
                }
              } catch (e) { }
              navigate(Routes.RecordPlayback, { project })
            }}
          />
        </View>
      </View>
    </Page>
  )
}

export default RecordedPlayback