'use client'

import { useState, useEffect, useMemo, useRef } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { Bed, Bath, Ruler, MapPin, ArrowLeft, MessageCircle, Building2, Hash, Mail, Send, ChevronLeft, ChevronRight } from 'lucide-react'
import Navbar from '@/components/Navbar'
import { submitForm } from '@/lib/formSubmit'
import Footer from '@/components/Footer'
import { getTranslation } from '@/lib/i18n'
import type { WPPropertyDetail } from '@/lib/api/properties-wp'
import type { Language } from '@/lib/i18n'

// Centro de Puerto Vallarta para fallback del mapa
const PUERTO_VALLARTA_CENTER = { lat: 20.6534, lon: -105.2253 }
const RIVIERA_NAYARIT_CENTER = { lat: 20.7892, lon: -105.5274 }

function formatPrice(value: number | null, currency: string, lang: Language): string {
  if (value == null || value <= 0) return getTranslation(lang, 'properties.uponRequest')
  return new Intl.NumberFormat(lang === 'es' ? 'es-MX' : lang === 'fr' ? 'fr-FR' : 'en-US', {
    style: 'currency',
    currency: currency || 'USD',
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(value)
}

/** Filtra placeholders y normaliza: array, string separado por comas, o JSON string. */
function getDisplayAmenities(amenities: string[] | string | undefined | null): string[] {
  if (amenities == null) return []
  let raw: string[] = []
  if (Array.isArray(amenities)) {
    raw = amenities.map((a) => (typeof a === 'string' ? a.trim() : String(a).trim())).filter(Boolean)
  } else if (typeof amenities === 'string') {
    const trimmed = amenities.trim()
    if (trimmed.startsWith('[')) {
      try {
        const parsed = JSON.parse(trimmed) as unknown
        raw = Array.isArray(parsed)
          ? parsed.map((a) => (typeof a === 'string' ? a.trim() : String(a).trim())).filter(Boolean)
          : trimmed.split(/[,;|\n]/).map((s) => s.trim()).filter(Boolean)
      } catch {
        raw = trimmed.split(/[,;|\n]/).map((s) => s.trim()).filter(Boolean)
      }
    } else {
      raw = trimmed.split(/[,;|\n]/).map((s) => s.trim()).filter(Boolean)
    }
  }
  return raw.filter((a) => {
    const t = a.trim()
    if (!t) return false
    if (/^\*+$/.test(t)) return false
    if (/^n\/a$/i.test(t)) return false
    if (/^null$/i.test(t)) return false
    return true
  })
}

/** Construye query de geocode: dirección completa o "Zona, Ciudad, México" para mejor precisión. */
function buildGeocodeQuery(address: string, city?: string | null, area?: string | null): string {
  const region = /riviera|nayarit/i.test([city, area].filter(Boolean).join(' '))
    ? 'Riviera Nayarit, Mexico'
    : 'Puerto Vallarta, Mexico'
  if (address.trim()) return `${address.trim()}, ${region}`
  const parts = [area, city || 'Puerto Vallarta', 'Mexico'].filter(Boolean)
  return parts.join(', ')
}

/** Ubicación: solo dirección + botón para abrir en Google Maps (sin embed ni OpenStreetMap). */
function PropertyLocationMap({
  address,
  city,
  area,
  lang,
}: {
  address: string
  city?: string | null
  area?: string | null
  lang: Language
}) {
  const fullAddress = buildGeocodeQuery(address, city, area)
  const googleMapsSearchUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(fullAddress)}`

  return (
    <div className="flex flex-col sm:flex-row sm:items-center gap-4 pt-2">
      <p className="text-brand-text/80 text-sm flex-1">{fullAddress}</p>
      <a
        href={googleMapsSearchUrl}
        target="_blank"
        rel="noopener noreferrer"
        className="inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl bg-brand-primary text-white font-semibold hover:bg-brand-darkGreen transition-colors shrink-0"
      >
        <MapPin size={18} />
        {getTranslation(lang, 'propertyDetail.viewOnGoogleMaps')}
      </a>
    </div>
  )
}

interface PropertyDetailFromAPIProps {
  property: WPPropertyDetail
  lang: Language
}

const SWIPE_THRESHOLD = 50

export default function PropertyDetailFromAPI({ property, lang }: PropertyDetailFromAPIProps) {
  const [heroIndex, setHeroIndex] = useState(0)
  const [touchStartX, setTouchStartX] = useState<number | null>(null)
  const [formData, setFormData] = useState({ name: '', email: '', phone: '', message: '' })
  const [formStatus, setFormStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle')
  const galleryRef = useRef<HTMLDivElement>(null)
  const images = property.images?.length
    ? property.images.map((i) => i.public_url)
    : property.primary_image
      ? [property.primary_image]
      : []

  const displayAmenities = useMemo(() => getDisplayAmenities(property.amenities), [property.amenities])
  const locationAddress = [property.address, property.area, property.city].filter(Boolean).join(', ')
  const hasValidSourceUrl = Boolean(
    property.source_url && typeof property.source_url === 'string' && property.source_url.startsWith('http')
  )

  const handleFormSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setFormStatus('sending')
    const result = await submitForm({
      type: 'property-inquiry',
      propertyTitle: property.title,
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      message: formData.message,
      language: lang,
    })
    if (result.ok) {
      setFormStatus('sent')
      setFormData({ name: '', email: '', phone: '', message: '' })
      setTimeout(() => setFormStatus('idle'), 5000)
    } else {
      setFormStatus('error')
      setTimeout(() => setFormStatus('idle'), 3000)
    }
  }

  const highlightCards = useMemo(() => {
    const cards: { icon: React.ReactNode; main: string; sub: string }[] = []
    if (property.bedrooms != null) {
      cards.push({
        icon: <Bed size={24} className="text-brand-primary" />,
        main: `${property.bedrooms} ${getTranslation(lang, 'properties.beds')}`,
        sub: lang === 'es' ? 'Distribución amplia' : lang === 'fr' ? 'Espace spacieux' : 'Spacious layout',
      })
    }
    if (property.bathrooms != null) {
      cards.push({
        icon: <Bath size={24} className="text-brand-primary" />,
        main: `${property.bathrooms} ${getTranslation(lang, 'properties.baths')}`,
        sub: lang === 'es' ? 'Baños completos' : lang === 'fr' ? 'Salles de bain complètes' : 'Full bathrooms',
      })
    }
    if (property.square_feet != null && property.square_feet > 0) {
      cards.push({
        icon: <Ruler size={24} className="text-brand-primary" />,
        main: `${property.square_feet.toLocaleString()} ${getTranslation(lang, 'properties.sqft')}`,
        sub: lang === 'es' ? 'Área total' : lang === 'fr' ? 'Surface totale' : 'Total living area',
      })
    }
    const displayType = property.property_type?.trim() && !/^\*+$|^n\/a$/i.test(property.property_type.trim())
      ? property.property_type.trim()
      : null
    if (displayType) {
      cards.push({
        icon: <Building2 size={24} className="text-brand-primary" />,
        main: displayType.charAt(0).toUpperCase() + displayType.slice(1).toLowerCase(),
        sub: lang === 'es' ? 'Tipo de propiedad' : lang === 'fr' ? 'Type de bien' : 'Property type',
      })
    }
    if (property.area) {
      cards.push({
        icon: <MapPin size={24} className="text-brand-primary" />,
        main: property.area,
        sub: property.city || (lang === 'es' ? 'Zona' : lang === 'fr' ? 'Zone' : 'Area'),
      })
    }
    if (property.flexmls_id) {
      cards.push({
        icon: <Hash size={24} className="text-brand-primary" />,
        main: `MLS #${property.flexmls_id}`,
        sub: `MLS #${property.flexmls_id}`,
      })
    }
    return cards
  }, [property, lang])

  return (
    <main className="min-h-screen bg-white">
      <Navbar />
      <section className="pt-20 pb-16 px-4">
        <div className="container mx-auto max-w-5xl">
          <Link
            href={`/${lang}/properties`}
            className="inline-flex items-center gap-2 text-brand-primary font-semibold mb-8 hover:underline"
          >
            <ArrowLeft size={20} />
            {getTranslation(lang, 'properties.viewAll')}
          </Link>

          {/* Hero galería: flechas, swipe en móvil, sin dots */}
          <div
            ref={galleryRef}
            className="relative aspect-[4/3] rounded-2xl overflow-hidden bg-gray-100 mb-8 shadow-lg select-none touch-pan-y"
            onTouchStart={(e) => setTouchStartX(e.targetTouches[0]?.clientX ?? null)}
            onTouchEnd={(e) => {
              const x = e.changedTouches[0]?.clientX
              if (touchStartX == null || x == null || images.length <= 1) return
              const diff = touchStartX - x
              if (Math.abs(diff) < SWIPE_THRESHOLD) return
              if (diff > 0) setHeroIndex((i) => (i + 1) % images.length)
              else setHeroIndex((i) => (i - 1 + images.length) % images.length)
              setTouchStartX(null)
            }}
          >
            {images.length > 0 ? (
              <>
                <Image
                  src={images[heroIndex]}
                  alt={`${property.title} – ${heroIndex + 1}/${images.length}`}
                  fill
                  sizes="(max-width: 1024px) 100vw, 1024px"
                  className="object-cover pointer-events-none"
                  priority
                  draggable={false}
                />
                {images.length > 1 && (
                  <>
                    <button
                      type="button"
                      onClick={() => setHeroIndex((i) => (i - 1 + images.length) % images.length)}
                      className="absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-colors z-10"
                      aria-label={getTranslation(lang, 'propertyDetail.viewGallery')}
                    >
                      <ChevronLeft size={24} />
                    </button>
                    <button
                      type="button"
                      onClick={() => setHeroIndex((i) => (i + 1) % images.length)}
                      className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 md:w-12 md:h-12 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-colors z-10"
                      aria-label={getTranslation(lang, 'propertyDetail.viewGallery')}
                    >
                      <ChevronRight size={24} />
                    </button>
                    <span className="absolute bottom-3 right-3 px-2.5 py-1 rounded-md bg-black/50 text-white text-xs font-medium z-10">
                      {heroIndex + 1} / {images.length}
                    </span>
                  </>
                )}
              </>
            ) : (
              <div className="w-full h-full flex items-center justify-center text-brand-text/50">
                {getTranslation(lang, 'properties.noImage')}
              </div>
            )}
          </div>

          {/* Título, ubicación, precio */}
          <div className="mb-8">
            <h1 className="text-3xl md:text-4xl font-bold text-brand-text mb-2">{property.title}</h1>
            {(property.area || property.city) && (
              <p className="flex items-center gap-2 text-brand-text/70 mb-4">
                <MapPin size={18} className="text-brand-primary shrink-0" />
                {[property.area, property.city].filter(Boolean).join(', ')}
              </p>
            )}
            <p className="text-brand-primary font-bold text-2xl">
              {formatPrice(property.price, property.currency, lang)}
            </p>
          </div>

          {/* Property Highlights - cards estilo referencia */}
          {highlightCards.length > 0 && (
            <div className="mb-12">
              <h2 className="text-xl font-semibold text-brand-text mb-6">
                {getTranslation(lang, 'propertyDetail.highlightsTitle')}
              </h2>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                {highlightCards.map((card, i) => (
                  <div
                    key={i}
                    className="p-5 rounded-2xl border-2 border-brand-accent/20 bg-white flex flex-col gap-2"
                  >
                    <div className="flex items-center gap-2">{card.icon}</div>
                    <p className="font-bold text-brand-text">{card.main}</p>
                    <p className="text-sm text-brand-text/70">{card.sub}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* CTA bloque oscuro - Schedule Showing + View Gallery */}
          <div className="mb-12 rounded-2xl overflow-hidden bg-gradient-to-b from-brand-darkGreen to-brand-primary text-white p-8 md:p-10">
            <h2 className="text-2xl md:text-3xl font-bold mb-3">
              {getTranslation(lang, 'propertyDetail.experienceCtaTitle')}
            </h2>
            <p className="text-white/90 mb-6 max-w-xl">
              {getTranslation(lang, 'propertyDetail.experienceCtaSubtitle')}
            </p>
            <div className="flex flex-wrap gap-4">
              <Link
                href={`/${lang}/contact`}
                className="inline-flex items-center gap-2 px-6 py-4 rounded-xl bg-white text-brand-primary font-semibold hover:bg-white/90 transition-colors"
              >
                <MessageCircle size={20} />
                {getTranslation(lang, 'contact.contactKevin')}
              </Link>
              {hasValidSourceUrl ? (
                <a
                  href={property.source_url!}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center px-6 py-4 rounded-xl border-2 border-white text-white font-semibold hover:bg-white hover:text-brand-primary transition-colors"
                >
                  {getTranslation(lang, 'propertyDetail.viewGallery')}
                </a>
              ) : (
                <button
                  type="button"
                  onClick={() => galleryRef.current?.scrollIntoView({ behavior: 'smooth' })}
                  className="inline-flex items-center px-6 py-4 rounded-xl border-2 border-white text-white font-semibold hover:bg-white hover:text-brand-primary transition-colors"
                >
                  {getTranslation(lang, 'propertyDetail.viewGallery')}
                </button>
              )}
            </div>
          </div>

          {/* Descripción: párrafos formateados correctamente (HTML → texto limpio con saltos). */}
          {property.description && (
            <div className="mb-10 p-6 md:p-8 rounded-2xl bg-gray-50 border border-brand-accent/10 overflow-visible">
              <h2 className="text-xl font-semibold text-brand-text mb-4">
                {getTranslation(lang, 'propertyDetail.description')}
              </h2>
              <div className="property-description-prose text-brand-text/90 text-base md:text-lg leading-relaxed max-w-3xl">
                {(() => {
                  const raw = property.description
                    .replace(/<p>\s*/gi, '\n')
                    .replace(/<\/p>/gi, '\n')
                    .replace(/<br\s*\/?>/gi, '\n')
                    .replace(/<[^>]+>/g, '')
                    .replace(/\n{3,}/g, '\n\n')
                    .trim()
                  const paragraphs = raw.split(/\n\n+/).filter(Boolean)
                  return paragraphs.map((p, i) => (
                    <p key={i} className="mb-4 last:mb-0">
                      {p}
                    </p>
                  ))
                })()}
              </div>
            </div>
          )}

          {/* Amenidades: grid de badges/pills legible */}
          {displayAmenities.length > 0 && (
            <div className="mb-10 p-6 md:p-8 rounded-2xl bg-gray-50 border border-brand-accent/10">
              <h2 className="text-xl font-semibold text-brand-text mb-4">
                {getTranslation(lang, 'propertyDetail.amenities')}
              </h2>
              <div className="flex flex-wrap gap-2">
                {displayAmenities.map((a, i) => (
                  <span
                    key={i}
                    className="inline-flex items-center px-4 py-2 rounded-xl bg-white border border-brand-accent/20 text-brand-text/90 text-sm font-medium"
                  >
                    {a}
                  </span>
                ))}
              </div>
            </div>
          )}

          {/* Ubicación + mapa (siempre con fallback PV/Riviera) */}
          {locationAddress && (
            <div className="mb-10 p-6 md:p-8 rounded-2xl bg-gray-50 border border-brand-accent/10">
              <h2 className="text-xl font-semibold text-brand-text mb-4">
                {getTranslation(lang, 'propertyDetail.location')}
              </h2>
              <p className="text-brand-text/90 mb-4 flex items-start gap-2">
                <MapPin size={20} className="text-brand-primary shrink-0 mt-0.5" />
                {locationAddress}
              </p>
              <PropertyLocationMap
                address={locationAddress}
                city={property.city}
                area={property.area}
                lang={lang}
              />
            </div>
          )}

          {/* Schedule a Private Showing - formulario en página (sin redirigir a contacto) */}
          <div id="contact" className="rounded-2xl overflow-hidden shadow-xl border-2 border-brand-accent/20 bg-white">
            <div className="grid md:grid-cols-2 gap-0">
              <div className="p-6 md:p-10 bg-white">
                <h2 className="text-xl font-semibold text-brand-text mb-4">
                  {getTranslation(lang, 'propertyDetail.experienceCtaTitle')}
                </h2>
                <p className="text-brand-text/80 mb-6">
                  {getTranslation(lang, 'propertyDetail.experienceCtaSubtitle')}
                </p>
                <div className="space-y-4 text-brand-text/90">
                  <div className="flex items-start gap-3">
                    <Mail size={20} className="text-brand-primary shrink-0 mt-0.5" />
                    <div>
                      <h4 className="font-semibold text-brand-text text-sm">Email</h4>
                      <a href="mailto:kevin@hogarrealtors.com" className="hover:text-brand-primary">
                        kevin@hogarrealtors.com
                      </a>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <MessageCircle size={20} className="text-brand-primary shrink-0 mt-0.5" />
                    <div>
                      <h4 className="font-semibold text-brand-text text-sm">WhatsApp</h4>
                      <a href="https://wa.me/523222311415" target="_blank" rel="noopener noreferrer" className="hover:text-brand-primary">
                        +52 (322) 231 1415
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              <div className="p-6 md:p-10 bg-gray-50 border-t md:border-t-0 md:border-l border-brand-accent/20">
                <form onSubmit={handleFormSubmit} className="space-y-4">
                  <input
                    required
                    name="name"
                    value={formData.name}
                    onChange={(e) => setFormData((f) => ({ ...f, name: e.target.value }))}
                    placeholder={getTranslation(lang, 'contact.fullName')}
                    className="w-full px-4 py-3 rounded-xl border border-brand-accent/40 bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary"
                  />
                  <input
                    required
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={(e) => setFormData((f) => ({ ...f, email: e.target.value }))}
                    placeholder="Email"
                    className="w-full px-4 py-3 rounded-xl border border-brand-accent/40 bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary"
                  />
                  <input
                    name="phone"
                    value={formData.phone}
                    onChange={(e) => setFormData((f) => ({ ...f, phone: e.target.value }))}
                    placeholder={getTranslation(lang, 'contact.phone')}
                    className="w-full px-4 py-3 rounded-xl border border-brand-accent/40 bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary"
                  />
                  <textarea
                    name="message"
                    value={formData.message}
                    onChange={(e) => setFormData((f) => ({ ...f, message: e.target.value }))}
                    placeholder={getTranslation(lang, 'contact.message')}
                    rows={3}
                    className="w-full px-4 py-3 rounded-xl border border-brand-accent/40 bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary resize-none"
                  />
                  <button
                    type="submit"
                    disabled={formStatus === 'sending'}
                    className="w-full bg-brand-primary text-white px-4 py-3 rounded-xl font-semibold flex items-center justify-center gap-2 hover:bg-brand-darkGreen transition disabled:opacity-50"
                  >
                    {formStatus === 'sending'
                      ? getTranslation(lang, 'contact.sending')
                      : formStatus === 'sent'
                        ? getTranslation(lang, 'contact.sent')
                        : formStatus === 'error'
                          ? getTranslation(lang, 'contact.error')
                          : getTranslation(lang, 'contact.send')}
                    {formStatus !== 'sending' && <Send size={18} />}
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </main>
  )
}