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

import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type {
  ShippingCostGroup,
  ShippingCostGroupFormPayload,
  ShippingMethodId,
} from '../types/shippingCostGroup'
import { SHIPPING_METHOD_IDS } from '../types/shippingCostGroup'
import { formatIrtInput, parseIrtInput } from '../utils/irtPrice'
import styles from './ShippingCostGroupModal.module.css'

const METHOD_EN_LABELS: Record<ShippingMethodId, string> = {
  post: 'Post',
  tipax: 'Tipax',
  mahex: 'Mahex',
  freight: 'Freight',
  air: 'Air',
}

interface ShippingCostGroupModalProps {
  open: boolean
  onClose: () => void
  onSubmit: (data: ShippingCostGroupFormPayload) => void
  editingGroup?: ShippingCostGroup | null
  isSubmitting?: boolean
}

const ANIMATION_MS = 220

export function ShippingCostGroupModal({
  open,
  onClose,
  onSubmit,
  editingGroup = null,
  isSubmitting = false,
}: ShippingCostGroupModalProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [nameFa, setNameFa] = useState('')
  const [nameEn, setNameEn] = useState('')
  const [description, setDescription] = useState('')
  const [methods, setMethods] = useState<ShippingMethodId[]>([])
  const [defaultAmount, setDefaultAmount] = useState('')
  const [pasKraye, setPasKraye] = useState(false)
  const [isDefault, setIsDefault] = useState(false)
  const [formError, setFormError] = useState('')

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
      setNameFa(editingGroup?.nameFa ?? '')
      setNameEn(editingGroup?.nameEn ?? '')
      setDescription(editingGroup?.description ?? '')
      setMethods(editingGroup?.methods ?? [])
      setPasKraye(editingGroup?.pasKraye ?? false)
      setDefaultAmount(
        editingGroup
          ? formatIrtInput(String(Math.round(editingGroup.defaultAmount)))
          : '',
      )
      setIsDefault(editingGroup?.isDefault ?? false)
      setFormError('')
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, editingGroup, mounted])

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

  if (!mounted) return null

  function toggleMethod(method: ShippingMethodId) {
    setMethods((prev) =>
      prev.includes(method) ? prev.filter((item) => item !== method) : [...prev, method],
    )
  }

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    setFormError('')

    const trimmedFa = nameFa.trim()
    const trimmedEn = nameEn.trim()
    const amount = pasKraye ? 0 : parseIrtInput(defaultAmount)

    if (!trimmedFa || !trimmedEn) {
      setFormError(t('store.shipping.form.errorRequired'))
      return
    }
    if (!methods.length) {
      setFormError(t('store.shipping.form.errorMethods'))
      return
    }
    if (!pasKraye && (amount === null || amount < 0)) {
      setFormError(t('store.shipping.form.errorAmount'))
      return
    }

    onSubmit({
      nameFa: trimmedFa,
      nameEn: trimmedEn,
      description: description.trim() || undefined,
      methods,
      defaultAmount: amount ?? 0,
      pasKraye,
      isDefault,
    })
  }

  return createPortal(
    <div
      className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
      onClick={() => !isSubmitting && onClose()}
    >
      <div
        className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="shipping-group-modal-title"
        lang={isFa ? 'fa' : 'en'}
        dir={isFa ? 'rtl' : 'ltr'}
      >
        <div className={styles.header}>
          <h3 id="shipping-group-modal-title" className={styles.title}>
            {editingGroup ? t('store.shipping.form.editTitle') : t('store.shipping.form.addTitle')}
          </h3>
          <button
            type="button"
            className={styles.closeBtn}
            onClick={onClose}
            disabled={isSubmitting}
            aria-label={t('common.close')}
          >
            <X size={20} />
          </button>
        </div>

        <form className={styles.form} onSubmit={handleSubmit}>
          {formError ? (
            <div className={styles.error} role="alert">
              {formError}
            </div>
          ) : null}

          <div className={styles.field}>
            <label htmlFor="shipping-name-fa">{t('store.shipping.form.nameFa')}</label>
            <input
              id="shipping-name-fa"
              type="text"
              dir="rtl"
              className="faText"
              placeholder={t('store.shipping.form.nameFaPlaceholder')}
              value={nameFa}
              onChange={(e) => setNameFa(e.target.value)}
              disabled={isSubmitting}
              required
            />
          </div>

          <div className={styles.field}>
            <label htmlFor="shipping-name-en">{t('store.shipping.form.nameEn')}</label>
            <input
              id="shipping-name-en"
              type="text"
              dir="ltr"
              lang="en"
              placeholder={t('store.shipping.form.nameEnPlaceholder')}
              value={nameEn}
              onChange={(e) => setNameEn(e.target.value)}
              disabled={isSubmitting}
              required
            />
          </div>

          <div className={styles.field}>
            <label htmlFor="shipping-description">{t('store.shipping.form.description')}</label>
            <textarea
              id="shipping-description"
              rows={3}
              dir={isFa ? 'rtl' : 'ltr'}
              placeholder={t('store.shipping.form.descriptionPlaceholder')}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              disabled={isSubmitting}
            />
          </div>

          <div className={styles.field}>
            <span className={styles.fieldLabel}>{t('store.shipping.form.methods')}</span>
            <p className={styles.hint}>{t('store.shipping.form.methodsHint')}</p>
            <div className={styles.chipGrid} role="group" aria-label={t('store.shipping.form.methods')}>
              {SHIPPING_METHOD_IDS.map((method) => {
                const checked = methods.includes(method)
                return (
                  <button
                    key={method}
                    type="button"
                    className={`${styles.chip} ${checked ? styles.chipSelected : ''}`}
                    onClick={() => toggleMethod(method)}
                    disabled={isSubmitting}
                    aria-pressed={checked}
                  >
                    <span className={styles.chipFa}>
                      {t(`store.shipping.method.${method}` as `store.shipping.method.${typeof method}`)}
                    </span>
                    <span className={styles.chipEn} dir="ltr" lang="en">
                      {METHOD_EN_LABELS[method]}
                    </span>
                  </button>
                )
              })}
            </div>
          </div>

          <div className={styles.field}>
            <label htmlFor="shipping-default-amount">
              {t('store.shipping.form.defaultAmount')}
            </label>
            <p className={styles.hint}>{t('store.shipping.form.defaultAmountHint')}</p>
            <div className={styles.amountRow}>
              <input
                id="shipping-default-amount"
                type="text"
                inputMode="numeric"
                dir="ltr"
                lang="en"
                placeholder={t('store.shipping.form.defaultAmountPlaceholder')}
                value={defaultAmount}
                onChange={(e) => setDefaultAmount(formatIrtInput(e.target.value))}
                disabled={isSubmitting || pasKraye}
                required={!pasKraye}
              />
              <span className={styles.amountUnit}>IRT</span>
              <label className={styles.pasKrayeCheck} htmlFor="shipping-pas-kraye">
                <input
                  id="shipping-pas-kraye"
                  type="checkbox"
                  checked={pasKraye}
                  onChange={(e) => {
                    const checked = e.target.checked
                    setPasKraye(checked)
                    if (checked) setDefaultAmount('')
                  }}
                  disabled={isSubmitting}
                />
                <span>{t('store.shipping.form.pasKraye')}</span>
              </label>
            </div>
            {pasKraye ? (
              <p className={styles.hint}>{t('store.shipping.form.pasKrayeHint')}</p>
            ) : null}
          </div>

          <label className={styles.checkRow} htmlFor="shipping-is-default">
            <input
              id="shipping-is-default"
              type="checkbox"
              checked={isDefault}
              onChange={(e) => setIsDefault(e.target.checked)}
              disabled={isSubmitting}
            />
            <span className={styles.checkText}>
              <span className={styles.checkTitle}>
                {t('store.shipping.form.isDefault')}
              </span>
              <span className={styles.checkHint}>
                {t('store.shipping.form.isDefaultHint')}
              </span>
            </span>
          </label>

          <div className={styles.actions}>
            <button
              type="button"
              className={styles.cancelBtn}
              onClick={onClose}
              disabled={isSubmitting}
            >
              {t('store.shipping.form.cancel')}
            </button>
            <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
              {isSubmitting
                ? t('store.shipping.form.saving')
                : editingGroup
                  ? t('store.shipping.form.update')
                  : t('store.shipping.form.save')}
            </button>
          </div>
        </form>
      </div>
    </div>,
    document.body,
  )
}