<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { initializeTauriListeners, cleanupTauriListeners } from "$lib/tauri";
  import { configStore, applyTheme } from "$lib/stores/config";
  import "$lib/notifications/testNotifications";
  import Terminal from "$lib/components/Terminal.svelte";
  import InputBar from "$lib/components/InputBar.svelte";
  import StatusBar from "$lib/components/StatusBar.svelte";
  import AnimeGirl from "$lib/components/AnimeGirl.svelte";
  import PermissionModal from "$lib/components/PermissionModal.svelte";
  import ConfigSidebar from "$lib/components/ConfigSidebar.svelte";
  import AchievementNotification from "$lib/components/AchievementNotification.svelte";
  import AchievementsPanel from "$lib/components/AchievementsPanel.svelte";

  let initialized = false;
  let achievementPanelOpen = $state(false);

  onMount(async () => {
    if (!initialized) {
      initialized = true;
      await initializeTauriListeners();
      await configStore.loadConfig();

      // Apply saved theme on startup
      const config = configStore.getConfig();
      applyTheme(config.theme);
    }
  });

  onDestroy(() => {
    if (initialized) {
      cleanupTauriListeners();
      initialized = false;
    }
  });
</script>

<div class="app-container h-screen w-screen flex flex-col bg-[var(--bg-primary)] overflow-hidden">
  <StatusBar onToggleAchievements={() => (achievementPanelOpen = !achievementPanelOpen)} />

  <main class="flex-1 flex overflow-hidden">
    <!-- Left panel: Character display -->
    <div
      class="character-panel w-1/3 flex flex-col items-center justify-center border-r border-[var(--border-color)] bg-[var(--bg-secondary)]/50"
    >
      <AnimeGirl />
    </div>

    <!-- Right panel: Terminal and input -->
    <div class="terminal-panel flex-1 flex flex-col">
      <Terminal />
      <InputBar />
    </div>
  </main>

  <PermissionModal />
  <ConfigSidebar />
  <AchievementNotification />
  <AchievementsPanel
    bind:isOpen={achievementPanelOpen}
    onClose={() => (achievementPanelOpen = false)}
  />
</div>

<style>
  .app-container {
    font-family:
      "Inter",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
  }

  .character-panel {
    min-width: 320px;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  }
</style>
