<template>
  <Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
  </Scene>
</template>

<script setup lang="ts">
import { Scene } from 'phavuer'
import { useGameStore } from '@/stores/gameStore'
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'

const gameStore = useGameStore()
const zoneEditorStore = useZoneEditorStore()

const sceneRef = ref<Phaser.Scene | null>(null)

// Effect-related refs
const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)

// Effect parameters
const dayNightDuration = 300000 // 5 minutes in milliseconds
const maxDarkness = 0.7

const preloadScene = async (scene: Phaser.Scene) => {
  scene.load.image('raindrop', 'assets/raindrop.png')
  scene.load.image('fog', 'assets/fog.png')
}

const createScene = async (scene: Phaser.Scene) => {
  sceneRef.value = scene
  createDayNightCycle(scene)
  createRainEffect(scene)
  createFogEffect(scene)
}

const updateScene = (scene: Phaser.Scene, time: number) => {
  updateDayNightCycle(time)
  updateFogEffect()
}

const createDayNightCycle = (scene: Phaser.Scene) => {
  dayNightCycle.value = scene.add.graphics()
  dayNightCycle.value.setDepth(1000)
}

const updateDayNightCycle = (time: number) => {
  if (!dayNightCycle.value) return

  const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness
  dayNightCycle.value.clear()
  dayNightCycle.value.fillStyle(0x000000, darkness)
  dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
}

const createRainEffect = (scene: Phaser.Scene) => {
  rainEmitter.value = scene.add.particles(0, 0, 'raindrop', {
    x: { min: 0, max: window.innerWidth },
    y: -50,
    quantity: 5,
    lifespan: 2000,
    speedY: { min: 300, max: 500 },
    scale: { start: 0.005, end: 0.005 },
    alpha: { start: 0.5, end: 0 },
    blendMode: 'ADD'
  })
  rainEmitter.value.setDepth(900)
  toggleRain(true) // Start with rain off
}

const toggleRain = (isRaining: boolean) => {
  if (rainEmitter.value) {
    rainEmitter.value.setVisible(isRaining)
  }
}

const createFogEffect = (scene: Phaser.Scene) => {
  fogSprite.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
  fogSprite.value.setScale(2)
  fogSprite.value.setAlpha(0) // yeetdasasdasd
  fogSprite.value.setDepth(950) // yeetdasasdasd
}

const updateFogEffect = () => {
  if (fogSprite.value) {
    // Example: Oscillate fog opacity
    const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
    fogSprite.value.setAlpha(fogOpacity)
  }
}

// Expose methods to control effects
const controlEffects = {
  toggleRain,
  setFogDensity: (density: number) => {
    if (fogSprite.value) {
      fogSprite.value.setAlpha(density)
    }
  }
}

// Make control methods available to parent components
defineExpose(controlEffects)

onBeforeUnmount(() => {
  if (sceneRef.value) sceneRef.value.scene.remove('effects')
})
</script>