"use client";

import * as React from "react";
import Image from "next/image";
import { X } from "lucide-react";

export function Lightbox({
  src,
  alt,
  year,
  onClose,
  onPrev,
  onNext,
  hasPrev,
  hasNext,
}: {
  src: string;
  alt: string;
  year?: string;
  onClose: () => void;
  onPrev?: () => void;
  onNext?: () => void;
  hasPrev?: boolean;
  hasNext?: boolean;
}) {
  React.useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft" && onPrev) onPrev();
      if (e.key === "ArrowRight" && onNext) onNext();
    };
    document.addEventListener("keydown", handler);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", handler);
      document.body.style.overflow = "";
    };
  }, [onClose, onPrev, onNext]);

  return (
    <div
      className="fixed inset-0 z-[999] flex items-center justify-center bg-black/85 p-4 backdrop-blur-sm"
      onClick={onClose}
    >
      {/* Close */}
      <button
        onClick={onClose}
        className="absolute right-4 top-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-white transition-colors hover:bg-white/25"
        aria-label="Close"
      >
        <X className="h-5 w-5" />
      </button>

      {/* Prev */}
      {hasPrev && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onPrev?.();
          }}
          className="absolute left-4 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-2xl text-white transition-colors hover:bg-white/25"
          aria-label="Previous"
        >
          ‹
        </button>
      )}

      {/* Next */}
      {hasNext && (
        <button
          onClick={(e) => {
            e.stopPropagation();
            onNext?.();
          }}
          className="absolute right-4 top-1/2 z-10 flex h-11 w-11 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-2xl text-white transition-colors hover:bg-white/25"
          aria-label="Next"
        >
          ›
        </button>
      )}

      {/* Image / PDF card */}
      <div
        className={`relative flex w-full flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ${
          src.toLowerCase().endsWith(".pdf") ? "h-[85vh] max-w-5xl sm:h-[90vh]" : "max-w-lg"
        }`}
        onClick={(e) => e.stopPropagation()}
      >
        <div
          className={`relative w-full ${
            src.toLowerCase().endsWith(".pdf") ? "flex-1" : "aspect-[3/4]"
          }`}
        >
          {src.toLowerCase().endsWith(".pdf") ? (
            <iframe
              src={`${encodeURI(src)}#toolbar=0&navpanes=0&scrollbar=0&view=Fit`}
              className="absolute inset-0 h-full w-full border-none"
              title={alt}
            />
          ) : (
            <Image
              src={src}
              alt={alt}
              fill
              className="object-contain p-4"
              sizes="(max-width: 768px) 100vw, 600px"
              priority
            />
          )}
        </div>
        <div className="border-t border-black/5 bg-gold-bg px-5 py-3">
          {year && (
            <p className="text-[10px] font-bold uppercase tracking-widest text-gold">
              {year}
            </p>
          )}
          <p className={`text-sm font-bold text-ink ${year ? "mt-0.5" : ""}`}>
            {alt}
          </p>
        </div>
      </div>
    </div>
  );
}