<script lang="ts">
  import { onMount } from "svelte";
  import { initializeTauriListeners } from "$lib/tauri";
  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";

  onMount(async () => {
    await initializeTauriListeners();
  });
</script>

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

  <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 />
</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>
