import { useEffect, useRef, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { api, type BrowseEntry, type MediaItem } from "../../api/client";
import TagPanel from "../TagPanel/TagPanel";

interface Props {
  mediaId: number;
  siblings: BrowseEntry[];
  onClose: () => void;
  onNavigate: (id: number) => void;
}

export default function MediaViewer({ mediaId, siblings, onClose, onNavigate }: Props) {
  const [showTags, setShowTags] = useState(() => window.innerWidth >= 768);
  const touchStartX = useRef<number | null>(null);

  const { data: item } = useQuery<MediaItem>({
    queryKey: ["media", mediaId],
    queryFn: () => api.media.get(mediaId),
  });

  const mediaSiblings = siblings.filter((e) => e.media_item_id != null);
  const currentIndex = mediaSiblings.findIndex((e) => e.media_item_id === mediaId);
  const prevId = currentIndex > 0 ? mediaSiblings[currentIndex - 1].media_item_id : null;
  const nextId = currentIndex < mediaSiblings.length - 1 ? mediaSiblings[currentIndex + 1].media_item_id : null;

  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowLeft" && prevId) onNavigate(prevId);
      if (e.key === "ArrowRight" && nextId) onNavigate(nextId);
    }
    const onTouchStart = (e: TouchEvent) => { touchStartX.current = e.touches[0].clientX; };
    const onTouchEnd = (e: TouchEvent) => {
      if (touchStartX.current === null) return;
      const delta = touchStartX.current - e.changedTouches[0].clientX;
      if (Math.abs(delta) > 50) {
        if (delta > 0 && nextId) onNavigate(nextId);
        if (delta < 0 && prevId) onNavigate(prevId);
      }
      touchStartX.current = null;
    };
    window.addEventListener("keydown", onKey);
    window.addEventListener("touchstart", onTouchStart);
    window.addEventListener("touchend", onTouchEnd);
    return () => {
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("touchstart", onTouchStart);
      window.removeEventListener("touchend", onTouchEnd);
    };
  }, [prevId, nextId, onClose, onNavigate]);

  return (
    <>
      {/* Backdrop */}
      <div
        onClick={onClose}
        style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 100 }}
      />

      {/* Prev */}
      <button
        onClick={() => prevId && onNavigate(prevId)}
        disabled={!prevId}
        style={{ position: "fixed", left: 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: prevId ? "#fff" : "#444", cursor: prevId ? "pointer" : "default" }}
      >
        ‹
      </button>

      {/* Next */}
      <button
        onClick={() => nextId && onNavigate(nextId)}
        disabled={!nextId}
        style={{ position: "fixed", right: showTags ? 276 : 16, top: "50%", transform: "translateY(-50%)", zIndex: 102, fontSize: 36, background: "none", border: "none", color: nextId ? "#fff" : "#444", cursor: nextId ? "pointer" : "default" }}
      >
        ›
      </button>

      {/* Media card */}
      <div
        onClick={(e) => e.stopPropagation()}
        style={{ position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 101, background: "#1a1a1a", borderRadius: 8, padding: 16, display: "flex", flexDirection: "column", alignItems: "center", gap: 12, maxWidth: "80vw", maxHeight: "90vh", overflow: "auto" }}
      >
        {item?.filename && (
          <div style={{ color: "#ccc", fontSize: 13 }}>{item.filename}</div>
        )}
        {item?.media_type === "image" && (
          <img
            src={api.media.fileUrl(mediaId)}
            alt={item.filename}
            style={{ maxWidth: "70vw", maxHeight: "82vh", objectFit: "contain" }}
          />
        )}
        {item?.media_type === "video" && (
          <video
            src={api.media.fileUrl(mediaId)}
            controls
            style={{ maxWidth: "70vw", maxHeight: "82vh" }}
          />
        )}
      </div>

      {/* Top-right controls */}
      <div style={{ position: "fixed", top: 16, right: 16, zIndex: 103, display: "flex", gap: 8 }}>
        <button
          onClick={() => setShowTags((v) => !v)}
          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
        >
          ☰
        </button>
        <button
          onClick={onClose}
          style={{ background: "none", border: "none", color: "#fff", fontSize: 20, cursor: "pointer" }}
        >
          ✕
        </button>
      </div>

      {/* Tag panel */}
      {showTags && item && (
        <div
          onClick={(e) => e.stopPropagation()}
          style={{ position: "fixed", top: 0, right: 0, height: "100%", width: 260, background: "#1a1a1a", borderLeft: "1px solid #333", padding: "48px 16px 16px", zIndex: 101, overflowY: "auto" }}
        >
          <TagPanel item={item} />
        </div>
      )}
    </>
  );
}