import { useEffect, useRef, useState } from "react";
import { api, type MediaItem } from "../../api/client";

interface Props {
  items: MediaItem[];
  onClose: () => void;
  onViewInLibrary: (item: MediaItem) => void;
}

export default function DoomScrollViewer({ items, onClose, onViewInLibrary }: Props) {
  const [index, setIndex] = useState(0);
  const [fading, setFading] = useState(false);
  const wheelLock = useRef(false);
  const touchStartY = useRef<number | null>(null);

  const item = items[index];

  function go(delta: 1 | -1) {
    if (wheelLock.current) return;
    const next = index + delta;
    if (next < 0 || next >= items.length) return;
    wheelLock.current = true;
    setFading(true);
    setTimeout(() => {
      setIndex(next);
      setFading(false);
      wheelLock.current = false;
    }, 200);
  }

  useEffect(() => {
    const onWheel = (e: WheelEvent) => { e.deltaY > 0 ? go(1) : go(-1); };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "ArrowDown" || e.key === " ") { e.preventDefault(); go(1); }
      if (e.key === "ArrowUp") { e.preventDefault(); go(-1); }
      if (e.key === "Escape") onClose();
    };
    const onTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY; };
    const onTouchEnd = (e: TouchEvent) => {
      if (touchStartY.current === null) return;
      const delta = touchStartY.current - e.changedTouches[0].clientY;
      if (Math.abs(delta) > 50) delta > 0 ? go(1) : go(-1);
      touchStartY.current = null;
    };
    window.addEventListener("wheel", onWheel, { passive: true });
    window.addEventListener("keydown", onKey);
    window.addEventListener("touchstart", onTouchStart);
    window.addEventListener("touchend", onTouchEnd);
    return () => {
      window.removeEventListener("wheel", onWheel);
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("touchstart", onTouchStart);
      window.removeEventListener("touchend", onTouchEnd);
    };
  }, [index, fading]);

  return (
    <>
      {/* Backdrop */}
      <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.95)", zIndex: 200 }} />

      {/* Media area */}
      <div
        style={{
          position: "fixed", inset: 0, zIndex: 201,
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          gap: 12, paddingBottom: 56,
          transition: "opacity 0.2s ease, transform 0.2s ease",
          opacity: fading ? 0 : 1,
          transform: fading ? "translateY(-12px)" : "translateY(0)",
        }}
      >
        {item?.media_type === "image" && (
          <img
            key={item.id}
            src={api.media.fileUrl(item.id)}
            alt={item.filename}
            style={{ maxWidth: "90vw", maxHeight: "82vh", objectFit: "contain" }}
          />
        )}
        {item?.media_type === "video" && (
          <video
            key={item.id}
            src={api.media.fileUrl(item.id)}
            controls
            autoPlay
            style={{ maxWidth: "90vw", maxHeight: "82vh" }}
          />
        )}
      </div>

      {/* Bottom bar */}
      <div
        style={{
          position: "fixed", bottom: 0, left: 0, right: 0, zIndex: 202,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "12px 20px", background: "rgba(0,0,0,0.6)",
        }}
      >
        <button
          onClick={onClose}
          style={{ background: "none", border: "none", color: "#fff", fontSize: 15, cursor: "pointer" }}
        >
          ✕ Close
        </button>
        <span style={{ color: "#888", fontSize: 13 }}>
          {index + 1} / {items.length}
        </span>
        <button
          onClick={() => onViewInLibrary(item)}
          style={{ background: "none", border: "none", color: "var(--accent, #60a5fa)", fontSize: 15, cursor: "pointer" }}
        >
          View in Library →
        </button>
      </div>
    </>
  );
}