import { useDraggable } from "@dnd-kit/core"
import { Film } from "lucide-react"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"

import { useResources } from "@/features"
import { useMediaPreview } from "@/features/media/hooks/use-media-preview"
import { FfprobeStream } from "@/features/media/types/ffprobe"
import { MediaFile } from "@/features/media/types/media"
import { calculateAdaptiveWidth, calculateWidth, parseRotation } from "@/features/media/utils/video"
import { TimelineResource } from "@/features/resources/types"
import { DragData } from "@/features/timeline/types/drag-drop"
import { getTrackTypeForMediaFile } from "@/features/timeline/utils/drag-calculations"
import { usePlayer } from "@/features/video-player"
import { formatDuration } from "@/lib/date"
import { checkFileAccess, convertToAssetUrl, convertVideoSrc } from "@/lib/tauri-utils"
import { cn, formatResolution } from "@/lib/utils"

import { ApplyButton } from "../layout"
import { AddMediaButton } from "../layout/add-media-button"
import { FavoriteButton } from "../layout/favorite-button"

interface VideoPreviewProps {
  file: MediaFile
  size?: number
  showFileName?: boolean
  dimensions?: [number, number]
  ignoreRatio?: boolean
}

/**
 * Предварительный просмотр видеофайла
 *
 * Функционал:
 * - Отображает превью видеофайла с поддержкой ленивой загрузки
 * - Адаптивный размер контейнера с соотношением сторон 16:9
 * - Поддерживает два размера UI (стандартный и большой при size > 100)
 * - Опциональное отображение имени файла
 * - Кнопка добавления с состояниями (добавлено/не добавлено)
 * - Темная тема для UI элементов
 *
 * @param file - Объект файла с путем и метаданными
 * @param size - Размер превью в пикселях (по умолчанию 60)
 * @param showFileName - Флаг для отображения имени файла (по умолчанию false)
 * @param dimensions - Соотношение сторон контейнера [ширина, высота], по умолчанию [16, 9]
 * @param ignoreRatio - Флаг для игнорирования соотношения сторон (по умолчанию false)
 */
export const VideoPreview = memo(
  function VideoPreview({ file, size = 150, showFileName = false, ignoreRatio = false }: VideoPreviewProps) {
    const [isPlaying, setIsPlaying] = useState(false)
    const [hoverTime, setHoverTime] = useState<number | null>(null)
    const [isLoaded, setIsLoaded] = useState(false)
    const [previewData, setPreviewData] = useState<string | null>(null)
    const videoRefs = useRef<Record<string, HTMLVideoElement | null>>({})
    const { isAdded: isResourceAdded } = useResources()
    const isAdded = isResourceAdded(file.id, "media")
    const { setPreviewMedia, playerSetSource, playerSetMedia } = usePlayer()

    // Используем Preview Manager для получения данных превью
    const { getPreviewData } = useMediaPreview()

    // Загружаем preview data при монтировании
    useEffect(() => {
      void getPreviewData(file.id).then((data) => {
        if (data?.browser_thumbnail?.base64_data) {
          setPreviewData(data.browser_thumbnail.base64_data)
        }
      })
    }, [file.id, getPreviewData])

    // Обработчик применения видео - теперь отправляем в главный плеер через backend
    const handleApplyVideo = useCallback(
      async (_resource: TimelineResource, _type: string) => {
        try {
          // Устанавливаем плеер в режим браузера
          await playerSetSource("browser")

          // Устанавливаем медиа в плеер
          await playerSetMedia(file.id, 0)

          console.log(`[VideoPreview] Media sent to main player: ${file.name}`)
        } catch (error) {
          console.error("[VideoPreview] Failed to send media to player:", error)
          // Fallback к старому поведению
          setPreviewMedia(file)
        }
      },
      [file],
    )

    // Используем useRef для хранения времени последнего обновления
    const lastUpdateTimeRef = useRef(0)

    // Создаем стабильные ключи для рефов
    useEffect(() => {
      const videoStreams = file.probeData?.streams.filter((s) => s.codec_type === "video") ?? []
      videoStreams.forEach((stream) => {
        const key = stream.streamKey ?? `stream-${stream.index}`
        videoRefs.current[key] ??= null
      })
    }, [file.probeData?.streams])

    // Используем useRef для хранения hoverTime вместо useState
    // чтобы избежать ререндеров при движении мыши
    const hoverTimeRef = useRef<number | null>(null)

    // Setup draggable functionality
    const dragData: DragData = useMemo(
      () => ({
        type:
          getTrackTypeForMediaFile(file) === "video"
            ? "video"
            : getTrackTypeForMediaFile(file) === "audio"
              ? "audio"
              : "image",
        mediaFile: file,
      }),
      [file],
    )

    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
      id: `video-${file.id}`,
      data: dragData,
    })

    const handleMouseMove = useCallback(
      (e: React.MouseEvent<HTMLDivElement>, stream: FfprobeStream) => {
        // Не обновляем состояние во время воспроизведения
        if (isPlaying) return

        const now = Date.now()
        // Ограничиваем обновления до 30 fps для производительности
        if (now - lastUpdateTimeRef.current < 33) return
        lastUpdateTimeRef.current = now

        const rect = e.currentTarget.getBoundingClientRect()
        const x = e.clientX - rect.left
        const percentage = x / rect.width
        const newTime = percentage * (file.duration ?? 0)

        // Обновляем ref
        hoverTimeRef.current = newTime
        // Обновляем состояние с дебаунсингом
        setHoverTime(newTime)

        const key = stream.streamKey ?? `stream-${stream.index}`
        const videoRef = videoRefs.current[key]
        if (videoRef && !isPlaying) {
          videoRef.currentTime = newTime
        }
      },
      [file.duration, isPlaying],
    )

    const handleMouseLeave = useCallback(() => {
      setHoverTime(null)
      // При уходе мыши останавливаем воспроизведение всех видео, кроме видео в шаблоне
      if (isPlaying) {
        setIsPlaying(false)
      }
    }, [isPlaying])

    // Функция handlePlayPause - теперь отправляем видео в главный плеер
    const handlePlayPause = useCallback(
      async (e: React.MouseEvent, stream: FfprobeStream) => {
        e.preventDefault()

        try {
          // Отправляем видео в главный плеер через backend
          await playerSetSource("browser")
          await playerSetMedia(file.id, hoverTime || 0)

          console.log(`[VideoPreview] Video sent to main player from preview: ${file.name} at time ${hoverTime || 0}`)
        } catch (error) {
          console.error("[VideoPreview] Failed to send video to main player:", error)

          // Fallback: локальное воспроизведение в превью (старое поведение)
          const key = stream.streamKey ?? `stream-${stream.index}`
          const videoRef = videoRefs.current[key]
          if (!videoRef) return

          const newPlayingState = !isPlaying

          if (newPlayingState) {
            if (hoverTime !== null) {
              videoRef.currentTime = hoverTime
            }
            videoRef
              .play()
              .catch((err: unknown) => console.error("[VideoPreview] Ошибка воспроизведения в превью:", err))
          } else {
            videoRef.pause()
          }

          setIsPlaying(newPlayingState)
          console.log(
            `[VideoPreview] Fallback: Видео ${newPlayingState ? "запущено" : "остановлено"} в превью:`,
            file.name,
          )
        }
      },
      [hoverTime, file, playerSetSource, playerSetMedia, isPlaying],
    )

    // Состояние для хранения объекта URL
    const [videoUrl, setVideoUrl] = useState<string>("")

    // Мемоизируем URL, чтобы он не менялся без необходимости
    const memoizedVideoUrl = useMemo(() => videoUrl, [videoUrl])

    // Функция для получения URL видео без загрузки в память
    const loadVideoFile = useCallback(async (path: string) => {
      console.log(`[VideoPreview] loadVideoFile called with path: ${path}`)
      console.log(
        `[VideoPreview] isTauriEnvironment: ${typeof window !== "undefined" && window.__TAURI__ !== undefined}`,
      )
      console.log(
        "[VideoPreview] window.__TAURI__:",
        typeof window !== "undefined" ? window.__TAURI__ : "window undefined",
      )

      // Используем file:// протокол для видео через convertVideoSrc
      const videoUrl = convertVideoSrc(path)
      console.log("[VideoPreview] Converting path:")
      console.log(`  Original: ${path}`)
      console.log(`  Video URL: ${videoUrl}`)
      console.log(`  URL starts with asset://: ${videoUrl.startsWith("asset://")}`)
      return videoUrl
    }, [])

    // Мемоизируем путь к файлу для предотвращения лишних перезагрузок
    const filePath = useMemo(() => file.path, [file.path])

    // Эффект для загрузки видео при монтировании компонента
    useEffect(() => {
      let isMounted = true

      console.log(`[VideoPreview] Attempting to load video from path: ${filePath}`)

      // Проверяем доступ к файлу через Tauri API
      void checkFileAccess(filePath).then((hasAccess) => {
        console.log(`[VideoPreview] File access check result: ${hasAccess}`)
        if (!hasAccess) {
          console.error(`[VideoPreview] No access to file: ${filePath}`)
          // Попробуем загрузить все равно, может проблема в проверке доступа
        }

        void loadVideoFile(filePath).then((url) => {
          if (isMounted) {
            console.log(`[VideoPreview] Video URL generated: ${url}`)
            console.log(`[VideoPreview] URL protocol: ${url.split(":")[0]}`)
            setVideoUrl(url)
          }
        })
      })

      // Очистка при размонтировании компонента
      return () => {
        isMounted = false
      }
    }, [filePath, loadVideoFile]) // Используем мемоизированный путь

    // Оптимизируем вычисления с помощью useMemo
    const videoData = useMemo(() => {
      const videoStreams = file.probeData?.streams.filter((s) => s.codec_type === "video") ?? []
      const isMultipleStreams = videoStreams.length > 1

      return { videoStreams, isMultipleStreams }
    }, [file.probeData?.streams])

    // Transform style for drag feedback
    const style = transform
      ? {
          transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
          opacity: isDragging ? 0.5 : 1,
        }
      : undefined

    return (
      <div
        ref={setNodeRef}
        className={cn("flex h-full w-full items-center justify-center", isDragging && "cursor-grabbing")}
        style={style}
        {...listeners}
        {...attributes}
      >
        {videoData.videoStreams.length === 0 ? (
          // Плейсхолдер с соотношением 16:9 пока метаданные не загрузились
          <div
            className="relative flex-shrink-0"
            style={{
              height: `${size}px`,
              width: `${size * (16 / 9)}px`,
            }}
          >
            <div
              className="group relative h-full w-full cursor-pointer"
              style={{ backgroundColor: "#1a1a1a" }}
              onClick={async (e) => {
                e.preventDefault()

                try {
                  // Отправляем видео в главный плеер
                  await playerSetSource("browser")
                  await playerSetMedia(file.id, hoverTime || 0)

                  console.log(
                    `[VideoPreview] Video sent to main player from placeholder: ${file.name} at time ${hoverTime || 0}`,
                  )
                } catch (error) {
                  console.error("[VideoPreview] Failed to send video to main player from placeholder:", error)

                  // Fallback: локальное воспроизведение
                  const video = e.currentTarget.querySelector("video")
                  if (!video) return

                  const newPlayingState = !isPlaying

                  if (newPlayingState) {
                    video.play().catch((err: unknown) => console.error("[VideoPreview] Ошибка воспроизведения:", err))
                  } else {
                    video.pause()
                  }

                  setIsPlaying(newPlayingState)
                  console.log(
                    `[VideoPreview] Fallback: Видео ${newPlayingState ? "запущено" : "остановлено"} в плейсхолдере:`,
                    file.name,
                  )
                }
              }}
              onMouseMove={(e) => {
                const rect = e.currentTarget.getBoundingClientRect()
                const x = e.clientX - rect.left
                const percentage = x / rect.width
                const newTime = percentage * (file.duration ?? 0)

                setHoverTime(newTime)
                const video = e.currentTarget.querySelector("video")
                if (video) {
                  video.currentTime = newTime
                }
              }}
              onMouseLeave={() => {
                setHoverTime(null)
                if (isPlaying) {
                  setIsPlaying(false)
                }
              }}
            >
              <video
                src={videoUrl || undefined}
                poster={
                  previewData
                    ? `data:image/jpeg;base64,${previewData}`
                    : file.thumbnailPath
                      ? convertToAssetUrl(file.thumbnailPath)
                      : undefined
                }
                preload="auto"
                autoPlay={false}
                tabIndex={0}
                playsInline
                className={cn("h-full w-full object-cover focus:outline-none", isAdded ? "opacity-50" : "opacity-100")}
                style={{
                  transition: "opacity 0.2s ease-in-out",
                  backgroundColor: "black",
                  zIndex: 1,
                  objectFit: "cover",
                  visibility: "visible",
                  display: "block",
                }}
                onLoadedData={(e) => {
                  console.log("Video loaded (placeholder)")
                  setIsLoaded(true)
                  // Устанавливаем на первый кадр и останавливаем автопроигрывание
                  const video = e.currentTarget as HTMLVideoElement
                  video.currentTime = 0
                  video.pause()
                }}
                onLoadedMetadata={(e) => {
                  const video = e.currentTarget as HTMLVideoElement
                  console.log(`[VideoPreview] Metadata loaded: ${video.videoWidth}x${video.videoHeight}`)
                  // Устанавливаем на первый кадр и останавливаем
                  video.currentTime = 0
                  video.pause()
                }}
                onLoadStart={() => {
                  console.log("[VideoPreview] Load start for placeholder")
                }}
                onCanPlayThrough={() => {
                  console.log("[VideoPreview] Can play through for placeholder")
                }}
                onKeyDown={(e) => {
                  if (e.code === "Space") {
                    e.preventDefault()
                    const video = e.currentTarget as HTMLVideoElement
                    const newPlayingState = !isPlaying

                    if (newPlayingState) {
                      video.play().catch((err: unknown) => console.error("[VideoPreview] Ошибка воспроизведения:", err))
                    } else {
                      video.pause()
                    }

                    setIsPlaying(newPlayingState)
                  }
                }}
                onError={(e) => {
                  const video = e.currentTarget as HTMLVideoElement
                  if (video.error) {
                    console.error("[VideoPreview Placeholder] Ошибка загрузки видео:")
                    console.error(`  - Путь файла: ${file.path}`)
                    console.error(`  - URL: ${video.src}`)
                    console.error(`  - Код ошибки: ${video.error.code}`)
                    console.error(`  - Сообщение: ${video.error.message}`)
                  }
                }}
              />

              {/* Иконка видео для плейсхолдера */}
              <div
                className={cn(
                  "pointer-events-none absolute rounded-xs bg-black/60 p-0.5",
                  size > 100 ? "bottom-1 left-1" : "bottom-0.5 left-0.5",
                )}
                style={{
                  color: "#ffffff",
                  zIndex: 10,
                }}
              >
                <Film size={size > 100 ? 16 : 12} />
              </div>

              {/* Продолжительность видео для плейсхолдера */}
              {file.duration && file.duration > 0 && (
                <div
                  className={cn(
                    "pointer-events-none absolute rounded-xs bg-black/60 text-xs leading-[16px]",
                    size > 100 ? "top-1 right-1 px-[4px] py-[2px]" : "top-0.5 right-0.5 px-[2px] py-0",
                  )}
                  style={{
                    fontSize: size > 100 ? "13px" : "11px",
                    color: "#ffffff",
                    zIndex: 20,
                  }}
                >
                  {formatDuration(file.duration, 0, true)}
                </div>
              )}

              {/* Кнопка избранного для плейсхолдера */}
              <FavoriteButton file={file} size={size} type="media" />

              {/* Кнопка добавления для плейсхолдера */}
              <AddMediaButton resource={{ id: file.id, type: "media" } as TimelineResource} size={size} type="media" />
            </div>
          </div>
        ) : (
          videoData.videoStreams.map((stream: FfprobeStream) => {
            const key = stream.streamKey ?? `stream-${stream.index}`
            const isMultipleStreams = videoData.isMultipleStreams

            // Используем размеры из метаданных или значения по умолчанию для 16:9
            const videoWidth = stream.width || 1920
            const videoHeight = stream.height || 1080

            const width = calculateWidth(videoWidth, videoHeight, size, parseRotation(stream.rotation))

            const adptivedWidth = calculateAdaptiveWidth(
              width,
              isMultipleStreams,
              stream.display_aspect_ratio || "16:9",
            )

            // Используем соотношение сторон из метаданных или 16:9 по умолчанию
            const aspectRatio = stream.display_aspect_ratio?.split(":").map(Number) ?? [16, 9]
            const ratio = aspectRatio[0] / aspectRatio[1]

            return (
              <div
                key={key}
                className="relative flex-shrink-0"
                style={{
                  height: `${size}px`,
                  width:
                    ratio > 1
                      ? ignoreRatio
                        ? width
                        : adptivedWidth
                      : isMultipleStreams && ignoreRatio
                        ? width
                        : adptivedWidth,
                }}
              >
                <div
                  className="group relative h-full w-full overflow-hidden"
                  onMouseMove={(e) => handleMouseMove(e, stream)}
                  onMouseLeave={handleMouseLeave}
                  onClick={(e) => handlePlayPause(e, stream)}
                  style={{ backgroundColor: "#1a1a1a" }}
                >
                  <video
                    key={`video-${file.id}-${stream.index}`}
                    ref={(el) => {
                      if (el && videoRefs.current[key] !== el) {
                        videoRefs.current[key] = el
                      }
                    }}
                    src={memoizedVideoUrl || undefined}
                    poster={
                      previewData
                        ? `data:image/jpeg;base64,${previewData}`
                        : file.thumbnailPath
                          ? convertToAssetUrl(file.thumbnailPath)
                          : undefined
                    }
                    preload="auto"
                    autoPlay={false}
                    tabIndex={0}
                    playsInline
                    muted={false} // Включаем звук в превью по запросу пользователя
                    className={cn("h-full w-full object-cover focus:outline-none", isAdded ? "opacity-50" : "")}
                    style={{
                      transition: "opacity 0.2s ease-in-out",
                      backgroundColor: "black",
                      zIndex: 1,
                      objectFit: "cover",
                      visibility: "visible",
                      display: "block",
                      width: "100%",
                      height: "100%",
                      position: "relative",
                    }}
                    onEnded={() => {
                      console.log("Video ended for stream:", stream.index)
                      setIsPlaying(false)
                    }}
                    onPlay={(e) => {
                      console.log("Video playing for stream:", stream.index)
                      const video = e.currentTarget
                      const currentTime = hoverTime
                      if (currentTime !== null) {
                        video.currentTime = currentTime
                      }
                    }}
                    onTimeUpdate={(e) => {
                      // Обновляем только каждые 500 мс вместо случайного выбора
                      const now = Date.now()
                      if (now - lastUpdateTimeRef.current > 500) {
                        lastUpdateTimeRef.current = now
                        console.log(
                          "Time update for stream:",
                          typeof stream.index !== "undefined" ? stream.index : key,
                          "current time:",
                          e.currentTarget.currentTime.toFixed(2),
                        )
                      }
                    }}
                    onError={(e) => {
                      console.log(
                        "Video error for stream:",
                        typeof stream.index !== "undefined" ? stream.index : key,
                        e,
                      )

                      // Получаем элемент видео
                      const video = e.currentTarget as HTMLVideoElement

                      // Проверяем, какая ошибка произошла
                      if (video.error) {
                        console.error(
                          "[VideoPreview] Ошибка загрузки видео:",
                          video.error.code,
                          video.error.message,
                          "для файла:",
                          file.name,
                          "URL:",
                          video.src,
                        )

                        // Дополнительная диагностика
                        console.error("[VideoPreview] Детали ошибки:")
                        console.error(`  - Путь файла: ${file.path}`)
                        console.error(`  - Сгенерированный URL: ${videoUrl}`)
                        console.error(`  - Код ошибки: ${video.error.code}`)
                        console.error("  - MEDIA_ERR_ABORTED (1): Загрузка прервана пользователем")
                        console.error("  - MEDIA_ERR_NETWORK (2): Сетевая ошибка")
                        console.error("  - MEDIA_ERR_DECODE (3): Ошибка декодирования")
                        console.error(
                          "  - MEDIA_ERR_SRC_NOT_SUPPORTED (4): Формат не поддерживается или URL недоступен",
                        )

                        // Попробуем альтернативный подход для видео
                        if (video.error.code === 4 && videoUrl && videoUrl.includes("asset.localhost")) {
                          console.log("[VideoPreview] Trying alternative approach...")
                          // Попробуем использовать прямой путь к файлу (только для диагностики)
                          const testUrl = `http://localhost:3000/api/video?path=${encodeURIComponent(file.path)}`
                          console.log("[VideoPreview] Test URL:", testUrl)
                        }
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.code === "Space") {
                        e.preventDefault()
                        void handlePlayPause(e as unknown as React.MouseEvent, stream)
                      }
                    }}
                    onLoadedData={(e) => {
                      console.log("Video loaded for stream:", typeof stream.index !== "undefined" ? stream.index : key)
                      setIsLoaded(true)

                      // Устанавливаем на первый кадр и останавливаем
                      const video = e.currentTarget as HTMLVideoElement
                      video.currentTime = 0
                      video.pause()

                      // Отладочная информация
                      console.log(`[VideoPreview] Video dimensions: ${video.videoWidth}x${video.videoHeight}`)
                      console.log(`[VideoPreview] Video src: ${video.src}`)
                      console.log(`[VideoPreview] Video visibility: ${getComputedStyle(video).visibility}`)
                      console.log(`[VideoPreview] Video display: ${getComputedStyle(video).display}`)

                      // Проверяем, есть ли у файла probeData и streams
                      if (!file.probeData?.streams || file.probeData.streams.length === 0) {
                        console.log("No streams found in probeData for file:", file.name)
                      }
                    }}
                    onLoadedMetadata={(e) => {
                      // Устанавливаем на первый кадр при загрузке метаданных
                      const video = e.currentTarget as HTMLVideoElement
                      video.currentTime = 0
                      video.pause()
                    }}
                  />

                  {/* Продолжительность видео */}
                  {file.duration &&
                    file.duration > 0 &&
                    !(isMultipleStreams && typeof stream.index !== "undefined" && stream.index !== 0) && (
                      <div
                        className={cn(
                          "pointer-events-none absolute rounded-xs bg-black/60 text-xs leading-[16px]",
                          size > 100 ? "top-1 right-1 px-[4px] py-[2px]" : "top-0.5 right-0.5 px-[2px] py-0",
                        )}
                        style={{
                          fontSize: size > 100 ? "13px" : "11px",
                          color: "#ffffff", // Явно задаем чисто белый цвет для Tauri
                          zIndex: 20,
                        }}
                      >
                        {formatDuration(file.duration, 0, true)}
                      </div>
                    )}

                  {/* Иконка видео */}
                  {!(isMultipleStreams && typeof stream.index !== "undefined" && stream.index !== 0) && (
                    <div
                      className={cn(
                        "pointer-events-none absolute rounded-xs bg-black/60 p-0.5",
                        size > 100 ? "bottom-1 left-1" : "bottom-0.5 left-0.5",
                      )}
                      style={{
                        color: "#ffffff", // Явно задаем чисто белый цвет для Tauri
                        zIndex: 10,
                      }}
                    >
                      <Film size={size > 100 ? 16 : 12} />
                    </div>
                  )}

                  {/* Кнопка избранного */}
                  {!(isMultipleStreams && typeof stream.index !== "undefined" && stream.index !== 0) && (
                    <FavoriteButton file={file} size={size} type="media" />
                  )}

                  {/* Разрешение видео */}
                  {isLoaded && !(isMultipleStreams && typeof stream.index !== "undefined" && stream.index !== 0) && (
                    <div
                      className={`pointer-events-none absolute ${
                        size > 100 ? "left-[28px]" : "left-[22px]"
                      } rounded-xs bg-black/60 text-xs leading-[16px] ${size > 100 ? "bottom-1" : "bottom-0.5"} ${
                        size > 100 ? "px-[4px] py-[2px]" : "px-[2px] py-0"
                      }`}
                      style={{
                        fontSize: size > 100 ? "13px" : "11px",
                        color: "#ffffff", // Явно задаем чисто белый цвет для Tauri
                        zIndex: 20,
                      }}
                    >
                      {formatResolution(stream.width ?? 0, stream.height ?? 0)}
                    </div>
                  )}

                  {/* Имя файла */}
                  {showFileName &&
                    !(isMultipleStreams && typeof stream.index !== "undefined" && stream.index !== 0) && (
                      <div
                        className={`absolute font-medium ${size > 100 ? "top-1" : "top-0.5"} ${
                          size > 100 ? "left-1" : "left-0.5"
                        } ${
                          size > 100 ? "px-[4px] py-[2px]" : "px-[2px] py-0"
                        } line-clamp-1 rounded-xs bg-black/60 text-xs leading-[16px] ${isMultipleStreams ? "max-w-[100%]" : "max-w-[60%]"}`}
                        style={{
                          fontSize: size > 100 ? "12px" : "11px",
                          color: "#ffffff", // Явно задаем чисто белый цвет для Tauri
                          zIndex: 10,
                        }}
                      >
                        {file.name}
                      </div>
                    )}

                  <ApplyButton
                    resource={{ id: file.id, type: "media" } as TimelineResource}
                    size={size}
                    type="media"
                    onApply={handleApplyVideo}
                  />

                  {/* Кнопка добавления */}
                  {isLoaded &&
                    typeof stream.index !== "undefined" &&
                    stream.index ===
                      (file.probeData?.streams.filter((s) => s.codec_type === "video").length ?? 0) - 1 && (
                      <AddMediaButton
                        resource={{ id: file.id, type: "media", name: file.name } as TimelineResource}
                        size={size}
                        type="media"
                      />
                    )}
                </div>
              </div>
            )
          })
        )}
      </div>
    )
  },
  (prevProps, nextProps) => {
    // Сравниваем только важные свойства для предотвращения лишних перерендеров
    const isSameFile = prevProps.file.path === nextProps.file.path
    const isSameMetadataState = prevProps.file.isLoadingMetadata === nextProps.file.isLoadingMetadata
    const isSameThumbnail = prevProps.file.thumbnailPath === nextProps.file.thumbnailPath
    const isSameProps =
      prevProps.size === nextProps.size &&
      prevProps.showFileName === nextProps.showFileName &&
      prevProps.ignoreRatio === nextProps.ignoreRatio

    // Сравниваем количество потоков (главный индикатор изменения метаданных)
    const prevStreamsCount = prevProps.file.probeData?.streams?.length ?? 0
    const nextStreamsCount = nextProps.file.probeData?.streams?.length ?? 0
    const isSameStreamsCount = prevStreamsCount === nextStreamsCount

    const shouldSkipRender =
      !nextProps.file.isLoadingMetadata && isSameStreamsCount && isSameFile && isSameProps && isSameThumbnail

    if (!shouldSkipRender) {
      console.log(`[VideoPreview] Re-rendering ${nextProps.file.name}:`, {
        isSameFile,
        isSameMetadataState,
        isSameThumbnail,
        isSameProps,
        isSameStreamsCount,
        isLoadingMetadata: nextProps.file.isLoadingMetadata,
      })
    }

    return shouldSkipRender
  },
)