import { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import type { LogoCorner } from '@/shared/api/types'
import { cn } from '@/shared/lib/cn'
import { imageUrl } from './api'

const CORNER_CLASS: Record<LogoCorner, string> = {
  TopLeft: 'left-3 top-3',
  TopRight: 'right-3 top-3',
  BottomLeft: 'left-3 bottom-14',
  BottomRight: 'right-3 bottom-14',
}

/**
 * Логотип канала поверх картинки. Настоящий вещательный логотип вжигается при кодировании; для нас
 * это означало бы перекодирование всей библиотеки при смене логотипа, поэтому только оверлей.
 */
export function ChannelLogo({
  imageId,
  corner,
  opacity,
}: Readonly<{
  imageId: string
  corner: LogoCorner
  opacity: number
}>) {
  return (
    <img
      src={imageUrl(imageId)}
      alt=""
      style={{ opacity }}
      className={cn(
        'pointer-events-none absolute h-10 w-auto max-w-24 object-contain',
        CORNER_CLASS[corner],
      )}
    />
  )
}

/** Часы поверх картинки — опция канала, а не общее украшение плеера. */
export function ScreenClock() {
  const [now, setNow] = useState(() => new Date())

  useEffect(() => {
    // Тик раз в 10 секунд: минуты меняются реже, а секунды на часах в углу никому не нужны.
    const id = window.setInterval(() => setNow(new Date()), 10_000)
    return () => window.clearInterval(id)
  }, [])

  return (
    <span className="pointer-events-none absolute right-3 top-3 rounded bg-black/40 px-2 py-0.5 text-sm tabular-nums text-white/90">
      {now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
    </span>
  )
}

/** Плашка «Далее: …» — данные уже есть в EPG, отдельного запроса не нужно. */
export function NextUpBanner({ title }: Readonly<{ title: string }>) {
  const { t } = useTranslation()
  return (
    <span className="pointer-events-none absolute bottom-14 left-3 rounded bg-black/60 px-2 py-1 text-sm text-white">
      {t('air.next')}: {title}
    </span>
  )
}

/**
 * Аналоговый фильтр: лёгкий VHS-шум, дрожание и размытие краёв. Переборщить очень легко, поэтому
 * сила регулируется, а вклад каждого слоя от неё убывает нелинейно.
 */
export function AnalogFilter({ strength }: Readonly<{ strength: number }>) {
  const s = Math.min(1, Math.max(0, strength))
  return (
    <>
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 mix-blend-overlay"
        style={{
          opacity: s * 0.35,
          backgroundImage:
            'repeating-linear-gradient(0deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px)',
        }}
      />
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          opacity: s * 0.5,
          boxShadow: `inset 0 0 ${40 + s * 60}px rgba(0,0,0,.75)`,
        }}
      />
    </>
  )
}

/** Короткий чёрный кадр с номером канала — как при переключении на телевизоре. */
export function ChannelFlash({ number, name }: Readonly<{ number: number | null; name: string }>) {
  return (
    <div className="pointer-events-none absolute inset-0 flex items-start justify-end bg-black">
      <span className="m-6 flex items-baseline gap-2 text-white">
        {number !== null && <span className="text-5xl font-bold tabular-nums">{number}</span>}
        <span className="text-lg">{name}</span>
      </span>
    </div>
  )
}
