'use client'

import { useState } from 'react'
import { getAreaDescription, DEFAULT_AREA_DESCRIPTION, isFeaturedArea } from '@/lib/areaDescriptions'
import type { Language } from '@/lib/i18n'

interface Props {
  /** Valor del filtro: slug editorial (zona-romantica) o área directa de API (Bucerias, Sayulita). */
  areaValue: string | null | undefined
  lang: Language
}

const READ_MORE_LABEL: Record<Language, { more: string; less: string }> = {
  en: { more: 'Read more', less: 'Read less' },
  es: { more: 'Ver más', less: 'Ver menos' },
  fr: { more: 'Lire plus', less: 'Lire moins' },
}

export function AreaDescriptionBanner({ areaValue, lang }: Props) {
  const [expanded, setExpanded] = useState(false)

  // Sin filtro de área: solo título genérico sin descripción
  if (!areaValue?.trim()) {
    return (
      <section className="w-full mb-8 md:mb-12">
        <h2 className="text-xl md:text-2xl font-bold text-brand-text">
          {DEFAULT_AREA_DESCRIPTION.name[lang]}
        </h2>
      </section>
    )
  }

  // Área destacada (featured): banner con Read more
  if (isFeaturedArea(areaValue)) {
    const content = getAreaDescription(areaValue)
    const labels = READ_MORE_LABEL[lang]
    const paragraphs = content.description[lang].split('\n\n').filter(Boolean)
    const hasDescription = paragraphs.length > 0

    return (
      <section className="w-full mb-8 md:mb-12">
        <h2 className="text-xl md:text-2xl font-bold text-brand-text mb-3">
          {content.name[lang]}
        </h2>

        {hasDescription && (
          <>
            <div className="relative">
              <div
                className={[
                  'text-brand-text/80 text-sm md:text-base leading-relaxed space-y-3 max-w-3xl overflow-hidden transition-all duration-300',
                  expanded ? 'max-h-[2000px]' : 'max-h-[4.5rem]',
                ].join(' ')}
              >
                {paragraphs.map((p, i) => (
                  <p key={i}>{p}</p>
                ))}
              </div>
              {!expanded && (
                <div
                  className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white to-transparent pointer-events-none"
                  aria-hidden
                />
              )}
            </div>
            <button
              type="button"
              onClick={() => setExpanded((prev) => !prev)}
              className="mt-2 text-sm font-semibold text-brand-primary hover:underline focus:outline-none focus:ring-2 focus:ring-brand-primary/30 rounded"
            >
              {expanded ? labels.less : labels.more}
            </button>
          </>
        )}
      </section>
    )
  }

  // Área de Flex (no featured): solo título, sin descripción
  return (
    <section className="w-full mb-8 md:mb-12">
      <h2 className="text-xl md:text-2xl font-bold text-brand-text">
        {areaValue.trim()}
      </h2>
    </section>
  )
}