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

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 }> = {
  outlined: { bg: 'bg-white', border: 'border-[6px] border-[#d1d5db]', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
  navy:     { bg: 'bg-fd-navy', border: '', title: 'text-fd-yellow', subtitle: 'text-white', body: 'text-white/80', bullet: 'text-white' },
  gray:     { bg: 'bg-[#e5e5e5]', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
  yellow:   { bg: 'bg-fd-yellow', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
  white:    { bg: 'bg-white shadow-lg', border: '', title: 'text-fd-navy', subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy' },
}

// Map to fd-btn classes; the 'a' tag just uses the class directly
const buttonStyleMap: Record<string, string> = {
  yellow: 'fd-btn-primary',
  navy: 'fd-btn-navy',
  outlinedNavy: 'fd-btn-secondary',
  outlinedWhite: 'fd-btn-secondary-dark',
}

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 btnClass = buttonStyleMap[buttonColor || 'yellow'] || 'fd-btn-primary'
  const cardCount = cards?.length || 1
  const gridCols = gridColsMap[cardCount] || gridColsMap[3]

  return (
    <section className={`w-full py-12 md:py-16 lg:py-20 ${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>
        )}
        <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-[32px] md:rounded-[50px] lg: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 ${style.title}`}>{card.title}</h3>
              {card.subtitle && (
                <p className={`font-joey-bold text-fd-h3 ${style.subtitle}`}>{card.subtitle}</p>
              )}
              {card.description && (
                <p className={`font-joey text-fd-body ${style.body}`}>{card.description}</p>
              )}
              {card.bulletPoints && card.bulletPoints.length > 0 && (
                <ul className={`flex flex-col gap-1 ${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">{point.text}</span>
                    </li>
                  ))}
                </ul>
              )}
              {card.ctaText && (
                <div className="mt-auto pt-4">
                  <a href={card.ctaLink || '#'} className={btnClass}>{card.ctaText}</a>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}