'use client';

import React, {useEffect, useRef, useState} from 'react';
import Hls from 'hls.js';
import {PlayIcon, SpeakerWaveIcon, SpeakerXMarkIcon} from '@heroicons/react/24/solid';
import {AltBadge} from './AltBadge';

interface VideoPlayerProps {
  playlist: string;
  thumbnail?: string;
  alt?: string;
  aspectRatio?: {width: number; height: number};
}

export function VideoPlayer({playlist, thumbnail, alt, aspectRatio}: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [isMuted, setIsMuted] = useState(true);
  const [isHovered, setIsHovered] = useState(false);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    let hls: Hls | null = null;

    if (Hls.isSupported()) {
      hls = new Hls({
        capLevelToPlayerSize: true,
      });
      hls.loadSource(playlist);
      hls.attachMedia(video);
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = playlist;
    }

    return () => {
      if (hls) {
        hls.destroy();
      }
    };
  }, [playlist]);

  const togglePlay = (e: React.MouseEvent) => {
    e.stopPropagation();
    const video = videoRef.current;
    if (!video) return;

    if (isPlaying) {
      video.pause();
    } else {
      video.play().catch(console.error);
    }
    setIsPlaying(!isPlaying);
  };

  const toggleMute = (e: React.MouseEvent) => {
    e.stopPropagation();
    const video = videoRef.current;
    if (!video) return;

    video.muted = !isMuted;
    setIsMuted(!isMuted);
  };

  const ratio = aspectRatio ? aspectRatio.height / aspectRatio.width : 9 / 16;
  const paddingBottom = `${ratio * 100}%`;

  return (
    <div
      className="relative w-full border-2 border-black rounded-lg overflow-hidden bg-black group"
      style={{paddingBottom}}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      aria-label={alt || 'Video player'}
      role="application"
    >
      <video
        ref={videoRef}
        className="absolute top-0 left-0 w-full h-full object-contain"
        poster={thumbnail}
        muted={isMuted}
        playsInline
        loop
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onClick={togglePlay}
      />

      <div
        className={`absolute inset-0 transition-opacity duration-200 flex items-center justify-center pointer-events-none ${
          isPlaying && !isHovered ? 'opacity-0' : 'opacity-100'
        }`}
      >
        {!isPlaying && (
          <button
            onClick={togglePlay}
            className="pointer-events-auto comic-button bg-red-500 text-white p-4 rounded-full hover:bg-red-600 hover:scale-110 transition-transform shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] border-2 border-black"
          >
            <PlayIcon className="w-8 h-8 ml-1" />
          </button>
        )}
      </div>

      {alt && (
        <div
          className={`transition-opacity duration-200 ${
            isPlaying && !isHovered ? 'opacity-0' : 'opacity-100'
          }`}
        >
          <AltBadge text={alt} />
        </div>
      )}

      <div
        className={`absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4 flex justify-end transition-opacity duration-200 ${
          isPlaying && !isHovered ? 'opacity-0' : 'opacity-100'
        }`}
      >
        <button
          onClick={toggleMute}
          className="pointer-events-auto bg-white/90 p-2 rounded-full border-2 border-black hover:bg-white hover:scale-105 transition-transform shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"
        >
          {isMuted ? (
            <SpeakerXMarkIcon className="w-5 h-5 text-black" />
          ) : (
            <SpeakerWaveIcon className="w-5 h-5 text-black" />
          )}
        </button>
      </div>
    </div>
  );
}