import React from 'react'
import type { FDWideCardBlock as FDWideCardBlockProps, Media } from '@/payload-types'
import { FDButton } from '@/components/FDButton'
import { FDImage } from '@/components/FDImage'

const cardBgMap: Record<string, { bg: string; heading: string; body: string; isDark: boolean }> = {
  navy:   { bg: 'bg-fd-navy',            heading: 'text-white',           body: 'text-white/80',          isDark: true  },
  yellow: { bg: 'bg-fd-yellow',          heading: 'text-fd-navy',         body: 'text-fd-navy/80',         isDark: false },
  gray:   { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
  white:  { bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
}

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

const btnVariantMap: Record<string, { variant: 'primary' | 'outline' }> = {
  yellow: { variant: 'primary' },
  navy:   { variant: 'outline' },
  white:  { variant: 'primary' },
}

const cardRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]'

export const FDWideCardBlockComponent: React.FC<FDWideCardBlockProps> = ({
  heading,
  body,
  ctaText,
  ctaLink,
  image,
  cardBackground = 'navy',
  buttonColor = 'yellow',
  sectionBackground = 'white',
  anchorId,
}) => {
  const card      = cardBgMap[cardBackground || 'navy']
  const sectionBg = sectionBgMap[sectionBackground || 'white']
  const { variant } = btnVariantMap[buttonColor || 'yellow']
  const media     = image as Media | undefined
  const hasImage  = media && typeof media === 'object' && media.url

  return (
    <section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[99px] ${sectionBg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8">
        <div className={`${card.bg} ${cardRadius} flex flex-col min-[820px]:flex-row`}>
          <div className="flex-1 flex flex-col justify-center gap-5 md:gap-6 px-8 md:px-14 lg:px-16 py-12 md:py-16">
            <h2 className={`font-joey-heavy text-fd-h1 leading-tight ${card.heading}`}>
              {heading}
            </h2>
            {body && (
              <p className={`font-joey text-fd-body-lg leading-relaxed ${card.body}`}>
                {body}
              </p>
            )}
            {ctaText && (
              <div>
                <FDButton href={ctaLink || '#'} variant={variant} onDark={card.isDark} className="w-full sm:w-auto justify-center">
                  {ctaText}
                </FDButton>
              </div>
            )}
          </div>

          {hasImage && (
            <div className="flex items-center justify-center w-full min-[820px]:w-[45%] lg:w-[480px] flex-shrink-0 p-6 md:p-10 lg:p-12">
              <FDImage
                media={media}
                size="large"
                className="w-full h-auto max-h-[320px] object-contain drop-shadow-xl"
                sizes="(max-width: 820px) 80vw, 400px"
                fallbackAlt={heading || ''}
              />
            </div>
          )}
        </div>
      </div>
    </section>
  )
}