import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/shared/ui/dialog'
import { ManualInboxPanel } from './ManualInboxPanel'
import { MovieImportPanel } from './MovieImportPanel'
import { UploadToShowPanel } from './UploadToShowPanel'

/** Способы пополнить библиотеку: серии из manual/, фильмы пачкой, загрузка файлов в шоу. */
type Tab = 'manual' | 'movies' | 'toShow'

/**
 * Одно окно на все способы завести медиа: серии из `manual/` в шоу, фильмы пачкой и загрузка
 * выбранных файлов в шоу. Раньше это были три кнопки и три окна — а выбор между ними делается
 * один раз и по одному признаку: что за контент кладём.
 *
 * Первой открывается вкладка серий: сериалами библиотека пополняется чаще, и попасть в неё сразу
 * важнее, чем в разбор фильмов, который делают раз на пачку.
 */
export function MediaImportDialog({ onClose }: Readonly<{ onClose: () => void }>) {
  const { t } = useTranslation()
  const [tab, setTab] = useState<Tab>('manual')

  const tabs: Tab[] = ['manual', 'movies', 'toShow']

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      {/* Высота фиксирована: вкладки разного роста, и окно, прыгающее при переключении,
          сбивает — то, на что метился курсор, уезжает из-под него. */}
      <DialogContent className="flex h-[min(88vh,56rem)] w-full max-w-[min(96vw,80rem)] flex-col">
        <DialogHeader>
          <DialogTitle>{t('admin.media.importTitle')}</DialogTitle>
          <DialogDescription>{t('admin.media.importHint')}</DialogDescription>
        </DialogHeader>

        <div className="flex gap-1 border-b border-border">
          {tabs.map((item) => (
            <button
              key={item}
              type="button"
              onClick={() => setTab(item)}
              className={`-mb-px border-b-2 px-3 py-1.5 text-sm ${
                tab === item
                  ? 'border-primary text-foreground'
                  : 'border-transparent text-muted-foreground hover:text-foreground'
              }`}
            >
              {t(`admin.media.importTabs.${item}`)}
            </button>
          ))}
        </div>

        <div className="flex min-h-0 flex-1 flex-col gap-3 pt-3">
          {tab === 'movies' && <MovieImportPanel onClose={onClose} />}
          {tab === 'manual' && <ManualInboxPanel onClose={onClose} />}
          {tab === 'toShow' && <UploadToShowPanel onClose={onClose} />}
        </div>
      </DialogContent>
    </Dialog>
  )
}