import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { X } from 'lucide-react'
import { useT } from '../i18n/useT'
import type { WebsiteStaticImageSlotKind } from '../types/websiteStaticImage'
import {
  staticImagePageLabel,
  staticImagePageOptions,
} from '../utils/staticImagePages'
import styles from './CategoryModal.module.css'

export interface WebsiteStaticImageSlotFormValues {
  key: string
  label: string
  kind: WebsiteStaticImageSlotKind
  aspectRatio: string
  recommendedWidth: string
  itemCount: string
  pageKey: string
}

interface WebsiteStaticImageSlotModalProps {
  open: boolean
  onClose: () => void
  onSubmit: (values: WebsiteStaticImageSlotFormValues) => void
  initial?: Partial<WebsiteStaticImageSlotFormValues>
  title: string
  submitLabel: string
  isSubmitting?: boolean
  lockKey?: boolean
}

const ANIMATION_MS = 220
const KEY_PATTERN = /^[a-zA-Z][a-zA-Z0-9_-]*$/
const ASPECT_OPTIONS = ['16:9', '16:5', '12:19', '9:4', '4:3', '3:2', '1:1', '21:9']

function slugifyKey(raw: string): string {
  const slug = raw
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
  if (!slug || !/^[a-z]/.test(slug)) return ''
  return KEY_PATTERN.test(slug) ? slug : ''
}

export function WebsiteStaticImageSlotModal({
  open,
  onClose,
  onSubmit,
  initial,
  title,
  submitLabel,
  isSubmitting = false,
  lockKey = false,
}: WebsiteStaticImageSlotModalProps) {
  const t = useT()
  const formRef = useRef<HTMLFormElement>(null)
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [key, setKey] = useState(initial?.key ?? '')
  const [label, setLabel] = useState(initial?.label ?? '')
  const [kind, setKind] = useState<WebsiteStaticImageSlotKind>(initial?.kind ?? 'single')
  const [aspectRatio, setAspectRatio] = useState(initial?.aspectRatio ?? '16:9')
  const [recommendedWidth, setRecommendedWidth] = useState(initial?.recommendedWidth ?? '1440')
  const [itemCount, setItemCount] = useState(initial?.itemCount ?? '')
  const [pageKey, setPageKey] = useState(initial?.pageKey ?? 'home')
  const [keyTouched, setKeyTouched] = useState(Boolean(initial?.key))

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
      setKey(initial?.key ?? '')
      setLabel(initial?.label ?? '')
      setKind(initial?.kind ?? 'single')
      setAspectRatio(initial?.aspectRatio ?? '16:9')
      setRecommendedWidth(initial?.recommendedWidth ?? '1440')
      setItemCount(initial?.itemCount ?? '')
      setPageKey(initial?.pageKey ?? 'home')
      setKeyTouched(Boolean(initial?.key) || lockKey)
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, mounted, initial, lockKey])

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

  if (!mounted) return null

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const nextLabel = label.trim()
    const nextKey = slugifyKey(key) || slugifyKey(nextLabel)
    if (!nextKey || !nextLabel) return
    onSubmit({
      key: nextKey,
      label: nextLabel,
      kind,
      aspectRatio,
      recommendedWidth: recommendedWidth.trim(),
      itemCount: kind === 'single' ? '1' : itemCount.trim(),
      pageKey,
    })
  }

  return createPortal(
    <div
      className={`${styles.overlay} ${closing ? styles.overlayOut : styles.overlayIn}`}
      onClick={(e) => e.target === e.currentTarget && onClose()}
      role="presentation"
    >
      <div
        className={`${styles.modal} ${closing ? styles.modalOut : styles.modalIn}`}
        role="dialog"
        aria-modal="true"
        aria-labelledby="static-image-slot-title"
      >
        <div className={styles.header}>
          <h3 id="static-image-slot-title" className={styles.title}>
            {title}
          </h3>
          <button
            type="button"
            className={styles.closeBtn}
            onClick={onClose}
            aria-label={t('common.close')}
          >
            <X size={20} />
          </button>
        </div>

        <form ref={formRef} className={styles.form} onSubmit={handleSubmit}>
          <div className={styles.field}>
            <label htmlFor="static-image-slot-page">{t('website.staticImages.page')}</label>
            <select
              id="static-image-slot-page"
              value={pageKey}
              onChange={(e) => setPageKey(e.target.value)}
              disabled={isSubmitting}
            >
              {staticImagePageOptions([pageKey]).map((option) => (
                <option key={option} value={option}>
                  {staticImagePageLabel(option, t)}
                </option>
              ))}
            </select>
          </div>

          <div className={styles.field}>
            <label htmlFor="static-image-slot-label">{t('website.staticImages.slotLabel')}</label>
            <input
              id="static-image-slot-label"
              type="text"
              value={label}
              onChange={(e) => {
                const next = e.target.value
                setLabel(next)
                if (!keyTouched && !lockKey) setKey(slugifyKey(next))
              }}
              placeholder={t('website.staticImages.slotLabelPlaceholder')}
              disabled={isSubmitting}
              required
            />
          </div>

          <div className={styles.field}>
            <label htmlFor="static-image-slot-key">{t('website.staticImages.slotKey')}</label>
            <input
              id="static-image-slot-key"
              type="text"
              dir="ltr"
              value={key}
              onChange={(e) => {
                setKeyTouched(true)
                setKey(e.target.value)
              }}
              placeholder="home-hero"
              disabled={isSubmitting || lockKey}
              required
            />
          </div>

          <div className={styles.field}>
            <label htmlFor="static-image-slot-kind">{t('website.staticImages.kind')}</label>
            <select
              id="static-image-slot-kind"
              value={kind}
              onChange={(e) => setKind(e.target.value as WebsiteStaticImageSlotKind)}
              disabled={isSubmitting}
            >
              <option value="single">{t('website.staticImages.kindSingle')}</option>
              <option value="list">{t('website.staticImages.kindList')}</option>
            </select>
          </div>

          {kind === 'list' ? (
            <div className={styles.field}>
              <label htmlFor="static-image-slot-count">{t('website.staticImages.itemCount')}</label>
              <input
                id="static-image-slot-count"
                type="text"
                inputMode="numeric"
                dir="ltr"
                value={itemCount}
                onChange={(e) => setItemCount(e.target.value.replace(/[^\d]/g, ''))}
                placeholder={t('website.staticImages.itemCountPlaceholder')}
                disabled={isSubmitting}
              />
              <p className={styles.hint}>{t('website.staticImages.itemCountHint')}</p>
            </div>
          ) : null}

          <div className={styles.field}>
            <label htmlFor="static-image-slot-aspect">{t('website.staticImages.aspectRatio')}</label>
            <select
              id="static-image-slot-aspect"
              value={aspectRatio}
              onChange={(e) => setAspectRatio(e.target.value)}
              disabled={isSubmitting}
            >
              {ASPECT_OPTIONS.map((option) => (
                <option key={option} value={option}>
                  {option}
                </option>
              ))}
              {aspectRatio && !ASPECT_OPTIONS.includes(aspectRatio) ? (
                <option value={aspectRatio}>{aspectRatio}</option>
              ) : null}
            </select>
          </div>

          <div className={styles.field}>
            <label htmlFor="static-image-slot-width">
              {t('website.staticImages.recommendedWidth')}
            </label>
            <input
              id="static-image-slot-width"
              type="text"
              inputMode="numeric"
              dir="ltr"
              value={recommendedWidth}
              onChange={(e) => setRecommendedWidth(e.target.value.replace(/[^\d]/g, ''))}
              placeholder="1440"
              disabled={isSubmitting}
            />
          </div>

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