"use client";

import React, { useState, useMemo } from "react";
import { Mountain as MountainIcon } from "lucide-react";
import GalleryFilter, { type MountainFilterOption } from "./GalleryFilter";
import MountainSection from "./MountainSection";
import GalleryLightbox from "./GalleryLightbox";
import type { GalleryGroup } from "@/types/gallery";
import styles from "./GalleryContent.module.css";

interface GalleryContentProps {
  groups: GalleryGroup[];
}

interface ActiveLightboxState {
  groupIndex: number;
  imageIndex: number;
}

export default function GalleryContent({ groups }: GalleryContentProps) {
  const [selectedMountainId, setSelectedMountainId] = useState<string>("all");
  const [lightbox, setLightbox] = useState<ActiveLightboxState | null>(null);

  // Extract unique mountains for filter bar
  const mountainOptions: MountainFilterOption[] = useMemo(() => {
    return groups.map((g) => ({
      id: g.mountain.id,
      name: g.mountain.name,
    }));
  }, [groups]);

  // Filter groups according to active selection
  const filteredGroups = useMemo(() => {
    if (selectedMountainId === "all") return groups;
    return groups.filter((g) => g.mountain.id === selectedMountainId);
  }, [groups, selectedMountainId]);

  // Total images across filtered groups
  const totalFilteredImages = useMemo(() => {
    return filteredGroups.reduce((acc, g) => acc + (g.images?.length || 0), 0);
  }, [filteredGroups]);

  // Current active group and images for lightbox
  const activeGroup = lightbox !== null ? groups[lightbox.groupIndex] : null;

  return (
    <div className={styles.contentContainer}>
      {/* ── 1. Horizontal Mountain Filter Bar ──────────────────────── */}
      {mountainOptions.length > 0 && (
        <GalleryFilter
          mountains={mountainOptions}
          selectedId={selectedMountainId}
          onSelect={setSelectedMountainId}
        />
      )}

      {/* ── 2. Gallery Groups or Empty State ───────────────────────── */}
      {filteredGroups.length === 0 || totalFilteredImages === 0 ? (
        <div className={styles.emptyState} role="status">
          <div className={styles.emptyIconWrap} aria-hidden="true">
            <MountainIcon size={28} />
          </div>
          <h3 className={styles.emptyTitle}>Dokumentasi Perjalanan Belum Tersedia</h3>
          <p className={styles.emptyDesc}>
            Foto dokumentasi untuk destinasi ini akan segera kami perbarui.
          </p>
        </div>
      ) : (
        <div className={styles.sectionsList}>
          {filteredGroups.map((group) => {
            // Find original index in full groups array for lightbox navigation
            const originalGroupIndex = groups.findIndex(
              (g) => g.mountain.id === group.mountain.id
            );

            return (
              <MountainSection
                key={group.mountain.id}
                group={group}
                groupIndex={originalGroupIndex >= 0 ? originalGroupIndex : 0}
                onPhotoClick={(imageIndex) =>
                  setLightbox({
                    groupIndex: originalGroupIndex >= 0 ? originalGroupIndex : 0,
                    imageIndex,
                  })
                }
              />
            );
          })}
        </div>
      )}

      {/* ── 3. Lightbox Modal ──────────────────────────────────────── */}
      {lightbox !== null && activeGroup && (
        <GalleryLightbox
          images={activeGroup.images}
          currentIndex={lightbox.imageIndex}
          mountainName={activeGroup.mountain.name}
          onClose={() => setLightbox(null)}
          onNavigate={(newIndex) =>
            setLightbox({
              groupIndex: lightbox.groupIndex,
              imageIndex: newIndex,
            })
          }
        />
      )}
    </div>
  );
}