import React from 'react'
import type { FDCtaSideImageBlock as FDCtaSideImageBlockProps } from '@/payload-types'
import type { Media } from '@/payload-types'
import { FDImage } from '@/components/FDImage'
import { FDButton } from '@/components/FDButton'

/* Priority #5: Responsive radius */
const imageRadius = 'rounded-[32px] md:rounded-[50px] lg:rounded-[70px]'

/* Color overlay — same map as FDHeaderTextImageBlock */
const overlayMap: Record<string, string> = {
  none:        '',
  navyLight:   'bg-fd-navy/20',
  navyMedium:  'bg-fd-navy/40',
  yellowLight: 'bg-fd-yellow/20',
  yellowMedium:'bg-fd-yellow/40',
  sepia:       'bg-[#8B7D3C]/30',
  blackLight:  'bg-black/20',
  blackMedium: 'bg-black/40',
}

export const FDCtaSideImageBlockComponent: React.FC<FDCtaSideImageBlockProps> = ({
  heading,
  body,
  ctaText,
  ctaLink = '#',
  image,
  imageOverlay = 'none',
  imagePosition = 'right',
  theme = 'dark',
  anchorId,
}) => {
  const isDark = theme === 'dark'
  const hasImage = !!image
  const overlay = overlayMap[(imageOverlay as string) || 'none'] || ''

  // Light theme adapts to OS dark preference → becomes navy bg
  const sectionBg = isDark
    ? 'bg-fd-navy'
    : 'bg-white dark:bg-fd-navy'

  const headingClass = isDark
    ? 'text-fd-yellow'
    : 'text-fd-navy dark:text-fd-yellow'

  const bodyClass = isDark
    ? 'text-white'
    : 'text-fd-navy dark:text-white'

  // Mobile order is always: heading → image → body → button
  // Desktop order respects imagePosition (left/right)
  // We achieve this by splitting heading from body+button and using CSS order

  const desktopTextOrder = imagePosition === 'left' ? 'min-[820px]:order-2' : 'min-[820px]:order-1'
  const desktopImageOrder = imagePosition === 'left' ? 'min-[820px]:order-1' : 'min-[820px]:order-2'

  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 flex flex-col min-[820px]:flex-row min-[820px]:items-center gap-6 min-[820px]:gap-16">

        {/* Heading — always first on mobile */}
        <h2 className={`w-full font-joey-heavy text-fd-h1 leading-tight order-1 min-[820px]:hidden ${headingClass}`}>
          {heading}
        </h2>

        {/* Image — always second on mobile, position-aware on desktop */}
        {hasImage && (
          <div className={`relative w-full min-[820px]:w-[45%] lg:w-[575px] lg:h-[479px] flex-shrink-0 overflow-hidden order-2 ${desktopImageOrder} ${imageRadius}`}>
            <FDImage
              media={image as Media}
              size="large"
              fallbackAlt={heading}
              className="w-full h-full object-cover"
              sizes="(max-width: 1024px) 100vw, 575px"
            />
            {overlay && <div className={`absolute inset-0 ${overlay}`} />}
          </div>
        )}

        {/* Text block — heading hidden on mobile (shown above), body+button always third */}
        <div className={`flex flex-col flex-1 items-start gap-4 min-[820px]:gap-[41px] order-3 ${desktopTextOrder} ${!hasImage ? 'max-w-2xl' : ''}`}>
          {/* Heading shown only on desktop inside the text column */}
          <h2 className={`hidden min-[820px]:block w-full font-joey-heavy text-fd-h1 leading-tight ${headingClass}`}>
            {heading}
          </h2>
          <p className={`w-full font-joey text-fd-body-lg leading-relaxed ${bodyClass}`}>
            {body}
          </p>
          {ctaText && (
            <FDButton href={ctaLink || '#'} variant="primary" onDark={isDark} className="w-full sm:w-auto justify-center mt-4 min-[820px]:mt-0">
              {ctaText}
            </FDButton>
          )}
        </div>

      </div>
    </section>
  )
}