<script lang="ts">
  import { testAchievementSound } from "$lib/sounds/achievement";
  import { invoke } from "@tauri-apps/api/core";

  async function testSound() {
    testAchievementSound();
  }

  async function triggerAchievement() {
    // This will trigger an achievement that hasn't been unlocked yet
    try {
      await invoke("check_achievements", {
        eventType: "message_sent",
        data: {},
      });
    } catch (error) {
      console.error("Failed to trigger achievement:", error);
    }
  }
</script>

<div class="container mx-auto p-8">
  <h1 class="text-2xl font-bold mb-6">Achievement Sound Test</h1>

  <div class="space-y-4">
    <button
      onclick={testSound}
      class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
    >
      Test Achievement Sound
    </button>

    <button
      onclick={triggerAchievement}
      class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
    >
      Trigger Test Achievement
    </button>

    <p class="text-sm text-gray-600 dark:text-gray-400 mt-4">
      Click the first button to test just the sound effect.<br />
      Click the second button to trigger a real achievement (if any are available to unlock).
    </p>
  </div>
</div>
