import React, { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import {
  DialogRoot,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogBody,
  DialogFooter,
  DialogActionTrigger,
} from '@chakra-ui/react'
import { Button } from '@chakra-ui/react'

interface ConfirmDialogProps {
  isOpen: boolean
  onClose: () => void
  onConfirm: () => void
  title: string
  message: string
  confirmLabel?: string
  cancelLabel?: string
  isLoading?: boolean
}

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  confirmLabel,
  cancelLabel,
  isLoading = false,
}) => {
  const { t } = useTranslation()
  
  const confirm = confirmLabel || t('challenge.admin.common.confirm')
  const cancel = cancelLabel || t('challenge.admin.common.cancel')

  // Прокручиваем страницу к началу при открытии диалога
  useEffect(() => {
    if (isOpen) {
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }, [isOpen])

  return (
    <DialogRoot open={isOpen} onOpenChange={(e) => !e.open && onClose()} scrollBehavior="inside">
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        <DialogBody>
          {message}
        </DialogBody>
        <DialogFooter>
          <DialogActionTrigger asChild>
            <Button variant="outline" onClick={onClose} disabled={isLoading}>
              {cancel}
            </Button>
          </DialogActionTrigger>
          <Button
            colorPalette="red"
            onClick={onConfirm}
            disabled={isLoading}
          >
            {confirm}
          </Button>
        </DialogFooter>
      </DialogContent>
    </DialogRoot>
  )
}