import { useTranslation } from 'react-i18next'
import { Input } from '@/shared/ui/input'
import { Label } from '@/shared/ui/label'

/**
 * Поля разбора серий: ручной сезон и regex номера. Один компонент на оба разбора — из `manual/`
 * и при загрузке файлов, — потому что правила у них общие: что показано в предпросмотре, то
 * и уедет на сервер, и расходиться этим двум местам нельзя.
 */
export function EpisodeParseFields({
  season,
  onSeason,
  regex,
  onRegex,
  regexOk,
}: Readonly<{
  season: string
  onSeason: (value: string) => void
  regex: string
  onRegex: (value: string) => void
  /** Регулярка разбирается — иначе поле подсвечивается и снизу появляется объяснение. */
  regexOk: boolean
}>) {
  const { t } = useTranslation()

  return (
    <>
      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.media.toShowSeason')}</Label>
        {/* Ноль — законный сезон: в нём живут спецвыпуски и пилоты. */}
        <Input
          type="number"
          min={0}
          placeholder={t('admin.media.toShowAuto')}
          value={season}
          onChange={(e) => onSeason(e.target.value)}
        />
      </div>
      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.media.toShowRegex')}</Label>
        <Input
          placeholder="^(\d+)"
          value={regex}
          onChange={(e) => onRegex(e.target.value)}
          className={!regexOk ? 'border-red-500' : undefined}
        />
      </div>
    </>
  )
}
