import { useEffect, useState } from 'react'
import { createPortal } from 'react-dom'
import { Sparkles, X } from 'lucide-react'
import { useLocale } from '@meshkee/dashboard-ui'
import { useT } from '../i18n/useT'
import type { ProductAiFillField } from '../services/productAiService'
import modalStyles from './CategoryModal.module.css'
import aiStyles from '../styles/ai.module.css'
import styles from './CategoryAiPromptModal.module.css'

export function buildProductSummaryAiPrompt(ctx: {
  nameFa: string
  nameEn: string
  categoryName: string
  locale: 'fa' | 'en'
}) {
  const nameFa = ctx.nameFa || '—'
  const nameEn = ctx.nameEn || '—'
  const category = ctx.categoryName || '—'

  if (ctx.locale === 'fa') {
    return `یک خلاصه کوتاه و فنی برای کارت محصول بنویس (۱ تا ۳ جمله).

نام محصول (فارسی): ${nameFa}
نام محصول (انگلیسی): ${nameEn}
دسته‌بندی: ${category}

الزامات:
- اول بگو این محصول چیست (نوع / ماهیت کالا).
- بعد توضیح بده چرا از نظر ترکیب، کاربرد یا ویژگی فنی خوب است.
- لحن اطلاعاتی و تخصصی باشد، نه تبلیغاتی.
- از عبارات فروش مثل «انتخاب عالی»، «تجربه فوق‌العاده»، «با قیمت مناسب بخرید»، «از ما خریداری کنید» استفاده نکن.
- مشخصات یا ادعاهایی که مطمئن نیستی اختراع نکن.
- خلاصه را به فارسی بنویس.`
  }

  return `Write a short, technical product listing summary (1–3 sentences).

Product name (FA): ${nameFa}
Product name (EN): ${nameEn}
Category: ${category}

Requirements:
- First say what the product is (type / nature of the item).
- Then explain why it is good in terms of composition, use, or technical traits.
- Keep an informative, specialist tone — not advertising.
- Avoid sales phrases like "excellent choice", "amazing experience", "buy now", "great price from us".
- Do not invent specs or claims you are unsure about.
- Write the summary in Persian (Farsi).`
}

export function buildProductDescriptionAiPrompt(ctx: {
  nameFa: string
  nameEn: string
  categoryName: string
  locale: 'fa' | 'en'
}) {
  const nameFa = ctx.nameFa || '—'
  const nameEn = ctx.nameEn || '—'
  const category = ctx.categoryName || '—'

  if (ctx.locale === 'fa') {
    return `یک توضیحات فنی محصول به صورت HTML برای ادیتور متن پیشرفته بنویس.

نام محصول (فارسی): ${nameFa}
نام محصول (انگلیسی): ${nameEn}
دسته‌بندی: ${category}

ساختار پیشنهادی:
1) این محصول چیست؟
2) ترکیب / مواد / ویژگی‌های فنی مهم
3) کاربرد و اینکه چرا برای آن کاربرد مناسب است
4) در صورت نیاز، فهرست نقطه‌ای نکات کلیدی

الزامات:
- لحن اطلاعاتی و تخصصی؛ نه شعار تبلیغاتی.
- از دعوت به خرید، تخفیف، «بهترین انتخاب»، و جملات بازاریابی مبهم پرهیز کن.
- مشخصات ساختگی ننویس؛ اگر جزئیات دقیق نداری، روی تعریف محصول و کاربردهای معمول تمرکز کن.
- ۲ تا ۴ پاراگراف کوتاه به فارسی.
- خروجی باید HTML خام باشد (نه markdown، نه کد بلوک، نه تگ‌های escapeشده) تا داخل ادیتور پیشرفته قرار بگیرد.
- فقط تگ‌های <p>، <ul>، <li>، <strong> و <em> مجاز است.`
  }

  return `Write a technical product description as HTML for the advanced rich-text editor.

Product name (FA): ${nameFa}
Product name (EN): ${nameEn}
Category: ${category}

Suggested structure:
1) What is this product?
2) Composition / materials / important technical traits
3) Use cases and why it fits those uses
4) Optional bullet list of key points

Requirements:
- Informative, specialist tone — not advertising slogans.
- Avoid CTAs, discounts, "best choice", and vague marketing claims.
- Do not invent specs; if details are unknown, focus on what the product is and typical uses.
- 2–4 short paragraphs in Persian (Farsi).
- Return raw HTML (not markdown, not code fences, not escaped entities) so it renders inside the advanced editor.
- HTML only using <p>, <ul>, <li>, <strong>, and <em>.`
}

interface ProductFieldAiPromptModalProps {
  open: boolean
  field: ProductAiFillField
  nameFa: string
  nameEn: string
  categoryName: string
  isRunning: boolean
  onClose: () => void
  onRun: (prompt: string) => Promise<void>
}

const ANIMATION_MS = 220

export function ProductFieldAiPromptModal({
  open,
  field,
  nameFa,
  nameEn,
  categoryName,
  isRunning,
  onClose,
  onRun,
}: ProductFieldAiPromptModalProps) {
  const t = useT()
  const { locale } = useLocale()
  const isFa = locale === 'fa'
  const [mounted, setMounted] = useState(open)
  const [closing, setClosing] = useState(false)
  const [prompt, setPrompt] = useState('')
  const [error, setError] = useState('')

  useEffect(() => {
    if (open) {
      setMounted(true)
      setClosing(false)
      const localeKey = isFa ? 'fa' : 'en'
      setPrompt(
        field === 'summary'
          ? buildProductSummaryAiPrompt({
              nameFa,
              nameEn,
              categoryName,
              locale: localeKey,
            })
          : buildProductDescriptionAiPrompt({
              nameFa,
              nameEn,
              categoryName,
              locale: localeKey,
            }),
      )
      setError('')
    } else if (mounted) {
      setClosing(true)
      const timer = setTimeout(() => {
        setMounted(false)
        setClosing(false)
      }, ANIMATION_MS)
      return () => clearTimeout(timer)
    }
  }, [open, mounted, field, nameFa, nameEn, categoryName, isFa])

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

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const trimmed = prompt.trim()
    if (trimmed.length < 10) {
      setError(t('products.form.aiPromptTooShort'))
      return
    }
    setError('')
    try {
      await onRun(trimmed)
    } catch (err) {
      if (err instanceof Error) {
        setError(err.message)
      } else {
        setError(t('products.form.aiFillError'))
      }
    }
  }

  if (!mounted) return null

  const title =
    field === 'summary'
      ? t('products.form.aiFillSummaryTitle')
      : t('products.form.aiFillDescriptionTitle')

  return createPortal(
    <div
      className={`${modalStyles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
      onClick={(e) => e.target === e.currentTarget && !isRunning && onClose()}
      role="presentation"
    >
      <div
        className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
        role="dialog"
        aria-modal="true"
        aria-labelledby="product-field-ai-prompt-title"
        lang={isFa ? 'fa' : 'en'}
        dir={isFa ? 'rtl' : 'ltr'}
      >
        <div className={`${modalStyles.header} ${styles.header}`}>
          <div className={styles.headerBlock}>
            <h2 id="product-field-ai-prompt-title" className={modalStyles.title}>
              {title}
            </h2>
            <p className={styles.subtitle}>{t('products.form.aiFillSubtitle')}</p>
          </div>
          <button
            type="button"
            className={modalStyles.closeBtn}
            onClick={onClose}
            disabled={isRunning}
            aria-label={t('common.close')}
          >
            <X size={20} />
          </button>
        </div>

        <form className={modalStyles.form} onSubmit={(e) => void handleSubmit(e)}>
          <div className={`${modalStyles.field} ${aiStyles.aiPromptField}`}>
            <label htmlFor="product-field-ai-prompt">{t('products.form.aiPrompt')}</label>
            <textarea
              id="product-field-ai-prompt"
              className={aiStyles.aiPromptTextarea}
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              rows={10}
              disabled={isRunning}
              required
              lang={isFa ? 'fa' : 'en'}
              dir={isFa ? 'rtl' : 'ltr'}
            />
          </div>

          {error && <p className={styles.error}>{error}</p>}

          <div className={modalStyles.actions}>
            <button
              type="button"
              className={modalStyles.cancelBtn}
              onClick={onClose}
              disabled={isRunning}
            >
              {t('products.form.cancel')}
            </button>
            <button
              type="submit"
              className={aiStyles.aiBtn}
              disabled={isRunning || prompt.trim().length < 10}
            >
              <Sparkles size={16} />
              {isRunning ? t('products.form.aiGenerating') : t('products.form.aiRun')}
            </button>
          </div>
        </form>
      </div>
    </div>,
    document.body,
  )
}
