import React from 'react'
import { Button } from '@/core/components/ui/button'
import { cn } from '@/core/lib/utils'
import { buildSectionClasses, resolveMediaUrl } from '@/core/types/blocks'
import type { HeroBlockProps } from './schema'

/**
 * Hero Block Component
 *
 * Props from 3-tab structure:
 * - Content: title, content, cta
 * - Design: backgroundColor, backgroundImage, textColor
 * - Advanced: className, id
 */
export function HeroBlock({
  // Base content props
  title,
  content,
  cta,
  // Base design props
  backgroundColor,
  // Hero-specific design
  backgroundImage,
  textColor = 'light',
  // Base advanced props
  className,
  id,
  // Legacy props for backward compatibility
  ...legacyProps
}: HeroBlockProps & {
  ctaText?: string
  ctaLink?: string
  subtitle?: string
  description?: string
}) {
  // Handle legacy CTA format (ctaText, ctaLink) for backward compatibility
  const ctaConfig = cta || (legacyProps.ctaText ? {
    text: legacyProps.ctaText,
    link: legacyProps.ctaLink || '#',
    target: '_self' as const,
  } : undefined)

  // Handle legacy subtitle/description props for backward compatibility
  const displayContent = content || legacyProps.subtitle || legacyProps.description

  // Resolve media ref to URL (handles both legacy string and new object format)
  const backgroundImageUrl = resolveMediaUrl(backgroundImage)

  // Build section classes with background and custom className
  const sectionClasses = buildSectionClasses(
    cn(
      'relative flex min-h-[600px] items-center justify-center overflow-hidden px-4 py-20',
      textColor === 'light' ? 'text-white' : 'text-gray-900'
    ),
    { backgroundColor, className }
  )

  return (
    <section id={id} className={sectionClasses} data-cy="block-hero">
      {/* Background Image */}
      {backgroundImageUrl && (
        <div
          className="absolute inset-0 z-0"
          style={{
            backgroundImage: `url(${backgroundImageUrl})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
          }}
        >
          <div className="absolute inset-0 bg-black/40" />
        </div>
      )}

      {/* Content */}
      <div className="container relative z-10 mx-auto max-w-4xl text-center">
        {title && (
          <h1 className="mb-6 text-5xl font-bold leading-tight @md:text-6xl @lg:text-7xl">
            {title}
          </h1>
        )}

        {displayContent && (
          <p className="mb-8 text-xl @md:text-2xl opacity-90">
            {displayContent}
          </p>
        )}

        {ctaConfig && (
          <Button asChild size="lg" className="text-lg px-8 py-6">
            <a
              href={ctaConfig.link}
              target={ctaConfig.target}
              rel={ctaConfig.target === '_blank' ? 'noopener noreferrer' : undefined}
            >
              {ctaConfig.text}
            </a>
          </Button>
        )}
      </div>
    </section>
  )
}