"use client"

import { useState, useRef, useEffect } from "react"
import type { EntertainmentAboutData } from "@/lib/strapi/types"
import { SectionBadge } from "./shared"

const WORD_LIMIT = 50

export default function EntertainmentAbout({ data }: { data: EntertainmentAboutData }) {
  const fullText = data.paragraphs.join("\n\n")
  const words = fullText.split(/\s+/).filter(Boolean)
  const hasMore = words.length > WORD_LIMIT
  const [expanded, setExpanded] = useState(false)
  const watermarkRef = useRef<HTMLParagraphElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const watermark = watermarkRef.current
    const container = containerRef.current
    if (!watermark || !container) return

    const resize = () => {
      watermark.style.transform = "translateX(-50%) scale(1)"
      const textWidth = watermark.scrollWidth
      const containerWidth = container.clientWidth
      if (textWidth > containerWidth * 1.05) {
        const scale = (containerWidth * 0.92) / textWidth
        watermark.style.transform = `translateX(-50%) scale(${scale})`
      } else {
        watermark.style.transform = "translateX(-50%)"
      }
    }

    resize()
    window.addEventListener("resize", resize)
    return () => window.removeEventListener("resize", resize)
  }, [])

  const display = expanded ? fullText : hasMore ? words.slice(0, WORD_LIMIT).join(" ") + "..." : fullText

  return (
    <section
      className="relative w-full overflow-hidden"
      style={{
        background:
          "radial-gradient(ellipse at 42% 84%, rgba(244,197,66,0) 0%, rgba(244,197,66,1) 100%), linear-gradient(90deg, #fff 0%, #fff 100%)",
      }}
    >
      <div ref={containerRef} className="relative max-w-[1440px] mx-auto px-4 md:px-[72px] pt-10 md:pt-16 pb-8 overflow-hidden">
        <p
          ref={watermarkRef}
          className="font-accent font-bold absolute left-1/2 top-[95px] md:top-[105px] text-[64px] sm:text-[96px] md:text-[200px] lg:text-[300px] leading-[0.7] text-center tracking-[-2px] sm:tracking-[-5.13px] md:tracking-[-12px] whitespace-nowrap select-none pointer-events-none"
          style={{ color: "rgba(102,15,32,0.04)", transformOrigin: "top center", transform: "translateX(-50%)" }}
        >
          {data.watermarkText}
        </p>

        <div className="relative z-10">
          <SectionBadge label={data.badge} />
        </div>

        <div className="relative z-10 mt-18 md:mt-[170px]">
          <div className="bg-white rounded-2xl p-6 md:p-16 overflow-hidden relative">
            <div className="hidden md:block absolute right-0 top-0 w-[300px] lg:w-[416px] h-[400px] opacity-10 pointer-events-none">
              <svg viewBox="0 0 416 400" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
                <polygon points="208,0 416,200 308,400 108,400 0,200" fill="#f4c542" opacity="0.3" />
                <polygon points="250,50 380,180 320,380 140,380 80,180" fill="#f4c542" opacity="0.2" />
                <polygon points="180,30 370,190 290,390 70,390 10,190" fill="#f4c542" opacity="0.15" />
              </svg>
            </div>

            <div className="max-w-[915px] relative z-10 flex flex-col gap-4">
              {display.split("\n\n").map((para, i) => (
                <p key={i} className="font-sans text-[rgba(0,0,0,0.6)] text-[16px] leading-[1.5] font-medium">
                  {para}
                </p>
              ))}
            </div>
            {hasMore ? (
              <button
                onClick={() => setExpanded(!expanded)}
                className="font-sans mt-4 text-[#20262b] text-[14px] font-bold leading-[22px] uppercase underline relative z-10 hover:text-[#d20010] transition-colors"
              >
                {expanded ? "read less" : "read more"}
              </button>
            ) : null}
          </div>
        </div>
      </div>
    </section>
  )
}