"use client";

import Image from "next/image";
import { useState } from "react";
import { useMarriageConfigQuery } from "@/hooks/marriage/use-marriage-config";
import { SliderHeader } from "./slider-header";
import type { SliderSlideProps } from "./slider-slide";
import VideoPlayer from "./video-player";
import NetworkImage from "./network-image";

export function SliderSlideTwo({ index }: SliderSlideProps) {
  const [isPlayerOpen, setIsPlayerOpen] = useState(false);
  const { data: config } = useMarriageConfigQuery();

  const thumbnailSrc =
    config?.video_step_2_thumbnail_url ||
    (config?.intro_video_thumbnail_url &&
    !config.intro_video_thumbnail_url.includes("Frame 2095586523")
      ? config.intro_video_thumbnail_url
      : undefined);

  return (
    <section
      aria-label={`Slide ${index + 1}`}
      className="flex h-full min-h-0 w-full shrink-0 flex-col"
    >
      <div className="min-h-0 flex-1 overflow-y-auto pb-[86px]">
        <SliderHeader index={index} title="Watch Video" />
        <div
          className="mt-6 flex min-h-0 justify-center cursor-pointer group"
          onClick={() => setIsPlayerOpen(true)}
        >
          <div className="relative w-full max-w-[344px] aspect-[344/488] overflow-hidden rounded-[24px] shadow-xs">
            <NetworkImage
              src={thumbnailSrc}
              fallbackSrc="/assets/images/Frame 20953586523.png"
              alt="video"
              fill
              className="object-cover transition-transform duration-300 group-hover:scale-105"
              priority
            />
            <div className="absolute inset-0 bg-black/5 transition-colors duration-300 group-hover:bg-black/15" />
            <Image
              src={"/assets/images/Frame 1116607280.svg"}
              alt="play"
              width={68}
              height={68}
              className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-transform duration-300 group-hover:scale-110 active:scale-95 z-10"
            />
          </div>
        </div>
        <div className="mt-4">
          <div className="flex items-center justify-center gap-1.5">
            <Image
              src={"/assets/images/Avatar Image.png"}
              alt="Dr. Hasti Masoudi"
              width={20}
              height={20}
              className="rounded-full"
            />
            <p className="text-[#2F3A48] group-14 font-semibold">
              Dr. Hasti Masoudi
            </p>
          </div>
          <p className="group-12 text-[#4D4D4D] text-center mt-2 max-w-[340px] mx-auto leading-relaxed">
            We have come together with the goal of creating a secure and
            confidential path for "permanent marriage" among Muslims
          </p>
        </div>
      </div>

      <VideoPlayer
        isOpen={isPlayerOpen}
        onClose={() => setIsPlayerOpen(false)}
        videoUrl={config?.video_step_2_url}
      />
    </section>
  );
}