import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Sparkles, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { TranslationLocale } from '../types/translation'
import modalStyles from './CategoryModal.module.css'
import { LanguageLocaleOptions } from './LanguageLocaleOptions'
import aiStyles from '../styles/ai.module.css'
import styles from './TranslateAllLanguageModal.module.css'

const ANIMATION_MS = 220

interface TranslateAllLanguageModalProps {
  open: boolean
  title: string
  subtitle: string
  running: boolean
  runLabel?: string
  runningLabel?: string
  onClose: () => void
  onConfirm: (locale: TranslationLocale) => void
}

export function TranslateAllLanguageModal({
  open,
  title,
  subtitle,
  running,
  runLabel,
  runningLabel,
  onClose,
  onConfirm,
}: TranslateAllLanguageModalProps) {
  const t = useT()
  const { locale: uiLocale } = useLocale()
  const isFa = uiLocale === 'fa'
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [locale, setLocale] = useState<TranslationLocale>('en')

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
      setLocale('en')
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, mounted])

  useEffect(() => {
    if (!mounted || closing || running) return
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') onClose()
    }
    document.addEventListener('keydown', onKey)
    return () => document.removeEventListener('keydown', onKey)
  }, [mounted, closing, running, onClose])

  if (!mounted) return null

  return createPortal(
    <div
      className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
      onClick={() => !running && onClose()}
    >
      <div
        className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="translate-all-language-title"
        lang={isFa ? 'fa' : 'en'}
        dir={isFa ? 'rtl' : 'ltr'}
      >
        <div className={`${modalStyles.header} ${styles.header}`}>
          <div className={styles.headerBlock}>
            <h3 id="translate-all-language-title" className={modalStyles.title}>
              {title}
            </h3>
            <p className={styles.subtitle}>{subtitle}</p>
          </div>
          <button
            type="button"
            className={modalStyles.closeBtn}
            onClick={onClose}
            disabled={running}
            aria-label={t('common.close')}
          >
            <X size={20} />
          </button>
        </div>

        <div className={styles.body}>
          <LanguageLocaleOptions
            value={locale}
            disabled={running}
            ariaLabel={title}
            onChange={setLocale}
          />

          <div className={styles.actions}>
            <button
              type="button"
              className={modalStyles.cancelBtn}
              onClick={onClose}
              disabled={running}
            >
              {t('categories.modal.cancel')}
            </button>
            <button
              type="button"
              className={aiStyles.aiBtn}
              onClick={() => onConfirm(locale)}
              disabled={running}
            >
              <Sparkles size={16} />
              {running
                ? runningLabel || t('categories.translateAll.running')
                : runLabel || t('categories.translateAll.run')}
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body,
  )
}