'use client'
import React, { useState, useId } from 'react'
import type { FDFaqBlock as FDFaqBlockProps } from '@/payload-types'
import RichText from '@/components/RichText'

export const FDFaqBlockComponent: React.FC<FDFaqBlockProps> = ({
  heading,
  items,
  theme = 'gray',
  anchorId,
}) => {
  const [openIndex, setOpenIndex] = useState<number | null>(null)
  /* Generate a stable unique prefix for this block instance */
  const blockId = useId()

  // dark theme = always navy. gray/white adapt via dark: OS preference
  const bgClass =
    theme === 'dark'
      ? 'bg-fd-navy'
      : theme === 'gray'
        ? 'bg-fd-gray-light dark:bg-fd-navy'
        : 'bg-white dark:bg-fd-navy'

  const headingColor = theme === 'dark'
    ? 'text-fd-yellow'
    : 'text-fd-navy dark:text-fd-yellow'

  const textColor = theme === 'dark'
    ? 'text-white'
    : 'text-fd-navy dark:text-white'

  const borderColor = theme === 'dark'
    ? 'border-white/20'
    : 'border-fd-navy/10 dark:border-white/20'

  const proseColor = theme === 'dark'
    ? 'text-white/80'
    : 'text-fd-navy/80 dark:text-white/80'

  return (
    <section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[130px] ${bgClass}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col items-start gap-6">
        <h2 className={`w-full max-w-[550px] font-joey-heavy text-fd-h1 ${headingColor}`}>
          {heading}
        </h2>
        <div className="w-full max-w-[1162px]">
          {items?.map((item, index) => {
            const isOpen = openIndex === index
            /* Accessibility: unique IDs for aria-controls ↔ id linkage */
            const triggerId = `${blockId}-faq-trigger-${index}`
            const panelId = `${blockId}-faq-panel-${index}`

            return (
              <div key={index} className={`border-b ${borderColor}`}>
                <button
                  id={triggerId}
                  className={`flex w-full items-center justify-between gap-3 md:gap-4 py-4 md:py-5 text-left transition-colors ${textColor}`}
                  onClick={() => setOpenIndex(isOpen ? null : index)}
                  aria-expanded={isOpen}
                  aria-controls={panelId}
                >
                  <span className="font-joey text-fd-h3">
                    {item.question}
                  </span>
                  <svg
                    className={`w-5 h-5 flex-shrink-0 transition-transform duration-200 ${
                      isOpen ? 'rotate-45' : ''
                    }`}
                    viewBox="0 0 20 20"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    aria-hidden="true"
                  >
                    <line x1="10" y1="2" x2="10" y2="18" />
                    <line x1="2" y1="10" x2="18" y2="10" />
                  </svg>
                </button>
                <div
                  id={panelId}
                  role="region"
                  aria-labelledby={triggerId}
                  className={`grid transition-all duration-200 ease-out ${
                    isOpen
                      ? 'grid-rows-[1fr] opacity-100 pb-5'
                      : 'grid-rows-[0fr] opacity-0'
                  }`}
                >
                  <div className="overflow-hidden">
                    <div className={`font-joey text-fd-body-lg fd-prose ${proseColor}`}>
                      <RichText data={(item.answer) as any} enableGutter={false} enableProse={false} />
                    </div>
                  </div>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}