"use client";

import { useEffect, useCallback } from "react";
import { createPortal } from "react-dom";
import { X, ChevronLeft, ChevronRight } from "lucide-react";

export type LightboxItem = {
  src: string;
  alt?: string;
};

type ImageLightboxProps = {
  items: LightboxItem[];
  index: number;
  onClose: () => void;
  onIndexChange: (index: number) => void;
};

/** 全屏图箱：Esc 关闭，多图时左右切换 */
export default function ImageLightbox({
  items,
  index,
  onClose,
  onIndexChange,
}: ImageLightboxProps) {
  const total = items.length;
  const current = items[index];
  const hasNav = total > 1;

  const goPrev = useCallback(() => {
    if (!hasNav) return;
    onIndexChange((index - 1 + total) % total);
  }, [hasNav, index, total, onIndexChange]);

  const goNext = useCallback(() => {
    if (!hasNav) return;
    onIndexChange((index + 1) % total);
  }, [hasNav, index, total, onIndexChange]);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowLeft") goPrev();
      else if (e.key === "ArrowRight") goNext();
    };
    window.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [onClose, goPrev, goNext]);

  if (!current || typeof document === "undefined") return null;

  return createPortal(
    <div
      className="md-lightbox"
      role="dialog"
      aria-modal="true"
      aria-label="图片预览"
      onClick={onClose}
    >
      <button
        type="button"
        className="md-lightbox-close"
        aria-label="关闭"
        onClick={onClose}
      >
        <X size={22} />
      </button>

      {hasNav && (
        <>
          <button
            type="button"
            className="md-lightbox-nav md-lightbox-prev"
            aria-label="上一张"
            onClick={(e) => {
              e.stopPropagation();
              goPrev();
            }}
          >
            <ChevronLeft size={28} />
          </button>
          <button
            type="button"
            className="md-lightbox-nav md-lightbox-next"
            aria-label="下一张"
            onClick={(e) => {
              e.stopPropagation();
              goNext();
            }}
          >
            <ChevronRight size={28} />
          </button>
          <div className="md-lightbox-counter" onClick={(e) => e.stopPropagation()}>
            {index + 1} / {total}
          </div>
        </>
      )}

      <figure
        className="md-lightbox-figure"
        onClick={(e) => e.stopPropagation()}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={current.src}
          alt={current.alt || ""}
          className="md-lightbox-img"
          draggable={false}
        />
        {current.alt ? (
          <figcaption className="md-lightbox-caption">{current.alt}</figcaption>
        ) : null}
      </figure>
    </div>,
    document.body
  );
}