import type { ReactNode } from 'react'
import { useTranslation } from 'react-i18next'
import { Button } from '@/shared/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/shared/ui/dialog'
import { Input } from '@/shared/ui/input'
import { Label } from '@/shared/ui/label'

/**
 * Заведение сущности, у которой из обязательного — одно название. Такая форма стояла на половине
 * экранов админки строкой над таблицей, вплотную к полю поиска, и в неё регулярно начинали вводить
 * поисковый запрос. Отдельным окном перепутать их уже нельзя.
 *
 * <paramref name="children"/> — дополнительные поля, если у сущности есть что-то ещё (slug канала).
 */
export function CreateNameDialog({
  title,
  label,
  description,
  value,
  onChange,
  pending,
  onCreate,
  onClose,
  children,
}: Readonly<{
  title: string
  label: string
  description?: string
  value: string
  onChange: (value: string) => void
  pending: boolean
  onCreate: () => void
  onClose: () => void
  children?: ReactNode
}>) {
  const { t } = useTranslation()
  const submit = () => {
    if (value.trim() && !pending) onCreate()
  }

  return (
    <Dialog open onOpenChange={(open) => !open && onClose()}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>

        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <Label>{label}</Label>
            <Input
              autoFocus
              value={value}
              onChange={(e) => onChange(e.target.value)}
              // Форма в одно поле — Enter здесь ожидаем как «создать».
              onKeyDown={(e) => e.key === 'Enter' && submit()}
            />
          </div>
          {children}
        </div>

        <DialogFooter>
          <Button size="sm" variant="outline" onClick={onClose}>
            {t('common.cancel')}
          </Button>
          <Button size="sm" disabled={!value.trim() || pending} onClick={submit}>
            {t('common.create')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
