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

import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Search, X } from 'lucide-react'
import { ApiError } from '../lib/api'
import { useT } from '../i18n/useT'
import { getProduct, updateProduct } from '../services/productService'
import { seoMetaPayload } from '../utils/seoMeta'
import { SeoMetaFields } from './SeoMetaFields'
import styles from './VariationsModal.module.css'
import seoStyles from './ProductSeoModal.module.css'

interface ProductSeoModalProps {
  open: boolean
  productId: string
  productName: string
  onClose: () => void
}

const ANIMATION_MS = 220

export function ProductSeoModal({
  open,
  productId,
  productName,
  onClose,
}: ProductSeoModalProps) {
  const t = useT()
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [seoMetaTitle, setSeoMetaTitle] = useState('')
  const [seoMetaDescription, setSeoMetaDescription] = useState('')
  const [isLoading, setIsLoading] = useState(false)
  const [isSaving, setIsSaving] = useState(false)
  const [error, setError] = useState('')

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

  useEffect(() => {
    if (!open || !productId) return

    const controller = new AbortController()
    void loadData(controller.signal)
    return () => controller.abort()
  }, [open, productId])

  async function loadData(signal?: AbortSignal) {
    setIsLoading(true)
    setError('')
    try {
      const product = await getProduct(productId, signal)
      setSeoMetaTitle(product.seoMetaTitle ?? '')
      setSeoMetaDescription(product.seoMetaDescription ?? '')
    } catch (err) {
      if (err instanceof DOMException && err.name === 'AbortError') return
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('products.seo.errorLoad'))
      }
    } finally {
      setIsLoading(false)
    }
  }

  async function handleSave() {
    setIsSaving(true)
    setError('')
    try {
      await updateProduct(productId, seoMetaPayload(seoMetaTitle, seoMetaDescription))
      onClose()
    } catch (err) {
      if (err instanceof ApiError) {
        setError(err.message)
      } else {
        setError(t('products.seo.errorSave'))
      }
    } finally {
      setIsSaving(false)
    }
  }

  if (!mounted) return null

  return createPortal(
    <div
      className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
      onClick={() => !isSaving && onClose()}
    >
      <div
        className={`${styles.modal} ${seoStyles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-modal="true"
        aria-labelledby="product-seo-title"
      >
        <div className={styles.header}>
          <div>
            <h3 id="product-seo-title" className={`${styles.title} ${seoStyles.titleRow}`}>
              <Search size={18} aria-hidden="true" />
              <span>{t('products.seo.title')}</span>
            </h3>
            {productName ? <p className={styles.subtitle}>{productName}</p> : null}
          </div>
          <button
            type="button"
            className={styles.closeBtn}
            onClick={onClose}
            disabled={isSaving}
            aria-label={t('common.close')}
          >
            <X size={20} />
          </button>
        </div>

        <div className={styles.body}>
          {isLoading ? (
            <p className={styles.emptyText}>{t('products.seo.loading')}</p>
          ) : (
            <SeoMetaFields
              seoMetaTitle={seoMetaTitle}
              seoMetaDescription={seoMetaDescription}
              onTitleChange={setSeoMetaTitle}
              onDescriptionChange={setSeoMetaDescription}
              disabled={isSaving}
              hint={t('seo.meta.hint')}
              titleLabel={t('seo.meta.title')}
              descriptionLabel={t('seo.meta.description')}
              titlePlaceholder={t('seo.meta.titlePlaceholder')}
              descriptionPlaceholder={t('seo.meta.descriptionPlaceholder')}
            />
          )}

          {error ? <p className={styles.errorText}>{error}</p> : null}

          <div className={styles.actions}>
            <button
              type="button"
              className={styles.cancelBtn}
              onClick={onClose}
              disabled={isSaving}
            >
              {t('common.cancel')}
            </button>
            <button
              type="button"
              className={styles.submitBtn}
              onClick={() => void handleSave()}
              disabled={isLoading || isSaving}
            >
              {isSaving ? t('products.seo.saving') : t('products.seo.save')}
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body,
  )
}