"use client"
import { useState } from 'react'
import MGMButton from './MGMButton'
import type { PressReleaseSectionData } from '@/lib/strapi/types'

interface PressReleaseSectionProps {
  data: PressReleaseSectionData
}

const sparkleIcon = '/assets/press-release/sparkle-icon.svg'
const calendarIcon = '/assets/press-release/calendar-icon.svg'

function getReadMoreHref(release: PressReleaseSectionData['pressReleases'][number]) {
  return release.buttonPdf || release.buttonLink || ''
}

function PressReleaseCard({ release }: { release: PressReleaseSectionData['pressReleases'][number] }) {
  const readMoreHref = getReadMoreHref(release)

  return (
    <div
      className="h-auto lg:min-h-[444px] rounded-2xl overflow-hidden border-[0.833px] border-[rgba(229,231,235,0.5)] flex flex-col"
      style={{ background: 'radial-gradient(ellipse at top right, rgba(255,220,225,1) 0%, rgba(255,220,225,0) 100%), #fff' }}
    >
      {/* Image container */}
      <div className="relative h-[220px] shrink-0">
        <img
          src={release.image}
          alt={release.title}
          loading="lazy"
          className="w-full h-full object-cover"
        />
        {/* Date badge */}
        <div className="absolute top-6 left-6 inline-flex items-center gap-2 px-3 py-[6px] bg-white/90 border border-white rounded-2xl">
          <img
            src={calendarIcon}
            alt=""
            loading="lazy"
            className="w-[17.625px] h-[19.125px]"
          />
          <span className="font-funnel text-sm text-[rgba(42,48,54,0.8)]">
            {release.date}
          </span>
        </div>
      </div>
      {/* Content */}
      <div className="p-6 flex-1 flex flex-col">
        <h3 className="font-heading font-bold text-[22px] text-[#2a3036] leading-[1.1] mb-2">
          {release.title}
        </h3>
        <p className="font-sans font-normal text-base text-[rgba(32,38,43,0.8)] leading-[1.2]">
          {release.description}
        </p>
        <div className="mt-auto pt-6 flex justify-center">
          <MGMButton
            text={release.buttonText || "Read more"}
            href={readMoreHref || undefined}
            target={readMoreHref ? "_blank" : undefined}
            className="[&>span:first-child]:px-4 [&>span:first-child]:py-2 [&_span]:text-xs"
          />
        </div>
      </div>
    </div>
  )
}

export default function PressReleaseSection({ data }: PressReleaseSectionProps) {
  const pressReleases = data.pressReleases
  const [isExpanded, setIsExpanded] = useState(false)

  return (
    <section className="relative pt-16 pb-28 lg:pt-20 lg:pb-36 overflow-hidden lg:px-5">
      {/* Background gradient */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{ background: 'radial-gradient(ellipse at bottom right, rgba(244,247,251,1), rgba(244,247,251,0) 50%)',
        }}
      />

      <div className="relative z-10 w-full max-w-[1297px] mx-auto px-6 lg:px-0">
        {/* Header: Badge + Description */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 mb-14">
          {/* Badge */}
          <div>
            <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
              <img
                src={sparkleIcon}
                alt=""
                loading="lazy"
                className="w-[17px] h-4"
              />
              <span className="font-heading text-black text-base uppercase leading-none">
                {data.header.badge || 'Press release'}
              </span>
            </span>
          </div>

          {/* Description */}
          <div className="max-w-[417px]">
            <p className="font-sans font-medium text-base text-[rgba(42,48,54,0.6)] leading-[1.5]">
               {data.header.description}
            </p>
            <div className="mt-6 border-b border-[rgba(16,36,67,0.2)]" />
          </div>
        </div>

        {/* First 3 Press Release Cards */}
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6 mb-10">
          {pressReleases.slice(0, 3).map((release) => (
            <PressReleaseCard key={release.id} release={release} />
          ))}
        </div>

        {/* Additional 3 Press Release Cards (Dropdown) */}
        <div 
          className={`grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-6 transition-all duration-700 ease-in-out overflow-hidden ${
            isExpanded ? 'max-h-[2500px] opacity-100 mb-10' : 'max-h-0 opacity-0 mb-0'
          }`}
        >
          {pressReleases.slice(3).map((release) => (
            <PressReleaseCard key={release.id} release={release} />
          ))}
        </div>

        {/* View more CTA */}
        <div className="flex justify-center">
          <MGMButton 
            text={isExpanded ? "View less" : "View more"} 
            onClick={() => setIsExpanded(!isExpanded)} 
          />
        </div>
      </div>
    </section>
  )
}