import React, { useState } from 'react'
import { CheckCircle2Icon, MailIcon, MapPinIcon, PhoneIcon, 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'
import { track } from '../analytics'

export function ContactSection() {
  const { brand, contact_section: content } = useSite()
  const { t } = useLang()
  const save = useFieldSaver()
  const [form, setForm] = useState({ name: '', phone: '', note: '', website: '' })
  const [sent, setSent] = useState(false)
  const [sending, setSending] = useState(false)

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

  const saveBrand = (field: string, value: string) =>
    save('brand', brand.id, { [field]: value }, (d) => {
      ;(d.brand 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 nameValue = form.name.trim()
    const phoneValue = form.phone.trim()

    if (nameValue.length < 3) {
      showErrorAlert(t('incompleteInfo'), t('nameRequired'))
      return
    }

    const phoneRegex = /^[\d۰-۹\+\-\s]{8,15}$/
    if (!phoneValue || !phoneRegex.test(phoneValue)) {
      showErrorAlert(t('phoneInvalidTitle'), t('phoneInvalidText'))
      return
    }

    setSending(true)
    try {
      const res = await fetch(`${API_URL}/api/contact`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: nameValue, phone: phoneValue, note: form.note.trim(), website: form.website }),
      })

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

      track('contact-submit')
      setSent(true)
    } catch {
      showErrorAlert(t('connectionErrorTitle'), t('connectionErrorText'))
    } finally {
      setSending(false)
    }
  }

  return (
    <section id="contact" className="relative overflow-hidden py-24 lg:py-32" aria-labelledby="contact-title">
      <img
        src={brand.contact_bg}
        alt=""
        aria-hidden="true"
        className="absolute inset-0 h-full w-full object-cover"
      />
      <div className="absolute inset-0 bg-ink/75 backdrop-blur-[2px]" />

      <div className="relative mx-auto max-w-site px-6 lg:px-10">
        <div className="mx-auto grid max-w-6xl items-stretch gap-8 lg:grid-cols-12">

          {/* باکس اطلاعات تماس */}
          <div className="rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-5">
            <Reveal>
              <p className="text-sm font-light tracking-wide text-copper">
                <InlineEdit value={content.label} onSave={(v) => saveContent('label', v)} />
              </p>
              <h2 id="contact-title" className="mt-4 text-section font-bold text-ivory">
                <InlineEdit value={content.title} onSave={(v) => saveContent('title', v)} />
              </h2>
              <p className="mt-5 text-base font-light leading-9 text-ivory/75">
                <InlineEdit multiline value={content.lead} onSave={(v) => saveContent('lead', v)} />
              </p>
            </Reveal>

            <Reveal delay={0.1}>
              <ul className="mt-10 space-y-6">
                <li className="flex items-start gap-4">
                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
                    <MapPinIcon className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-bold text-ivory">
                      <InlineEdit value={content.address_label} onSave={(v) => saveContent('address_label', v)} />
                    </p>
                    <p className="mt-1 text-sm font-light leading-7 text-ivory/70">
                      <InlineEdit value={brand.address} onSave={(v) => saveBrand('address', v)} />
                    </p>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
                    <PhoneIcon className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-bold text-ivory">
                      <InlineEdit value={content.phone_label} onSave={(v) => saveContent('phone_label', v)} />
                    </p>
                    <a
                      href={brand.phone_href}
                      dir="ltr"
                      onClick={() => track('phone-click', { from: 'contact-section' })}
                      className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                    >
                      <InlineEdit value={brand.phone} onSave={(v) => saveBrand('phone', v)} />
                    </a>
                  </div>
                </li>

                <li className="flex items-start gap-4">
                  <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full border border-copper/30 bg-copper/10 text-copper shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
                    <MailIcon className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-bold text-ivory">
                      <InlineEdit value={content.email_label} onSave={(v) => saveContent('email_label', v)} />
                    </p>
                    <a
                      href={`mailto:${brand.email}`}
                      dir="ltr"
                      className="mt-1 block text-sm font-light text-ivory/70 transition-colors hover:text-copper"
                    >
                      <InlineEdit value={brand.email} onSave={(v) => saveBrand('email', v)} />
                    </a>
                  </div>
                </li>
              </ul>
            </Reveal>
          </div>

          {/* باکس فرم ارسال درخواست */}
          <div className="relative rounded-3xl border border-white/10 bg-char/60 p-8 backdrop-blur-2xl shadow-[0_20px_50px_rgba(0,0,0,0.4),inset_0_1px_1px_rgba(255,255,255,0.15)] md:p-10 lg:col-span-7">
            <SingletonPill resource="contact_section" label="ویرایش برچسب‌ها و متن‌های فرم" className="absolute left-4 top-4" />
            {sent ? (
              <div className="flex h-full flex-col items-center justify-center py-14 text-center">
                <div className="flex h-16 w-16 items-center justify-center rounded-full border border-copper/40 bg-copper/15 text-copper shadow-[0_0_30px_rgba(197,143,92,0.4)]">
                  <CheckCircle2Icon className="h-8 w-8" />
                </div>
                <h3 className="mt-6 text-xl font-bold text-ivory">
                  <InlineEdit value={content.success_title} onSave={(v) => saveContent('success_title', v)} />
                </h3>
                <p className="mt-3 max-w-sm text-sm font-light leading-8 text-ivory/70">
                  <InlineEdit multiline value={content.success_text} onSave={(v) => saveContent('success_text', v)} />
                </p>
                <Button
                  type="button"
                  variant="outline"
                  className="mt-8 font-light"
                  onClick={() => {
                    setSent(false)
                    setForm({ name: '', phone: '', note: '' })
                  }}
                >
                  <InlineEdit value={content.success_button_label} onSave={(v) => saveContent('success_button_label', v)} />
                </Button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate className="grid gap-6 md:grid-cols-2">
                {/* honeypot — خارج از دید؛ فقط ربات‌ها آن را پر می‌کنند */}
                <input
                  type="text"
                  name="website"
                  value={form.website}
                  onChange={(e) => setForm({ ...form, website: e.target.value })}
                  tabIndex={-1}
                  autoComplete="off"
                  aria-hidden="true"
                  className="pointer-events-none absolute -left-[9999px] h-0 w-0 opacity-0"
                />
                <div>
                  <label htmlFor="contact-name" className="block text-sm font-medium text-ivory/90">
                    <InlineEdit value={content.name_label} onSave={(v) => saveContent('name_label', v)} />
                  </label>
                  <input
                    id="contact-name"
                    type="text"
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                    placeholder={content.name_placeholder}
                    className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                  />
                </div>

                <div>
                  <label htmlFor="contact-phone" className="block text-sm font-medium text-ivory/90">
                    <InlineEdit value={content.phone_field_label} onSave={(v) => saveContent('phone_field_label', v)} /> <span className="text-copper">*</span>
                  </label>
                  <input
                    id="contact-phone"
                    type="tel"
                    dir="ltr"
                    required
                    value={form.phone}
                    onChange={(e) => setForm({ ...form, phone: e.target.value })}
                    placeholder={content.phone_placeholder}
                    className="mt-3 w-full rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light ltr:text-left rtl:text-right text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                  />
                </div>

                <div className="md:col-span-2">
                  <label htmlFor="contact-note" className="block text-sm font-medium text-ivory/90">
                    <InlineEdit value={content.note_label} onSave={(v) => saveContent('note_label', v)} /> <span className="font-light text-ivory/50">{content.note_optional_label}</span>
                  </label>
                  <textarea
                    id="contact-note"
                    rows={5}
                    value={form.note}
                    onChange={(e) => setForm({ ...form, note: e.target.value })}
                    placeholder={content.note_placeholder}
                    className="mt-3 w-full resize-none rounded-2xl border border-white/10 bg-ink/60 px-5 py-3.5 text-sm font-light leading-8 text-ivory placeholder:text-ivory/35 backdrop-blur-md transition-all duration-300 shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)] focus:border-copper/70 focus:bg-ink/80 focus:shadow-[0_0_15px_rgba(197,143,92,0.25)] focus:outline-none"
                  />
                </div>

                <div className="md:col-span-2 flex justify-start">
                  <Button
                    type="submit"
                    variant="copper"
                    className="w-full md:w-auto md:px-12 flex items-center justify-center gap-3"
                    disabled={sending}
                  >
                    {sending ? (
                      content.sending_label
                    ) : (
                      <>
                        <InlineEdit value={content.submit_label} onSave={(v) => saveContent('submit_label', v)} />
                        <SendIcon className="h-4 w-4 transition-transform duration-300 rtl:group-hover:-translate-x-1 ltr:group-hover:translate-x-1" />
                      </>
                    )}
                  </Button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  )
}