dashboards/apps/business/src/components/VariationsModal.tsx

import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Plus, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { BusinessMessageKey } from '../i18n/messages'
import type { Variation, VariationType } from '../types/variation'
import { COLOR_OPTIONS } from '../types/variation'
import { createId } from '../utils/id'
import { textLocaleAttrs } from '../utils/textLocale'
import { AddVariationModal } from './AddVariationModal'
import { Tooltip } from './Tooltip'
import styles from './VariationsModal.module.css'

interface VariationsModalProps {
  open: boolean
  categoryName: string
  variations: Variation[]
  isSaving?: boolean
  onClose: () => void
  onChange: (variations: Variation[]) => void
  onSave: () => void
}

const ANIMATION_MS = 220

export function VariationsModal({
  open,
  categoryName,
  variations,
  isSaving = false,
  onClose,
  onChange,
  onSave,
}: VariationsModalProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [addOpen, setAddOpen] = useState(false)

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

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

  if (!mounted) return null

  const list = variations
  const categoryLocale = textLocaleAttrs(categoryName)

  function handleAdd(variation: Omit<Variation, 'id'>) {
    onChange([
      ...list,
      { ...variation, id: createId() },
    ])
    setAddOpen(false)
  }

  function handleRemove(id: string) {
    onChange(list.filter((variation) => variation.id !== id))
  }

  function typeLabel(type: VariationType) {
    if (type === 'color') return t('categories.variations.type.color')
    if (type === 'size') return t('categories.variations.type.size')
    return t('categories.variations.type.custom')
  }

  function variationTitle(variation: Variation) {
    if (variation.type === 'color' || variation.type === 'size') {
      return typeLabel(variation.type)
    }
    return variation.name
  }

  function localizeValue(value: string) {
    if ((COLOR_OPTIONS as string[]).includes(value)) {
      return t(`categories.variations.color.${value}` as BusinessMessageKey)
    }
    return value
  }

  return createPortal(
    <>
      <div
        className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
        onClick={onClose}
      >
        <div
          className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
          onClick={(e) => e.stopPropagation()}
          role="dialog"
          aria-modal="true"
          aria-labelledby="variations-modal-title"
          lang={isFa ? 'fa' : 'en'}
          dir={isFa ? 'rtl' : 'ltr'}
        >
          <div className={styles.header}>
            <div>
              <h3 id="variations-modal-title" className={styles.title}>
                {t('categories.variations.title')}
              </h3>
              {categoryName && (
                <p
                  className={[styles.subtitle, categoryLocale.className].filter(Boolean).join(' ')}
                  lang={categoryLocale.lang}
                  dir={categoryLocale.dir}
                >
                  {categoryName}
                </p>
              )}
            </div>
            <button className={styles.closeBtn} onClick={onClose} aria-label={t('common.close')}>
              <X size={20} />
            </button>
          </div>

          <div className={styles.body}>
            <div className={styles.list}>
              {list.map((variation) => {
                const title = variationTitle(variation)
                const nameLocale = textLocaleAttrs(title)
                const valuesText =
                  variation.values.map(localizeValue).join(' · ') || t('categories.variations.noValues')
                const valuesLocale = textLocaleAttrs(valuesText)
                return (
                <div key={variation.id} className={styles.listItem}>
                  <div className={styles.listItemInfo}>
                    <div
                      className={[styles.listItemName, nameLocale.className].filter(Boolean).join(' ')}
                      lang={nameLocale.lang}
                      dir={nameLocale.dir}
                    >
                      {title}
                    </div>
                    <div
                      className={[styles.listItemValues, valuesLocale.className].filter(Boolean).join(' ')}
                      lang={valuesLocale.lang}
                      dir={valuesLocale.dir}
                    >
                      {valuesText}
                    </div>
                  </div>
                  <div className={styles.listItemEnd}>
                    <span className={styles.listItemType}>{typeLabel(variation.type)}</span>
                    <Tooltip label={t('categories.variations.remove')}>
                      <button
                        type="button"
                        className={styles.removeRowBtn}
                        onClick={() => handleRemove(variation.id)}
                        aria-label={t('categories.variations.remove')}
                      >
                        <X size={16} />
                      </button>
                    </Tooltip>
                  </div>
                </div>
                )
              })}
              {!list.length && (
                <p className={styles.emptyText}>{t('categories.variations.empty')}</p>
              )}
            </div>

            <button type="button" className={styles.addBtn} onClick={() => setAddOpen(true)}>
              <Plus size={18} />
              {t('categories.variations.add')}
            </button>

            <div className={styles.actions}>
              <button type="button" className={styles.cancelBtn} onClick={onClose} disabled={isSaving}>
                {t('categories.modal.cancel')}
              </button>
              <button type="button" className={styles.submitBtn} onClick={onSave} disabled={isSaving}>
                {isSaving ? t('categories.variations.saving') : t('categories.variations.save')}
              </button>
            </div>
          </div>
        </div>
      </div>

      <AddVariationModal
        open={addOpen}
        onClose={() => setAddOpen(false)}
        onSubmit={handleAdd}
      />
    </>,
    document.body,
  )
}