import { imageUrl } from '@/features/admin/images/api'
import { cssColor } from '@/features/admin/channels/lib/format'
import type { BumperLineDto, BumperTemplateDto } from '@/shared/api/types'
import { resolveSample } from '../placeholders'

/** Размеры строк в долях высоты кадра — те же пропорции, что и в ffmpeg-раскладке. */
const SIZE = { Title: 0.1, Label: 0.045, Caption: 0.036 } as const

/**
 * Кадр заставки, нарисованный в браузере. Не замена ffmpeg-рендеру, а то, без чего редактор
 * не работает: ждать несколько секунд ffmpeg ради проверки опечатки нельзя, а плейсхолдеры
 * в поле ввода выглядят кодом, а не кадром.
 */
export function BumperFramePreview({
  template,
  lines,
  showPoster,
  height = 200,
}: Readonly<{
  template: BumperTemplateDto
  lines: BumperLineDto[]
  showPoster?: boolean
  height?: number
}>) {
  const visible = lines.map((l) => ({ ...l, text: resolveSample(l.text) })).filter((l) => l.text)

  const background = template.backgroundImageId
    ? { backgroundImage: `url(${imageUrl(template.backgroundImageId)})`, backgroundSize: 'cover' }
    : {
        backgroundImage: `linear-gradient(135deg, ${cssColor(template.backgroundColor)}, ${cssColor(
          template.backgroundColor2,
        )})`,
      }

  return (
    <div
      className="relative flex w-full flex-col items-center justify-center gap-1 overflow-hidden rounded-md border border-border"
      style={{ height, aspectRatio: '16 / 9', ...background }}
    >
      {/* Постер шоу рендер размывает и затемняет — здесь достаточно затемнения-заглушки. */}
      {showPoster && !template.backgroundImageId && (
        <div className="absolute inset-0 bg-black/40" />
      )}
      {visible.length === 0 && <span className="relative text-xs text-white/50">…</span>}
      {visible.map((line, index) => (
        <span
          key={`${line.text}-${index}`}
          className="relative max-w-[92%] truncate text-center"
          style={{
            fontSize: height * SIZE[line.style],
            lineHeight: 1.2,
            fontFamily: template.font === 'Serif' ? 'Georgia, serif' : undefined,
            letterSpacing: line.style === 'Label' ? '0.15em' : undefined,
            color:
              line.color === 'Accent'
                ? cssColor(template.accentColor)
                : cssColor(template.textColor),
            textShadow: '0 1px 2px rgba(0,0,0,.6)',
          }}
        >
          {line.text}
        </span>
      ))}
    </div>
  )
}
