/**
 * Next.js / React компонент для встраивания RUTUBE-видео.
 *
 * Использование:
 *   <RutubeEmbed videoId="479c58a745de50383649a3a0c7c7f0c5" />
 *
 * Или с кастомными параметрами:
 *   <RutubeEmbed
 *     videoId={article.rutubeVideoId}
 *     width={1280}
 *     height={720}
 *     noAds
 *   />
 *
 * Партнёрский `dist` берётся из env-переменной NEXT_PUBLIC_RUTUBE_DIST.
 * Положите в .env.local:
 *   NEXT_PUBLIC_RUTUBE_DIST=shkulevmedia_2
 */
import { useEffect, useMemo } from 'react';

interface RutubeEmbedProps {
  videoId: string;
  width?: number | string;
  height?: number | string;
  autoplay?: boolean;
  mute?: boolean;
  noAds?: boolean;
  className?: string;
}

export function RutubeEmbed({
  videoId,
  width = 720,
  height = 405,
  autoplay = true,
  mute = true,
  noAds = false,
  className,
}: RutubeEmbedProps) {
  const src = useMemo(() => {
    const params = new URLSearchParams({
      dist: process.env.NEXT_PUBLIC_RUTUBE_DIST || '',
      anc: typeof window !== 'undefined' ? window.location.hostname : '',
      tp: 'web',
      autoplay: String(autoplay),
      autostartmute: String(mute),
      ...(noAds && { referer: 'embed.noads' }),
    });
    return `https://rutube.ru/play/embed/${encodeURIComponent(videoId)}/?${params}`;
  }, [videoId, autoplay, mute, noAds]);

  return (
    <iframe
      src={src}
      width={width}
      height={height}
      style={{ border: 'none' }}
      allow="clipboard-write; autoplay"
      allowFullScreen
      className={className}
    />
  );
}

// Альтернатива через наш kit-скрипт (если нужны автообновления параметров с нашей стороны)
export function RutubeEmbedViaKit({ videoId, ...props }: RutubeEmbedProps) {
  return (
    <>
      <div
        data-rutube-video-id={videoId}
        data-width={props.width}
        data-height={props.height}
        data-no-ads={props.noAds ? 'true' : undefined}
      />
      <script src="https://egor-yudin.ru/kit/rutube-embed-builder.min.js" defer />
    </>
  );
}