<script lang="ts">
  interface Props {
    onToggleAchievements?: () => void;
    onToggleCompact?: () => void;
  }

  const { onToggleAchievements = () => {}, onToggleCompact = () => {} }: Props = $props();

  import { invoke } from "@tauri-apps/api/core";
  import { getVersion } from "@tauri-apps/api/app";
  import { open } from "@tauri-apps/plugin-dialog";
  import { openUrl } from "@tauri-apps/plugin-opener";
  import { get } from "svelte/store";
  import { claudeStore } from "$lib/stores/claude";
  import { configStore, type HikariConfig, isStreamerMode } from "$lib/stores/config";
  import { editorStore } from "$lib/stores/editor";
  import type { ConnectionStatus } from "$lib/types/messages";
  import { onMount } from "svelte";
  import StatsDisplay from "./StatsDisplay.svelte";
  import AboutPanel from "./AboutPanel.svelte";
  import HelpPanel from "./HelpPanel.svelte";
  import KeyboardShortcutsModal from "./KeyboardShortcutsModal.svelte";
  import { achievementProgress } from "$lib/stores/achievements";
  import { runningAgentCount } from "$lib/stores/agents";
  import SessionHistoryPanel from "./SessionHistoryPanel.svelte";
  import TodoPanel from "./TodoPanel.svelte";
  import GitPanel from "./GitPanel.svelte";
  import ProfilePanel from "./ProfilePanel.svelte";
  import AgentMonitorPanel from "./AgentMonitorPanel.svelte";
  import CastPanel from "./CastPanel.svelte";
  import PluginManagementPanel from "./PluginManagementPanel.svelte";
  import McpManagementPanel from "./McpManagementPanel.svelte";
  import ProjectContextPanel from "./ProjectContextPanel.svelte";
  import { injectTextStore, PROJECT_CONTEXT_SYSTEM_ADDENDUM } from "$lib/stores/projectContext";
  import { conversationsStore } from "$lib/stores/conversations";
  import {
    generateContextInjection,
    createSummary,
    sanitizeForJson,
  } from "$lib/utils/conversationUtils";
  import { updateDiscordRpc, setSkipNextGreeting } from "$lib/tauri";
  import { debugConsoleStore } from "$lib/stores/debugConsole";
  import WorkspaceTrustModal from "./WorkspaceTrustModal.svelte";
  import type { WorkspaceHookInfo } from "$lib/types/messages";

  const DISCORD_URL = "https://chat.nhcarrigan.com";
  const DONATE_URL = "https://donate.nhcarrigan.com";

  let connectionStatus: ConnectionStatus = $state("disconnected");
  let workingDirectory = $state("");
  let selectedDirectory = $state("/home/naomi");
  let isConnecting = $state(false);
  let grantedToolsList: string[] = $state([]);
  let appVersion = $state("");
  let showStats = $state(false);
  let showAbout = $state(false);
  let showHelp = $state(false);
  let showKeyboardShortcuts = $state(false);
  let showSessionHistory = $state(false);
  let showTodoPanel = $state(false);
  let showGitPanel = $state(false);
  let showProfile = $state(false);
  let showAgentMonitor = $state(false);
  let showCastPanel = $state(false);
  let showPluginPanel = $state(false);
  let showMcpPanel = $state(false);
  let showProjectContext = $state(false);
  let isSummarising = $state(false);
  let showWorkspaceTrust = $state(false);
  let pendingHookInfo: WorkspaceHookInfo | null = $state(null);
  const progress = $derived($achievementProgress);
  const activeAgentCount = $derived($runningAgentCount);
  let currentConfig: HikariConfig = $state({
    model: null,
    api_key: null,
    custom_instructions: null,
    mcp_servers_json: null,
    auto_granted_tools: [],
    theme: "dark",
    greeting_enabled: true,
    greeting_custom_prompt: null,
    notifications_enabled: true,
    notification_volume: 0.5,
    always_on_top: false,
    update_checks_enabled: true,
    character_panel_width: null,
    font_size: 14,
    streamer_mode: false,
    streamer_hide_paths: false,
    compact_mode: false,
    profile_name: null,
    profile_avatar_path: null,
    profile_bio: null,
    custom_theme_colors: {
      bg_primary: null,
      bg_secondary: null,
      bg_terminal: null,
      accent_primary: null,
      accent_secondary: null,
      text_primary: null,
      text_secondary: null,
      border_color: null,
    },
    budget_enabled: false,
    session_token_budget: null,
    session_cost_budget: null,
    budget_action: "warn",
    budget_warning_threshold: 0.8,
    discord_rpc_enabled: true,
    show_thinking_blocks: true,
    use_worktree: false,
    disable_1m_context: false,
    max_output_tokens: null,
    trusted_workspaces: [],
    background_image_path: null,
    background_image_opacity: 0.3,
    custom_font_path: null,
    custom_font_family: null,
    custom_ui_font_path: null,
    custom_ui_font_family: null,
  });

  let streamerModeActive = $state(false);
  isStreamerMode.subscribe((value) => {
    streamerModeActive = value;
  });

  let editorVisible = $state(false);
  editorStore.isEditorVisible.subscribe((value) => {
    editorVisible = value;
  });

  function toggleEditor() {
    editorStore.toggleEditor();
  }

  onMount(async () => {
    appVersion = await getVersion();
  });

  claudeStore.connectionStatus.subscribe((status) => {
    connectionStatus = status;
    isConnecting = status === "connecting";
  });

  claudeStore.currentWorkingDirectory.subscribe((dir) => {
    workingDirectory = dir;
  });

  claudeStore.grantedTools.subscribe((tools) => {
    grantedToolsList = Array.from(tools);
  });

  configStore.config.subscribe((config) => {
    currentConfig = config;
  });

  async function handleBrowse() {
    try {
      const selected = await open({
        directory: true,
        multiple: false,
        defaultPath: selectedDirectory,
        title: "Select Working Directory",
      });
      if (selected && typeof selected === "string") {
        selectedDirectory = selected;
      }
    } catch (error) {
      console.error("Failed to open directory picker:", error);
    }
  }

  async function doConnect(targetDir: string) {
    // Combine session-granted tools with config auto-granted tools
    const allAllowedTools = [
      ...new Set([...grantedToolsList, ...currentConfig.auto_granted_tools]),
    ];

    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("start_claude", {
        conversationId,
        options: {
          working_dir: targetDir,
          model: currentConfig.model || null,
          api_key: currentConfig.api_key || null,
          custom_instructions:
            (currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
          mcp_servers_json: currentConfig.mcp_servers_json || null,
          allowed_tools: allAllowedTools,
          use_worktree: currentConfig.use_worktree ?? false,
          disable_1m_context: currentConfig.disable_1m_context ?? false,
          max_output_tokens: currentConfig.max_output_tokens ?? null,
        },
      });

      // Update Discord RPC when a new session starts
      const activeConversation = get(conversationsStore.activeConversation);
      if (activeConversation) {
        await updateDiscordRpc(
          activeConversation.name,
          currentConfig.model || "claude",
          activeConversation.startedAt
        );
      }
    } catch (error) {
      console.error("Failed to start Claude:", error);
      claudeStore.addLine("error", `Connection failed: ${error}`);
    }
  }

  async function handleConnect() {
    if (isConnecting || connectionStatus === "connected") return;

    const targetDir = selectedDirectory || "/home/naomi";

    if (currentConfig.trusted_workspaces?.includes(targetDir)) {
      await doConnect(targetDir);
      return;
    }

    try {
      const hookInfo = await invoke<WorkspaceHookInfo>("check_workspace_hooks", {
        workingDir: targetDir,
      });

      if (hookInfo.has_concerns) {
        pendingHookInfo = hookInfo;
        showWorkspaceTrust = true;
        return;
      }
    } catch (error) {
      // Fail open: if we can't check hooks, proceed with connection
      console.error("Failed to check workspace hooks:", error);
    }

    await doConnect(targetDir);
  }

  async function handleTrustAndConnect() {
    showWorkspaceTrust = false;
    const targetDir = selectedDirectory || "/home/naomi";
    pendingHookInfo = null;
    const alreadyTrusted = currentConfig.trusted_workspaces?.includes(targetDir) ?? false;
    if (!alreadyTrusted) {
      await configStore.updateConfig({
        trusted_workspaces: [...(currentConfig.trusted_workspaces ?? []), targetDir],
      });
    }
    doConnect(targetDir);
  }

  function handleCancelConnect() {
    showWorkspaceTrust = false;
    pendingHookInfo = null;
  }

  async function handleDisconnect() {
    try {
      const conversationId = get(claudeStore.activeConversationId);
      if (!conversationId) {
        throw new Error("No active conversation");
      }
      await invoke("stop_claude", { conversationId });

      // Clear granted permissions when user explicitly disconnects
      claudeStore.revokeAllTools();
    } catch (error) {
      console.error("Failed to stop Claude:", error);
    }
  }

  function getStatusColor(): string {
    switch (connectionStatus) {
      case "connected":
        return "bg-green-500";
      case "connecting":
        return "bg-yellow-500 animate-pulse";
      case "error":
        return "bg-red-500";
      default:
        return "bg-gray-500";
    }
  }

  function getStatusText(): string {
    switch (connectionStatus) {
      case "connected":
        return "Connected";
      case "connecting":
        return "Connecting...";
      case "error":
        return "Error";
      default:
        return "Disconnected";
    }
  }

  function toggleAchievements() {
    onToggleAchievements();
  }

  function handleInjectContext(content: string): void {
    injectTextStore.set(content);
  }

  async function handleCompactConversation() {
    const activeId = get(conversationsStore.activeConversationId);
    if (!activeId) return;

    isSummarising = true;

    try {
      const conversationContent = conversationsStore.getConversationForSummary(activeId);
      const messageCount =
        get(conversationsStore.activeConversation)?.terminalLines.filter(
          (l) => l.type === "user" || l.type === "assistant"
        ).length || 0;
      const tokenEstimate = conversationsStore.estimateTokenCount(activeId);

      // Create a summary from the conversation content (truncate if too long)
      // Apply sanitization early to handle any problematic escape sequences
      const sanitizedContent = sanitizeForJson(conversationContent);
      const summaryContent =
        sanitizedContent.length > 4000
          ? `${sanitizedContent.slice(0, 4000)}\n\n[Truncated for length - original had ${messageCount} messages]`
          : sanitizedContent;

      // Step 1: Disconnect from Claude to reset context
      // Prevent stats reset on reconnection
      setSkipNextGreeting(true);

      if (connectionStatus === "connected") {
        await invoke("stop_claude", { conversationId: activeId });
      }

      // Step 2: Clear messages and store summary
      conversationsStore.compactWithSummary(activeId, summaryContent, messageCount, tokenEstimate);

      // Step 3: Reconnect to Claude with fresh context
      const allAllowedTools = [
        ...(currentConfig.auto_granted_tools || []),
        ...Array.from(get(claudeStore.grantedTools)),
      ];

      await invoke("start_claude", {
        conversationId: activeId,
        options: {
          working_dir: workingDirectory || selectedDirectory,
          model: currentConfig.model || null,
          api_key: currentConfig.api_key || null,
          custom_instructions:
            (currentConfig.custom_instructions ?? "") + PROJECT_CONTEXT_SYSTEM_ADDENDUM,
          mcp_servers_json: currentConfig.mcp_servers_json || null,
          allowed_tools: allAllowedTools,
          use_worktree: currentConfig.use_worktree ?? false,
          disable_1m_context: currentConfig.disable_1m_context ?? false,
          max_output_tokens: currentConfig.max_output_tokens ?? null,
        },
      });

      // Step 4: Send the context summary to Claude as the first message
      const contextPrompt = generateContextInjection(
        createSummary(summaryContent, messageCount, tokenEstimate)
      );

      await invoke("send_prompt", {
        conversationId: activeId,
        message: contextPrompt,
      });

      claudeStore.addLine(
        "system",
        "Conversation compacted. Context from previous session has been provided to Claude."
      );
    } catch (error) {
      console.error("Failed to compact conversation:", error);
      claudeStore.addLine("error", `Failed to compact conversation: ${error}`);
    } finally {
      isSummarising = false;
    }
  }

  async function handleStartFreshWithContext() {
    const activeId = get(conversationsStore.activeConversationId);
    if (!activeId) return;

    const conversationContent = conversationsStore.getConversationForSummary(activeId);
    const messageCount =
      get(conversationsStore.activeConversation)?.terminalLines.filter(
        (l) => l.type === "user" || l.type === "assistant"
      ).length || 0;
    const tokenEstimate = conversationsStore.estimateTokenCount(activeId);

    const summary = createSummary(
      `This is a continuation of a previous conversation. Here's what was discussed:\n\n${conversationContent.slice(0, 4000)}${conversationContent.length > 4000 ? "\n\n[Truncated for length...]" : ""}`,
      messageCount,
      tokenEstimate
    );

    const newConvId = conversationsStore.createConversation("Fresh Start");

    conversationsStore.setSummary(newConvId, summary);

    // Context injection is generated but the actual injection happens via the summary
    generateContextInjection(summary);
    claudeStore.addLine("system", "Started fresh conversation with context from previous session.");
    claudeStore.addLine(
      "system",
      `Previous session had ${messageCount} messages (~${tokenEstimate.toLocaleString()} tokens).`
    );
  }
</script>

<div
  class="status-bar flex items-center justify-between px-4 py-2 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
>
  <div class="flex items-center gap-4">
    <div class="flex items-center gap-2">
      <div class="w-2.5 h-2.5 rounded-full {getStatusColor()}"></div>
      <span class="text-sm text-gray-300">{getStatusText()}</span>
    </div>

    {#if connectionStatus === "connected"}
      {#if workingDirectory}
        <div class="text-sm text-gray-500">
          <span class="text-gray-600">cwd:</span>
          {workingDirectory}
        </div>
      {/if}
    {:else}
      <div class="flex items-center gap-2">
        <span class="text-sm text-gray-600">cwd:</span>
        <input
          type="text"
          bind:value={selectedDirectory}
          disabled={isConnecting}
          class="px-2 py-1 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-md text-gray-300 w-64 focus:outline-none focus:border-[var(--accent-primary)] disabled:opacity-50"
          placeholder="/path/to/project"
        />
        <button
          onclick={handleBrowse}
          disabled={isConnecting}
          class="px-2 py-1 text-sm bg-[var(--bg-primary)] hover:bg-[var(--bg-hover)] border border-[var(--border-color)] text-gray-400 rounded-md transition-colors disabled:opacity-50"
          title="Browse..."
        >
          ...
        </button>
      </div>
    {/if}
  </div>

  <div class="flex items-center gap-2 flex-wrap min-w-0">
    {#if streamerModeActive}
      <div
        class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shrink-0"
        title="Streamer mode active (Ctrl+Shift+S to toggle)"
      ></div>
    {/if}
    <button
      onclick={() => (showProfile = true)}
      class="p-1 text-gray-500 icon-trans-hover shrink-0"
      title="Profile"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
        />
      </svg>
    </button>
    <button
      onclick={onToggleCompact}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Compact Mode (Ctrl+Shift+M)"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
        />
      </svg>
    </button>
    <button
      onclick={toggleAchievements}
      class="p-1 text-gray-500 icon-trans-hover relative"
      title="Achievements"
    >
      <span class="text-lg">🏆</span>
      {#if progress.unlocked > 0}
        <span
          class="absolute -top-1 -right-1 bg-[var(--accent-primary)] text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px]"
        >
          {progress.unlocked}
        </span>
      {/if}
    </button>
    <button
      onclick={() => (showSessionHistory = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Session History"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </button>
    <button
      onclick={() => (showTodoPanel = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Todo List"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
        />
      </svg>
    </button>
    <button
      onclick={() => (showGitPanel = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Git Panel"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
        />
      </svg>
    </button>
    <button
      onclick={() => (showPluginPanel = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Plugin Management"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
        />
      </svg>
    </button>
    <button
      onclick={() => (showMcpPanel = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="MCP Server Management"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"
        />
      </svg>
    </button>
    <button
      onclick={() => (showProjectContext = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Project Context"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
        />
      </svg>
    </button>
    <button
      onclick={toggleEditor}
      disabled={connectionStatus !== "connected"}
      class="p-1 text-gray-500 icon-trans-hover {editorVisible
        ? 'text-[var(--trans-pink)]'
        : ''} disabled:opacity-40 disabled:cursor-not-allowed"
      title={connectionStatus === "connected"
        ? "File Editor (Ctrl+E)"
        : "Connect to enable file editor"}
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
        />
      </svg>
    </button>
    <button
      onclick={() => (showCastPanel = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Meet the Team"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
        />
      </svg>
    </button>
    <button
      onclick={() => (showAgentMonitor = !showAgentMonitor)}
      class="p-1 text-gray-500 icon-trans-hover relative {showAgentMonitor
        ? 'text-[var(--trans-pink)]'
        : ''}"
      title="Agent Monitor"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"
        />
      </svg>
      {#if activeAgentCount > 0}
        <span
          class="absolute -top-1 -right-1 bg-blue-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center text-[10px] animate-pulse"
        >
          {activeAgentCount}
        </span>
      {/if}
    </button>
    <button
      onclick={() => (showStats = !showStats)}
      class="p-1 text-gray-500 icon-trans-hover {showStats ? 'text-[var(--trans-pink)]' : ''}"
      title="Usage Stats"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zM13 19v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2h2a2 2 0 002-2zM21 19V8a2 2 0 00-2-2h-2a2 2 0 00-2 2v11a2 2 0 002 2h2a2 2 0 002-2z"
        />
      </svg>
    </button>
    <button
      onclick={() => debugConsoleStore.toggle()}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Debug Console (Ctrl+`)"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
        />
      </svg>
    </button>
    <button
      onclick={configStore.openSidebar}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Settings"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
        />
      </svg>
    </button>
    <button
      onclick={() => openUrl(DONATE_URL)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Support our work"
    >
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
        <path
          d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
        />
      </svg>
    </button>
    <button
      onclick={() => (showAbout = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="About Hikari Desktop"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </button>
    <button
      onclick={() => (showKeyboardShortcuts = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Keyboard Shortcuts"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 3C10.22 3 8.47 3.23 6.86 3.68A2 2 0 005 5.57V18.43a2 2 0 001.86 1.89C8.47 20.77 10.22 21 12 21s3.53-.23 5.14-.68A2 2 0 0019 18.43V5.57a2 2 0 00-1.86-1.89C15.53 3.23 13.78 3 12 3z"
        />
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h8"
        />
      </svg>
    </button>
    <button
      onclick={() => (showHelp = true)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Help"
    >
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </button>
    <button
      onclick={() => openUrl(DISCORD_URL)}
      class="p-1 text-gray-500 icon-trans-hover"
      title="Join our Discord"
    >
      <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
        <path
          d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
        />
      </svg>
    </button>
    {#if appVersion}
      <span class="text-xs text-gray-600">v{appVersion}</span>
    {/if}

    {#if showStats}
      <div class="absolute top-full right-0 mt-2 mr-4 z-50">
        <StatsDisplay
          onRequestSummary={handleCompactConversation}
          onStartFreshWithContext={handleStartFreshWithContext}
          {isSummarising}
        />
      </div>
    {/if}
    {#if connectionStatus === "connected"}
      <button
        onclick={handleDisconnect}
        class="px-3 py-1 text-sm bg-red-500/20 hover:bg-red-500/30 text-red-400 rounded-md transition-colors"
      >
        Disconnect
      </button>
    {:else}
      <button
        onclick={handleConnect}
        disabled={isConnecting}
        class="px-3 py-1 text-sm bg-green-500/20 hover:bg-green-500/30 text-green-400 rounded-md transition-colors disabled:opacity-50"
      >
        {isConnecting ? "Connecting..." : "Connect"}
      </button>
    {/if}
  </div>
</div>

{#if showStats}
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div class="fixed inset-0 z-40" onclick={() => (showStats = false)}></div>
  <div class="fixed top-14 right-4 z-50 max-h-[calc(100vh-4rem)] overflow-y-auto">
    <StatsDisplay
      onRequestSummary={handleCompactConversation}
      onStartFreshWithContext={handleStartFreshWithContext}
      {isSummarising}
    />
  </div>
{/if}

{#if showAbout}
  <AboutPanel onClose={() => (showAbout = false)} />
{/if}

{#if showHelp}
  <HelpPanel onClose={() => (showHelp = false)} />
{/if}

{#if showKeyboardShortcuts}
  <KeyboardShortcutsModal onClose={() => (showKeyboardShortcuts = false)} />
{/if}

{#if showSessionHistory}
  <SessionHistoryPanel onClose={() => (showSessionHistory = false)} />
{/if}

{#if showTodoPanel}
  <TodoPanel onClose={() => (showTodoPanel = false)} />
{/if}

{#if showGitPanel}
  <GitPanel isOpen={showGitPanel} onClose={() => (showGitPanel = false)} />
{/if}

{#if showProfile}
  <ProfilePanel onClose={() => (showProfile = false)} />
{/if}

{#if showAgentMonitor}
  <AgentMonitorPanel isOpen={showAgentMonitor} onClose={() => (showAgentMonitor = false)} />
{/if}

{#if showCastPanel}
  <CastPanel onClose={() => (showCastPanel = false)} />
{/if}

{#if showPluginPanel}
  <PluginManagementPanel onClose={() => (showPluginPanel = false)} />
{/if}

{#if showMcpPanel}
  <McpManagementPanel onClose={() => (showMcpPanel = false)} />
{/if}

{#if showProjectContext}
  <ProjectContextPanel
    onClose={() => (showProjectContext = false)}
    onInject={handleInjectContext}
    workingDirectory={workingDirectory || selectedDirectory}
  />
{/if}

{#if showWorkspaceTrust && pendingHookInfo}
  <WorkspaceTrustModal
    hookInfo={pendingHookInfo}
    onTrust={handleTrustAndConnect}
    onCancel={handleCancelConnect}
  />
{/if}

<style>
  /* Responsive status bar styling */
  .status-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Make all icon buttons shrink but not grow */
  .status-bar button {
    flex-shrink: 0;
  }

  /* Hide version text on very small screens */
  @media (max-width: 640px) {
    .status-bar button span:last-of-type {
      display: none;
    }
  }

  /* Stack left and right sections on very small screens */
  @media (max-width: 768px) {
    .status-bar {
      flex-direction: column;
      gap: 0.75rem;
    }
  }
</style>
