import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import type { UserProductStatus } from '../types/userProduct'
import { useT } from '../i18n/useT'
import modalStyles from './CategoryModal.module.css'
import styles from './UserProductStatusModal.module.css'

const STATUSES: UserProductStatus[] = [
  'draft',
  'published',
  'rejected',
  'archived',
]

interface UserProductStatusModalProps {
  open: boolean
  currentStatus: UserProductStatus
  saving?: boolean
  onClose: () => void
  onSave: (status: UserProductStatus) => void
}

export function UserProductStatusModal({
  open,
  currentStatus,
  saving = false,
  onClose,
  onSave,
}: UserProductStatusModalProps) {
  const t = useT()

  if (!open) return null

  function statusLabel(value: UserProductStatus) {
    if (value === 'draft') return t('customerProducts.status.pending')
    if (value === 'published') return t('customerProducts.status.published')
    if (value === 'rejected') return t('customerProducts.status.rejected')
    return t('customerProducts.status.archived')
  }

  function handleSelect(value: UserProductStatus) {
    if (saving) return
    if (value === currentStatus) {
      onClose()
      return
    }
    onSave(value)
  }

  return createPortal(
    <div
      className={modalStyles.overlay}
      role="presentation"
      onClick={saving ? undefined : onClose}
    >
      <div
        className={modalStyles.modal}
        role="dialog"
        aria-modal="true"
        aria-labelledby="user-product-status-title"
        onClick={(e) => e.stopPropagation()}
      >
        <div className={modalStyles.header}>
          <h2 id="user-product-status-title" className={modalStyles.title}>
            {t('customerProducts.statusModalTitle')}
          </h2>
          <button
            type="button"
            className={modalStyles.closeBtn}
            onClick={onClose}
            aria-label={t('customerProducts.form.cancel')}
            disabled={saving}
          >
            <X size={18} />
          </button>
        </div>

        <div className={modalStyles.form}>
          <p className={styles.hint}>{t('customerProducts.statusModalHint')}</p>
          <div className={styles.options} role="radiogroup">
            {STATUSES.map((value) => {
              const selected = value === currentStatus
              return (
                <button
                  key={value}
                  type="button"
                  className={styles.option}
                  role="radio"
                  aria-checked={selected}
                  data-selected={selected ? 'true' : undefined}
                  disabled={saving}
                  onClick={() => handleSelect(value)}
                >
                  <span className={styles.radio} aria-hidden />
                  <span>{statusLabel(value)}</span>
                </button>
              )
            })}
          </div>
          {saving ? (
            <p className={styles.saving}>{t('customerProducts.form.submitting')}</p>
          ) : null}
        </div>
      </div>
    </div>,
    document.body,
  )
}