'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import Artplayer from 'artplayer';
import { detectVideoFormat, VideoFormat, VideoFile } from '@/lib/video-format-detector';
import { Bookmark, Star } from 'lucide-react';

interface ArtPlayerWrapperProps {
  video: VideoFile;
  isOpen: boolean;
  onClose: () => void;
  onProgress?: (time: number) => void;
  onBookmark?: (videoId: number) => void;
  onUnbookmark?: (videoId: number) => void;
  onRate?: (videoId: number, rating: number) => void;
  useArtPlayer: boolean;
  isBookmarked?: boolean;
  bookmarkCount?: number;
  avgRating?: number;
  showBookmarks?: boolean;
  showRatings?: boolean;
}

export default function ArtPlayerWrapper({
  video,
  isOpen,
  onClose,
  onProgress,
  onBookmark,
  onUnbookmark,
  onRate,
  useArtPlayer,
  isBookmarked = false,
  bookmarkCount = 0,
  avgRating = 0,
  showBookmarks = false,
  showRatings = false
}: ArtPlayerWrapperProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const playerRef = useRef<Artplayer | null>(null);
  const [format, setFormat] = useState<VideoFormat | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(0);
  const [isPlaying, setIsPlaying] = useState(false);
  const [volume, setVolume] = useState(1);
  const [isMuted, setIsMuted] = useState(false);
  const [showControls, setShowControls] = useState(true);
  const [localIsBookmarked, setLocalIsBookmarked] = useState(isBookmarked);
  const [localBookmarkCount, setLocalBookmarkCount] = useState(bookmarkCount);
  const [localAvgRating, setLocalAvgRating] = useState(avgRating);

  // Update local state when props change
  useEffect(() => {
    setLocalIsBookmarked(isBookmarked);
    setLocalBookmarkCount(bookmarkCount);
    setLocalAvgRating(avgRating);
  }, [isBookmarked, bookmarkCount, avgRating]);

  // Initialize ArtPlayer
  useEffect(() => {
    if (!useArtPlayer || !isOpen || !containerRef.current) return;

    setIsLoading(true);
    setError(null);

    try {
      const detectedFormat = detectVideoFormat(video);
      setFormat(detectedFormat);

      const player = new Artplayer({
        container: containerRef.current,
        url: detectedFormat.url,
        type: detectedFormat.type === 'hls' ? 'm3u8' : 'mp4',
        
        // Core playback settings
        autoplay: false,
        muted: false,
        volume: volume,
        
        // UI controls
        fullscreen: true,
        fullscreenWeb: true,
        pip: true,
        playbackRate: true,
        aspectRatio: true,
        screenshot: true,
        hotkey: true,
        
        // Display settings
        theme: '#3b82f6', // Blue theme
        
        // Quality control (for HLS)
        quality: detectedFormat.qualities || [],
        
        // Subtitle support
        subtitle: {
          url: '', // Will be populated if subtitles are available
          type: 'vtt',
          style: {
            color: '#fff',
            fontSize: '20px',
            textShadow: '0 0 2px rgba(0,0,0,0.8)'
          }
        },
        
        // Settings
        settings: [
          {
            html: 'Quality',
            icon: '<span class="artplayer-icon-settings-quality">⚙️</span>',
            selector: detectedFormat.qualities || [],
            onSelect: function(item: any) {
              console.log('Quality selected:', item);
            }
          }
        ],
        
        // Custom layer for bookmark and rating controls
        layers: [
          {
            html: `<div class="artplayer-custom-controls absolute top-4 right-4 flex items-center gap-2 z-10">
                     <div class="artplayer-bookmark-control flex items-center gap-1 px-2 py-1 rounded hover:bg-white/20 transition-colors cursor-pointer text-white">
                       <svg class="h-4 w-4" fill="${localIsBookmarked ? 'currentColor' : 'none'}" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
                       </svg>
                       <span class="text-xs">${localBookmarkCount}</span>
                     </div>
                     <div class="artplayer-rating-control flex items-center gap-1 px-2 py-1 rounded hover:bg-white/20 transition-colors cursor-pointer text-white">
                       <span class="text-xs">★ ${localAvgRating.toFixed(1)}</span>
                     </div>
                   </div>`,
            style: {
              position: 'absolute',
              top: '16px',
              right: '16px',
              zIndex: '10'
            } as any,
            click: function(this: any, component: any, event: Event) {
              const target = event.target as HTMLElement;
              if (target.closest('.artplayer-bookmark-control')) {
                handleBookmarkToggle();
              } else if (target.closest('.artplayer-rating-control')) {
                handleRatingClick();
              }
            }
          }
        ]
      });

      // Event listeners
      player.on('ready', () => {
        console.log('ArtPlayer ready');
        setIsLoading(false);
      });

      player.on('play', () => {
        setIsPlaying(true);
      });

      player.on('pause', () => {
        setIsPlaying(false);
      });

      player.on('timeupdate', () => {
        const currentTime = player.currentTime;
        setCurrentTime(currentTime);
        if (onProgress) {
          onProgress(currentTime);
        }
      });

      player.on('video:loadedmetadata', () => {
        setDuration(player.duration);
      });

      player.on('volumechange', () => {
        setVolume(player.volume);
        setIsMuted(player.muted);
      });

      player.on('error', (error) => {
        console.error('ArtPlayer error:', error);
        setError(`Failed to load video: ${error.message || 'Unknown error'}`);
        setIsLoading(false);
        
        // Fallback to current player if ArtPlayer fails
        if (format?.supportLevel === 'native') {
          console.log('ArtPlayer failed for native format, falling back to current player');
          // This will trigger the parent component to switch to current player
        }
      });

      // Custom event listeners
      player.on('controls:show', () => {
        setShowControls(true);
      });

      player.on('controls:hidden', () => {
        setShowControls(false);
      });

      playerRef.current = player;

      return () => {
        if (playerRef.current) {
          playerRef.current.destroy();
          playerRef.current = null;
        }
      };
    } catch (error) {
      console.error('Failed to initialize ArtPlayer:', error);
      setError(`Failed to initialize player: ${error instanceof Error ? error.message : 'Unknown error'}`);
      setIsLoading(false);
    }
  }, [useArtPlayer, isOpen, video, onProgress, volume, format?.supportLevel, localIsBookmarked, localBookmarkCount, localAvgRating]);

  // Handle bookmark toggle
  const handleBookmarkToggle = useCallback(async () => {
    if (!video.id) return;

    try {
      if (localIsBookmarked) {
        if (onUnbookmark) {
          onUnbookmark(video.id);
        }
        setLocalIsBookmarked(false);
        setLocalBookmarkCount(prev => Math.max(0, prev - 1));
      } else {
        if (onBookmark) {
          onBookmark(video.id);
        }
        setLocalIsBookmarked(true);
        setLocalBookmarkCount(prev => prev + 1);
      }
    } catch (error) {
      console.error('Error toggling bookmark:', error);
    }
  }, [video.id, localIsBookmarked, onBookmark, onUnbookmark]);

  // Handle rating click
  const handleRatingClick = useCallback(() => {
    if (!video.id || !onRate) return;

    const currentRating = Math.round(localAvgRating);
    const newRating = currentRating >= 5 ? 1 : currentRating + 1;
    
    onRate(video.id, newRating);
    setLocalAvgRating(newRating);
  }, [video.id, localAvgRating, onRate]);

  // Format time display
  const formatTime = (time: number) => {
    const minutes = Math.floor(time / 60);
    const seconds = Math.floor(time % 60);
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  };

  // Format file size
  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  // Handle keyboard shortcuts
  useEffect(() => {
    if (!isOpen || !playerRef.current) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      switch (e.key) {
        case 'Escape':
          e.preventDefault();
          onClose();
          break;
        case ' ':
          e.preventDefault();
          if (isPlaying) {
            playerRef.current?.pause();
          } else {
            playerRef.current?.play();
          }
          break;
        case 'ArrowLeft':
          e.preventDefault();
          playerRef.current!.currentTime = Math.max(0, playerRef.current!.currentTime - 10);
          break;
        case 'ArrowRight':
          e.preventDefault();
          playerRef.current!.currentTime = Math.min(playerRef.current!.duration || 0, playerRef.current!.currentTime + 10);
          break;
        case 'f':
        case 'F':
          e.preventDefault();
          playerRef.current!.fullscreen = !playerRef.current!.fullscreen;
          break;
        case 'm':
        case 'M':
          e.preventDefault();
          playerRef.current!.muted = !playerRef.current!.muted;
          break;
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, onClose, isPlaying]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      if (playerRef.current) {
        playerRef.current.destroy();
        playerRef.current = null;
      }
    };
  }, []);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center">
      <div className="relative w-full h-full max-w-7xl max-h-[90vh] mx-auto my-8">
        {/* Close button */}
        <button
          onClick={onClose}
          className="absolute top-4 right-4 z-20 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 transition-colors"
        >
          <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        {/* Loading indicator */}
        {isLoading && (
          <div className="absolute top-4 left-4 z-20 bg-blue-500/20 text-blue-400 rounded-full px-3 py-1.5 flex items-center gap-2">
            <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
            <span className="text-sm">Loading ArtPlayer...</span>
          </div>
        )}

        {/* Error indicator */}
        {error && (
          <div className="absolute top-4 left-4 right-4 z-20 bg-red-500/20 border border-red-500/50 text-red-400 rounded-lg px-4 py-3 flex items-center gap-3">
            <div className="w-3 h-3 bg-red-500 rounded-full flex-shrink-0"></div>
            <div className="flex-1">
              <div className="text-sm font-medium">ArtPlayer Error</div>
              <div className="text-xs opacity-90">{error}</div>
            </div>
            <button
              onClick={() => {
                setError(null);
                setIsLoading(true);
              }}
              className="text-red-400 hover:text-red-300 text-xs underline flex-shrink-0"
            >
              Retry
            </button>
          </div>
        )}

        {/* Format info */}
        {format && (
          <div className="absolute top-4 left-4 z-20 bg-green-500/20 text-green-400 rounded-full px-3 py-1.5 flex items-center gap-2">
            <div className="w-2 h-2 bg-green-500 rounded-full"></div>
            <span className="text-xs">
              {format.supportLevel === 'native' ? 'Native' : 
               format.supportLevel === 'hls' ? 'HLS' : 'Fallback'}
            </span>
          </div>
        )}

        {/* Video container */}
        <div 
          className="relative w-full h-full bg-black rounded-lg overflow-hidden"
          onMouseMove={() => setShowControls(true)}
          onMouseLeave={() => setShowControls(false)}
        >
          {/* ArtPlayer will be mounted here */}
          <div 
            ref={containerRef}
            className="w-full h-full artplayer-container"
            style={{ display: isLoading ? 'none' : 'block' }}
          />

          {/* Loading overlay */}
          {isLoading && (
            <div className="absolute inset-0 flex items-center justify-center bg-black">
              <div className="text-white text-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4"></div>
                <p>Loading ArtPlayer...</p>
              </div>
            </div>
          )}
        </div>

        {/* Video info overlay */}
        <div className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-4 transition-opacity duration-300 ${showControls ? 'opacity-100' : 'opacity-0'}`}>
          <div className="bg-black/70 backdrop-blur-sm rounded-lg p-4 mb-2">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-white font-medium">{video.title}</h3>
                <p className="text-gray-300 text-sm">{formatFileSize(video.size)}</p>
                {duration > 0 && (
                  <p className="text-gray-300 text-sm">
                    Duration: {formatTime(duration)}
                    {format?.type === 'hls' && <span className="text-green-400 ml-1">(HLS)</span>}
                  </p>
                )}
              </div>
              {(showBookmarks || showRatings) && (
                <div className="flex items-center gap-4">
                  {showBookmarks && (
                    <button
                      onClick={handleBookmarkToggle}
                      className={`flex items-center gap-1 text-white hover:text-yellow-400 transition-colors ${localIsBookmarked ? 'text-yellow-400' : ''}`}
                    >
                      <Bookmark className={`h-4 w-4 ${localIsBookmarked ? 'fill-current' : ''}`} />
                      <span className="text-xs">{localBookmarkCount}</span>
                    </button>
                  )}
                  {showRatings && (
                    <div className="flex items-center gap-1">
                      <button
                        onClick={handleRatingClick}
                        className="text-white hover:text-yellow-400 transition-colors"
                      >
                        <Star className={`h-4 w-4 ${localAvgRating > 0 ? 'fill-yellow-400 text-yellow-400' : ''}`} />
                      </button>
                      <span className="text-xs text-gray-300">{localAvgRating.toFixed(1)}</span>
                    </div>
                  )}
                </div>
              )}
            </div>
          </div>

          {/* Controls */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <button
                onClick={() => {
                  if (playerRef.current) {
                    if (isPlaying) {
                      playerRef.current.pause();
                    } else {
                      playerRef.current.play();
                    }
                  }
                }}
                className="text-white hover:text-gray-300 transition-colors"
              >
                {isPlaying ? (
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
                  </svg>
                ) : (
                  <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                  </svg>
                )}
              </button>

              <div className="flex items-center gap-2">
                <button
                  onClick={() => {
                    if (playerRef.current) {
                      playerRef.current.muted = !isMuted;
                    }
                  }}
                  className="text-white hover:text-gray-300 transition-colors"
                >
                  {isMuted ? (
                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
                    </svg>
                  ) : (
                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
                    </svg>
                  )}
                </button>
                <span className="text-xs text-gray-300">{Math.round(volume * 100)}%</span>
              </div>

              <span className="text-sm text-white">
                {formatTime(currentTime)} / {formatTime(duration)}
              </span>
            </div>

            <div className="flex items-center gap-2">
              <button
                onClick={() => {
                  if (playerRef.current) {
                    playerRef.current.fullscreen = !playerRef.current.fullscreen;
                  }
                }}
                className="text-white hover:text-gray-300 transition-colors"
              >
                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}