import React from 'react'
import type { FDUspTableBlock as FDUspTableBlockProps } from '@/payload-types'
import RichText from '@/components/RichText'

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',
}

// Heading: navy bg → yellow in dark
const headingMap: Record<string, string> = {
  navy:  'text-fd-navy dark:text-fd-yellow',
  white: 'text-white',
}

// Body / row titles: navy bg → white in dark
const textMap: Record<string, string> = {
  navy:  'text-fd-navy dark:text-white',
  white: 'text-white',
}

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

const borderMap: Record<string, string> = {
  navy:  'border-fd-navy/10 dark:border-white/20',
  white: 'border-white/20',
}

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 FDUspTableBlockComponent: React.FC<FDUspTableBlockProps> = ({
  heading,
  rows,
  checkColor = 'navy',
  sectionBackground = 'white',
  textColor = 'navy',
  anchorId,
}) => {
  const bg      = bgMap[sectionBackground || 'white']
  const headClr = headingMap[textColor || 'navy']
  const txt     = textMap[textColor || 'navy']
  const prose   = proseMap[textColor || 'navy']
  const border  = borderMap[textColor || 'navy']

  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">
        {heading && (
          <h2 className={`font-joey-heavy text-fd-h1 mb-10 md:mb-14 ${headClr}`}>{heading}</h2>
        )}
        <div className="flex flex-col">
          {rows?.map((row, index) => (
            <div
              key={index}
              className={`flex flex-col md:flex-row md:items-start gap-4 md:gap-8 py-7 md:py-8 ${
                index < (rows.length - 1) ? `border-b ${border}` : ''
              }`}
            >
              <div className="flex items-center gap-4 md:w-[280px] flex-shrink-0">
                <CheckIcon color={checkColor || 'navy'} />
                <span className={`font-joey-bold text-fd-h3 ${txt}`}>{row.title}</span>
              </div>
              <div className={`font-joey text-fd-body fd-prose ${prose} md:pl-0 pl-14`}>
                <RichText data={(row.description) as any} enableGutter={false} enableProse={false} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}