import React, { useState } from 'react'
import { CheckIcon, SendIcon } from 'lucide-react'
import Swal from 'sweetalert2'
import { Reveal } from '../Reveal'
import { Button } from '../Button'
import { useSite } from '../../api'
import { useLang } from '../../i18n/lang'
import { useFieldSaver } from '../../admin/AdminContext'
import { InlineEdit } from '../admin/InlineEdit'
import { SingletonPill } from '../../admin/Editable'
import { API_URL } from '../../config'

export function Newsletter() {
  const { newsletter } = useSite()
  const { t } = useLang()
  const save = useFieldSaver()
  const [email, setEmail] = useState('')
  const [status, setStatus] = useState<'idle' | 'error' | 'done'>('idle')
  const [sending, setSending] = useState(false)

  const saveContent = (field: string, value: string) =>
    save('newsletter', newsletter.id, { [field]: value }, (d) => {
      ;(d.newsletter as unknown as Record<string, unknown>)[field] = value
    })

  const showErrorAlert = (title: string, text: string) => {
    Swal.fire({
      icon: 'warning',
      title: title,
      text: text,
      background: '#1e1a16',
      color: '#F5F3EF',
      iconColor: '#d5874c',
      confirmButtonText: t('understood'),
      buttonsStyling: false,
      customClass: {
        container: 'backdrop-blur-md bg-ink/70',
        popup: 'font-pinar border border-white/10 rounded-2xl shadow-2xl backdrop-blur-xl bg-char/95',
        title: 'font-pinar font-bold text-lg text-ivory pt-2',
        htmlContainer: 'font-pinar font-light text-sm leading-8 text-ivory/70',
        confirmButton: 'mt-6 rounded-full bg-copper text-char font-bold px-10 py-3 transition-all duration-300 ease-lux hover:scale-105 hover:shadow-[0_0_20px_rgba(197,143,92,0.5)]',
      },
      showClass: {
        popup: 'swal2-show',
        backdrop: 'swal2-backdrop-show',
      },
      hideClass: {
        popup: 'swal2-hide',
        backdrop: 'swal2-backdrop-hide',
      }
    })
  }

  const submit = async (e: React.FormEvent) => {
    e.preventDefault()
    if (sending) return

    const emailValue = email.trim()
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

    if (!emailValue) {
      setStatus('error')
      showErrorAlert(t('incompleteInfo'), t('emailRequired'))
      return
    }

    if (!emailRegex.test(emailValue)) {
      setStatus('error')
      showErrorAlert(t('emailInvalidTitle'), t('emailInvalidText'))
      return
    }

    setSending(true)
    try {
      const res = await fetch(`${API_URL}/api/newsletter`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: emailValue }),
      })

      if (!res.ok) {
        setStatus('error')
        const data = await res.json().catch(() => null)
        const detail =
          typeof data?.detail === 'string' ? data.detail : t('emailCheck')
        showErrorAlert(t('subscribeErrorTitle'), detail)
        return
      }

      setStatus('done')
      setEmail('')
    } catch {
      setStatus('error')
      showErrorAlert(t('connectionErrorTitle'), t('connectionErrorText'))
    } finally {
      setSending(false)
    }
  }

  return (
    <section className="relative overflow-hidden bg-gradient-to-r from-copper via-[#d8965e] to-copper py-20 shadow-[inset_0_1px_1px_rgba(255,255,255,0.3)]" aria-labelledby="newsletter-title">
      <SingletonPill resource="newsletter" label="ویرایش متن‌های خبرنامه" className="absolute left-4 top-4" />
      
      {/* هاله نور پس‌زمینه برای عمق بصری */}
      <div className="pointer-events-none absolute -right-20 -top-20 h-64 w-64 rounded-full bg-white/20 blur-3xl" />
      <div className="pointer-events-none absolute -bottom-20 -left-20 h-64 w-64 rounded-full bg-black/15 blur-3xl" />

      <div className="relative mx-auto grid max-w-site items-center gap-10 px-6 lg:grid-cols-2 lg:px-10">
        <Reveal>
          <h2 id="newsletter-title" className="text-2xl font-bold leading-relaxed text-char md:text-3xl">
            <InlineEdit value={newsletter.title} onSave={(v) => saveContent('title', v)} />
          </h2>
          <p className="mt-3 max-w-md text-sm font-light leading-8 text-char/80">
            <InlineEdit multiline value={newsletter.lead} onSave={(v) => saveContent('lead', v)} />
          </p>
        </Reveal>

        <Reveal delay={0.08}>
          <form onSubmit={submit} className="flex flex-col gap-3.5 sm:flex-row" noValidate>
            <div className="flex-1">
              <label htmlFor="newsletter-email" className="sr-only">
                {newsletter.placeholder}
              </label>
              <input
                id="newsletter-email"
                type="email"
                dir="ltr"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value)
                  if (status !== 'idle') setStatus('idle')
                }}
                placeholder={newsletter.placeholder}
                className="w-full rounded-full border border-black/15 bg-char/90 px-6 py-4 text-left text-sm font-light text-ivory placeholder:text-ivory/40 shadow-[inset_0_2px_4px_rgba(0,0,0,0.35)] backdrop-blur-xl transition-all duration-300 ease-lux focus:border-ivory focus:bg-char focus:shadow-[0_0_20px_rgba(255,255,255,0.25)] focus:outline-none"
                aria-invalid={status === 'error'}
              />
              {status === 'done' && (
                <p className="mt-2.5 flex items-center gap-1.5 px-3 text-xs font-medium text-char" role="status">
                  <CheckIcon className="h-4 w-4" />
                  {newsletter.success_text}
                </p>
              )}
            </div>

            <Button
              type="submit"
              variant="dark"
              disabled={sending}
              className="group flex items-center justify-center gap-2 rounded-full px-8 py-4 shadow-[0_8px_20px_rgba(0,0,0,0.3)] transition-all duration-300 hover:shadow-[0_12px_25px_rgba(0,0,0,0.45)] active:scale-95"
            >
              <SendIcon className="h-4 w-4 transition-transform duration-300 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
              <span>
                {sending ? newsletter.sending_label : (
                  <InlineEdit value={newsletter.button_label} onSave={(v) => saveContent('button_label', v)} />
                )}
              </span>
            </Button>
          </form>
        </Reveal>
      </div>
    </section>
  )
}