"use client"

import { useState, useEffect, useRef } from "react"
import type { HospitalityAboutData } from "@/lib/strapi/types"
import FallbackImage from "./FallbackImage"

const WORD_LIMIT = 50

export default function HospitalityAbout({ data }: { data: HospitalityAboutData }) {
  const [isExpanded, setIsExpanded] = useState(false)
  const watermarkRef = useRef<HTMLParagraphElement>(null)
  const contentCardRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const watermark = watermarkRef.current
    const contentCard = contentCardRef.current
    if (!watermark || !contentCard) return

    const resize = () => {
      watermark.style.transform = "translateX(-50%) scale(1)"
      const textWidth = watermark.scrollWidth
      const contentWidth = contentCard.clientWidth
      if (textWidth > contentWidth) {
        const scale = contentWidth / textWidth
        watermark.style.transform = `translateX(-50%) scale(${scale})`
      } else {
        watermark.style.transform = "translateX(-50%)"
      }
    }

    resize()
    const observer = new ResizeObserver(resize)
    observer.observe(contentCard)
    window.addEventListener("resize", resize)
    return () => {
      observer.disconnect()
      window.removeEventListener("resize", resize)
    }
  }, [])

  const fullText = data.paragraphs.join("\n\n")
  const words = fullText.split(/\s+/).filter(Boolean)
  const hasMore = words.length > WORD_LIMIT
  const truncatedText = words.slice(0, WORD_LIMIT).join(" ") + "..."

  return (
    <section className="w-full px-2.5 md:px-[72px] pt-8 md:pt-[80px] pb-8 md:pb-[80px]">
      <div className="max-w-[1297px] mx-auto">
        <div
          className="relative overflow-hidden rounded-[12px] md:rounded-[16px] px-3 pt-6 pb-5 md:p-8 flex flex-col gap-[65px] md:gap-[190px]"
          style={{
            background:
              "radial-gradient(ellipse at 42% 84%, rgba(176,146,77,0) 0%, rgba(176,146,77,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)",
          }}
        >
          <p
            ref={watermarkRef}
            className="font-serif absolute left-1/2 top-[78px] md:top-[98px] text-[42px] sm:text-[72px] md:text-[235px] leading-[0.7] tracking-[-1px] sm:tracking-[-3px] md:tracking-[-9.4px] text-center whitespace-nowrap select-none pointer-events-none"
            style={{ transformOrigin: "top center", transform: "translateX(-50%)" }}
            aria-hidden="true"
          >
            <span className="hidden md:inline" style={{ color: "rgba(176,146,77,0.3)" }}>
              {data.watermarkText}
            </span>
            <span className="md:hidden" style={{ color: "rgba(102,15,32,0.04)" }}>
              {data.watermarkText}
            </span>
          </p>

          <div className="relative z-10">
            <div className="inline-flex items-center gap-2 px-4 py-2 md:px-6 md:py-3 bg-white rounded-[66px] max-w-full">
              <FallbackImage
                src={data.badgeIcon}
                alt=""
                loading="lazy"
                className="w-[17px] h-4 shrink-0"
              />
              <span className="font-heading text-[#2a3036] text-[13px] md:text-[16px] leading-tight uppercase text-center">
                {data.badge}
              </span>
            </div>
          </div>

          <div className="relative z-10 flex flex-1 items-center justify-center">
            <div ref={contentCardRef} className="relative w-full max-w-[calc(100vw-44px)] md:max-w-none bg-white rounded-[10px] md:rounded-[16px] p-5 md:p-6 overflow-hidden">
              <FallbackImage
                src={data.decorativeImage}
                fallbackSrc="/assets/hospitality/decorative-flower.svg"
                alt=""
                loading="lazy"
                className="absolute top-[-86px] right-[-40px] w-[416px] h-[400px] hidden md:block pointer-events-none"
                aria-hidden="true"
              />

              <div className="flex flex-col gap-8 md:gap-6">
                <p className="text-black/60 text-[15px] sm:text-[16px] leading-[1.45] md:leading-[1.5] font-medium md:max-w-[885px] whitespace-pre-line">
                  {isExpanded ? fullText : hasMore ? truncatedText : fullText}
                </p>
                {hasMore ? (
                  <button
                    onClick={() => setIsExpanded(!isExpanded)}
                    className="text-[#20262b] md:text-[#2a3036] text-[14px] leading-[22px] font-bold uppercase underline self-start transition-all hover:opacity-70"
                  >
                    {isExpanded ? "read less" : "read more"}
                  </button>
                ) : null}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}