import { useState, useRef, useEffect, useCallback } from 'react';
import { useIsMobile } from '../../shared/use-mobile';
import { useOptionalLayout } from '../../../contexts/LayoutContext';

export interface UseAudioPlayerProps {
  /** Source URL of the audio file */
  src?: string;
  /** Whether to play automatically on mount */
  autoPlay?: boolean;
  /** Initial playback time in seconds */
  initialTime?: number;
  /** Total duration in seconds (optional — loaded from metadata if not provided) */
  initialDuration?: number;
  /** Display variant: 'card' (standard floating) or 'bar' (global fixed bar) */
  variant?: 'card' | 'bar';
  /** Whether the player is currently visible and open (only for 'bar' variant) */
  isOpen?: boolean;
  /** Whether the player should automatically float when scrolled out of view */
  enableAutoFloat?: boolean;
  /** Callback fired when user manually closes the floating player */
  onCloseFloating?: () => void;
}

export interface UseAudioPlayerReturn {
  // ── Refs ──────────────────────────────────────────────────────────────────
  audioRef: React.RefObject<HTMLAudioElement>;
  containerRef: React.RefObject<HTMLDivElement>;

  // ── Playback state ────────────────────────────────────────────────────────
  isPlaying: boolean;
  currentTime: number;
  duration: number;
  volume: number;
  isMuted: boolean;
  playbackSpeed: number;

  // ── UI state ──────────────────────────────────────────────────────────────
  isFloating: boolean;
  isManualFloating: boolean;
  isVisible: boolean;
  isMobile: boolean;
  enableAutoFloatLocal: boolean;

  // ── Layout context (for 'bar' variant positioning) ────────────────────────
  sidebarExpanded: boolean;
  sidebarWidth: number;
  assistenteExpanded: boolean;

  // ── Handlers ──────────────────────────────────────────────────────────────
  togglePlay: () => void;
  toggleMute: () => void;
  handleSeek: (value: number[]) => void;
  handleVolumeChange: (value: number[]) => void;
  handleSetFloating: (floating: boolean) => void;
  handleEnableManualFloat: () => void;
  setPlaybackSpeed: (speed: number) => void;
  resetAudio: () => void;

  // ── Audio element event handlers (for use in <audio> JSX) ─────────────────
  onPlay: () => void;
  onPause: () => void;
  onEnded: () => void;
  onTimeUpdate: (e: React.SyntheticEvent<HTMLAudioElement>) => void;
  onLoadedMetadata: (e: React.SyntheticEvent<HTMLAudioElement>) => void;

  // ── Utilities ─────────────────────────────────────────────────────────────
  formatTime: (time: number) => string;
}

/**
 * `useAudioPlayer` — Headless hook for the AudioPlayer component.
 *
 * Encapsulates all state management and side effects for audio playback,
 * including auto-float on scroll, mobile detection, and layout context integration.
 *
 * @example
 * ```tsx
 * import { useAudioPlayer } from './use-audio-player';
 *
 * function MyCustomPlayer({ src }: { src: string }) {
 *   const { isPlaying, togglePlay, formatTime, currentTime, duration } = useAudioPlayer({ src });
 *   return (
 *     <div>
 *       <button onClick={togglePlay}>{isPlaying ? 'Pause' : 'Play'}</button>
 *       <span>{formatTime(currentTime)} / {formatTime(duration)}</span>
 *     </div>
 *   );
 * }
 * ```
 */
export function useAudioPlayer({
  src,
  autoPlay = false,
  initialTime = 0,
  initialDuration,
  variant = 'card',
  isOpen = true,
  enableAutoFloat = true,
  onCloseFloating,
}: UseAudioPlayerProps = {}): UseAudioPlayerReturn {
  const audioRef = useRef<HTMLAudioElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Layout context for 'bar' variant positioning
  const layout = useOptionalLayout();
  const sidebarExpanded = layout?.sidebarExpanded ?? false;
  const sidebarWidth = layout?.sidebarWidth ?? 256;
  const assistenteExpanded = layout?.assistenteExpanded ?? false;

  // Mobile detection via shared hook (replaces inline window.innerWidth < 768)
  const isMobile = useIsMobile();

  // ── Playback state ──────────────────────────────────────────────────────────
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(0.8);
  const [isMuted, setIsMuted] = useState(false);
  const [currentTime, setCurrentTime] = useState(initialTime);
  const [duration, setDuration] = useState(initialDuration || 0);
  const [playbackSpeed, setPlaybackSpeedState] = useState(1);

  // ── Float state ─────────────────────────────────────────────────────────────
  const [isFloating, setIsFloating] = useState(false);
  const [isManualFloating, setIsManualFloating] = useState(false);
  const [enableAutoFloatLocal, setEnableAutoFloatLocal] = useState(enableAutoFloat);

  // ── Visibility state ────────────────────────────────────────────────────────
  const [isVisible, setIsVisible] = useState(variant === 'card');

  // ── Latest-ref pattern (avoids stale closures in mode-switch effect) ────────
  const currentTimeRef = useRef(currentTime);
  const isPlayingRef = useRef(isPlaying);

  // ── Effects ─────────────────────────────────────────────────────────────────

  // Sync latest-refs
  useEffect(() => {
    currentTimeRef.current = currentTime;
  }, [currentTime]);
  useEffect(() => {
    isPlayingRef.current = isPlaying;
  }, [isPlaying]);

  // Handle visibility for 'bar' variant
  useEffect(() => {
    if (variant === 'bar') {
      if (isOpen) {
        setIsVisible(true);
      } else {
        const timer = setTimeout(() => setIsVisible(false), 300);
        return () => clearTimeout(timer);
      }
    } else {
      setIsVisible(true);
    }
  }, [isOpen, variant]);

  // Sync audio ref with state updates (volume, mute, speed)
  useEffect(() => {
    const audio = audioRef.current;
    if (!audio) return;
    audio.volume = volume;
    audio.muted = isMuted;
    audio.playbackRate = playbackSpeed;
  }, [volume, isMuted, playbackSpeed, src]);

  // Auto-float on scroll logic (only for 'card' variant)
  useEffect(() => {
    if (variant !== 'card' || !enableAutoFloatLocal) return;
    const container = containerRef.current;
    if (!container) return;
    if (typeof IntersectionObserver === 'undefined') return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (isPlaying && !entry.isIntersecting && !isFloating) {
          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
          setIsFloating(true);
        } else if (entry.isIntersecting && isFloating && !isManualFloating) {
          if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
          setIsFloating(false);
          setIsManualFloating(false);
        }
      },
      { threshold: 0.2 }
    );

    observer.observe(container);
    return () => observer.disconnect();
  }, [isPlaying, isFloating, isManualFloating, variant, enableAutoFloatLocal]);

  // Restore state when switching modes (remounting audio element)
  useEffect(() => {
    const audio = audioRef.current;
    if (audio) {
      if (Math.abs(audio.currentTime - currentTimeRef.current) > 0.5) {
        audio.currentTime = currentTimeRef.current;
      }
      if (isPlayingRef.current) {
        audio.play().catch(err => console.log('Playback interrupted:', err));
      }
    }
  }, [isFloating, variant]); // sem eslint-disable

  // ── Handlers ────────────────────────────────────────────────────────────────

  const handleSetFloating = useCallback(
    (floating: boolean) => {
      if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
      setIsFloating(floating);
      if (!floating) {
        setIsManualFloating(false);
        if (onCloseFloating) onCloseFloating();
      }
    },
    [onCloseFloating]
  );

  const togglePlay = useCallback(() => {
    if (audioRef.current) {
      if (isPlaying) {
        audioRef.current.pause();
      } else {
        audioRef.current.play().catch(err => console.log('Playback error:', err));
      }
    }
  }, [isPlaying]);

  const toggleMute = useCallback(() => {
    setIsMuted(prev => !prev);
  }, []);

  const handleSeek = useCallback((value: number[]) => {
    if (audioRef.current) {
      audioRef.current.currentTime = value[0];
      setCurrentTime(value[0]);
    }
  }, []);

  const handleVolumeChange = useCallback((value: number[]) => {
    const newVolume = value[0];
    setVolume(newVolume);
    setIsMuted(newVolume === 0);
  }, []);

  const handleEnableManualFloat = useCallback(() => {
    setEnableAutoFloatLocal(true);
    setIsManualFloating(true);
    if (audioRef.current) setCurrentTime(audioRef.current.currentTime);
    setIsFloating(true);
  }, []);

  const setPlaybackSpeed = useCallback((speed: number) => {
    setPlaybackSpeedState(speed);
  }, []);

  const resetAudio = useCallback(() => {
    if (audioRef.current) {
      audioRef.current.currentTime = 0;
    }
  }, []);

  const formatTime = useCallback((time: number): string => {
    if (isNaN(time) || time === Infinity || !isFinite(time)) return '0:00';
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
  }, []);

  // ── Audio element event handlers ─────────────────────────────────────────────
  const onPlay = useCallback(() => setIsPlaying(true), []);
  const onPause = useCallback(() => setIsPlaying(false), []);
  const onEnded = useCallback(() => setIsPlaying(false), []);
  const onTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
    setCurrentTime(e.currentTarget.currentTime);
  }, []);
  const onLoadedMetadata = useCallback((e: React.SyntheticEvent<HTMLAudioElement>) => {
    setDuration(e.currentTarget.duration);
  }, []);

  return {
    audioRef,
    containerRef,
    isPlaying,
    currentTime,
    duration,
    volume,
    isMuted,
    playbackSpeed,
    isFloating,
    isManualFloating,
    isVisible,
    isMobile,
    enableAutoFloatLocal,
    sidebarExpanded,
    sidebarWidth,
    assistenteExpanded,
    togglePlay,
    toggleMute,
    handleSeek,
    handleVolumeChange,
    handleSetFloating,
    handleEnableManualFloat,
    setPlaybackSpeed,
    resetAudio,
    onPlay,
    onPause,
    onEnded,
    onTimeUpdate,
    onLoadedMetadata,
    formatTime,
  };
}