"use client";
import React, { useRef, useState } from "react";
import Image, { StaticImageData } from "next/image";
import { Button } from "@/components/ui/button";

interface ProjectHeroProps {
  image: StaticImageData | string;
  videoSrc?: string;
  isDownloadButtonVisible?: boolean;
  images?: { id?: number; url: string }[];
}

// --- Icons ---
const Arrow = ({ direction }: { direction: string }) => {
  return (
    <svg
      className={`rotate-${direction === "right" ? "180" : "0"}`}
      width="20"
      height="20"
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12.5 15L7.5 10L12.5 5"
        stroke="#314158"
        strokeWidth="1.4"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

const PlyaVideoIcon = () => {
  return (
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5 3L19 12L5 21V3Z"
        stroke="white"
        strokeWidth="1.3"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
};

const MapIcon = ({ size = 20, color = '#314158' }: { size?: number; color?: string }) => {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M17.5 8.33334C17.5 14.1667 10 19.1667 10 19.1667C10 19.1667 2.5 14.1667 2.5 8.33334C2.5 6.34422 3.29018 4.43657 4.6967 3.03004C6.10322 1.62352 8.01088 0.833344 10 0.833344C11.9891 0.833344 13.8968 1.62352 15.3033 3.03004C16.7098 4.43657 17.5 6.34422 17.5 8.33334Z" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M10 10.8333C11.3807 10.8333 12.5 9.71406 12.5 8.33334C12.5 6.95263 11.3807 5.83334 10 5.83334C8.61929 5.83334 7.5 6.95263 7.5 8.33334C7.5 9.71406 8.61929 10.8333 10 10.8333Z" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
};

// --- Main Component ---
const ProjectHero: React.FC<ProjectHeroProps> = ({ image, videoSrc, isDownloadButtonVisible }) => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  // Normalize image source
  const imageSrc = typeof image === 'string' ? image : image.src;

  const handlePlayClick = () => {
    if (!videoSrc) return;
    if (videoRef.current) {
      if (videoRef.current.paused) {
        videoRef.current.play();
      } else {
        videoRef.current.pause();
      }
    }
  };

  return (
    <div className="relative">
      {/* 1. Media Container (Video or Image) */}
      <div className="w-full h-80 md:h-150 cursor-pointer" onClick={handlePlayClick}>
        {videoSrc ? (
          <video
            ref={videoRef}
            className={`w-full h-full rounded-md ${!isPlaying ? "object-cover" : ""}`}
            controls={isPlaying}
            poster={imageSrc}
            onPlay={() => setIsPlaying(true)}
            onPause={() => setIsPlaying(false)}
            onEnded={() => setIsPlaying(false)}
          >
            <source src={videoSrc} type="video/mp4" />
            Your browser does not support the video tag.
          </video>
        ) : (
          <img
            src={imageSrc}
            alt="Property"
            className="w-full h-full object-cover rounded-md"
          />
        )}
      </div>

      {/* 2. Middle Controls (Arrows & Play Button) - Hidden if video is playing */}
      {!isPlaying && (
        <div className="w-full px-3 absolute top-1/2 -translate-y-1/2 flex">
          <div className="w-full flex justify-between gap-2">
            {/* Right Arrow */}
            <Button className="bg-[#F8FAFC] hover:bg-[#F8FAFC] border border-[#CAD5E2] rounded-full w-7 h-7 p-0">
              <Arrow direction="right" />
            </Button>

            {/* Play Button (Only if video exists) */}
            {videoSrc && (
              <Button className="w-15 rounded-xl h-auto py-1" onClick={handlePlayClick}>
                <PlyaVideoIcon />
              </Button>
            )}

            {/* Left Arrow */}
            <Button className="bg-[#F8FAFC] hover:bg-[#F8FAFC] border border-[#CAD5E2] rounded-full w-7 h-7 p-0">
              <Arrow direction="left" />
            </Button>
          </div>
        </div>
      )}

      {/* 3. Top Left Controls (Download & Map) */}
      <div className="flex items-center gap-2 absolute top-2 left-3">
        {isDownloadButtonVisible && (
          <Button className="text-white font-normal bg-transparent hover:bg-transparent border border-[#CAD5E2] rounded-full h-8 px-3 text-sm">
            حمل الملف التعريفي
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className="mr-2">
              <path d="M14 10V12.6667C14 13.0203 13.8595 13.3594 13.6095 13.6095C13.3594 13.8595 13.0203 14 12.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V10M4.66667 6.66667L8 10M8 10L11.3333 6.66667M8 10V2" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </Button>
        )}

        <Button className="bg-[#F8FAFC] hover:bg-[#F8FAFC] border border-[#CAD5E2] rounded-full w-8 h-8 p-0">
          <MapIcon />
        </Button>
      </div>
    </div>
  );
};

export default ProjectHero;