'use client';

import React, { useRef, useEffect } from 'react';

interface HeroVideoCinematicProps {
  title?: string;
  subtitle?: string;
  description?: string;
  bgVideo?: string;
  bgImage?: string;
  mediaType?: string;
  overlayOpacity?: number;
  bgColor?: string;
  bgGradientFrom?: string;
  bgGradientTo?: string;
  bgGradientDirection?: string;
  buttonText?: string;
  buttonUrl?: string;
  buttonStyle?: string;
  theme?: string;
}

export function HeroVideoCinematic({
  title = 'ようこそ',
  subtitle = 'Welcome',
  description = '',
  bgVideo = '',
  bgImage = '',
  mediaType = 'video',
  overlayOpacity = 40,
  bgColor = '',
  bgGradientFrom = '',
  bgGradientTo = '',
  bgGradientDirection = 'to-br',
  buttonText = '',
  buttonUrl = '',
  buttonStyle = 'filled',
  theme = 'default',
}: HeroVideoCinematicProps) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => {});
    }
  }, [bgVideo]);

  const themeClasses: Record<string, { gradient: string; accent: string }> = {
    default: { gradient: 'from-black/70 via-black/40 to-transparent', accent: 'text-hover-red' },
    warm: { gradient: 'from-orange-900/70 via-orange-900/30 to-transparent', accent: 'text-orange-400' },
    professional: { gradient: 'from-slate-900/80 via-slate-900/50 to-slate-900/20', accent: 'text-blue-400' },
    ocean: { gradient: 'from-blue-900/70 via-blue-900/30 to-transparent', accent: 'text-blue-300' },
    forest: { gradient: 'from-emerald-900/70 via-emerald-900/30 to-transparent', accent: 'text-emerald-300' },
  };
  const t = themeClasses[theme] || themeClasses.default;

  const showVideo = mediaType === 'video' && bgVideo;
  const showImage = (mediaType === 'image' && bgImage) || (!showVideo && bgImage);
  const opacity = (overlayOpacity ?? 40) / 100;

  return (
    <section className="relative w-full min-h-[60vh] sm:min-h-[70vh] overflow-hidden flex items-center">
      {/* Video Background */}
      {showVideo && (
        <video
          ref={videoRef}
          src={bgVideo}
          autoPlay
          loop
          muted
          playsInline
          className="absolute inset-0 w-full h-full object-cover"
        />
      )}

      {/* Image Background */}
      {showImage && !showVideo && (
        <img
          src={bgImage}
          alt=""
          className="absolute inset-0 w-full h-full object-cover"
        />
      )}

      {/* Fallback if no media */}
      {!showVideo && !showImage && (
        <div
          className={`absolute inset-0 ${!bgGradientFrom && !bgColor ? 'bg-gradient-to-br from-slate-800 to-slate-900' : ''}`}
          style={
            bgGradientFrom && bgGradientTo
              ? { background: `linear-gradient(${bgGradientDirection === 'to-r' ? 'to right' : bgGradientDirection === 'to-b' ? 'to bottom' : bgGradientDirection === 'to-bl' ? 'to bottom left' : bgGradientDirection === 'to-t' ? 'to top' : 'to bottom right'}, ${bgGradientFrom}, ${bgGradientTo})` }
              : bgColor
                ? { backgroundColor: bgColor }
                : undefined
          }
        />
      )}

      {/* Gradient Overlay */}
      <div
        className={`absolute inset-0 bg-gradient-to-r ${t.gradient}`}
        style={{ opacity }}
      />

      {/* Content */}
      <div className="relative z-10 container max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="max-w-2xl">
          {subtitle && (
            <p className={`text-sm sm:text-base font-medium ${t.accent} mb-3 tracking-wider uppercase`}>
              {subtitle}
            </p>
          )}
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-4">
            {title}
          </h1>
          {description && (
            <p className="text-white/80 text-base sm:text-lg leading-relaxed max-w-xl">
              {description}
            </p>
          )}
          {/* CTA Button */}
          {buttonText && (
            <a
              href={buttonUrl || '#'}
              className={`mt-6 inline-flex items-center gap-2 px-8 py-3.5 rounded-xl font-semibold text-sm transition-all duration-200 ${
                buttonStyle === 'outlined' ? 'border-2 border-white text-white hover:bg-white/10'
                : buttonStyle === 'ghost' ? 'text-white hover:bg-white/10 underline underline-offset-4'
                : 'bg-white text-slate-900 hover:bg-white/90 shadow-lg'
              }`}
            >
              {buttonText}
            </a>
          )}
        </div>
      </div>

      {/* Bottom Fade */}
      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-brand-bg to-transparent" />
    </section>
  );
}
