<script setup lang="ts">
import { computed } from 'vue'
import { useAquaticState } from '../useAquaticState'

const { activeEventModifiers } = useAquaticState()

const eventClasses = computed(() => {
  const cls: Record<string, boolean> = {}
  for (const [, cssClass] of activeEventModifiers.value) {
    cls[cssClass] = true
  }
  return cls
})
</script>

<template>
  <div class="event-overlay" :class="eventClasses">
    <!-- Whale shadow -->
    <div v-if="eventClasses['evt-whale-shadow']" class="whale-shadow" />

    <!-- Bioluminescent flash -->
    <div v-if="eventClasses['evt-bioluminescent-flash']" class="bio-flash" />

    <!-- Plankton drift -->
    <div v-if="eventClasses['evt-plankton-drift']" class="plankton" />

    <!-- Fish chase -->
    <div v-if="eventClasses['evt-fish-chase']" class="fish-chase" />

    <!-- Turtle crossing -->
    <div v-if="eventClasses['evt-turtle-crossing']" class="turtle" />

    <!-- Manta ray -->
    <div v-if="eventClasses['evt-manta-ray']" class="manta" />

    <!-- Color shift (gradient overlay) -->
    <div v-if="eventClasses['evt-color-shift']" class="color-shift" />

    <!-- Aurora underwater -->
    <div v-if="eventClasses['evt-aurora-underwater']" class="aurora" />

    <!-- Mythical creature -->
    <div v-if="eventClasses['evt-mythical-creature']" class="mythical" />

    <!-- Volcanic vent -->
    <div v-if="eventClasses['evt-volcanic-vent']" class="volcanic" />

    <!-- Crystal formation -->
    <div v-if="eventClasses['evt-crystal-formation']" class="crystals" />

    <!-- Kelp forest -->
    <div v-if="eventClasses['evt-kelp-forest']" class="kelp-extra" />
  </div>
</template>

<style scoped>
.event-overlay {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
}

.event-overlay > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Whale Shadow ── */
.whale-shadow {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40' shape-rendering='crispEdges'%3E%3Cellipse cx='60' cy='20' rx='58' ry='18' fill='%23000' opacity='0.2'/%3E%3Cellipse cx='55' cy='20' rx='45' ry='14' fill='%23000' opacity='0.15'/%3E%3Crect x='100' y='8' width='16' height='6' fill='%23000' opacity='0.15'/%3E%3Crect x='100' y='26' width='16' height='6' fill='%23000' opacity='0.15'/%3E%3C/svg%3E") no-repeat / 180px 60px;
  animation: whale-cross 20s linear forwards;
  opacity: 0;
}

@keyframes whale-cross {
  0% { background-position: -200px 15%; opacity: 0; }
  5% { opacity: 0.8; }
  90% { opacity: 0.7; }
  100% { background-position: calc(100% + 200px) 20%; opacity: 0; }
}

/* ── Bioluminescent Flash ── */
.bio-flash {
  background: radial-gradient(
    ellipse 40% 50% at 50% 75%,
    rgba(74, 222, 128, 0.12) 0%,
    rgba(34, 211, 238, 0.06) 40%,
    transparent 70%
  );
  animation: bio-pulse 3s ease-in-out infinite alternate;
}

@keyframes bio-pulse {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ── Plankton Drift ── */
.plankton {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' shape-rendering='crispEdges'%3E%3Crect x='20' y='30' width='1' height='1' fill='white' opacity='0.2'/%3E%3Crect x='80' y='50' width='1' height='1' fill='white' opacity='0.15'/%3E%3Crect x='140' y='20' width='1' height='1' fill='white' opacity='0.18'/%3E%3Crect x='50' y='90' width='1' height='1' fill='%2367e8f9' opacity='0.12'/%3E%3Crect x='170' y='80' width='1' height='1' fill='white' opacity='0.16'/%3E%3Crect x='30' y='140' width='1' height='1' fill='%2367e8f9' opacity='0.14'/%3E%3Crect x='110' y='120' width='1' height='1' fill='white' opacity='0.17'/%3E%3Crect x='160' y='160' width='1' height='1' fill='white' opacity='0.13'/%3E%3Crect x='60' y='170' width='1' height='1' fill='%2367e8f9' opacity='0.15'/%3E%3Crect x='120' y='180' width='1' height='1' fill='white' opacity='0.11'/%3E%3C/svg%3E") repeat;
  animation: plankton-float 12s linear forwards;
  opacity: 0;
}

@keyframes plankton-float {
  0% { background-position: 0 0; opacity: 0; }
  10% { opacity: 0.7; }
  85% { opacity: 0.5; }
  100% { background-position: -80px -40px; opacity: 0; }
}

/* ── Fish Chase ── */
.fish-chase {
  opacity: 0;
  animation: chase-sequence 10s linear forwards;
  background:
    /* Chaser fish (faster) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='2' height='1' fill='%23ef4444' opacity='0.6'/%3E%3Crect x='0' y='4' width='2' height='1' fill='%23ef4444' opacity='0.6'/%3E%3Crect x='2' y='1' width='6' height='4' fill='%23f87171' opacity='0.55'/%3E%3Crect x='7' y='2' width='1' height='1' fill='%23000' opacity='0.5'/%3E%3C/svg%3E") no-repeat / 20px 12px,
    /* Fleeing fish (slightly ahead) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' shape-rendering='crispEdges'%3E%3Crect x='0' y='1' width='1' height='1' fill='%23fbbf24' opacity='0.55'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23fbbf24' opacity='0.55'/%3E%3Crect x='1' y='0' width='5' height='5' fill='%23f59e0b' opacity='0.5'/%3E%3Crect x='5' y='1' width='1' height='1' fill='%23000' opacity='0.45'/%3E%3C/svg%3E") no-repeat / 16px 10px;
}

@keyframes chase-sequence {
  0% { background-position: -40px 45%, -20px 44%; opacity: 0; }
  5% { opacity: 0.9; }
  85% { opacity: 0.8; }
  100% { background-position: calc(100% + 60px) 40%, calc(100% + 40px) 42%; opacity: 0; }
}

/* ── Turtle Crossing ── */
.turtle {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14' shape-rendering='crispEdges'%3E%3Crect x='6' y='3' width='8' height='8' fill='%2316a34a' opacity='0.5'/%3E%3Crect x='7' y='4' width='6' height='6' fill='%234ade80' opacity='0.4'/%3E%3Crect x='8' y='5' width='2' height='2' fill='%2322c55e' opacity='0.35'/%3E%3Crect x='11' y='6' width='2' height='2' fill='%2322c55e' opacity='0.35'/%3E%3Crect x='14' y='6' width='4' height='2' fill='%234ade80' opacity='0.45'/%3E%3Crect x='17' y='5' width='2' height='1' fill='%2316a34a' opacity='0.4'/%3E%3Crect x='18' y='6' width='1' height='1' fill='%23000' opacity='0.3'/%3E%3Crect x='2' y='4' width='4' height='2' fill='%234ade80' opacity='0.4'/%3E%3Crect x='2' y='8' width='4' height='2' fill='%234ade80' opacity='0.4'/%3E%3Crect x='10' y='2' width='3' height='2' fill='%234ade80' opacity='0.35'/%3E%3Crect x='10' y='10' width='3' height='2' fill='%234ade80' opacity='0.35'/%3E%3C/svg%3E") no-repeat / 40px 28px;
  animation: turtle-swim 25s linear forwards;
  opacity: 0;
}

@keyframes turtle-swim {
  0% { background-position: -50px 30%; opacity: 0; }
  5% { opacity: 0.8; }
  90% { opacity: 0.7; }
  100% { background-position: calc(100% + 50px) 35%; opacity: 0; }
}

/* ── Manta Ray ── */
.manta {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='12' viewBox='0 0 30 12' shape-rendering='crispEdges'%3E%3Crect x='10' y='4' width='10' height='4' fill='%23334155' opacity='0.45'/%3E%3Crect x='8' y='3' width='14' height='6' fill='%23475569' opacity='0.4'/%3E%3Crect x='4' y='2' width='6' height='3' fill='%23475569' opacity='0.35'/%3E%3Crect x='20' y='2' width='6' height='3' fill='%23475569' opacity='0.35'/%3E%3Crect x='0' y='1' width='5' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='25' y='1' width='5' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='4' y='7' width='6' height='3' fill='%23475569' opacity='0.35'/%3E%3Crect x='20' y='7' width='6' height='3' fill='%23475569' opacity='0.35'/%3E%3Crect x='0' y='9' width='5' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='25' y='9' width='5' height='2' fill='%23475569' opacity='0.25'/%3E%3Crect x='14' y='5' width='2' height='1' fill='%23000' opacity='0.3'/%3E%3C/svg%3E") no-repeat / 60px 24px;
  animation: manta-glide 18s linear forwards;
  opacity: 0;
}

@keyframes manta-glide {
  0% { background-position: calc(100% + 80px) 18%; opacity: 0; }
  5% { opacity: 0.8; }
  90% { opacity: 0.7; }
  100% { background-position: -80px 22%; opacity: 0; }
}

/* ── Color Shift ── */
.color-shift {
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.03) 0%,
    rgba(14, 165, 233, 0.05) 50%,
    rgba(6, 182, 212, 0.04) 100%
  );
  animation: color-shift-fade 30s ease-in-out forwards;
}

@keyframes color-shift-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Aurora Underwater ── */
.aurora {
  background:
    linear-gradient(0deg,
      transparent 0%,
      rgba(139, 92, 246, 0.04) 15%,
      rgba(34, 211, 238, 0.05) 25%,
      rgba(52, 211, 153, 0.04) 35%,
      transparent 50%
    );
  animation: aurora-wave 8s ease-in-out infinite alternate, aurora-fade 300s ease-in-out forwards;
}

@keyframes aurora-wave {
  from { background-position: 0 0; filter: hue-rotate(0deg); }
  to { background-position: 0 -20px; filter: hue-rotate(30deg); }
}

@keyframes aurora-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Mythical Creature (large serpent silhouette) ── */
.mythical {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='30' viewBox='0 0 160 30' shape-rendering='crispEdges'%3E%3Crect x='0' y='12' width='8' height='6' fill='%23312e81' opacity='0.2'/%3E%3Crect x='8' y='10' width='12' height='10' fill='%23312e81' opacity='0.22'/%3E%3Crect x='20' y='13' width='10' height='4' fill='%23312e81' opacity='0.2'/%3E%3Crect x='30' y='8' width='14' height='14' fill='%23312e81' opacity='0.25'/%3E%3Crect x='44' y='12' width='12' height='6' fill='%23312e81' opacity='0.2'/%3E%3Crect x='56' y='6' width='16' height='18' fill='%23312e81' opacity='0.28'/%3E%3Crect x='72' y='11' width='14' height='8' fill='%23312e81' opacity='0.22'/%3E%3Crect x='86' y='4' width='18' height='22' fill='%23312e81' opacity='0.3'/%3E%3Crect x='104' y='10' width='12' height='10' fill='%23312e81' opacity='0.25'/%3E%3Crect x='116' y='7' width='14' height='16' fill='%23312e81' opacity='0.27'/%3E%3Crect x='130' y='12' width='10' height='6' fill='%23312e81' opacity='0.2'/%3E%3Crect x='140' y='14' width='8' height='4' fill='%23312e81' opacity='0.18'/%3E%3Crect x='148' y='15' width='6' height='2' fill='%23312e81' opacity='0.15'/%3E%3Crect x='154' y='14' width='4' height='4' fill='%23312e81' opacity='0.18'/%3E%3Crect x='156' y='13' width='2' height='1' fill='%23818cf8' opacity='0.25'/%3E%3C/svg%3E") no-repeat / 240px 45px;
  animation: mythical-cross 30s linear forwards;
  opacity: 0;
}

@keyframes mythical-cross {
  0% { background-position: -260px 40%; opacity: 0; }
  5% { opacity: 0.7; }
  90% { opacity: 0.6; }
  100% { background-position: calc(100% + 260px) 35%; opacity: 0; }
}

/* ── Volcanic Vent ── */
.volcanic {
  background:
    radial-gradient(
      ellipse 30% 20% at 50% 95%,
      rgba(249, 115, 22, 0.15) 0%,
      rgba(239, 68, 68, 0.08) 40%,
      transparent 70%
    );
  animation: volcanic-glow 4s ease-in-out infinite alternate, volcanic-fade 120s ease-in-out forwards;
}

@keyframes volcanic-glow {
  from { opacity: 0.6; filter: brightness(0.9); }
  to { opacity: 1; filter: brightness(1.1); }
}

@keyframes volcanic-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Crystal Formation ── */
.crystals {
  bottom: 0;
  height: 25%;
  top: auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='60' viewBox='0 0 300 60' shape-rendering='crispEdges'%3E%3Crect x='40' y='30' width='4' height='20' fill='%2367e8f9' opacity='0.25'/%3E%3Crect x='42' y='25' width='2' height='8' fill='%23a5f3fc' opacity='0.2'/%3E%3Crect x='38' y='35' width='2' height='10' fill='%2322d3ee' opacity='0.18'/%3E%3Crect x='120' y='28' width='6' height='24' fill='%23a78bfa' opacity='0.22'/%3E%3Crect x='123' y='22' width='2' height='10' fill='%23c4b5fd' opacity='0.18'/%3E%3Crect x='118' y='32' width='2' height='14' fill='%238b5cf6' opacity='0.15'/%3E%3Crect x='200' y='32' width='4' height='18' fill='%2367e8f9' opacity='0.2'/%3E%3Crect x='202' y='28' width='2' height='6' fill='white' opacity='0.15'/%3E%3Crect x='260' y='35' width='5' height='16' fill='%23a78bfa' opacity='0.2'/%3E%3Crect x='262' y='30' width='2' height='8' fill='%23c4b5fd' opacity='0.16'/%3E%3C/svg%3E") repeat-x bottom center / 300px 60px;
  animation: crystal-appear 240s ease-in-out forwards, crystal-sparkle 2s ease-in-out infinite alternate;
}

@keyframes crystal-appear {
  0% { opacity: 0; }
  5% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes crystal-sparkle {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}

/* ── Kelp Forest (extra seaweed) ── */
.kelp-extra {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120' viewBox='0 0 300 120' shape-rendering='crispEdges'%3E%3Crect x='30' y='20' width='2' height='100' fill='%2316a34a' opacity='0.35'/%3E%3Crect x='32' y='14' width='2' height='20' fill='%2322c55e' opacity='0.3'/%3E%3Crect x='28' y='30' width='2' height='15' fill='%2315803d' opacity='0.28'/%3E%3Crect x='100' y='10' width='2' height='110' fill='%2322c55e' opacity='0.32'/%3E%3Crect x='102' y='5' width='2' height='18' fill='%234ade80' opacity='0.28'/%3E%3Crect x='98' y='25' width='2' height='12' fill='%2316a34a' opacity='0.25'/%3E%3Crect x='180' y='25' width='2' height='95' fill='%2316a34a' opacity='0.33'/%3E%3Crect x='182' y='18' width='2' height='16' fill='%2322c55e' opacity='0.28'/%3E%3Crect x='250' y='15' width='2' height='105' fill='%2322c55e' opacity='0.3'/%3E%3Crect x='252' y='8' width='2' height='14' fill='%234ade80' opacity='0.25'/%3E%3Crect x='248' y='30' width='2' height='10' fill='%2315803d' opacity='0.22'/%3E%3C/svg%3E") repeat-x bottom center / 300px 120px;
  animation: kelp-fade 150s ease-in-out forwards, kelp-sway 12s ease-in-out infinite alternate;
}

@keyframes kelp-fade {
  0% { opacity: 0; }
  5% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes kelp-sway {
  from { transform: skewX(-1deg); }
  to { transform: skewX(1deg); }
}
</style>
