"use client";

import dynamic from "next/dynamic";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { blogGridPosts } from "@/data/blog";

const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

export default function BlogGrid() {
  const [activeVideoUrl, setActiveVideoUrl] = useState<string | null>(null);

  useEffect(() => {
    if (activeVideoUrl == null) return;

    const onEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setActiveVideoUrl(null);
    };

    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onEscape);

    return () => {
      document.body.style.overflow = originalOverflow;
      window.removeEventListener("keydown", onEscape);
    };
  }, [activeVideoUrl]);

  return (
    <>
      {blogGridPosts.map((post, index) => {
        const canOpenVideo = index === 0 && Boolean(post.videoUrl);
        return (
          <div key={post.id} className="col-lg-4 col-md-6">
            <div
              className="blog-card"
              data-aos="fade-up"
              data-aos-duration={900}
              data-aos-delay={post.aosDelay}
            >
              <div className="blog-img">
                <Link href={post.href} title="">
                  <Image
                    src={post.image}
                    alt={post.imageAlt}
                    width={410}
                    height={300}
                    style={{ width: "100%", height: "auto" }}
                  />
                </Link>
                {canOpenVideo ? (
                  <button
                    type="button"
                    className="video-trigger"
                    data-video={post.videoUrl}
                    onClick={() => setActiveVideoUrl(post.videoUrl ?? null)}
                    aria-label="Play post video"
                  >
                    ▶
                  </button>
                ) : null}
              </div>
              <div className="blog-content">
                <ul className="blog-meta">
                  <li>
                    <Link href={post.href} title="">
                      {post.author}
                    </Link>
                  </li>
                  <li>
                    <Link href={post.href} title="">
                      {post.date}
                    </Link>
                  </li>
                </ul>
                <h3 className="title">
                  <Link href={post.href} title="">
                    {post.title}
                  </Link>
                </h3>
                <Link href={post.href} className="btn-style1">
                  Read More
                  <span>
                    <Image
                      src="/assets/images/icon/arrow.svg"
                      alt="Arrow Icon"
                      width={14}
                      height={14}
                    />
                  </span>
                </Link>
              </div>
            </div>
          </div>
        );
      })}

      {activeVideoUrl ? (
        <div
          className="video-modal"
          onClick={() => setActiveVideoUrl(null)}
          role="button"
          tabIndex={0}
          aria-label="Close video modal"
          style={{
            position: "fixed",
            inset: 0,
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 10000,
            padding: "1rem",
          }}
        >
          <div
            onClick={(event) => event.stopPropagation()}
            style={{
              position: "relative",
              width: "min(100%, 900px)",
              aspectRatio: "16 / 9",
              backgroundColor: "#000",
            }}
          >
            <button
              type="button"
              onClick={() => setActiveVideoUrl(null)}
              aria-label="Close video"
              style={{
                position: "absolute",
                right: "0.5rem",
                top: "-2.2rem",
                border: 0,
                background: "transparent",
                color: "#fff",
                fontSize: "2rem",
                lineHeight: 1,
              }}
            >
              ×
            </button>
            <ReactPlayer
              src={activeVideoUrl}
              controls
              playing
              width="100%"
              height="100%"
            />
          </div>
        </div>
      ) : null}
    </>
  );
}