'use client';

import React, { useCallback, useRef, useState } from 'react';

import { Button } from '@/components/ui/button';

import { Link } from '@/i18n/navigation';

interface HeroTextSizeConfig {
  line1: string;
  line2: string;
  line3: string;
  line4: string;
  line5: string;
}

interface HeroVideoSource {
  desktop: string;
  mobile: string;
  posterDesktop: string;
  posterMobile: string;
}

interface HomepageHeroVideoClientProps {
  video: HeroVideoSource;
  localizedConfig: HeroTextSizeConfig;
  titleLines: {
    line1: string;
    line2: string;
    line3: string;
    line4: string;
    line5: string;
  };
  cta: {
    chooseCreator: string;
    chooseCreation: string;
  };
  initialIsMobile: boolean;
}

const HIDE_OVERLAY_BEFORE_END_SECONDS = 8.1;

const HomepageHeroVideoClient: React.FC<HomepageHeroVideoClientProps> = ({
  video,
  localizedConfig,
  titleLines,
  cta,
  initialIsMobile,
}) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [hideOverlayByTime, setHideOverlayByTime] = useState(false);
  const initialPoster = initialIsMobile ? video.posterMobile : video.posterDesktop;
  const fallbackSrc = initialIsMobile ? video.mobile : video.desktop;

  const updateOverlayVisibility = useCallback(() => {
    const currentVideo = videoRef.current;
    if (!currentVideo || !Number.isFinite(currentVideo.duration)) {
      return;
    }

    const hideOverlayFromSeconds = currentVideo.duration - HIDE_OVERLAY_BEFORE_END_SECONDS;
    const shouldHide =
      hideOverlayFromSeconds > 0 &&
      currentVideo.currentTime >= hideOverlayFromSeconds &&
      currentVideo.currentTime < currentVideo.duration;

    setHideOverlayByTime((prev) => (prev === shouldHide ? prev : shouldHide));
  }, []);

  return (
    <div className="w-full relative overflow-hidden h-[400px] lg:h-[70vh] bg-black">
      <video
        ref={videoRef}
        autoPlay
        loop
        muted
        playsInline
        preload="high"
        poster={initialPoster}
        className="w-full h-full object-cover"
        aria-hidden="true"
        onLoadedMetadata={updateOverlayVisibility}
        onTimeUpdate={updateOverlayVisibility}
        onSeeked={updateOverlayVisibility}
        onPlay={updateOverlayVisibility}
      >
        <source src={video.mobile} type="video/mp4" media="(max-width: 1023px)" />
        <source src={video.desktop} type="video/mp4" media="(min-width: 1024px)" />
        <source src={fallbackSrc} type="video/mp4" />
      </video>

      <div className="absolute inset-0 text-white pointer-events-none">
        <div
          className={`absolute left-0 top-0 h-full w-[26%] bg-gradient-to-r from-black/80 via-black/30 to-transparent transition-opacity duration-300 ${
            hideOverlayByTime ? 'opacity-0' : 'opacity-100'
          }`}
        />
        <div
          className={`absolute right-0 top-0 h-full w-[30%] bg-gradient-to-l from-black/85 via-black/25 to-transparent transition-opacity duration-300 ${
            hideOverlayByTime ? 'opacity-0' : 'opacity-100'
          }`}
        />

        <div
          className={`absolute top-[5%] left-4 sm:left-12 lg:left-20 2xl:left-36 w-fit max-w-[300px] pointer-events-auto transition-opacity duration-300 ${
            hideOverlayByTime ? 'opacity-0' : 'opacity-100'
          }`}
        >
          <h1>
            <span className={`${localizedConfig.line1} leading-none font-extrabold block`}>
              {titleLines.line1}
            </span>{' '}
            <span
              className={`${localizedConfig.line2} leading-none font-semibold text-center block`}
            >
              {titleLines.line2}
            </span>{' '}
            <span className={`${localizedConfig.line3} leading-none font-semibold block`}>
              {titleLines.line3}
            </span>{' '}
            <span className={`${localizedConfig.line4} leading-none font-semibold block`}>
              {titleLines.line4}
            </span>{' '}
            <span className={`${localizedConfig.line5} leading-none font-semibold block`}>
              {titleLines.line5}
            </span>
          </h1>
        </div>

        <div
          className={`hidden lg:block absolute right-4 sm:right-12 lg:right-20 2xl:right-36 bottom-16 transition-opacity duration-300 ${
            hideOverlayByTime ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto'
          }`}
        >
          <div className="flex flex-col gap-3">
            <Button asChild variant="outline" inverted size="lg" line className="justify-between">
              <Link href="/alkotok">{cta.chooseCreator}</Link>
            </Button>
            <Button asChild variant="outline" inverted size="lg" line className="justify-between">
              <Link href="/alkotasok-kepekkel">{cta.chooseCreation}</Link>
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomepageHeroVideoClient;