<template>
  <div ref="layoutRef" class="lifewave-layout" :class="{ 'lifewave-layout--dark': isDark }">
    <!-- FloatingLines Fullscreen Background (always visible) -->
    <FloatingLines
      class="lifewave-layout__background"
      :enabled-waves="['middle']"
      :line-count="[fl.lineCount]"
      :animation-speed="fl.speed"
      :num-points="shaderNumPoints"
      :point-x-values="shaderPointX"
      :point-y-values="shaderPointY"
      :point-colors="shaderPointColors"
      :line-spread="fl.spread"
      :fan-spread="fl.fanSpread"
      :line-sharpness="fl.lineSharpness"
      :wave-frequency="fl.waveFrequency"
      :bezier-curvature="fl.bezierCurvature"
      :circle-radius-px="fl.circleRadius"
      :circle-glow-size="fl.glowSize"
      :circle-glow-strength="fl.glowStrength"
      :lines-gradient="parsedGradient"
      :bg-color-center="fl.bgCenter"
      :bg-color-edge="fl.bgEdge"
      :background-image="fl.backgroundImage"
      :mix-blend-mode="'screen'"
    />

    <!-- Scrollable Timeline -->
    <TimelineView
      class="lifewave-layout__timeline"
      @dot-select="onDotSelect"
      @view-update="onViewUpdate"
    />

    <!-- Header -->
    <header class="lifewave-header">
      <span class="lifewave-header__logo" @click="toggleDarkMode">ThatsMe</span>
      <button class="lifewave-header__user glass--button" @click="settingsOpen = !settingsOpen">
        <q-icon name="tune" size="22px" />
      </button>
    </header>

    <!-- Content -->
    <main class="lifewave-content">
      <router-view />
    </main>

    <!-- Add Event Button (Bottom-Center) — hidden when panel is open -->
    <AddEventButton v-if="!eventsStore.panelOpen" @click="onAddEvent" />

    <!-- Backdrop blur when panel is open -->
    <Transition name="fade">
      <div
        v-if="eventsStore.panelOpen"
        class="lifewave-backdrop"
        @click="eventsStore.closePanel()"
      />
    </Transition>

    <!-- Event Panel (Slide-Up) -->
    <EventPanel />

    <!-- Wave Settings Backdrop -->
    <Transition name="fade">
      <div
        v-if="settingsOpen && !eventsStore.panelOpen"
        class="lifewave-backdrop"
        @click="settingsOpen = false"
      />
    </Transition>

    <!-- Wave Settings Panel (Slide-Up) -->
    <LifeWaveSettings
      :open="settingsOpen && !eventsStore.panelOpen"
      @close="settingsOpen = false"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useQuasar } from 'quasar'
import AddEventButton from 'components/AddEventButton.vue'
import EventPanel from 'components/EventPanel.vue'
import FloatingLines from 'components/FloatingLines.vue'
import LifeWaveSettings from 'components/LifeWaveSettings.vue'
import TimelineView from 'components/TimelineView.vue'
import { useEventsStore } from 'stores/events'
import { useSettingsStore } from 'stores/settings'

const $q = useQuasar()
const eventsStore = useEventsStore()
const settingsStore = useSettingsStore()
const isDark = computed(() => $q.dark.isActive)
const settingsOpen = ref(false)
const fl = computed(() => settingsStore.floatingLines)

// Layout dimensions (for screen→UV conversion)
const layoutRef = ref(null)
const layoutWidth = ref(window.innerWidth)
const layoutHeight = ref(window.innerHeight)
let layoutResizeObserver = null

onMounted(() => {
  if (layoutRef.value) {
    layoutWidth.value = layoutRef.value.clientWidth
    layoutHeight.value = layoutRef.value.clientHeight
    layoutResizeObserver = new ResizeObserver(() => {
      layoutWidth.value = layoutRef.value.clientWidth
      layoutHeight.value = layoutRef.value.clientHeight
    })
    layoutResizeObserver.observe(layoutRef.value)
  }
})

onBeforeUnmount(() => {
  layoutResizeObserver?.disconnect()
})

// Timeline state (received from TimelineView via emit)
const timelineState = ref(null)

function onViewUpdate(state) {
  timelineState.value = state
}

// Convert screen pixel coordinates → shader UV space
// Shader: baseUv = (2*fragCoord - iResolution) / iResolution.y; baseUv.y *= -1;
// For CSS pixel (sx, sy) from top-left:
//   uvX = (2*sx - cssWidth) / cssHeight
//   uvY = (2*sy - cssHeight) / cssHeight
function screenToUV(sx, sy) {
  const w = layoutWidth.value
  const h = layoutHeight.value
  return {
    x: (2 * sx - w) / h,
    y: (2 * sy - h) / h
  }
}

// Compute shader point positions from event positions
const TIMELINE_TOP = 60 // CSS: .timeline { top: 60px }

const shaderNumPoints = computed(() => {
  if (!timelineState.value) return 0
  return Math.min(timelineState.value.events.length, 8)
})

const shaderPointX = computed(() => {
  const xs = Array(8).fill(0)
  if (!timelineState.value) return xs
  const { scrollLeft, events } = timelineState.value
  const count = Math.min(events.length, 8)
  for (let i = 0; i < count; i++) {
    const screenX = events[i].x - scrollLeft
    xs[i] = screenToUV(screenX, 0).x
  }
  return xs
})

const shaderPointY = computed(() => {
  const ys = Array(8).fill(0)
  if (!timelineState.value) return ys
  const { containerHeight: tlHeight, events } = timelineState.value
  const count = Math.min(events.length, 8)
  for (let i = 0; i < count; i++) {
    // GlowDot: top = (50 - emotion*35)% of timeline container
    const yPercent = 50 - events[i].emotion * 35
    const screenY = TIMELINE_TOP + (yPercent / 100) * tlHeight
    ys[i] = screenToUV(0, screenY).y
  }
  return ys
})

const shaderPointColors = computed(() => {
  if (!timelineState.value) return []
  const { events } = timelineState.value
  const count = Math.min(events.length, 8)
  const colors = []
  for (let i = 0; i < count; i++) {
    colors.push(events[i].color || '#ffffff')
  }
  return colors
})

// Parse gradient stops from textarea string
const parsedGradient = computed(() => {
  return fl.value.gradientStops
    .split('\n')
    .map(s => s.trim())
    .filter(s => s.length > 0 && s.startsWith('#'))
})

const toggleDarkMode = () => {
  $q.dark.toggle()
}

const onAddEvent = () => {
  eventsStore.openPanel()
}

const onDotSelect = (id) => {
  eventsStore.selectEvent(id)
  eventsStore.openPanel(id)
}
</script>

<style scoped>
.lifewave-layout {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  color: #F5F5F5;
  transition: background 0.3s ease, color 0.3s ease;
}

.lifewave-layout--dark {
  background: #000;
  color: #F5F5F5;
}

/* FloatingLines Background */
.lifewave-layout__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Timeline — positioning comes from TimelineView's own .timeline class */
.lifewave-layout__timeline {
  z-index: 5;
}

/* Header */
.lifewave-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
}

.lifewave-header__logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
  cursor: pointer;
  user-select: none;
}

.lifewave-header__user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Content */
.lifewave-content {
  padding-top: 72px;
  height: 100%;
}

/* Backdrop blur overlay */
.lifewave-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
