import React from 'react'
import type { FDUspChecklistBlock as FDUspChecklistBlockProps, Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'

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

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

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

const checkColors: Record<string, { circle: string; check: string }> = {
  navy:   { circle: 'fill-fd-navy dark:fill-white/20', check: 'fill-white dark:fill-fd-yellow' },
  yellow: { circle: 'fill-fd-yellow', check: 'fill-fd-navy' },
  gray:   { circle: 'fill-fd-gray-light dark:fill-white/20', check: 'fill-fd-navy dark:fill-white' },
}

const CheckIcon: React.FC<{ color: string }> = ({ color }) => {
  const c = checkColors[color] || checkColors.navy
  return (
    <svg width="40" height="40" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg" className="flex-shrink-0">
      <circle cx="23" cy="23" r="23" className={c.circle} />
      <path d="M34.2166 16.2092L19.8151 30.6108C19.3551 31.0354 19.1074 31.3185 18.7182 31.3185C18.3643 31.3185 18.1166 31.1062 17.6212 30.6108L11.9597 24.9492C11.6059 24.5954 11.4289 24.3477 11.4289 24.1C11.4289 23.8523 11.6412 23.5692 11.9951 23.2154L12.5612 22.6492C12.9505 22.26 13.2335 22.0477 13.5166 22.0477C13.7643 22.0477 14.012 22.2246 14.3659 22.5785L18.7182 26.9662L31.8105 13.8385C32.1643 13.4846 32.412 13.3431 32.6597 13.3431C32.9428 13.3431 33.1551 13.4846 33.6151 13.9092L34.1812 14.4754C34.5351 14.8292 34.712 15.1123 34.712 15.36C34.712 15.6077 34.5705 15.8554 34.2166 16.2092Z" className={c.check} />
    </svg>
  )
}

export const FDUspChecklistBlockComponent: React.FC<FDUspChecklistBlockProps> = ({
  heading,
  items,
  image,
  imagePosition = 'right',
  checkColor = 'navy',
  sectionBackground = 'white',
  textColor = 'navy',
  anchorId,
}) => {
  const bg      = bgMap[sectionBackground || 'white']
  const headClr = headingMap[textColor || 'navy']
  const bodyClr = bodyMap[textColor || 'navy']
  const media   = image as Media | undefined
  const hasImage = Boolean(media?.url)

  const textContent = (
    <div className="flex-1 flex flex-col gap-6 md:gap-8">
      <h2 className={`font-joey-heavy text-fd-h1 ${headClr}`}>{heading}</h2>
      <div className="flex flex-col gap-5 md:gap-6">
        {items?.map((item, index) => (
          <div key={index} className="flex items-start gap-4">
            <CheckIcon color={checkColor || 'navy'} />
            <span className={`font-joey text-fd-body-lg pt-1 ${bodyClr}`}>{item.text}</span>
          </div>
        ))}
      </div>
    </div>
  )

  const imageContent = hasImage ? (
    <div className="flex-1">
      <FDImage
        media={media!}
        size="large"
        className="w-full h-auto rounded-[40px] object-cover"
        sizes="(max-width: 1024px) 100vw, 550px"
        fallbackAlt={heading || ''}
      />
    </div>
  ) : null

  return (
    <section id={anchorId || undefined} className={`w-full py-16 md:py-20 lg:py-[99px] ${bg}`}>
      <div className="max-w-[1200px] mx-auto px-6 md:px-8 flex flex-col min-[820px]:flex-row items-center gap-10 min-[820px]:gap-16">
        {imagePosition === 'left' ? <>{imageContent}{textContent}</> : <>{textContent}{imageContent}</>}
      </div>
    </section>
  )
}