"use client"

import { useState, useEffect, useRef, useCallback } from "react"
import { useRouter } from "next/navigation"
import { Play, Pause, Square, SkipForward, SkipBack, Volume2, ChevronDown, ChevronUp, Minus, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { cn } from "@/lib/utils"

interface TTSPlayerProps {
  paragraphs: string[]
  novelSlug: string
  currentChapter: number
  maxChapter: number
  chapterTitle: string
}

export function TTSPlayer({ paragraphs, novelSlug, currentChapter, maxChapter, chapterTitle }: TTSPlayerProps) {
  const router = useRouter()
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentParagraphIndex, setCurrentParagraphIndex] = useState(0)
  const [rate, setRate] = useState(1.0)
  const [voices, setVoices] = useState<SpeechSynthesisVoice[]>([])
  const [selectedVoiceURI, setSelectedVoiceURI] = useState("")
  const [isExpanded, setIsExpanded] = useState(false)
  const [autoNextChapter, setAutoNextChapter] = useState(true)
  const [isSupported, setIsSupported] = useState(false)

  const wakeLockRef = useRef<WakeLockSentinel | null>(null)
  const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null)
  const isPlayingRef = useRef(false)
  const currentIndexRef = useRef(0)

  // Keep refs in sync
  useEffect(() => {
    isPlayingRef.current = isPlaying
  }, [isPlaying])

  useEffect(() => {
    currentIndexRef.current = currentParagraphIndex
  }, [currentParagraphIndex])

  // Check TTS support
  useEffect(() => {
    if (typeof window !== "undefined" && "speechSynthesis" in window) {
      setIsSupported(true)
    }
  }, [])

  // Load voices
  useEffect(() => {
    if (!isSupported) return

    const loadVoices = () => {
      const available = speechSynthesis.getVoices()
      const viVoices = available.filter(
        (v) => v.lang.startsWith("vi") || v.name.toLowerCase().includes("vietnam")
      )
      const allUsable = viVoices.length > 0 ? viVoices : available.slice(0, 10)
      setVoices(allUsable)
      if (allUsable.length > 0 && !selectedVoiceURI) {
        setSelectedVoiceURI(allUsable[0].voiceURI)
      }
    }

    loadVoices()
    speechSynthesis.addEventListener("voiceschanged", loadVoices)
    return () => {
      speechSynthesis.removeEventListener("voiceschanged", loadVoices)
    }
  }, [isSupported, selectedVoiceURI])

  // Acquire Wake Lock for background playback on mobile
  const acquireWakeLock = useCallback(async () => {
    if ("wakeLock" in navigator) {
      try {
        wakeLockRef.current = await navigator.wakeLock.request("screen")
      } catch {
        // Wake Lock not available or denied
      }
    }
  }, [])

  const releaseWakeLock = useCallback(async () => {
    if (wakeLockRef.current) {
      try {
        await wakeLockRef.current.release()
        wakeLockRef.current = null
      } catch {
        // ignore
      }
    }
  }, [])

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      speechSynthesis.cancel()
      releaseWakeLock()
    }
  }, [releaseWakeLock])

  // Highlight current paragraph in the DOM
  useEffect(() => {
    if (!isPlaying) return

    const articleEl = document.querySelector(".chapter-content")
    if (!articleEl) return

    const pElements = articleEl.querySelectorAll("p[data-p-index]")
    pElements.forEach((el) => {
      el.classList.remove("tts-active-paragraph")
    })

    const activeEl = articleEl.querySelector(`p[data-p-index="${currentParagraphIndex}"]`)
    if (activeEl) {
      activeEl.classList.add("tts-active-paragraph")
      activeEl.scrollIntoView({ behavior: "smooth", block: "center" })
    }
  }, [currentParagraphIndex, isPlaying])

  // Clean highlights when stopped
  useEffect(() => {
    if (!isPlaying) {
      const articleEl = document.querySelector(".chapter-content")
      if (articleEl) {
        articleEl.querySelectorAll("p[data-p-index]").forEach((el) => {
          el.classList.remove("tts-active-paragraph")
        })
      }
    }
  }, [isPlaying])

  const speakParagraph = useCallback(
    (index: number) => {
      if (index >= paragraphs.length) {
        // Chapter finished
        setIsPlaying(false)
        releaseWakeLock()

        if (autoNextChapter && currentChapter < maxChapter) {
          // Auto navigate to next chapter
          router.push(`/truyen/${novelSlug}/${currentChapter + 1}?tts=auto`)
        }
        return
      }

      speechSynthesis.cancel()

      const utterance = new SpeechSynthesisUtterance(paragraphs[index])
      utterance.rate = rate
      utterance.lang = "vi-VN"

      const voice = voices.find((v) => v.voiceURI === selectedVoiceURI)
      if (voice) {
        utterance.voice = voice
      }

      utterance.onend = () => {
        if (isPlayingRef.current) {
          const nextIndex = currentIndexRef.current + 1
          setCurrentParagraphIndex(nextIndex)
          speakParagraph(nextIndex)
        }
      }

      utterance.onerror = (e) => {
        if (e.error !== "canceled" && e.error !== "interrupted") {
          setIsPlaying(false)
          releaseWakeLock()
        }
      }

      utteranceRef.current = utterance
      setCurrentParagraphIndex(index)
      speechSynthesis.speak(utterance)
    },
    [paragraphs, rate, voices, selectedVoiceURI, autoNextChapter, currentChapter, maxChapter, novelSlug, router, releaseWakeLock]
  )

  const handlePlay = useCallback(() => {
    if (!isSupported) return

    if (isPlaying) {
      // Pause
      speechSynthesis.cancel()
      setIsPlaying(false)
      releaseWakeLock()
    } else {
      // Play / Resume
      setIsPlaying(true)
      acquireWakeLock()
      speakParagraph(currentParagraphIndex)
    }
  }, [isSupported, isPlaying, currentParagraphIndex, speakParagraph, acquireWakeLock, releaseWakeLock])

  const handleStop = useCallback(() => {
    speechSynthesis.cancel()
    setIsPlaying(false)
    setCurrentParagraphIndex(0)
    releaseWakeLock()
  }, [releaseWakeLock])

  const handlePrevParagraph = useCallback(() => {
    const newIndex = Math.max(0, currentParagraphIndex - 1)
    setCurrentParagraphIndex(newIndex)
    if (isPlaying) {
      speechSynthesis.cancel()
      speakParagraph(newIndex)
    }
  }, [currentParagraphIndex, isPlaying, speakParagraph])

  const handleNextParagraph = useCallback(() => {
    const newIndex = Math.min(paragraphs.length - 1, currentParagraphIndex + 1)
    setCurrentParagraphIndex(newIndex)
    if (isPlaying) {
      speechSynthesis.cancel()
      speakParagraph(newIndex)
    }
  }, [currentParagraphIndex, paragraphs.length, isPlaying, speakParagraph])

  // Auto-play TTS when coming from previous chapter auto-advance
  useEffect(() => {
    if (!isSupported) return
    const params = new URLSearchParams(window.location.search)
    if (params.get("tts") === "auto") {
      // Small delay to let the page render
      const timer = setTimeout(() => {
        setIsPlaying(true)
        acquireWakeLock()
        speakParagraph(0)
      }, 500)
      return () => clearTimeout(timer)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isSupported])

  if (!isSupported) return null

  const progress = paragraphs.length > 0 ? ((currentParagraphIndex + 1) / paragraphs.length) * 100 : 0

  return (
    <>
      {/* Floating TTS bar */}
      <div className="fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-card/95 backdrop-blur-md shadow-lg">
        {/* Progress bar */}
        <div className="h-0.5 w-full bg-muted">
          <div
            className="h-full bg-primary transition-all duration-300"
            style={{ width: `${progress}%` }}
          />
        </div>

        <div className="mx-auto max-w-3xl px-4 py-2">
          {/* Compact bar */}
          <div className="flex items-center gap-3">
            {/* Play controls */}
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handlePrevParagraph} disabled={currentParagraphIndex <= 0}>
                <SkipBack className="h-4 w-4" />
              </Button>
              <Button
                size="icon"
                className="h-9 w-9 rounded-full"
                onClick={handlePlay}
              >
                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4 ml-0.5" />}
              </Button>
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleNextParagraph} disabled={currentParagraphIndex >= paragraphs.length - 1}>
                <SkipForward className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="icon" className="h-8 w-8" onClick={handleStop}>
                <Square className="h-3.5 w-3.5" />
              </Button>
            </div>

            {/* Info */}
            <div className="flex min-w-0 flex-1 flex-col">
              <span className="truncate text-xs font-medium text-foreground">
                {chapterTitle}
              </span>
              <span className="text-[10px] text-muted-foreground">
                {currentParagraphIndex + 1}/{paragraphs.length} doan
              </span>
            </div>

            {/* Speed control */}
            <div className="hidden items-center gap-1 sm:flex">
              <Button
                variant="outline"
                size="icon"
                className="h-7 w-7"
                onClick={() => setRate(Math.max(0.5, rate - 0.25))}
                disabled={rate <= 0.5}
              >
                <Minus className="h-3 w-3" />
              </Button>
              <span className="w-12 text-center text-xs font-medium text-muted-foreground">
                {rate.toFixed(2)}x
              </span>
              <Button
                variant="outline"
                size="icon"
                className="h-7 w-7"
                onClick={() => setRate(Math.min(3, rate + 0.25))}
                disabled={rate >= 3}
              >
                <Plus className="h-3 w-3" />
              </Button>
            </div>

            {/* Expand/Collapse */}
            <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => setIsExpanded(!isExpanded)}>
              {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
            </Button>
          </div>

          {/* Expanded settings */}
          {isExpanded && (
            <div className="mt-3 flex flex-col gap-3 border-t border-border pt-3">
              {/* Speed on mobile */}
              <div className="flex items-center gap-3 sm:hidden">
                <span className="text-xs text-muted-foreground w-16 shrink-0">Toc do:</span>
                <Slider
                  value={[rate]}
                  min={0.5}
                  max={3}
                  step={0.25}
                  onValueChange={([v]) => setRate(v)}
                  className="flex-1"
                />
                <span className="w-10 text-right text-xs font-medium">{rate.toFixed(2)}x</span>
              </div>

              {/* Voice selector */}
              {voices.length > 1 && (
                <div className="flex items-center gap-3">
                  <Volume2 className="h-4 w-4 shrink-0 text-muted-foreground" />
                  <select
                    className="flex-1 rounded-md border border-input bg-background px-2 py-1.5 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
                    value={selectedVoiceURI}
                    onChange={(e) => setSelectedVoiceURI(e.target.value)}
                  >
                    {voices.map((v) => (
                      <option key={v.voiceURI} value={v.voiceURI}>
                        {v.name} ({v.lang})
                      </option>
                    ))}
                  </select>
                </div>
              )}

              {/* Auto next chapter toggle */}
              <label className="flex cursor-pointer items-center gap-3">
                <div
                  role="switch"
                  aria-checked={autoNextChapter}
                  tabIndex={0}
                  className={cn(
                    "relative h-5 w-9 shrink-0 rounded-full transition-colors",
                    autoNextChapter ? "bg-primary" : "bg-muted-foreground/30"
                  )}
                  onClick={() => setAutoNextChapter(!autoNextChapter)}
                  onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setAutoNextChapter(!autoNextChapter) }}
                >
                  <span
                    className={cn(
                      "absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-background shadow transition-transform",
                      autoNextChapter && "translate-x-4"
                    )}
                  />
                </div>
                <span className="text-xs text-muted-foreground">
                  Tu dong chuyen chuong {currentChapter < maxChapter ? `(chuong ${currentChapter + 1})` : "(da la chuong cuoi)"}
                </span>
              </label>
            </div>
          )}
        </div>
      </div>

      {/* Spacer so content isn't hidden behind the player bar */}
      <div className={cn("h-16", isExpanded && "h-44")} />

      {/* TTS highlight styles */}
      <style>{`
        .tts-active-paragraph {
          background: var(--primary) !important;
          color: var(--primary-foreground) !important;
          border-radius: 0.375rem;
          padding: 0.5rem 0.75rem;
          margin-left: -0.75rem;
          margin-right: -0.75rem;
          transition: background 0.3s ease, color 0.3s ease;
        }
      `}</style>
    </>
  )
}