import { Button } from '@/components/ui/Button';
import { DeferredVideo } from './DeferredVideo';
import { headers } from 'next/headers';

interface HeroVideoProps {
  data?: any;
  title?: string;
  subtitle?: string;
  description?: string;
  videoUrl?: string;
  posterImage?: any;
  backgroundImage?: any;
  ctaLabel?: string;
  ctaHref?: string;
  linkText?: string;
  linkHref?: string;
  secondaryCtaLabel?: string;
  secondaryCtaHref?: string;
  badge?: string;
}

import placeholders from '@/lib/placeholders.json';

export function HeroVideo(props: HeroVideoProps) {
  const { data } = props;
  const title = props.title || data?.title || 'DIE EXPERTEN FÜR KABELNETZBAU';
  const subtitle = props.subtitle || props.description || data?.subtitle || 'Wir verbinden Infrastruktur mit Präzision. Von Horizontalbohrungen bis zu komplexen Leitungsnetzen.';
  const explicitNoVideo = props.videoUrl === 'none' || props.videoUrl === '';
  const videoUrl = explicitNoVideo ? null : (props.videoUrl || data?.videoUrl || '/assets/dummy-hero.mp4');
  
  // In server components, we don't have usePathname, so we can extract it from headers if needed, 
  // or just use a default fallback for the keys.
  const pathname = '/'; 

  let defaultPoster = "/assets/photos/DJI_0048.JPG";
  if (videoUrl && videoUrl.endsWith('.mp4')) {
    defaultPoster = videoUrl.replace('.mp4', '-poster-v2.webp');
  }

  let posterSrc = props.backgroundImage?.url || props.posterImage?.url || data?.posterImage?.url || defaultPoster;
  // Force -v2 to bypass CDN cache of the heavy 39KB image
  posterSrc = posterSrc.replace('-poster.webp', '-poster-v2.webp');

  const posterAlt = props.backgroundImage?.alt || data?.posterImage?.alt || "E-TIB Gruppe Baustelle";

  const ctaLabel = props.ctaLabel || props.linkText || data?.ctaLabel || 'Unternehmen entdecken';
  const ctaHref = props.ctaHref || props.linkHref || data?.ctaHref || '#unternehmen';
  
  const currentLocale = 'de'; // The layout or page should technically pass the locale, but for now fallback

  const secondaryCtaLabel = props.secondaryCtaLabel || data?.secondaryCtaLabel || 'Projekt anfragen';
  const secondaryCtaHref = props.secondaryCtaHref || data?.secondaryCtaHref || `/de/contact`;

  return (
    <div className="relative w-full h-[85svh] md:h-[100svh] flex items-center justify-center overflow-hidden bg-neutral-dark">
      {/* Background color while video loads */}
      <div className="absolute inset-0 z-0 bg-neutral-dark" />
      
      <img
        key={`img-${pathname}-${posterSrc}`}
        src={posterSrc}
        srcSet={posterSrc.includes('-poster-v2.webp') ? `${posterSrc.replace('-poster-v2.webp', '-poster-mobile-v2.webp')} 800w, ${posterSrc} 1920w` : undefined}
        sizes={posterSrc.includes('-poster-v2.webp') ? "100vw" : undefined}
        alt={posterAlt}
        className="absolute inset-0 w-full h-full object-cover z-[1] pointer-events-none"
        loading="eager"
        fetchPriority="high"
      />
      {/* Fast compositing layer to replace the heavy CSS filters on the image */}
      <div className="absolute inset-0 bg-black/20 z-[1] pointer-events-none mix-blend-multiply" />

      {/* Render video on top if available, but defer src to avoid blocking LCP */}
      <DeferredVideo videoUrl={videoUrl || ''} pathname={pathname} />
      
      {/* Cinematic Color Grading Overlay */}
      <div className="absolute inset-0 bg-[#0a192f]/30 z-[2] mix-blend-multiply" />
      
      {/* Dramatic Vignette & Fade to content */}
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-transparent via-black/20 to-black/80 z-[2]" />
      <div className="absolute inset-0 bg-gradient-to-t from-neutral-dark via-neutral-dark/60 to-transparent z-[3]" />
      
      {/* Top Fade for Header Navigation Readability */}
      <div className="absolute top-0 left-0 w-full h-48 bg-gradient-to-b from-black/70 to-transparent z-[3] pointer-events-none" />
      
      <div className="container relative z-[4] text-center px-4">
        <div
          key={`hero-content-${pathname}`}
          className="relative"
        >
          <h1 
            className="font-heading font-bold text-3xl sm:text-4xl md:text-6xl lg:text-8xl text-white mb-6 uppercase tracking-tight drop-shadow-lg"
            dangerouslySetInnerHTML={{ __html: title.replace(/KABELNETZBAU|Kabelnetzbau/g, '<span class="text-primary-light">Kabelnetzbau</span>').replace(/KABELNETZBAU|Kabelnetzbau/g, '<span class="text-primary-light">Kabelnetzbau</span>').replace(/\\n|\n/g, '<br />') }}
          />
          
          <p className="text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto mb-12 drop-shadow">
            {subtitle}
          </p>
          
          <div className="flex flex-wrap items-center justify-center gap-4 md:gap-6">
            <Button 
              href={ctaHref} 
              variant="primary"
              size="lg"
            >
              {ctaLabel}
            </Button>
            
            <Button 
              href={secondaryCtaHref} 
              variant="outline"
              size="lg"
              className="border-white/60 text-white hover:text-primary hover:bg-white"
            >
              {secondaryCtaLabel}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}