<script lang="ts">
  import { onDestroy, onMount } from "svelte";
  import { getCurrentWindow } from "@tauri-apps/api/window";
  import { CircleHelp, Minus, Settings, X } from "@lucide/svelte";
  import iconUrl from "../../src-tauri/icons/icon.png";

  export let onOpenHelp: () => void = () => {};
  export let onOpenSettings: () => void = () => {};
  export let language: "en" | "de" = "en";

  let win: ReturnType<typeof getCurrentWindow> | null = null;
  let isMaximized = false;
  let unlisten: (() => void) | undefined;

  onMount(async () => {
    try {
      win = getCurrentWindow();
      isMaximized = await win.isMaximized();
      unlisten = await win.onResized(async () => {
        isMaximized = await win?.isMaximized() ?? false;
      });
    } catch {
      win = null;
    }
  });

  onDestroy(() => {
    unlisten?.();
  });

  function minimizeWindow() {
    void win?.minimize();
  }

  function toggleMaximizeWindow() {
    void win?.toggleMaximize();
  }

  function closeWindow() {
    void win?.close();
  }
</script>

<header class="titlebar" data-tauri-drag-region>
  <!-- Brand -->
  <div class="titlebar-brand" data-tauri-drag-region>
    <span class="titlebar-brand-icon" data-tauri-drag-region>
      <img src={iconUrl} alt="" data-tauri-drag-region />
    </span>
    <span data-tauri-drag-region>Gitty</span>
  </div>

  <div class="titlebar-drag" data-tauri-drag-region aria-hidden="true"></div>

  <!-- Right: app-global actions + window controls -->
  <div class="titlebar-globals">
    <button
      class="tb-action"
      onclick={onOpenHelp}
      title={language === "de" ? "Hilfe (Ctrl+/)" : "Help (Ctrl+/)"}
      aria-label={language === "de" ? "Hilfe öffnen" : "Open help"}
    >
      <CircleHelp size={14} aria-hidden="true" />
    </button>
    <button
      class="tb-action"
      onclick={onOpenSettings}
      title={language === "de" ? "Einstellungen" : "Settings"}
      aria-label={language === "de" ? "Einstellungen" : "Settings"}
    >
      <Settings size={14} aria-hidden="true" />
    </button>
  </div>

  <div class="titlebar-controls">
    <button class="tb-btn" onclick={minimizeWindow} title="Minimize" aria-label="Minimize">
      <Minus size={12} aria-hidden="true" />
    </button>
    <button
      class="tb-btn"
      onclick={toggleMaximizeWindow}
      title={isMaximized ? "Restore" : "Maximize"}
      aria-label={isMaximized ? "Restore" : "Maximize"}
    >
      {#if isMaximized}
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <rect x="3" y="1" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.5" />
          <path d="M1 3v7a1 1 0 0 0 1 1h7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      {:else}
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
          <rect x="1" y="1" width="10" height="10" rx="1" stroke="currentColor" stroke-width="1.5" />
        </svg>
      {/if}
    </button>
    <button class="tb-btn close" onclick={closeWindow} title="Close" aria-label="Close">
      <X size={12} aria-hidden="true" />
    </button>
  </div>
</header>
