<script setup lang="ts">
/**
 * OceanScene — The unified static/dynamic background scene.
 *
 * Combines water gradient, light rays, sea floor, corals, seaweed, and
 * decorations into a single cohesive component. Everything here is the
 * "world" — the environment that all dynamic overlay layers (fish, bubbles,
 * jellyfish, events) float on top of.
 *
 * Internal z-index stacking (within this component):
 *   0  water-gradient
 *   1  light-rays
 *   2  sea-floor
 *   3  decorations (starfish, shells)
 *   4  corals
 *   5  seaweed
 */
import { ref, computed, onMounted } from 'vue'
import { svgDataUri, coralSvg, seaweedSvg, starfishSvg, shellSvg } from '../svgPatterns'
import { useAquaticState } from '../useAquaticState'

const { season, activeEventModifiers } = useAquaticState()

// ── Event reactivity ──
const bloomActive = computed(() => activeEventModifiers.value.has('seasonal-bloom'))
const currentActive = computed(() => activeEventModifiers.value.has('current-change'))
const bioActive = computed(() => activeEventModifiers.value.has('bioluminescent-flash'))

// ── Season-dependent coral palettes ──
const palette = computed(() => {
  switch (season.value) {
    case 'spring': return { branching: ['#f472b6', '#fbcfe8'], brain: ['#fbbf24', '#fef3c7'], fan: ['#a78bfa', '#ddd6fe'] }
    case 'summer': return { branching: ['#f87171', '#fda4af'], brain: ['#f97316', '#fed7aa'], fan: ['#a855f7', '#d8b4fe'] }
    case 'autumn': return { branching: ['#b45309', '#d97706'], brain: ['#92400e', '#b45309'], fan: ['#78716c', '#a8a29e'] }
    case 'winter': return { branching: ['#7dd3fc', '#bae6fd'], brain: ['#94a3b8', '#cbd5e1'], fan: ['#a5b4fc', '#c7d2fe'] }
  }
})

// ── Corals (reactive to season) ──
const corals = computed(() => [
  { x: 12, bottom: 13, bg: svgDataUri(coralSvg('branching', palette.value.branching[0], palette.value.branching[1])), w: 32, h: 40, delay: '0s' },
  { x: 35, bottom: 14, bg: svgDataUri(coralSvg('brain', palette.value.brain[0], palette.value.brain[1])), w: 24, h: 20, delay: '-3s' },
  { x: 55, bottom: 12, bg: svgDataUri(coralSvg('fan', palette.value.fan[0], palette.value.fan[1])), w: 28, h: 36, delay: '-7s' },
  { x: 75, bottom: 13, bg: svgDataUri(coralSvg('branching', palette.value.branching[1], palette.value.branching[0])), w: 30, h: 38, delay: '-5s' },
  { x: 92, bottom: 14, bg: svgDataUri(coralSvg('brain', palette.value.brain[1], palette.value.brain[0])), w: 22, h: 18, delay: '-9s' },
])

// ── Seaweed (reactive to current-change event) ──
const stalks = [
  { x: 10, height: 52, color: '#16a34a', accent: '#22c55e', dur: 9, delay: '0s' },
  { x: 28, height: 60, color: '#22c55e', accent: '#4ade80', dur: 11, delay: '-2s' },
  { x: 42, height: 48, color: '#15803d', accent: '#16a34a', dur: 8, delay: '-5s' },
  { x: 62, height: 56, color: '#16a34a', accent: '#4ade80', dur: 12, delay: '-3s' },
  { x: 78, height: 44, color: '#22c55e', accent: '#16a34a', dur: 10, delay: '-7s' },
  { x: 90, height: 50, color: '#15803d', accent: '#22c55e', dur: 14, delay: '-1s' },
]

const stalkStyles = computed(() =>
  stalks.map(s => ({
    left: s.x + '%',
    bottom: '10%',
    height: s.height + 'px',
    width: '10px',
    backgroundImage: svgDataUri(seaweedSvg(s.height, s.color, s.accent)),
    '--sway-duration': s.dur + 's',
    '--sway-amount': currentActive.value ? '6deg' : '3deg',
    animationDelay: s.delay,
  }))
)

// ── Decorations (randomized once on mount) ──
interface DecoItem {
  x: number
  bottom: number
  bg: string
  size: [number, number]
}
const decoItems = ref<DecoItem[]>([])

onMounted(() => {
  const r = () => Math.random()
  decoItems.value = [
    { x: 8 + r() * 15, bottom: 8 + r() * 5, bg: svgDataUri(starfishSvg('#f97316')), size: [16, 16] },
    { x: 60 + r() * 20, bottom: 9 + r() * 4, bg: svgDataUri(starfishSvg('#fb923c')), size: [14, 14] },
    { x: 25 + r() * 10, bottom: 10 + r() * 3, bg: svgDataUri(shellSvg('#fef3c7')), size: [12, 8] },
    { x: 45 + r() * 10, bottom: 8 + r() * 4, bg: svgDataUri(shellSvg('#fde68a')), size: [10, 7] },
    { x: 82 + r() * 10, bottom: 9 + r() * 3, bg: svgDataUri(shellSvg('#fcd34d')), size: [11, 7] },
  ]
})
</script>

<template>
  <div class="ocean-scene" :class="{ bloom: bloomActive }">

    <!-- Layer 0: Water depth gradient -->
    <div class="water-gradient" />

    <!-- Layer 1: Surface light rays -->
    <div class="light-rays" :class="{ 'bio-tint': bioActive }" />

    <!-- Layer 2: Sea floor (sand, rocks, pebbles) -->
    <div class="sea-floor" />

    <!-- Layer 3: Decorations (starfish, shells on the floor) -->
    <div class="decorations">
      <div
        v-for="(d, i) in decoItems"
        :key="i"
        class="deco-item"
        :style="{
          left: d.x + '%',
          bottom: d.bottom + '%',
          width: d.size[0] + 'px',
          height: d.size[1] + 'px',
          backgroundImage: d.bg,
        }"
      />
    </div>

    <!-- Layer 4: Coral reef -->
    <div class="coral-reef">
      <div
        v-for="(c, i) in corals"
        :key="i"
        class="coral"
        :style="{
          left: c.x + '%',
          bottom: c.bottom + '%',
          width: c.w + 'px',
          height: c.h + 'px',
          backgroundImage: c.bg,
          animationDelay: c.delay,
        }"
      />
    </div>

    <!-- Layer 5: Seaweed field -->
    <div class="seaweed-field">
      <div
        v-for="(style, i) in stalkStyles"
        :key="i"
        class="seaweed-stalk"
        :style="style"
      />
    </div>
  </div>
</template>

<style scoped>
/* ============================================================================
   OCEAN SCENE — Unified background world
   All scenery layers live here, working together as one cohesive environment.
   The parent .aquatic-bg provides .tod-* and .season-* classes.
   ============================================================================ */

.ocean-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ocean-scene > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Layer 0: Water depth gradient ──────────────────────────────────── */

.water-gradient {
  z-index: 0;
  transition: background 2s ease;
  background: linear-gradient(
    180deg,
    rgba(0, 6, 22, 0.97) 0%,
    rgba(0, 12, 35, 0.95) 10%,
    rgba(0, 20, 52, 0.93) 22%,
    rgba(0, 30, 65, 0.90) 35%,
    rgba(2, 42, 75, 0.87) 48%,
    rgba(4, 52, 78, 0.84) 60%,
    rgba(6, 58, 72, 0.82) 72%,
    rgba(10, 55, 58, 0.80) 82%,
    rgba(18, 50, 45, 0.78) 90%,
    rgba(28, 48, 35, 0.76) 100%
  );
}

:global(.tod-twilight) .water-gradient {
  background: linear-gradient(
    180deg,
    rgba(15, 5, 30, 0.96) 0%,
    rgba(20, 10, 45, 0.94) 10%,
    rgba(18, 15, 55, 0.92) 22%,
    rgba(12, 25, 65, 0.89) 35%,
    rgba(8, 38, 72, 0.86) 48%,
    rgba(6, 48, 75, 0.83) 60%,
    rgba(8, 52, 68, 0.80) 72%,
    rgba(12, 50, 55, 0.78) 82%,
    rgba(20, 48, 42, 0.76) 90%,
    rgba(28, 45, 32, 0.74) 100%
  );
}

:global(.tod-day) .water-gradient {
  background: linear-gradient(
    180deg,
    rgba(2, 18, 40, 0.92) 0%,
    rgba(4, 28, 55, 0.90) 10%,
    rgba(6, 38, 68, 0.88) 22%,
    rgba(8, 48, 78, 0.85) 35%,
    rgba(10, 58, 85, 0.82) 48%,
    rgba(12, 65, 82, 0.79) 60%,
    rgba(14, 68, 78, 0.76) 72%,
    rgba(16, 62, 65, 0.74) 82%,
    rgba(22, 58, 52, 0.72) 90%,
    rgba(30, 55, 40, 0.70) 100%
  );
}

/* Depth zone shifts */
:global(.depth-surface) .water-gradient {
  filter: brightness(1.15);
}

:global(.depth-deep) .water-gradient {
  filter: brightness(0.8);
}

/* ── Layer 1: Light rays ────────────────────────────────────────────── */

.light-rays {
  z-index: 1;
  background:
    repeating-linear-gradient(
      -20deg,
      transparent 0px,
      transparent 80px,
      rgba(103, 232, 249, 0.02) 80px,
      rgba(103, 232, 249, 0.025) 84px,
      transparent 84px,
      transparent 200px
    ),
    repeating-linear-gradient(
      -35deg,
      transparent 0px,
      transparent 120px,
      rgba(56, 189, 248, 0.015) 120px,
      rgba(56, 189, 248, 0.02) 123px,
      transparent 123px,
      transparent 300px
    );
  animation: light-pulse 10s ease-in-out infinite alternate;
  transition: opacity 2s ease;
}

:global(.tod-night) .light-rays { opacity: 0.7; }
:global(.tod-day) .light-rays { opacity: 1; }

/* Bioluminescent event: green light tint */
.light-rays.bio-tint {
  background:
    repeating-linear-gradient(
      -20deg,
      transparent 0px,
      transparent 80px,
      rgba(74, 222, 128, 0.03) 80px,
      rgba(74, 222, 128, 0.04) 84px,
      transparent 84px,
      transparent 200px
    ),
    repeating-linear-gradient(
      -35deg,
      transparent 0px,
      transparent 120px,
      rgba(34, 197, 94, 0.02) 120px,
      rgba(34, 197, 94, 0.03) 123px,
      transparent 123px,
      transparent 300px
    );
}

@keyframes light-pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ── Layer 2: Sea floor ─────────────────────────────────────────────── */

.sea-floor {
  z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='160' viewBox='0 0 480 160' shape-rendering='crispEdges'%3E%3Crect x='0' y='120' width='480' height='40' fill='%23c2a060' opacity='0.55'/%3E%3Crect x='0' y='116' width='480' height='6' fill='%23d4b878' opacity='0.45'/%3E%3Crect x='0' y='114' width='480' height='4' fill='%23b89850' opacity='0.25'/%3E%3Crect x='15' y='124' width='30' height='2' fill='%23a89048' opacity='0.25'/%3E%3Crect x='80' y='128' width='20' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='140' y='126' width='35' height='2' fill='%23a89048' opacity='0.25'/%3E%3Crect x='220' y='130' width='25' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='290' y='124' width='30' height='2' fill='%23a89048' opacity='0.22'/%3E%3Crect x='360' y='128' width='22' height='2' fill='%23b8a060' opacity='0.2'/%3E%3Crect x='420' y='126' width='28' height='2' fill='%23a89048' opacity='0.22'/%3E%3Crect x='20' y='106' width='16' height='10' fill='%23475569' opacity='0.5'/%3E%3Crect x='22' y='104' width='12' height='4' fill='%2364748b' opacity='0.4'/%3E%3Crect x='24' y='102' width='6' height='4' fill='%23718096' opacity='0.3'/%3E%3Crect x='340' y='108' width='14' height='8' fill='%23475569' opacity='0.45'/%3E%3Crect x='342' y='106' width='10' height='4' fill='%2364748b' opacity='0.35'/%3E%3Crect x='344' y='104' width='4' height='4' fill='%23718096' opacity='0.25'/%3E%3Crect x='200' y='110' width='10' height='6' fill='%23475569' opacity='0.4'/%3E%3Crect x='202' y='108' width='6' height='4' fill='%2364748b' opacity='0.3'/%3E%3Crect x='40' y='118' width='2' height='2' fill='%2364748b' opacity='0.25'/%3E%3Crect x='75' y='120' width='2' height='2' fill='%2364748b' opacity='0.2'/%3E%3Crect x='110' y='118' width='2' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='150' y='120' width='2' height='2' fill='%2364748b' opacity='0.2'/%3E%3Crect x='215' y='118' width='2' height='2' fill='%23475569' opacity='0.22'/%3E%3Crect x='265' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3Crect x='310' y='118' width='2' height='2' fill='%23475569' opacity='0.22'/%3E%3Crect x='355' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3Crect x='385' y='118' width='2' height='2' fill='%23475569' opacity='0.2'/%3E%3Crect x='450' y='120' width='2' height='2' fill='%2364748b' opacity='0.18'/%3E%3C/svg%3E") repeat-x bottom center / 480px 160px;
}

/* ── Layer 3: Decorations (starfish, shells) ────────────────────────── */

.decorations { z-index: 3; }

.deco-item {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
}

/* ── Layer 4: Coral reef ────────────────────────────────────────────── */

.coral-reef {
  z-index: 4;
  transition: filter 3s ease;
}

/* Seasonal bloom: corals glow and brighten */
.ocean-scene.bloom .coral-reef {
  filter: brightness(1.3) saturate(1.2);
}

/* Bloom also intensifies light rays */
.ocean-scene.bloom .light-rays {
  opacity: 1 !important;
}

.coral {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  transform-origin: bottom center;
  animation: coral-sway 12s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes coral-sway {
  from { transform: rotate(-1deg); }
  to { transform: rotate(1deg); }
}

/* ── Layer 5: Seaweed field ─────────────────────────────────────────── */

.seaweed-field { z-index: 5; }

.seaweed-stalk {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  transform-origin: bottom center;
  animation: seaweed-sway var(--sway-duration, 10s) ease-in-out infinite alternate;
  will-change: transform;
}

/* Current-change event also speeds up coral sway */
:global(.evt-current-change) .coral {
  animation-duration: 6s;
}

@keyframes seaweed-sway {
  from { transform: skewX(calc(var(--sway-amount, 3deg) * -1)); }
  to { transform: skewX(var(--sway-amount, 3deg)); }
}
</style>
