"use client";

import Image from "next/image";
import { Play, Star } from "lucide-react";
import { useState } from "react";
import ModalPortal from "./ui/ModalPortal";


interface TestimonialVideoCardProps {
  name: string;
  designation: string;
  content: string;
  image: string;
  videoUrl?: string;
  rating?: number;
}

export default function TestimonialVideoCard({
  name,
  designation,
  content,
  image,
  videoUrl,
  rating,
}: TestimonialVideoCardProps) {
  const [playVideo, setPlayVideo] = useState(false);
  const [openModal, setOpenModal] = useState(false);

  const isLongText = content.length > 93;

  return (
    <>
      {/* MAIN CARD */}
      <div className="bg-white rounded-3xl shadow-md overflow-hidden border border-gray-100 hover:shadow-xl transition-all duration-300 m-3 mb-7 h-[480px] flex flex-col justify-between">
        {/* QUOTE + TEXT */}
        <div className="p-6 md:p-8 relative flex-1">
          <Image
            src="/images/QuoteUp.svg"
            alt="quote"
            width={32}
            height={32}
            className="w-8 h-8 mb-3 select-none"
          />
          <p className="text-black text-base leading-relaxed italic line-clamp-3">
            "{content}"
          </p>

          {isLongText && (
            <button
              onClick={() => setOpenModal(true)}
              className="text-blue-600 font-semibold mt-2 hover:underline"
            >
              ...Read More
            </button>
          )}

          <Image
            src="/images/QuoteDown.svg"
            alt="quote"
            width={32}
            height={32}
            className="w-8 h-8 absolute bottom-4 right-6 select-none"
          />
          {rating && (
            <div className="flex gap-1 mt-2 mb-2">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className="w-5 h-5"
                  fill={i < rating ? "gold" : "none"}
                  stroke={i < rating ? "gold" : "gray"}
                />
              ))}
            </div>
          )}
        </div>

        {/* IMAGE / VIDEO */}
        <div className="relative w-full h-48 overflow-hidden cursor-pointer group">
          {!playVideo ? (
            <>
              <Image
                src={image}
                alt={name}
                width={800}
                height={600}
                className="w-full h-full group-hover:scale-105 transition duration-700"
              />
              {videoUrl && (
                <button
                  onClick={() => setPlayVideo(true)}
                  className="absolute inset-0 flex items-center justify-center"
                >
                  <span className="flex items-center gap-2 px-4 py-2 bg-white rounded-full text-sm shadow-lg hover:scale-105 transition">
                    <Play className="w-4 h-4 text-black" fill="black" />
                    Watch Video
                  </span>
                </button>
              )}
            </>
          ) : (
            <video
              src={videoUrl}
              controls
              autoPlay
              className="w-full h-full object-fill"
            />
          )}
        </div>

        {/* NAME + DESIGNATION */}
        <div className="text-center py-4 bg-white">
          <span className="font-extrabold text-gray-900 tracking-wide">
            {name.toUpperCase()}
          </span>
          <span className="text-gray-500 font-medium"> - {designation}</span>
        </div>
      </div>

      {/* MODAL POPUP */}
      {openModal && (
        <ModalPortal>
          <div className="fixed inset-0 bg-black bg-opacity-80 flex items-center justify-center z-[9999] p-4">
            <div
              className="bg-white rounded-3xl w-full max-w-2xl relative 
      max-h-screen overflow-hidden flex flex-col"
            >
              {/* CLOSE BUTTON */}
              <button
                className="absolute top-4 right-4 text-gray-600 text-xl"
                onClick={() => setOpenModal(false)}
              >
                ✕
              </button>

              {/* HEADER SECTION => NOT SCROLLABLE */}
              <div className="pt-10 pb-4 text-center px-6 flex-none">
                <h2 className="text-xl font-bold">{name}</h2>
                <p className="text-gray-500">{designation}</p>
              </div>

              {/* SCROLLABLE CONTENT AREA */}
              <div className="overflow-y-auto px-6 pb-6 space-y-6 flex-1">
                <p className="text-black italic text-lg leading-relaxed">
                  "{content}"
                </p>
                {rating && (
                  <div className="flex gap-1 mb-2">
                    {Array.from({ length: 5 }).map((_, i) => (
                      <Star
                        key={i}
                        className="w-5 h-5"
                        fill={i < rating ? "gold" : "none"}
                        stroke={i < rating ? "gold" : "gray"}
                      />
                    ))}
                  </div>
                )}

                {videoUrl ? (
                  <video
                    src={videoUrl}
                    controls
                    autoPlay
                    className="rounded-xl w-full"
                  />
                ) : (
                  <Image
                    src={image}
                    alt={name}
                    width={900}
                    height={600}
                    className="rounded-xl"
                  />
                )}
              </div>
            </div>
          </div>
        </ModalPortal>
      )}
    </>
  );
}