<template>
  <q-page>
    <div class="visualization-container">
      <div class="gradient-bg"></div>
      <div class="scroll-container" id="scroll-container"></div>
      <div class="median"></div>
    </div>

    <!-- Entry Detail Lightbox -->
    <q-dialog v-model="showEntryDetail" maximized transition-show="slide-up" transition-hide="slide-down">
      <q-card class="entry-lightbox">
        <q-card-section class="lightbox-header">
          <q-btn icon="close" flat round dense v-close-popup color="white" />
        </q-card-section>
        
        <q-card-section class="lightbox-content">
          <EntryDetailPage :entry-data="selectedEntryData" />
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-page>
</template>

<script>
import { onMounted, onBeforeUnmount, defineComponent, ref } from 'vue'
import { ConnectedDotsVisualization } from "../utils/ConnectedDotsVisualization"
import EntryDetailPage from './EntryDetailPage.vue'

export default defineComponent({
  name: 'WavePage',
  components: {
    EntryDetailPage
  },
  setup() {
    let visualization = null;
    let isDown = false;
    let startX;
    let scrollLeft;
    
    // Lightbox state
    const showEntryDetail = ref(false)
    const selectedEntryData = ref(null)
    
    // Sample detailed entry data
    const sampleEntryData = {
      1: {
        id: 1,
        title: "Beginn des neuen Abenteuers",
        subtitle: "Ein wichtiger Meilenstein in meinem Leben",
        date: "2024-10-01",
        time: "14:30",
        location: "München, Deutschland",
        level: 2,
        keyImage: "/images/familie2.png",
        description: "Dies war ein wirklich wichtiger Tag für mich. Nach langer Planung und Vorbereitung konnte ich endlich mein neues Abenteuer beginnen. Es war aufregend und gleichzeitig etwas beängstigend, aber ich wusste, dass es der richtige Schritt war. Die Erfahrungen, die ich an diesem Tag gemacht habe, werden mich noch lange begleiten.",
        additionalImages: [
          { url: "/images/feier.png", caption: "Familie beim Start" },
          { url: "/images/see.png", caption: "Der schöne Ort" }
        ],
        audioRecordings: [
          { name: "Gedanken zum Tag", url: "/audio/sample.mp3" }
        ],
        videoRecordings: [
          { name: "UHD Nature Video", url: "/videos/3191901-uhd_3840_2160_25fps.mp4" },
          { name: "HD Landscape Video", url: "/videos/3326928-hd_1920_1080_24fps.mp4" }
        ],
        relatedPersons: [
          { id: 1, name: "Maria Schmidt", relation: "Freundin", avatar: null },
          { id: 2, name: "Thomas Müller", relation: "Bruder", avatar: null }
        ],
        categories: [
          { id: 1, name: "Familie", icon: "family_restroom" },
          { id: 2, name: "Abenteuer", icon: "explore" }
        ],
        tags: [
          { id: 1, name: "Aufregend", icon: "emoji_emotions" },
          { id: 2, name: "Neuanfang", icon: "new_releases" }
        ]
      }
      // Add more entries as needed
    }
    
    // Method to open entry detail lightbox
    const openEntryDetail = (entryId) => {
      selectedEntryData.value = sampleEntryData[entryId] || sampleEntryData[1] // Fallback to first entry
      showEntryDetail.value = true
    }
    
    // Function to handle cleanup of event listeners
    const cleanupEventListeners = () => {
      const scrollContainer = document.querySelector('.scroll-container');
      if (scrollContainer) {
        scrollContainer.removeEventListener('mousedown', handleMouseDown);
        scrollContainer.removeEventListener('mouseleave', handleMouseLeave);
        scrollContainer.removeEventListener('mouseup', handleMouseUp);
        scrollContainer.removeEventListener('mousemove', handleMouseMove);
        scrollContainer.removeEventListener('touchstart', handleTouchStart);
        scrollContainer.removeEventListener('touchend', handleTouchEnd);
        scrollContainer.removeEventListener('touchmove', handleTouchMove);
      }
      window.removeEventListener('resize', handleResize);
    };
    
    // Event handlers
    const handleResize = () => {
      if (visualization) {
        visualization.resize();
      }
    };
    
    const handleMouseDown = (e) => {
      const scrollContainer = e.currentTarget;
      isDown = true;
      scrollContainer.classList.add('active');
      startX = e.pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
      scrollContainer.classList.remove('smooth-scroll');
    };
    
    const handleMouseLeave = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleMouseUp = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleMouseMove = (e) => {
      if (!isDown) return;
      e.preventDefault();
      const scrollContainer = e.currentTarget;
      const x = e.pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 3;
      scrollContainer.scrollLeft = scrollLeft - walk;
    };
    
    const handleTouchStart = (e) => {
      const scrollContainer = e.currentTarget;
      isDown = true;
      scrollContainer.classList.add('active');
      startX = e.touches[0].pageX - scrollContainer.offsetLeft;
      scrollLeft = scrollContainer.scrollLeft;
      scrollContainer.classList.remove('smooth-scroll');
    };
    
    const handleTouchEnd = (e) => {
      if (!isDown) return;
      isDown = false;
      e.currentTarget.classList.remove('active');
      e.currentTarget.classList.add('smooth-scroll');
    };
    
    const handleTouchMove = (e) => {
      if (!isDown) return;
      e.preventDefault();
      const scrollContainer = e.currentTarget;
      const x = e.touches[0].pageX - scrollContainer.offsetLeft;
      const walk = (x - startX) * 3;
      scrollContainer.scrollLeft = scrollLeft - walk;
    };
    
    onMounted(() => {
      try {
        console.log("Initializing Wave visualization...");
        
        // Example sample dots data
				const sampleDots = [
					{
						id: 1,
						value: -1.8,
						x: -2,
						imageUrl: "/images/0_3.png",
						title: "Beginn des neuen Abenteuers",
						description: "01.10.2024",
						onClick: () => openEntryDetail(1),
					},
					{
						id: 2,
						value: 1.2,
						x: 0,
						imageUrl: "/images/0_2.png",
						title: "Omas Annis Geburtstag",
						description: "02.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 3,
						value: -0.6,
					 x: 2,
						imageUrl: "/images/disco.png",
						title: "Konzertbesuch mit Freunden",
						description: "03.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 4,
						value: 3,
						x: 4,
						imageUrl: "/images/pferd.png",
						title: "Wanderreiten in den Bergen",
						description: "04.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 5,
						value: 1,
						x: 6,
						imageUrl: "/images/gpt.png",
						title: "Ruhiger Tag zu Hause",
						description: "05.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 6,
						value: -3,
						x: 8,
						imageUrl: "/images/oma.png",
						title: "Oma Erna verstorben",
						description: "06.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 7,
						value: 1.5,
						x: 10,
						imageUrl: "/images/see.png",
						title: "Erholungsausflug zum See",
						description: "07.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 8,
						value: 0,
						x: 12,
						imageUrl: "/images/feier.png",
						title: "Kleine Wochenendsfeier",
						description: "08.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 9,
						value: 3,
						x: 14,
						imageUrl: "/images/hochzeit.png",
						title: "Hochzeit von Cousine Tatjana",
						description: "09.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 10,
						value: 1,
						x: 16,
						imageUrl: "/images/work.png",
						title: "Erster Tag im neuen Job",
						description: "10.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 11,
						value: -1.2,
						x: 18,
						imageUrl: "/images/klasse.png",
						title: "Klassentreffen nach vielen Jahren",
						description: "11.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 12,
						value: -0.6,
						x: 20,
						imageUrl: "/images/familie.png",
						title: "Familienabendessen",
						description: "12.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 13,
						value: 2.7,
						x: 22,
						imageUrl:
							"/images/kinobesuch.png",
						title: "Kinobesuch mit der ganzen Familie",
						description: "13.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 14,
						value: 0,
						x: 24,
						imageUrl:
							"/images/entspannung.png",
						title: "Entspannung",
						description: "14.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 15,
						value: -2.9,
						x: 26,
						imageUrl: "/images/sonntag.png",
						title: "Geruhsamer Sonntag",
						description: "15.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 16,
						value: 1.5,
						x: 28,
						imageUrl:
							"/images/kindergeburtstag.png",
						title: "Kindergeburtstag",
						description: "16.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 17,
						value: 0,
						x: 30,
						imageUrl:
							"/images/familie2.png",
						title: "Spaziergang mit der Familie",
						description: "17.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
					{
						id: 18,
						value: 2.1,
						x: 32,
						imageUrl:
							"/images/grosseltern.png",
						title: "Familienfeier bei den Großeltern",
						description: "18.10.2024",
						onClick: () => openEntryDetail(1), // Using same entry for now
					},
				];

        // Initialize the visualization with the sample dots
        visualization = new ConnectedDotsVisualization('scroll-container', sampleDots, {
          // Optional custom configuration
					dotRadius: 6,
        });

        // Handle window resize
        window.addEventListener('resize', handleResize);

        // Set up scroll interactions
        const scrollContainer = document.querySelector('.scroll-container');
        if (scrollContainer) {
          // Mouse events
          scrollContainer.addEventListener('mousedown', handleMouseDown);
          scrollContainer.addEventListener('mouseleave', handleMouseLeave);
          scrollContainer.addEventListener('mouseup', handleMouseUp);
          scrollContainer.addEventListener('mousemove', handleMouseMove);

          // Touch events
          scrollContainer.addEventListener('touchstart', handleTouchStart);
          scrollContainer.addEventListener('touchend', handleTouchEnd);
          scrollContainer.addEventListener('touchmove', handleTouchMove);
        }
      } catch (err) {
        console.error("Error initializing visualization:", err);
      }
    });
    
    // Clean up event listeners when component is unmounted
    onBeforeUnmount(() => {
      cleanupEventListeners();
    });

    return {
      showEntryDetail,
      selectedEntryData,
      openEntryDetail
    }
  }
})
</script>

<style scoped>
.visualization-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 1;
}

.scroll-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 2;
  cursor: grab;
}

.scroll-container.active {
  cursor: grabbing;
}

.scroll-container.smooth-scroll {
  scroll-behavior: smooth;
}

/* Lightbox Styles */
.entry-lightbox {
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
}

.lightbox-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.lightbox-content {
  padding: 0;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: transparent;
}
</style>