<!-- #region AgentChat.Page [C:4] [TYPE Component] [SEMANTICS agent,chat,page,fullscreen] -->
<!-- @ingroup AgentChat -->
<!-- @BRIEF Full-page agent chat at /agent route — fixed positioning below TopNavbar, responsive to sidebar width. -->
<!-- @RELATION BINDS_TO -> AgentChat.Model -->
<!-- @RELATION DEPENDS_ON -> AgentChat.Component -->
<!-- @RELATION DEPENDS_ON -> AgentChat.ConversationList -->
<script lang="ts">
  import { onMount } from "svelte";
  import { AgentChatModel } from "$lib/models/AgentChatModel.svelte.ts";
  import { Client } from "@gradio/client";
  import AgentChat from "$lib/components/agent/AgentChat.svelte";
  import ConversationList from "$lib/components/assistant/ConversationList.svelte";
  import { sidebarStore } from "$lib/stores/sidebar.svelte.js";

  let model = $state<AgentChatModel | null>(null);
  let sidebarOpen = $state(true);

  let sidebarExpanded = $derived(sidebarStore.value?.isExpanded ?? true);

  onMount(() => {
    const m = new AgentChatModel();
    model = m;
    m.connectionState = "disconnected";
    Client.connect("http://localhost:5173/api/agent/gradio").then((client) => {
      Object.assign(m, { _client: client });
      m.connectionState = "connected";
      m.loadConversations(true);
    }).catch(() => {
      m.connectionState = "disconnected";
    });
  });
</script>

{#if model}
  <!-- Fixed full-height chat below TopNavbar, avoids breadcrumbs/PROD-context/footer flow -->
  <div
    class="fixed top-16 right-0 bottom-0 z-10 flex"
    class:left-60={sidebarExpanded}
    class:left-16={!sidebarExpanded}
  >
    <!-- Sidebar group: conversation list + toggle button (desktop) -->
    <div class="relative hidden md:flex shrink-0">
      {#if sidebarOpen}
        <ConversationList
          conversations={model.conversations}
          currentConversationId={model.currentConversationId}
          isLoading={model.isLoadingHistory}
          hasNext={model.conversationsHasNext}
          onselect={(id) => {
            model!.currentConversationId = id;
            model!.loadHistory(id);
          }}
          ondelete={(id) => model!.deleteConversation(id)}
          onloadmore={() => model!.loadConversations(false)}
          onsearch={(q: string) => model!.searchConversations(q)}
        />
      {/if}

      <!-- Toggle button — at right edge of sidebar group -->
      <button
        class="absolute -right-3 top-4 z-10 flex items-center justify-center w-6 h-12 rounded-r-lg bg-surface-card border border-border text-text-muted hover:text-text shadow-sm transition"
        class:border-l-0={sidebarOpen}
        class:rounded-l-lg={!sidebarOpen}
        onclick={() => sidebarOpen = !sidebarOpen}
        aria-label={sidebarOpen ? "Закрыть список диалогов" : "Открыть список диалогов"}
      >
        {#if sidebarOpen}
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
        {:else}
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
          </svg>
        {/if}
      </button>
    </div>

    <!-- Mobile sidebar — overlay -->
    {#if sidebarOpen}
      <div class="md:hidden fixed inset-0 z-50 flex">
        <div class="w-64 bg-surface-card border-r border-border shadow-xl">
          <div class="flex items-center justify-between p-3 border-b border-border">
            <span class="text-sm font-semibold text-text">Диалоги</span>
            <button
              class="rounded-lg p-1 text-text-muted hover:bg-surface-muted hover:text-text"
              onclick={() => sidebarOpen = false}
            >
              <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="M6 18L18 6M6 6l12 12"/>
              </svg>
            </button>
          </div>
          <ConversationList
            conversations={model.conversations}
            currentConversationId={model.currentConversationId}
            isLoading={model.isLoadingHistory}
            hasNext={model.conversationsHasNext}
            onselect={(id) => {
              model!.currentConversationId = id;
              model!.loadHistory(id);
              sidebarOpen = false;
            }}
            ondelete={(id) => model!.deleteConversation(id)}
            onloadmore={() => model!.loadConversations(false)}
            onsearch={(q: string) => model!.searchConversations(q)}
          />
        </div>
        <div class="flex-1 bg-black/30" onclick={() => sidebarOpen = false}></div>
      </div>
    {/if}

    <!-- Chat area — fills remaining space -->
    <div class="flex-1 min-w-0">
      <AgentChat bind:model={model!} />
    </div>
  </div>
{:else}
  <div class="flex-1 flex items-center justify-center min-h-[300px]">
    <div class="flex items-center gap-3 text-text-muted">
      <svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
      </svg>
      <span class="text-sm">Подключение к агенту...</span>
    </div>
  </div>
{/if}
<!-- #endregion AgentChat.Page -->
