"use client";

import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { PageHero, SiteShell } from "@/components/SiteShell";
import { publicFetch, resolveImageUrl } from "@/lib/api";

type GalleryItem = {
  id: number;
  media_url: string;
  media_type: "image" | "video";
  video_url?: string | null;
  title: string;
  description?: string;
  category: string;
  sort_order: number;
};

function useMasonry(containerRef: React.RefObject<HTMLDivElement | null>, itemCount: number, gap = 16) {
  const [positions, setPositions] = useState<{ x: number; y: number; w: number }[]>([]);

  const recalc = useCallback(() => {
    const container = containerRef.current;
    if (!container) return;
    const children = Array.from(container.children) as HTMLElement[];
    if (children.length === 0) return;

    const containerWidth = container.offsetWidth;
    let cols = 2;
    if (window.innerWidth >= 1024) cols = 4;
    else if (window.innerWidth >= 640) cols = 3;

    const colWidth = (containerWidth - gap * (cols - 1)) / cols;
    const colHeights = new Array(cols).fill(0);
    const newPositions: { x: number; y: number; w: number }[] = [];

    children.forEach((child) => {
      const shortestCol = colHeights.indexOf(Math.min(...colHeights));
      const x = shortestCol * (colWidth + gap);
      const y = colHeights[shortestCol];
      newPositions.push({ x, y, w: colWidth });
      colHeights[shortestCol] += child.offsetHeight + gap;
    });

    container.style.height = `${Math.max(...colHeights)}px`;
    setPositions(newPositions);
  }, [containerRef, gap]);

  useEffect(() => {
    recalc();
    const observer = new ResizeObserver(recalc);
    if (containerRef.current) observer.observe(containerRef.current);
    window.addEventListener("resize", recalc);
    return () => {
      observer.disconnect();
      window.removeEventListener("resize", recalc);
    };
  }, [recalc, containerRef, itemCount]);

  return positions;
}

export default function GalleryPage() {
  const [items, setItems] = useState<GalleryItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState("All");
  const [lightbox, setLightbox] = useState<GalleryItem | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    publicFetch<GalleryItem[]>("/gallery")
      .then(setItems)
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  const filtered = filter === "All" ? items : items.filter((i) => i.category === filter);
  const categories = ["All", ...new Set(items.map((i) => i.category))];

  const positions = useMasonry(containerRef, filtered.length);

  return (
    <SiteShell>
      
      {/* ── Filter Tabs ── */}
      <section className="border-b border-[var(--color-hairline-cool)] bg-white">
        <div className="mx-auto max-w-[1280px] px-4 pt-8 lg:px-6">
          <div className="flex flex-wrap items-center gap-2">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setFilter(cat)}
                className={`rounded-md px-4 py-2 text-sm transition-all duration-200 ${
                  filter === cat
                    ? "bg-[var(--color-ink)] text-[var(--color-canvas)]"
                    : "border border-[var(--color-hairline)] bg-white text-[var(--color-ink-mute)] hover:bg-[var(--color-canvas-soft)]"
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ── Masonry Grid ── */}
      <section className="bg-white py-10">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          {loading ? (
            <div className="py-20 text-center">
              <p className="text-[var(--color-ink-mute)]">Loading gallery...</p>
            </div>
          ) : filtered.length === 0 ? (
            <div className="py-20 text-center">
              <p className="text-[var(--color-ink-mute)]">No items found.</p>
            </div>
          ) : (
            <div ref={containerRef} className="relative w-full">
              {filtered.map((item, i) => {
                const src = resolveImageUrl(item.media_url, "");
                if (!src) return null;
                const pos = positions[i];
                return (
                  <div
                    key={item.id}
                    className="absolute cursor-pointer group transition-all duration-300"
                    style={{
                      left: pos?.x ?? 0,
                      top: pos?.y ?? 0,
                      width: pos?.w ?? "25%",
                    }}
                    onClick={() => setLightbox(item)}
                  >
                    <div className="relative overflow-hidden rounded-[12px] border border-[var(--color-hairline-cool)]">
                      {item.media_type === "video" && item.video_url ? (
                        <>
                          <video
                            src={resolveImageUrl(item.video_url, "")}
                            className="w-full block"
                            muted
                            preload="metadata"
                            onMouseEnter={(e) => (e.target as HTMLVideoElement).play()}
                            onMouseLeave={(e) => { (e.target as HTMLVideoElement).pause(); (e.target as HTMLVideoElement).currentTime = 0; }}
                          />
                          <div className="absolute inset-0 grid place-items-center bg-[var(--color-canvas-night)]/10 pointer-events-none">
                            <span className="grid h-12 w-12 place-items-center rounded-full bg-white/90 text-lg shadow-lg">▶</span>
                          </div>
                        </>
                      ) : (
                        <img
                          src={src}
                          alt={item.title}
                          className="w-full block transition-transform duration-500 group-hover:scale-105"
                        />
                      )}
                      <div className="absolute inset-0 bg-gradient-to-t from-[var(--color-canvas-night)]/70 via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
                      <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full transition-transform duration-300 group-hover:translate-y-0">
                        <p className="text-sm font-medium text-white">{item.title}</p>
                        <span className="badge mt-1 inline-block">{item.category}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>

      {/* ── Lightbox ── */}
      {lightbox && (
        <div
          className="fixed inset-0 z-[100] flex items-center justify-center bg-[var(--color-canvas-night)]/90 p-4 backdrop-blur-sm"
          onClick={() => setLightbox(null)}
        >
          <button
            className="absolute right-5 top-5 z-10 grid h-10 w-10 place-items-center rounded-md bg-white/10 text-xl text-white transition hover:bg-white/20"
            onClick={() => setLightbox(null)}
          >
            &times;
          </button>
          <div
            className="relative max-h-[85vh] max-w-4xl"
            onClick={(e) => e.stopPropagation()}
          >
            {lightbox.media_type === "video" && lightbox.video_url ? (
              <video
                src={resolveImageUrl(lightbox.video_url, "")}
                controls
                autoPlay
                className="max-h-[75vh] w-full rounded-[12px]"
              />
            ) : (
              <img
                src={resolveImageUrl(lightbox.media_url, "")}
                alt={lightbox.title}
                className="max-h-[75vh] w-full rounded-[12px] object-contain"
              />
            )}
            <div className="mt-4 text-center">
              <h3 className="text-xl font-medium text-white">{lightbox.title}</h3>
              <span className="badge mt-2 inline-block">{lightbox.category}</span>
              {lightbox.description && (
                <p className="mx-auto mt-3 max-w-2xl text-sm leading-6 text-white/60">{lightbox.description}</p>
              )}
            </div>
          </div>
        </div>
      )}

      {/* ── CTA ── */}
      <section className="border-t border-[var(--color-hairline-cool)] bg-[var(--color-canvas-soft)] py-16 md:py-24">
        <div className="mx-auto max-w-[1280px] px-4 lg:px-6">
          <div className="rounded-[12px] border border-[var(--color-hairline)] bg-white p-10 text-center shadow-[var(--shadow-l1)] md:p-16">
            <h2 className="text-3xl leading-[1.1] tracking-[-0.02em] text-[var(--color-ink)] md:text-5xl" style={{ fontWeight: 500 }}>
              Want to Be Part of the Story?
            </h2>
            <p className="mx-auto mt-4 max-w-2xl text-lg leading-7 text-[var(--color-ink-mute)]">
              Join us as a volunteer or supporter and help create more moments worth capturing.
            </p>
            <div className="mt-9 flex flex-col justify-center gap-3 sm:flex-row">
              <Link href="/membership/volunteer" className="btn">
                Become a Volunteer
              </Link>
              <Link href="/contact" className="btn-outline">
                Contact Us
              </Link>
            </div>
          </div>
        </div>
      </section>
    </SiteShell>
  );
}