Momento/memento-note/components/brainstorm/playback-bar.tsx

'use client'

import React, { useState, useCallback, useRef, useEffect } from 'react'
import { motion, AnimatePresence } from 'motion/react'
import { Play, Pause, SkipBack, SkipForward, ChevronDown, ChevronUp, RotateCcw } from 'lucide-react'
import { useBrainstormSnapshots } from '@/hooks/use-brainstorm'

interface SnapshotIdea {
  id: string
  title: string
  waveNumber: number
  positionX: number | null
  positionY: number | null
  parentIdeaId: string | null
  noveltyScore: number | null
  createdByType: string | null
  status: string
}

interface Snapshot {
  id: string
  step: number
  label: string | null
  ideaGraph: string
  createdAt: string
}

interface PlaybackBarProps {
  sessionId: string
  onSnapshotSelect: (ideas: SnapshotIdea[]) => void
  onExitPlayback: () => void
}

export function PlaybackBar({ sessionId, onSnapshotSelect, onExitPlayback }: PlaybackBarProps) {
  const { data: snapshots } = useBrainstormSnapshots(sessionId)
  const [isOpen, setIsOpen] = useState(false)
  const [currentStep, setCurrentStep] = useState(-1)
  const [isPlaying, setIsPlaying] = useState(false)
  const playIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)

  const parsedSnapshots: (Snapshot & { ideas: SnapshotIdea[] })[] = React.useMemo(() => {
    return (snapshots || []).map((s: Snapshot) => ({
      ...s,
      ideas: JSON.parse(s.ideaGraph) as SnapshotIdea[],
    }))
  }, [snapshots])

  const handleStepChange = useCallback((step: number) => {
    if (step === -1) {
      setCurrentStep(-1)
      onExitPlayback()
      return
    }
    const snapshot = parsedSnapshots[step]
    if (snapshot) {
      setCurrentStep(step)
      onSnapshotSelect(snapshot.ideas)
    }
  }, [parsedSnapshots, onSnapshotSelect, onExitPlayback])

  const togglePlay = useCallback(() => {
    if (isPlaying) {
      setIsPlaying(false)
      if (playIntervalRef.current) clearInterval(playIntervalRef.current)
      return
    }

    setIsPlaying(true)
    const startStep = currentStep === -1 ? 0 : currentStep + 1
    let step = startStep

    playIntervalRef.current = setInterval(() => {
      if (step >= parsedSnapshots.length) {
        setIsPlaying(false)
        if (playIntervalRef.current) clearInterval(playIntervalRef.current)
        return
      }
      handleStepChange(step)
      step++
    }, 1500)
  }, [isPlaying, currentStep, parsedSnapshots.length, handleStepChange])

  useEffect(() => {
    return () => {
      if (playIntervalRef.current) clearInterval(playIntervalRef.current)
    }
  }, [])

  if (!parsedSnapshots || parsedSnapshots.length === 0) return null

  const isLive = currentStep === -1

  return (
    <AnimatePresence>
      <motion.div
        initial={{ y: 60 }}
        animate={{ y: isOpen ? 0 : 40 }}
        className="absolute bottom-0 left-0 right-16 z-30"
      >
        <div className="mx-6 mb-4 bg-white/90 dark:bg-[#1A1A1A]/90 backdrop-blur-xl border border-border rounded-2xl shadow-2xl overflow-hidden">
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="w-full px-5 py-2.5 flex items-center justify-between hover:bg-foreground/5 transition-colors"
          >
            <div className="flex items-center gap-3">
              <div className={`w-2 h-2 rounded-full ${isLive ? 'bg-emerald-500 animate-pulse' : isPlaying ? 'bg-orange-500 animate-pulse' : 'bg-muted-foreground'}`} />
              <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                {isLive ? 'Live' : `Step ${currentStep + 1}/${parsedSnapshots.length}`}
              </span>
              {parsedSnapshots[currentStep]?.label && (
                <span className="text-[10px] text-muted-foreground/60 truncate max-w-[200px]">
                  — {parsedSnapshots[currentStep].label}
                </span>
              )}
            </div>
            <div className="flex items-center gap-2">
              {isLive ? (
                <span className="text-[9px] font-bold text-emerald-500 uppercase tracking-wider">Live</span>
              ) : (
                <button
                  onClick={(e) => { e.stopPropagation(); handleStepChange(-1) }}
                  className="p-1.5 hover:bg-foreground/10 rounded-lg transition-colors"
                  title="Return to live"
                >
                  <RotateCcw size={12} className="text-muted-foreground" />
                </button>
              )}
              {isOpen ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
            </div>
          </button>

          {isOpen && (
            <motion.div
              initial={{ height: 0 }}
              animate={{ height: 'auto' }}
              className="border-t border-border"
            >
              <div className="px-5 py-3 flex items-center gap-3">
                <button
                  onClick={() => handleStepChange(Math.max(0, currentStep - 1))}
                  disabled={currentStep <= 0}
                  className="p-2 hover:bg-foreground/5 rounded-lg transition-colors disabled:opacity-30"
                >
                  <SkipBack size={14} />
                </button>
                <button
                  onClick={togglePlay}
                  className="p-2 hover:bg-foreground/5 rounded-lg transition-colors"
                >
                  {isPlaying ? <Pause size={14} /> : <Play size={14} />}
                </button>
                <button
                  onClick={() => handleStepChange(Math.min(parsedSnapshots.length - 1, currentStep + 1))}
                  disabled={currentStep >= parsedSnapshots.length - 1}
                  className="p-2 hover:bg-foreground/5 rounded-lg transition-colors disabled:opacity-30"
                >
                  <SkipForward size={14} />
                </button>

                <div className="flex-1 mx-3">
                  <input
                    type="range"
                    min={-1}
                    max={parsedSnapshots.length - 1}
                    value={currentStep}
                    onChange={(e) => handleStepChange(parseInt(e.target.value))}
                    className="w-full h-1.5 bg-border rounded-full appearance-none cursor-pointer accent-orange-500"
                  />
                  <div className="flex justify-between mt-1">
                    <span className="text-[8px] text-muted-foreground/40">Live</span>
                    <span className="text-[8px] text-muted-foreground/40">{parsedSnapshots.length} steps</span>
                  </div>
                </div>
              </div>

              <div className="px-5 pb-3 flex gap-1 overflow-x-auto">
                {parsedSnapshots.map((s, idx) => (
                  <button
                    key={s.id}
                    onClick={() => handleStepChange(idx)}
                    className={`shrink-0 px-2.5 py-1 rounded-lg text-[9px] font-bold uppercase tracking-wider transition-all ${
                      idx === currentStep
                        ? 'bg-orange-500 text-white'
                        : 'bg-foreground/5 text-muted-foreground hover:bg-foreground/10'
                    }`}
                  >
                    {s.label ? (s.label.length > 20 ? s.label.substring(0, 20) + '…' : s.label) : `#${idx + 1}`}
                  </button>
                ))}
              </div>
            </motion.div>
          )}
        </div>
      </motion.div>
    </AnimatePresence>
  )
}