'use client';

import { useEffect, useRef, useState } from 'react';
import { Loader2, Pause, Play } from 'lucide-react';
import { cn } from '@/lib/utils';

function formatDuration(seconds: number) {
  if (!Number.isFinite(seconds) || seconds <= 0) return '0:00';
  const whole = Math.floor(seconds);
  const mins = Math.floor(whole / 60);
  const secs = whole % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

export function ChatVideoPlayer({
  src,
  durationMs,
  fileName,
  variant = 'theirs'
}: {
  src: string;
  durationMs?: number;
  fileName?: string;
  variant?: 'mine' | 'theirs';
}) {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const [playing, setPlaying] = useState(false);
  const [loading, setLoading] = useState(true);
  const [duration, setDuration] = useState(durationMs ? durationMs / 1000 : 0);

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

    const onLoaded = () => {
      if (Number.isFinite(video.duration) && video.duration > 0) {
        setDuration(video.duration);
      }
      setLoading(false);
    };
    const onPlay = () => setPlaying(true);
    const onPause = () => setPlaying(false);
    const onEnded = () => setPlaying(false);

    video.addEventListener('loadedmetadata', onLoaded);
    video.addEventListener('play', onPlay);
    video.addEventListener('pause', onPause);
    video.addEventListener('ended', onEnded);

    return () => {
      video.removeEventListener('loadedmetadata', onLoaded);
      video.removeEventListener('play', onPlay);
      video.removeEventListener('pause', onPause);
      video.removeEventListener('ended', onEnded);
    };
  }, [src]);

  function togglePlayback() {
    const video = videoRef.current;
    if (!video) return;
    if (video.paused) {
      void video.play();
    } else {
      video.pause();
    }
  }

  return (
    <div
      className={cn(
        'relative max-w-[320px] overflow-hidden rounded-xl',
        variant === 'mine' ? 'bg-[#d9f7c8]/40' : 'bg-black/5'
      )}
    >
      <video
        ref={videoRef}
        src={src}
        className="max-h-72 w-full bg-black object-contain"
        playsInline
        preload="metadata"
        onClick={togglePlayback}
      />
      <button
        type="button"
        onClick={togglePlayback}
        className="absolute inset-0 flex items-center justify-center bg-black/15 transition hover:bg-black/25"
        aria-label={playing ? 'Пауза' : 'Воспроизвести'}
      >
        {loading ? (
          <Loader2 className="h-10 w-10 animate-spin text-white" />
        ) : playing ? (
          <Pause className="h-10 w-10 text-white drop-shadow" />
        ) : (
          <Play className="h-10 w-10 text-white drop-shadow" />
        )}
      </button>
      <div className="absolute bottom-2 left-2 rounded-full bg-black/55 px-2 py-0.5 text-[11px] text-white">
        {formatDuration(duration)}
      </div>
      {fileName ? (
        <div className="truncate px-2 py-1 text-xs text-[#667085]" title={fileName}>
          {fileName}
        </div>
      ) : null}
    </div>
  );
}
