import React from 'react'
import type { FDPricingCardBlock as FDPricingCardBlockProps } from '@/payload-types'
import { FDButton } from '@/components/FDButton'

const sectionBgMap: Record<string, string> = {
  white:  'bg-white',
  navy:   'bg-fd-navy',
  gray:   'bg-fd-gray-light',
  yellow: 'bg-fd-yellow',
}

const titleColorMap: Record<string, string> = {
  navy:   'text-fd-navy',
  white:  'text-white',
  yellow: 'text-fd-yellow',
}

const cardStyleMap: Record<string, {
  bg: string; border: string; title: string
  subtitle: string; body: string; bullet: string; isDark: boolean
}> = {
  outlined: { bg: 'bg-white',          border: 'border-[2px] border-[#d1d5db]', title: 'text-fd-navy',    subtitle: 'text-fd-navy',   body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false },
  navy:     { bg: 'bg-fd-navy',         border: '',                               title: 'text-fd-yellow',  subtitle: 'text-white',     body: 'text-white/80',   bullet: 'text-white',   isDark: true  },
  gray:     { bg: 'bg-fd-gray-light',   border: '',                               title: 'text-fd-navy',    subtitle: 'text-fd-navy',   body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false },
  yellow:   { bg: 'bg-fd-yellow',       border: '',                               title: 'text-fd-navy',    subtitle: 'text-fd-navy',   body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false },
  white:    { bg: 'bg-white shadow-lg', border: '',                               title: 'text-fd-navy',    subtitle: 'text-fd-navy',   body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false },
}

const buttonVariantMap: Record<string, { variant: 'primary' | 'outline' }> = {
  yellow:        { variant: 'primary' },
  navy:          { variant: 'primary' },
  outlinedNavy:  { variant: 'outline' },
  outlinedWhite: { variant: 'outline' },
}

const gridColsMap: Record<number, string> = {
  1: 'lg:grid-cols-1 max-w-[500px] mx-auto',
  2: 'lg:grid-cols-2',
  3: 'lg:grid-cols-3',
}

export const FDPricingCardBlockComponent: React.FC<FDPricingCardBlockProps> = ({
  sectionTitle,
  cards,
  cardStyle = 'outlined',
  buttonColor = 'yellow',
  sectionBackground = 'white',
  titleColor = 'navy',
}) => {
  const sectionBg = sectionBgMap[sectionBackground || 'white']
  const sectionTitleColor = titleColorMap[titleColor || 'navy']
  const style = cardStyleMap[cardStyle || 'outlined']
  const { variant } = buttonVariantMap[buttonColor || 'yellow']
  const cardCount = cards?.length || 1
  const gridCols = gridColsMap[cardCount] || gridColsMap[3]
  const outlineOnDark = style.isDark

  return (
    <section className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">
        {sectionTitle && (
          <h2 className={`font-joey-heavy text-fd-h1 text-center mb-10 md:mb-14 ${sectionTitleColor}`}>
            {sectionTitle}
          </h2>
        )}
        {/* FIX: rounded-[32px] → rounded-[70px] per design system */}
        <div className={`grid grid-cols-1 ${gridCols} gap-6 md:gap-8`}>
          {cards?.map((card, index) => (
            <div
              key={index}
              className={`${style.bg} ${style.border} rounded-[70px] px-8 md:px-10 py-10 md:py-12 flex flex-col gap-5`}
            >
              <h3 className={`font-joey-heavy text-fd-h2 leading-tight ${style.title}`}>
                {card.title}
              </h3>
              {card.subtitle && (
                <p className={`font-joey-bold text-fd-h3 leading-tight ${style.subtitle}`}>
                  {card.subtitle}
                </p>
              )}
              {card.description && (
                <p className={`font-joey text-fd-body-lg leading-relaxed ${style.body}`}>
                  {card.description}
                </p>
              )}
              {card.bulletPoints && card.bulletPoints.length > 0 && (
                <ul className={`flex flex-col gap-2 ${style.bullet}`}>
                  {card.bulletPoints.map((point, i) => (
                    <li key={i} className="flex items-start gap-3">
                      <span className="mt-2 w-2 h-2 rounded-full bg-current flex-shrink-0" />
                      <span className="font-joey text-fd-body-lg">{point.text}</span>
                    </li>
                  ))}
                </ul>
              )}
              {card.ctaText && (
                <div className="mt-auto pt-4">
                  <FDButton
                    href={card.ctaLink || '#'}
                    variant={variant}
                    onDark={variant === 'outline' ? outlineOnDark : style.isDark}
                  >
                    {card.ctaText}
                  </FDButton>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}