"use client"
import { useState, useRef, useCallback } from 'react'
import { ChevronLeft, ChevronRight } from 'lucide-react'
import type { SustainabilityData } from '@/lib/strapi/types'

interface SustainabilitySectionProps {
  data: SustainabilityData
}

export default function SustainabilitySection({ data }: SustainabilitySectionProps) {
  const initiatives = data.initiatives
  const [activePageIndex, setActivePageIndex] = useState(0)
  const [activeDesktopIndex, setActiveDesktopIndex] = useState(0)
  const scrollRef = useRef<HTMLDivElement>(null)

  const CARD_WIDTH = 324
  const CARD_GAP = 16

  const handleScroll = useCallback(() => {
    if (!scrollRef.current) return
    const scrollLeft = scrollRef.current.scrollLeft
    const index = Math.round(scrollLeft / (CARD_WIDTH + CARD_GAP))
    setActivePageIndex(Math.min(Math.max(index, 0), initiatives.length - 1))
  }, [])

  const scrollToCard = useCallback((index: number) => {
    const clamped = Math.min(Math.max(index, 0), initiatives.length - 1)
    scrollRef.current?.scrollTo({
      left: clamped * (CARD_WIDTH + CARD_GAP),
      behavior: 'smooth',
    })
    setActivePageIndex(clamped)
  }, [])

  return (
    <section className="bg-white py-16 lg:py-20 lg:px-5">
      <div className="w-full max-w-[1297px] mx-auto px-5 lg:px-0">
        {/* Header: Badge + Description */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-5 lg:gap-6 mb-11 lg:mb-6">
          {/* Badge */}
          <div>
            <span className="inline-flex items-center gap-2 px-6 py-3 bg-[#ebebeb] rounded-full">
              <img
                src={data.header.badgeIcon || "/assets/common/sparkle-vector.svg"}
                alt=""
                loading="lazy"
                className="w-[17px] h-4"
              />
              <span className="font-heading text-black text-base uppercase leading-none">
                {data.header.badge || 'Powering a Sustainable Tomorrow'}
              </span>
            </span>
          </div>

          {/* Description */}
          <div className="max-w-full lg:max-w-[524px]">
            <p className="font-sans font-medium text-base text-[rgba(16,36,67,0.6)] lg:text-[#4a5565] lg:font-normal leading-[1.5] lg:leading-[24px]">
              {data.header.description}
            </p>
            <div className="mt-4 lg:mt-6 border-b border-[rgba(16,36,67,0.2)]" />
          </div>
        </div>

        {/* Mobile: Horizontal Carousel */}
        <div className="lg:hidden">
          <div
            ref={scrollRef}
            className="flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory scroll-smooth -mx-5 pl-5 pr-0 lg:mx-0 lg:px-0"
            style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitOverflowScrolling: 'touch' }}
            onScroll={handleScroll}
          >
            {initiatives.map((initiative, idx) => {
              const isActive = idx === activePageIndex
              return (
                <div
                  key={initiative.number}
                  className="snap-start shrink-0 w-[324px] rounded-2xl overflow-hidden p-4 flex flex-col relative"
                >
                  {/* Light (pink) background — always present */}
                  <div
                    className="absolute inset-0 rounded-2xl transition-opacity duration-500 ease-in-out"
                    style={{ background:
                        'radial-gradient(ellipse at bottom left, rgba(255,232,233,1) 0%, rgba(255,232,233,0) 60%), #fff',
                      opacity: isActive ? 0 : 1,
                    }}
                  />
                  {/* Dark background — fades in when active */}
                  <div
                    className="absolute inset-0 rounded-2xl transition-opacity duration-500 ease-in-out"
                    style={{ background:
                        'linear-gradient(143.16deg, rgb(42, 48, 54) 16.68%, rgb(35, 40, 45) 95.23%)',
                      opacity: isActive ? 1 : 0,
                    }}
                  />

                  {/* Card content (above backgrounds) */}
                  <div className="relative z-10 flex flex-col">
                    {/* Image */}
                    <div className="relative w-full h-[242px] rounded-2xl overflow-hidden">
                      <img
                        src={initiative.image}
                        alt={initiative.title}
                        className="absolute inset-0 w-full h-full object-cover rounded-2xl"
                        loading="lazy"
                        draggable={false}
                      />
                      <div
                        className="absolute inset-0 rounded-2xl"
                        style={{ background:
                            'linear-gradient(179.92deg, rgba(8, 19, 37, 0) 50%, rgb(5, 16, 32) 99.91%)',
                        }}
                      />
                    </div>

                    {/* Watermark Number */}
                    <div className="font-heading font-bold text-[80px] leading-[132px] tracking-[-3.2px] text-center text-white/[0.06]">
                      {initiative.number}
                    </div>

                    {/* Text Content */}
                    <div className="flex flex-col gap-1">
                      <h3 className="font-heading font-bold text-[20px] leading-normal text-white">
                        {initiative.title}
                      </h3>
                      <p className="font-sans font-normal text-base leading-[24px] text-[#f2f8ff]/70">
                        {initiative.description}
                      </p>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>

          {/* Pagination + Arrows */}
          <div className="flex items-center justify-end mt-11">
            {/* Arrow buttons */}
            <div className="flex gap-[13px] items-center">
              <button
                onClick={() => scrollToCard(activePageIndex - 1)}
                disabled={activePageIndex === 0}
                className={`size-[44px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${
                  activePageIndex === 0 ? 'opacity-30 cursor-not-allowed' : 'opacity-100 hover:opacity-80'
                }`}
                aria-label="Previous"
              >
                <ChevronLeft className="w-5 h-5 text-[#d20010]" />
              </button>
              <button
                onClick={() => scrollToCard(activePageIndex + 1)}
                disabled={activePageIndex === initiatives.length - 1}
                className={`size-[44px] rounded-full border-2 border-[#d20010] flex items-center justify-center transition-all active:scale-95 ${
                  activePageIndex === initiatives.length - 1 ? 'opacity-30 cursor-not-allowed' : 'opacity-100 hover:opacity-80'
                }`}
                aria-label="Next"
              >
                <ChevronRight className="w-5 h-5 text-[#d20010]" />
              </button>
            </div>
          </div>
        </div>

        {/* Desktop: Accordion Cards */}
        <div className="hidden lg:flex flex-col gap-6">
          {initiatives.map((initiative, idx) => {
            const isActive = idx === activeDesktopIndex
            return (
              <div
                key={initiative.number}
                onClick={() => setActiveDesktopIndex(idx)}
                className={`relative overflow-hidden rounded-2xl cursor-pointer transition-all duration-500 ${
                  isActive ? 'p-10' : 'px-10 py-5'
                }`}
                style={
                  isActive
                    ? {
                        background:
                          'linear-gradient(171.91deg, rgb(42, 48, 54) 16.679%, rgb(35, 40, 45) 95.227%)',
                      }
                    : {
                        background:
                          'radial-gradient(ellipse at bottom left, rgba(255,232,233,1), rgba(255,232,233,0) 60%), #fff',
                      }
                }
              >
                {isActive ? (
                  /* Expanded: dark variant with image */
                  <div className="flex flex-row gap-0">
                    <div className="flex flex-col justify-between min-h-[288px] flex-1">
                      {/* Large watermark number */}
                      <div className="font-heading font-bold text-[128px] leading-[132px] tracking-[-5.12px] text-white/[0.06]">
                        {initiative.number}
                      </div>
                      {/* Text content */}
                      <div className="flex flex-col gap-1">
                        <h3 className="font-heading font-bold text-[32px] text-white leading-normal">
                          {initiative.title}
                        </h3>
                        <p className="font-sans font-normal text-base text-[#f2f8ff]/70 leading-[24px]">
                          {initiative.description}
                        </p>
                      </div>
                    </div>
                    {/* Image */}
                    <div className="w-[644px] h-[288px] rounded-2xl overflow-hidden relative flex-shrink-0">
                      <img
                        src={initiative.image}
                        alt={initiative.title}
                        className="w-full h-full object-cover"
                        loading="lazy"
                      />
                      <div
                        className="absolute inset-0"
                        style={{ background:
                            'linear-gradient(179.96deg, rgba(8, 19, 37, 0) 50%, rgb(5, 16, 32) 99.91%)',
                        }}
                      />
                    </div>
                  </div>
                ) : (
                  /* Collapsed: light variant, no image */
                  <div className="flex flex-row items-center justify-between min-h-[132px]">
                    {/* Large watermark number */}
                    <div className="font-heading font-bold text-[128px] leading-[132px] tracking-[-5.12px] text-[rgba(42,48,54,0.04)] min-w-[200px]">
                      {initiative.number}
                    </div>
                    {/* Text content */}
                    <div className="flex flex-col gap-1 w-[644px] flex-shrink-0">
                      <h3 className="font-heading font-bold text-[32px] text-[#102443] leading-normal">
                        {initiative.title}
                      </h3>
                      <p className="font-sans font-normal text-base text-[#4a5565] leading-[24px]">
                        {initiative.description}
                      </p>
                    </div>
                  </div>
                )}
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}