import { HelpCircle } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import type { ScheduleEntryDto } from '@/shared/api/types'
import { Badge } from '@/shared/ui/badge'
import { formatTime } from '../lib/format'

/** Что стоит в строке расписания: реклама, заставка-переход или программа с номером серии. */
function EntryLabel({ entry }: Readonly<{ entry: ScheduleEntryDto }>) {
  const { t } = useTranslation()

  if (entry.kind === 'Ad') return <Badge variant="muted">{t('air.ad')}</Badge>

  // Аварийный запас и конец вещания подписаны отдельно: у них есть и шоу, и номер серии, и без
  // метки полоса роликов из аварийной группы читается как обычная программа — то есть как будто
  // сетка так и задумана, хотя на деле это дыра.
  if (entry.kind === 'Fallback' || entry.kind === 'SignOff')
    return (
      <span className="flex min-w-0 items-center gap-2">
        <Badge variant="muted" className="shrink-0">
          {t(entry.kind === 'Fallback' ? 'air.fallback' : 'air.signOff')}
        </Badge>
        <span className="min-w-0 truncate text-muted-foreground">{entry.showName ?? '—'}</span>
      </span>
    )

  if (entry.kind === 'Bumper')
    return (
      <span className="flex min-w-0 items-center gap-2">
        <Badge variant="muted" className="shrink-0">
          {t('air.bumper')}
        </Badge>
        {(entry.bumperName || entry.bumperText) && (
          <span className="min-w-0 truncate text-muted-foreground">
            {entry.bumperName}
            {entry.bumperName && entry.bumperText ? ' · ' : ''}
            {entry.bumperText}
          </span>
        )}
      </span>
    )

  return (
    <span>
      {entry.showName ?? '—'}
      <EpisodeSuffix entry={entry} />
    </span>
  )
}

/** «· S02E05», «· часть 3 из 3» либо «· серия N» — что удалось распознать; иначе ничего. */
function EpisodeSuffix({ entry }: Readonly<{ entry: ScheduleEntryDto }>) {
  const { t } = useTranslation()

  if (entry.seasonEpisode)
    return <span className="text-muted-foreground"> · {entry.seasonEpisode}</span>

  // Часть франшизы важнее номера серии и идёт раньше него: у фильма серия всегда одна, и «Серия 1»
  // не говорит ничего, а «часть 3 из 3» сразу объясняет, где мы в трилогии.
  if (entry.collectionPart != null && entry.collectionParts != null)
    return (
      <span className="text-muted-foreground" title={entry.collectionName ?? undefined}>
        {' '}
        ·{' '}
        {t('air.collectionPart', {
          part: entry.collectionPart,
          total: entry.collectionParts,
        })}
      </span>
    )

  if (entry.episodeIndex == null) return null

  return (
    <span className="text-muted-foreground">
      {' '}
      · {t('air.episode')} {entry.episodeIndex + 1}
    </span>
  )
}

export function SchedulePreview({
  entries,
  onShowTrace,
}: Readonly<{
  entries: ScheduleEntryDto[]
  onShowTrace: (entryId: string) => void
}>) {
  const { t } = useTranslation()
  if (entries.length === 0)
    return <p className="text-muted-foreground">{t('admin.channels.noSchedule')}</p>

  return (
    <ul className="flex flex-col divide-y divide-border text-sm">
      {entries.map((e) => (
        <li key={e.id} className="group flex items-center gap-3 py-1.5">
          <span className="shrink-0 whitespace-nowrap tabular-nums text-muted-foreground">
            {formatTime(e.startsAtUtc)}
          </span>
          <EntryLabel entry={e} />
          <button
            type="button"
            title={t('admin.channels.whyHere')}
            className="ml-auto shrink-0 text-muted-foreground opacity-0 hover:text-foreground group-hover:opacity-100"
            onClick={() => onShowTrace(e.id)}
          >
            <HelpCircle className="h-4 w-4" />
          </button>
        </li>
      ))}
    </ul>
  )
}
