"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Maximize2, Volume2 } from "lucide-react";

export default function VideosSection({
  title,
  playLabel,
  videos,
  onOpenVideo,
}: {
  title: string;
  playLabel: string;
  videos: { id: number; thumbnail: string; url: string }[];
  onOpenVideo: (url: string) => void;
}) {
  const [expandedVideo, setExpandedVideo] = useState<number | null>(null);

  if (!videos?.length) return null;

  const isYoutubeUrl = (url: string) =>
    url.includes("youtube.com") || url.includes("youtu.be");

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay: 0.4 }}
      className="bg-white rounded-2xl border border-slate-200/60 shadow-lg p-4 sm:p-5"
    >
      {/* Section Header */}
      <div className="flex items-center justify-between gap-3 mb-4">
        <h3 className="text-lg font-black text-[#0b1b13] flex items-center gap-2.5">
          <span className="w-2.5 h-2.5 rounded-full bg-[#16C172] shadow-[0_0_0_4px_rgba(22,193,114,0.15)]" />
          {title}
        </h3>
        <div className="flex items-center gap-1.5 text-xs text-slate-500">
          <Volume2 className="w-4 h-4" />
          <span>
            {videos.length} {videos.length === 1 ? "فيديو" : "فيديوهات"}
          </span>
        </div>
      </div>

      {/* Videos Grid - Direct video display without thumbnails */}
      <div className="grid gap-4">
        {videos.map((v) => (
          <div
            key={v.id}
            className={`relative rounded-2xl overflow-hidden border border-slate-200 bg-black ${
              expandedVideo === v.id
                ? "aspect-video"
                : "aspect-video max-h-[300px]"
            }`}
          >
            {isYoutubeUrl(v.url) ? (
              <iframe
                src={v.url.replace("autoplay=1", "")}
                className="w-full h-full"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
                title={`video-${v.id}`}
              />
            ) : (
              <video
                src={v.url}
                controls
                playsInline
                className="w-full h-full object-contain"
                title={`video-${v.id}`}
              >
                Your browser does not support the video tag.
              </video>
            )}

            {/* Expand button */}
            <button
              onClick={() =>
                setExpandedVideo(expandedVideo === v.id ? null : v.id)
              }
              className="absolute top-3 left-3 w-8 h-8 rounded-full bg-black/50 hover:bg-black/70 text-white flex items-center justify-center transition-all backdrop-blur-sm"
              title={expandedVideo === v.id ? "تصغير" : "تكبير"}
            >
              <Maximize2 className="w-4 h-4" />
            </button>
          </div>
        ))}
      </div>
    </motion.div>
  );
}