import { useQuery } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { listGenres } from '@/features/admin/genres/api'
import { qk } from '@/shared/api/query-keys'
import type { GroupElementKind, GroupFilter, ShowAudience, ShowKind } from '@/shared/api/types'
import { SHOW_AUDIENCES } from '@/shared/api/types'
import { Input } from '@/shared/ui/input'
import { Label } from '@/shared/ui/label'

const ELEMENT_KINDS: GroupElementKind[] = ['Show', 'Collection']
/**
 * Ролики в списке есть намеренно: группа рекламы собирается тем же правилом, что и группа кино.
 * Сами по себе они в набор не попадают — сервер отдаёт их, только если тип отмечен явно.
 */
const SHOW_KINDS: ShowKind[] = ['Series', 'Single', 'Interstitial']

/** Конструктор правила набора. Правило не применяется само — оно только ищет кандидатов. */
export function GroupFilterPanel({
  filter,
  onChange,
}: Readonly<{
  filter: GroupFilter
  onChange: (next: GroupFilter) => void
}>) {
  const { t } = useTranslation()
  const { data: genres } = useQuery({ queryKey: qk.genres.all, queryFn: listGenres })

  const patch = (part: Partial<GroupFilter>) => onChange({ ...filter, ...part })

  const toggleIn = <T,>(list: T[] | null | undefined, value: T): T[] => {
    const current = list ?? []
    return current.includes(value) ? current.filter((x) => x !== value) : [...current, value]
  }

  // Пустая строка означает «не ограничивать», поэтому 0 и «не задано» различаются явно.
  const numberOrNull = (value: string) => (value.trim() === '' ? null : Number(value))

  return (
    <div className="flex flex-col gap-4 text-sm">
      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.elementKinds')}</Label>
        <div className="flex flex-wrap gap-3">
          {ELEMENT_KINDS.map((kind) => (
            <label key={kind} className="flex items-center gap-1.5">
              <input
                type="checkbox"
                checked={(filter.elementKinds ?? []).includes(kind)}
                onChange={() => patch({ elementKinds: toggleIn(filter.elementKinds, kind) })}
              />
              {t(`admin.groups.elementKinds.${kind}`)}
            </label>
          ))}
        </div>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.showKinds')}</Label>
        <div className="flex flex-wrap gap-3">
          {SHOW_KINDS.map((kind) => (
            <label key={kind} className="flex items-center gap-1.5">
              <input
                type="checkbox"
                checked={(filter.showKinds ?? []).includes(kind)}
                onChange={() => patch({ showKinds: toggleIn(filter.showKinds, kind) })}
              />
              {t(`admin.shows.kinds.${kind}`)}
            </label>
          ))}
        </div>
        <p className="text-xs text-muted-foreground">{t('admin.groups.filter.showKindsHint')}</p>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.genres')}</Label>
        <div className="flex max-h-40 flex-wrap gap-x-3 gap-y-1 overflow-y-auto">
          {(genres ?? []).map((genre) => (
            <label key={genre.id} className="flex items-center gap-1.5">
              <input
                type="checkbox"
                checked={(filter.genreIds ?? []).includes(genre.id)}
                onChange={() => patch({ genreIds: toggleIn(filter.genreIds, genre.id) })}
              />
              {genre.name}
            </label>
          ))}
        </div>
        <p className="text-xs text-muted-foreground">{t('admin.groups.filter.genresHint')}</p>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.maxAudience')}</Label>
        <select
          className="h-9 rounded-md border border-border bg-transparent px-2"
          value={filter.maxAudience ?? ''}
          onChange={(e) =>
            patch({ maxAudience: e.target.value === '' ? null : (e.target.value as ShowAudience) })
          }
        >
          <option value="">{t('admin.groups.filter.any')}</option>
          {SHOW_AUDIENCES.map((value) => (
            <option key={value} value={value}>
              {t(`admin.shows.audiences.${value}`)}
            </option>
          ))}
        </select>
        <p className="text-xs text-muted-foreground">{t('admin.groups.filter.audienceHint')}</p>
      </div>

      {/* Нижняя граница — под ночные слоты. Ведёт себя не зеркально верхней, поэтому и подсказка своя. */}
      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.minAudience')}</Label>
        <select
          className="h-9 rounded-md border border-border bg-transparent px-2"
          value={filter.minAudience ?? ''}
          onChange={(e) =>
            patch({ minAudience: e.target.value === '' ? null : (e.target.value as ShowAudience) })
          }
        >
          <option value="">{t('admin.groups.filter.any')}</option>
          {SHOW_AUDIENCES.map((value) => (
            <option key={value} value={value}>
              {t(`admin.shows.audiences.${value}`)}
            </option>
          ))}
        </select>
        <p className="text-xs text-muted-foreground">{t('admin.groups.filter.minAudienceHint')}</p>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.year')}</Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            className="w-28"
            placeholder={t('admin.groups.filter.from')}
            value={filter.yearMin ?? ''}
            onChange={(e) => patch({ yearMin: numberOrNull(e.target.value) })}
          />
          <Input
            type="number"
            className="w-28"
            placeholder={t('admin.groups.filter.to')}
            value={filter.yearMax ?? ''}
            onChange={(e) => patch({ yearMax: numberOrNull(e.target.value) })}
          />
        </div>
      </div>

      <div className="flex flex-col gap-1.5">
        <Label>{t('admin.groups.filter.unitMinutes')}</Label>
        <div className="flex items-center gap-2">
          <Input
            type="number"
            className="w-28"
            placeholder={t('admin.groups.filter.from')}
            value={filter.unitMinutesMin ?? ''}
            onChange={(e) => patch({ unitMinutesMin: numberOrNull(e.target.value) })}
          />
          <Input
            type="number"
            className="w-28"
            placeholder={t('admin.groups.filter.to')}
            value={filter.unitMinutesMax ?? ''}
            onChange={(e) => patch({ unitMinutesMax: numberOrNull(e.target.value) })}
          />
        </div>
        <p className="text-xs text-muted-foreground">{t('admin.groups.filter.unitMinutesHint')}</p>
      </div>
    </div>
  )
}
