"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import type { PortfolioItem } from "@/data/portfolios";
import { resolveMediaUrl } from "@/lib/meshkee";

export function PortfolioDetailView({ item }: { item: PortfolioItem }) {
  const cover = resolveMediaUrl(item.coverImage || item.image);
  const gallery = (item.gallery.length ? item.gallery : cover ? [cover] : [])
    .map(resolveMediaUrl)
    .filter(Boolean);
  const [active, setActive] = useState<string | null>(null);

  useEffect(() => {
    if (!active) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setActive(null);
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [active]);

  return (
    <>
      <section className="section">
        <div className="container-page">
          <div className="grid items-start gap-8 lg:grid-cols-[minmax(0,1fr)_240px]">
            <div>
              {cover ? (
                <div className="relative mb-6 aspect-[16/10] overflow-hidden border border-[#e5e5e5] bg-[#fafafa] p-1">
                  <div className="relative h-full w-full overflow-hidden">
                    <Image
                      src={cover}
                      alt={item.title}
                      fill
                      unoptimized
                      priority
                      className="object-contain"
                      sizes="(max-width: 1024px) 100vw, 70vw"
                    />
                  </div>
                </div>
              ) : null}
              {item.description ? (
                <p className="text-justify text-base leading-8 text-[#666]">
                  {item.description}
                </p>
              ) : null}
              {item.titleEn ? (
                <p className="mt-4 text-sm tracking-wide text-[#999]">
                  {item.titleEn}
                </p>
              ) : null}
            </div>

            {gallery.length ? (
              <ul className="grid grid-cols-2 gap-3 lg:grid-cols-1">
                {gallery.map((src) => (
                  <li key={src}>
                    <button
                      type="button"
                      onClick={() => setActive(src)}
                      className="relative aspect-square w-full overflow-hidden border border-[#eee] bg-[#f7f7f7] transition hover:opacity-90"
                    >
                      <Image
                        src={src}
                        alt={item.title}
                        fill
                        unoptimized
                        className="object-cover"
                        sizes="200px"
                      />
                    </button>
                  </li>
                ))}
              </ul>
            ) : null}
          </div>
        </div>
      </section>

      {active ? (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center bg-black/75 p-4"
          role="dialog"
          aria-modal="true"
          aria-label={item.title}
          onClick={() => setActive(null)}
        >
          <button
            type="button"
            className="absolute top-4 left-4 rounded bg-white/90 px-3 py-1.5 text-sm text-[#232323]"
            onClick={() => setActive(null)}
          >
            بستن
          </button>
          <div
            className="relative max-h-[90vh] w-full max-w-5xl"
            onClick={(e) => e.stopPropagation()}
          >
            <Image
              src={active}
              alt={item.title}
              width={1400}
              height={900}
              unoptimized
              className="mx-auto h-auto max-h-[90vh] w-auto object-contain"
              sizes="90vw"
              priority
            />
          </div>
        </div>
      ) : null}
    </>
  );
}
