import { AlertTriangle } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import type { ApplyResultDto } from '@/shared/api/types'
import { Button } from '@/shared/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/shared/ui/dialog'
import { PlanningWarnings } from './PlanningWarnings'

/**
 * Отчёт о применении. Планировщик выдаёт предупреждение на каждый проблемный слот, и за неделю
 * эфира их набираются десятки — тостами это нечитаемо: они перекрывают экран и уезжают раньше,
 * чем их успеваешь прочесть. Здесь то же самое лежит в окне, сгруппированное по виду.
 */
export function ApplyReportDialog({
  result,
  onClose,
}: Readonly<{ result: ApplyResultDto; onClose: () => void }>) {
  const { t } = useTranslation()

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>{t('admin.channels.applyReport')}</DialogTitle>
          <DialogDescription>
            {t('admin.channels.applied', { count: result.added })}
          </DialogDescription>
        </DialogHeader>

        <div className="flex flex-col gap-3">
          {result.warnings.length > 0 && (
            <p className="flex items-center gap-1.5 text-sm text-amber-500">
              <AlertTriangle className="h-4 w-4 shrink-0" />
              {t('admin.channels.applyReportWarnings', { count: result.warnings.length })}
            </p>
          )}

          {/* Список длинный по природе — скроллим его, а не всё окно: шапка и кнопка должны
              оставаться на месте. */}
          <div className="max-h-96 overflow-y-auto pr-1">
            <PlanningWarnings warnings={result.warnings} />
          </div>
        </div>

        <DialogFooter>
          <Button size="sm" onClick={onClose}>
            {t('common.close')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
