"use client"

import { useState } from 'react'
import type { NewsletterArchiveData } from '@/lib/strapi/types'

const NEWSLETTER_YEARS = [
  {
    year: '2026',
    items: [
      {
        month: 'April 2026',
        title: 'MGM Newsletter April 2026',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter April 2026.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter April 2026.pdf.png',
      },
    ],
  },
  {
    year: '2025',
    items: [
      {
        month: 'October 2025',
        title: 'MGM Newsletter Oct 2025',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter Oct 2025.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter Oct 2025.pdf.png',
      },
    ],
  },
  {
    year: '2024',
    items: [
      {
        month: 'October 2024',
        title: 'MGM Newsletter Oct 2024',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter Oct 2024.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter Oct 2024.png',
      },
      {
        month: 'April 2024',
        title: 'MGM Newsletter Apr 2024',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter Apr 2024.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter Apr 2024.pdf.png',
      },
    ],
  },
  {
    year: '2023',
    items: [
      {
        month: 'April 2023',
        title: 'MGM Newsletter Apr 2023',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter Apr 2023.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter Apr 2023.pdf.png',
      },
    ],
  },
  {
    year: '2022',
    items: [
      {
        month: 'October 2022',
        title: 'MGM Newsletter Oct 2022',
        pdfUrl: '/assets/newsletters/PDF/MGM Newsletter Oct 2022.pdf',
        thumbnail: '/assets/newsletters/thumbnails/MGM Newsletter Oct 2022.pdf.png',
      },
    ],
  },
]

const CalendarIcon = () => (
  <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M6 1.5V4.5M12 1.5V4.5M2.25 7.5H15.75M3.75 3H14.25C15.0784 3 15.75 3.67157 15.75 4.5V15C15.75 15.8284 15.0784 16.5 14.25 16.5H3.75C2.92157 16.5 2.25 15.8284 2.25 15V4.5C2.25 3.67157 2.92157 3 3.75 3Z" stroke="rgba(42,48,54,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

const ArrowIcon = ({ className = '' }: { className?: string }) => (
  <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
    <path d="M1 1L5 6L1 11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

const ViewPdfIcon = () => (
  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="0.5" width="16" height="16" rx="4" fill="#D20010" />
    <path d="M5.5 11L11.5 5M11.5 5H6.5M11.5 5V10" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
)

const StarIcon = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
    <path d="M7.73651 10.0487C7.94413 9.53035 7.27452 9.10649 6.87359 9.50244L2.52232 13.7997C2.28855 14.0305 2.33101 14.4125 2.61008 14.5892L4.70808 15.9172C4.98715 16.0939 5.36218 15.9762 5.48324 15.674L7.73651 10.0487Z" fill="#9C1D35" />
    <path d="M8.98511 6.53045C8.86987 7.07545 8.07157 7.07545 7.95634 6.53045L6.70572 0.615619C6.63853 0.297847 6.8874 0 7.2201 0H9.72134C10.054 0 10.3029 0.297848 10.2357 0.615619L8.98511 6.53045Z" fill="#9C1D35" />
    <path d="M9.23167 10.0572C9.01886 9.54086 9.68417 9.11062 10.0891 9.50273L14.4833 13.7582C14.7193 13.9868 14.6807 14.3692 14.4034 14.5485L12.3189 15.8965C12.0416 16.0759 11.6654 15.9618 11.5413 15.6607L9.23167 10.0572Z" fill="#9C1D35" />
    <path d="M6.9323 7.18408C7.42089 7.47151 7.15509 8.2056 6.58975 8.1301L0.454237 7.31071C0.124608 7.26669 -0.0805194 6.93867 0.0302586 6.63273L0.863076 4.33268C0.973854 4.02673 1.34471 3.89706 1.62959 4.06465L6.9323 7.18408Z" fill="#9C1D35" />
    <path d="M10.0677 7.18408C9.57911 7.47151 9.84491 8.2056 10.4102 8.1301L16.5458 7.31071C16.8754 7.26669 17.0805 6.93867 16.9697 6.63273L16.1369 4.33268C16.0261 4.02673 15.6553 3.89706 15.3704 4.06465L10.0677 7.18408Z" fill="#9C1D35" />
  </svg>
)

function textOrFallback(value: unknown, fallback: string) {
  return typeof value === 'string' && value.trim() !== '' ? value : fallback
}

interface NewsletterCardProps {
  month: string
  title: string
  pdfUrl: string
  thumbnail: string
}

function NewsletterCard({ month, title, pdfUrl, thumbnail }: NewsletterCardProps) {
  return (
    <div className="flex flex-col rounded-[16px] border border-[rgba(229,231,235,0.5)] overflow-hidden bg-white group">
      {/* Thumbnail Preview */}
      <div className="relative overflow-hidden">
        <img
          src={thumbnail}
          alt={title}
          loading="lazy"
          className="w-full h-auto block"
        />
        {/* Date badge */}
        <div className="absolute top-4 left-4 lg:top-6 lg:left-6 z-10 inline-flex items-center gap-2 bg-[rgba(255,255,255,0.9)] border border-white rounded-[16px] px-3 py-1.5">
          <CalendarIcon />
          <span
            className="text-[14px] leading-[22px] text-[rgba(42,48,54,0.8)]"
          >
            {month}
          </span>
        </div>
      </div>

      {/* Content */}
      <div
        className="flex-1 px-4 lg:px-6 py-5 lg:py-6 flex flex-col lg:flex-row lg:items-center gap-2 lg:gap-6"
        style={{ background: 'linear-gradient(90deg, rgba(255,232,233,0.5) 0%, rgba(255,232,233,0) 100%), #fff',
        }}
      >
        <h3
          className="text-[#102443] lg:text-[#2a3036] text-[20px] lg:text-[24px] leading-normal flex-1 font-bold"
        >
          {title}
        </h3>
        {pdfUrl && (
          <a
            href={pdfUrl}
            className="flex items-center gap-2.5 shrink-0 group/cta"
            target="_blank"
            rel="noopener noreferrer"
          >
            <span
              className="text-[#2a3036] text-[14px] uppercase tracking-[0.7px]"
            >
              View PDF
            </span>
            <ViewPdfIcon />
          </a>
        )}
      </div>
    </div>
  )
}

export default function NewsletterArchiveSection({ data }: { data?: NewsletterArchiveData } = {}) {
  const years = data?.years ?? NEWSLETTER_YEARS
  const yearOptions = ['All', ...years.map((y) => y.year)]

  const [selectedYear, setSelectedYear] = useState<string>('All')
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const [visibleCount, setVisibleCount] = useState(6)

  const selectYearLabel = textOrFallback(data?.selectYearLabel, 'Select Year:')
  const viewMoreLabel = textOrFallback(data?.viewMoreLabel, 'View more')
  const rawBadgeLabel = textOrFallback(data?.badge, 'Newsletter Archive')
  const badgeLabel = rawBadgeLabel.replace(/NEWLEYTTER/gi, 'NEWSLETTER')
  const watermarkText = textOrFallback(data?.watermarkText, 'Our Newsletter')

  const handleYearSelect = (year: string) => {
    setSelectedYear(year)
    setIsDropdownOpen(false)
    setVisibleCount(6)
  }

  const filteredNewsletters =
    selectedYear === 'All'
      ? years.flatMap((y) => y.items)
      : years.find((y) => y.year === selectedYear)?.items ?? []
  const visibleNewsletters = filteredNewsletters.slice(0, visibleCount)

  return (
    <section className="bg-white overflow-hidden relative">
      <div className="max-w-[1440px] mx-auto px-5 lg:px-[72px] py-10 lg:py-16">
        {/* Header Row */}
        <div className="flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between mb-2">
          {/* Newsletter Archive Badge */}
          <div className="flex items-center gap-2 bg-[#ebebeb] rounded-full px-6 py-3 w-fit">
            <StarIcon />
            <span
              className="text-[16px] text-black uppercase leading-none"
            >
              {badgeLabel}
            </span>
          </div>

          {/* Year Selector */}
          <div className="flex items-center justify-between w-full lg:w-auto lg:gap-4 mt-4 lg:mt-0">
            <span
              className="text-[16px] leading-[1.04] text-[#101828] lg:text-black uppercase lg:leading-none font-semibold lg:font-normal"
            >
              {selectYearLabel}
            </span>
            <div className="relative">
              <button
                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                className="flex items-center bg-[#d20010] rounded-full pl-0.5 py-0.5"
              >
                <span
                  className="bg-white rounded-full px-6 py-2 lg:py-3 text-[14px] lg:text-[16px] uppercase tracking-[0.28px] lg:tracking-[0.32px] text-[#1c2023] min-w-[91px] lg:min-w-[auto] flex items-center justify-center"
                >
                  {selectedYear}
                </span>
                <span className="flex items-center justify-center w-6 h-6 rotate-90 text-white">
                  <ArrowIcon />
                </span>
              </button>

              {isDropdownOpen && (
                <div className="absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden z-20">
                  {yearOptions.map((year) => (
                    <button
                      key={year}
                      onClick={() => handleYearSelect(year)}
                      className={`block w-full px-6 py-3 text-left text-[14px] hover:bg-gray-50 transition-colors ${year === selectedYear ? 'bg-gray-50 font-semibold' : ''
                        }`}
                    >
                      {year}
                    </button>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Watermark */}
        <div className="w-full overflow-hidden mb-5 lg:mb-8 pb-2">
          <p
            className="w-min lg:w-auto text-5xl lg:text-[160px] leading-[0.85] lg:leading-[0.7] tracking-[-1.83px] lg:tracking-[-6.4px] text-[rgba(16,36,67,0.08)] lg:text-[rgba(16,36,67,0.04)] whitespace-normal lg:whitespace-nowrap select-none font-bold"
            aria-hidden="true"
          >
            {watermarkText}
          </p>
        </div>

        {/* Cards Grid */}
        <div className="flex flex-col lg:grid lg:grid-cols-3 gap-5 lg:gap-6">
          {visibleNewsletters.map((newsletter) => (
            <NewsletterCard
              key={newsletter.month + newsletter.title}
              month={newsletter.month}
              title={newsletter.title}
              pdfUrl={newsletter.pdfUrl}
              thumbnail={newsletter.thumbnail}
            />
          ))}
        </div>

        {/* View More CTA */}
        {visibleCount < filteredNewsletters.length && (
        <div className="flex justify-center mt-10">
          <button
            onClick={() => setVisibleCount((prev) => prev + 6)}
            className="flex items-center bg-[#d20010] rounded-full pl-[2px] py-[2px]"
          >
            <span
              className="bg-white rounded-[44px] px-[24px] py-[12px] text-[16px] leading-[22px] uppercase tracking-[0.32px] text-[#1c2023] whitespace-nowrap"
            >
              {viewMoreLabel}
            </span>
            <span className="flex items-center justify-center w-[24px] h-[24px] text-white">
              <ArrowIcon />
            </span>
          </button>
        </div>
        )}
      </div>
    </section>
  )
}