'use client';

import React, { useEffect, useRef } from 'react';
import Image from 'next/image';
import { cn } from '../../lib/utils';
import { Container } from '../ui/Container';
import { Button } from '../ui/Button';

// Hero height options
type HeroHeight = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'screen';

// Hero variant options
type HeroVariant = 'default' | 'dark' | 'primary' | 'gradient';

interface HeroProps {
  title: string;
  subtitle?: string;
  backgroundImage?: string;
  backgroundAlt?: string;
  height?: HeroHeight;
  variant?: HeroVariant;
  ctaText?: string;
  ctaLink?: string;
  ctaVariant?: 'primary' | 'secondary' | 'outline';
  overlay?: boolean;
  overlayOpacity?: number;
  children?: React.ReactNode;
  className?: string;
  // Additional props for background color and overlay
  backgroundColor?: string;
  colorOverlay?: string;
  overlayStrength?: number;
  // WordPress Salient-specific props
  enableGradient?: boolean;
  gradientDirection?: 'left_to_right' | 'right_to_left' | 'top_to_bottom' | 'bottom_to_top';
  colorOverlay2?: string;
  parallaxBg?: boolean;
  parallaxBgSpeed?: 'slow' | 'fast' | 'medium';
  bgImageAnimation?: 'none' | 'zoom-out-reveal' | 'fade-in';
  topPadding?: string;
  bottomPadding?: string;
  textAlignment?: 'left' | 'center' | 'right';
  textColor?: 'light' | 'dark';
  shapeType?: string;
  scenePosition?: 'center' | 'top' | 'bottom';
  fullScreenRowPosition?: 'middle' | 'top' | 'bottom';
  // Video background props
  videoBg?: string;
  videoMp4?: string;
  videoWebm?: string;
}

// Helper function to get height styles
const getHeightStyles = (height: HeroHeight, fullScreenRowPosition?: string) => {
  const baseHeight = {
    sm: 'min-h-[300px] md:min-h-[400px]',
    md: 'min-h-[400px] md:min-h-[500px]',
    lg: 'min-h-[500px] md:min-h-[600px]',
    xl: 'min-h-[600px] md:min-h-[700px]',
    full: 'min-h-screen',
    screen: 'min-h-screen'
  }[height] || 'min-h-[500px] md:min-h-[600px]';

  // Handle full screen positioning
  if (fullScreenRowPosition === 'middle') {
    return `${baseHeight} flex items-center justify-center`;
  } else if (fullScreenRowPosition === 'top') {
    return `${baseHeight} items-start justify-center pt-12`;
  } else if (fullScreenRowPosition === 'bottom') {
    return `${baseHeight} items-end justify-center pb-12`;
  }

  return baseHeight;
};

// Helper function to get variant styles
const getVariantStyles = (variant: HeroVariant) => {
  switch (variant) {
    case 'dark':
      return 'bg-gray-900 text-white';
    case 'primary':
      return 'bg-primary text-white';
    case 'gradient':
      return 'bg-gradient-to-br from-primary to-secondary text-white';
    default:
      return 'bg-gray-800 text-white';
  }
};

// Helper function to get overlay opacity
const getOverlayOpacity = (opacity?: number) => {
  if (opacity === undefined) return 'bg-black/50';
  if (opacity >= 1) return 'bg-black';
  if (opacity <= 0) return 'bg-transparent';
  return `bg-black/${Math.round(opacity * 100)}`;
};

export const Hero: React.FC<HeroProps> = ({
  title,
  subtitle,
  backgroundImage,
  backgroundAlt = '',
  height = 'md',
  variant = 'default',
  ctaText,
  ctaLink,
  ctaVariant = 'primary',
  overlay = true,
  overlayOpacity,
  children,
  className = '',
  backgroundColor,
  colorOverlay,
  overlayStrength,
  enableGradient = false,
  gradientDirection = 'left_to_right',
  colorOverlay2,
  parallaxBg = false,
  parallaxBgSpeed = 'medium',
  bgImageAnimation = 'none',
  topPadding,
  bottomPadding,
  textAlignment = 'center',
  textColor = 'light',
  shapeType,
  scenePosition = 'center',
  fullScreenRowPosition,
  videoBg,
  videoMp4,
  videoWebm,
}) => {
  const hasBackground = !!backgroundImage;
  const hasCTA = !!ctaText && !!ctaLink;
  const hasColorOverlay = !!colorOverlay;
  const hasGradient = !!enableGradient;
  const hasParallax = !!parallaxBg;
  const hasVideo = !!(videoMp4?.trim()) || !!(videoWebm?.trim());
  const heroRef = useRef<HTMLElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);

  // Calculate overlay opacity
  const overlayOpacityValue = overlayOpacity ?? (overlayStrength !== undefined ? overlayStrength : 0.5);

  // Get text alignment
  const textAlignClass = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }[textAlignment];

  // Get text color
  const textColorClass = textColor === 'light' ? 'text-white' : 'text-gray-900';
  const subtitleTextColorClass = textColor === 'light' ? 'text-gray-100' : 'text-gray-600';

  // Get gradient direction
  const gradientDirectionClass = {
    'left_to_right': 'bg-gradient-to-r',
    'right_to_left': 'bg-gradient-to-l',
    'top_to_bottom': 'bg-gradient-to-b',
    'bottom_to_top': 'bg-gradient-to-t',
  }[gradientDirection];

  // Get parallax speed
  const parallaxSpeedClass = {
    slow: 'parallax-slow',
    medium: 'parallax-medium',
    fast: 'parallax-fast',
  }[parallaxBgSpeed];

  // Get background animation
  const bgAnimationClass = {
    none: '',
    'zoom-out-reveal': 'animate-zoom-out',
    'fade-in': 'animate-fade-in',
  }[bgImageAnimation];

  // Calculate padding from props
  const customPaddingStyle = {
    paddingTop: topPadding || undefined,
    paddingBottom: bottomPadding || undefined,
  };

  // Parallax effect handler
  useEffect(() => {
    if (!hasParallax || !heroRef.current) return;

    const handleScroll = () => {
      if (!heroRef.current) return;
      
      const rect = heroRef.current.getBoundingClientRect();
      const viewportHeight = window.innerHeight;
      
      // Calculate offset based on scroll position
      const scrollProgress = (viewportHeight - rect.top) / (viewportHeight + rect.height);
      const offset = scrollProgress * 50; // Max 50px offset
      
      // Apply to CSS variable
      heroRef.current.style.setProperty('--parallax-offset', `${offset}px`);
    };

    handleScroll(); // Initial call
    window.addEventListener('scroll', handleScroll, { passive: true });
    
    return () => window.removeEventListener('scroll', handleScroll);
  }, [hasParallax]);

  return (
    <section
      ref={heroRef}
      className={cn(
        'relative w-full overflow-hidden',
        getHeightStyles(height, fullScreenRowPosition),
        textAlignClass,
        className
      )}
      style={{
        backgroundColor: backgroundColor || undefined,
        ...customPaddingStyle,
      }}
    >
      {/* Video Background */}
      {hasVideo && (
        <div className="absolute inset-0 z-0">
          <video
            ref={videoRef}
            autoPlay
            muted
            loop
            playsInline
            className="absolute inset-0 w-full h-full object-cover"
            style={{ opacity: 1 }}
          >
            {videoWebm && <source src={videoWebm} type="video/webm" />}
            {videoMp4 && <source src={videoMp4} type="video/mp4" />}
          </video>
        </div>
      )}
      
      {/* Background Image with Parallax (fallback if no video) */}
      {hasBackground && !hasVideo && (
        <div className={cn(
          'absolute inset-0 z-0',
          hasParallax && parallaxSpeedClass,
          bgAnimationClass
        )}>
          <Image
            src={backgroundImage}
            alt={backgroundAlt || title}
            fill
            priority
            className={cn(
              'object-cover',
              hasParallax && 'transform-gpu'
            )}
            sizes="100vw"
          />
        </div>
      )}

      {/* Background Variant (if no image) */}
      {!hasBackground && !backgroundColor && (
        <div className={cn(
          'absolute inset-0 z-0',
          getVariantStyles(variant)
        )} />
      )}

      {/* Gradient Overlay */}
      {hasGradient && (
        <div
          className={cn(
            'absolute inset-0 z-10',
            gradientDirectionClass,
            'from-transparent via-transparent to-transparent'
          )}
          style={{
            opacity: overlayOpacityValue * 0.3,
          }}
        />
      )}

      {/* Color Overlay (from WordPress color_overlay) */}
      {hasColorOverlay && (
        <div
          className="absolute inset-0 z-10"
          style={{
            backgroundColor: colorOverlay,
            opacity: overlayOpacityValue
          }}
        />
      )}

      {/* Second Color Overlay (for gradients) */}
      {colorOverlay2 && (
        <div
          className="absolute inset-0 z-10"
          style={{
            backgroundColor: colorOverlay2,
            opacity: overlayOpacityValue * 0.5
          }}
        />
      )}

      {/* Standard Overlay */}
      {overlay && hasBackground && !hasColorOverlay && (
        <div className={cn(
          'absolute inset-0 z-10',
          getOverlayOpacity(overlayOpacityValue)
        )} />
      )}

      {/* Shape Divider (bottom) */}
      {shapeType && (
        <div className="absolute bottom-0 left-0 right-0 z-10">
          <svg
            className="w-full h-16 md:h-24 lg:h-32"
            viewBox="0 0 1200 120"
            preserveAspectRatio="none"
          >
            {shapeType === 'waves_opacity_alt' && (
              <path
                d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.8,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
                opacity=".25"
                fill="#ffffff"
              />
            )}
            {shapeType === 'mountains' && (
              <path
                d="M0,0V60c100,0,150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20s150,20,200,20s100-20,200-20V0Z"
                opacity=".25"
                fill="#ffffff"
              />
            )}
          </svg>
        </div>
      )}

      {/* Content */}
      <div className="relative z-20 w-full">
        <Container
          maxWidth="6xl"
          padding="none"
          className={cn(
            'px-4 sm:px-6 md:px-8',
            // Add padding for full-height heroes
            height === 'full' || height === 'screen' ? 'py-12 md:py-20' : 'py-8 md:py-12'
          )}
        >
          {/* Title */}
          <h1
            className={cn(
              'font-bold leading-tight mb-4',
              'text-3xl sm:text-4xl md:text-5xl lg:text-6xl',
              'tracking-tight',
              textColorClass,
              // Enhanced contrast for overlays
              (hasBackground || hasColorOverlay || variant !== 'default') && 'drop-shadow-lg'
            )}
          >
            {title}
          </h1>

          {/* Subtitle */}
          {subtitle && (
            <p
              className={cn(
                'text-lg sm:text-xl md:text-2xl',
                'mb-8 max-w-3xl mx-auto',
                'leading-relaxed',
                subtitleTextColorClass,
                (hasBackground || hasColorOverlay || variant !== 'default') && 'drop-shadow-md'
              )}
            >
              {subtitle}
            </p>
          )}

          {/* CTA Button */}
          {hasCTA && (
            <div className="flex justify-center">
              <Button
                variant={ctaVariant}
                size="lg"
                onClick={() => {
                  if (ctaLink) {
                    // Handle both internal and external links
                    if (ctaLink.startsWith('http')) {
                      window.open(ctaLink, '_blank');
                    } else {
                      // For Next.js routing, you'd use the router
                      // This is a fallback for external links
                      window.location.href = ctaLink;
                    }
                  }
                }}
                className="animate-fade-in-up"
              >
                {ctaText}
              </Button>
            </div>
          )}

          {/* Additional Content */}
          {children && (
            <div className="mt-8">
              {children}
            </div>
          )}
        </Container>
      </div>
    </section>
  );
};

// Sub-components for more complex hero layouts
export const HeroContent: React.FC<{
  title: string;
  subtitle?: string;
  children?: React.ReactNode;
  className?: string;
}> = ({ title, subtitle, children, className = '' }) => (
  <div className={cn('space-y-4 md:space-y-6', className)}>
    <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold">{title}</h2>
    {subtitle && <p className="text-lg md:text-xl text-gray-200">{subtitle}</p>}
    {children}
  </div>
);

export const HeroActions: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <div className={cn('flex flex-wrap gap-3 justify-center', className)}>
    {children}
  </div>
);

export default Hero;