{% extends "base.html" %}
{% block title %}KI Context Tool{% endblock %}

{% block content %}
<div class="flex h-screen overflow-hidden">

  <!-- ══════════════════════════════════════════════
       LEFT SIDEBAR
  ══════════════════════════════════════════════ -->
  <aside id="sidebar" class="w-72 min-w-[220px] bg-copilot-sidebar border-r border-copilot-border flex flex-col select-none shrink-0">

    <!-- Logo / User -->
    <div class="flex items-center justify-between px-4 py-3 border-b border-copilot-border">
      <div class="flex items-center gap-2">
        <svg class="w-6 h-6 text-copilot-accent shrink-0" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 14h-2V8h2zm0-8h-2V8h2z"/>
        </svg>
        <span class="font-semibold text-sm text-copilot-text truncate">KI Context Tool</span>
      </div>
      <a href="{{ url_for('auth.logout') }}" title="Logout"
         class="text-copilot-muted hover:text-copilot-danger transition p-1 rounded">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1"/>
        </svg>
      </a>
    </div>

    <!-- New Chat -->
    <div class="px-3 py-2 border-b border-copilot-border">
      <button id="btn-new-chat"
        class="w-full flex items-center gap-2 px-3 py-2 rounded-lg bg-copilot-accent text-copilot-bg text-sm font-semibold hover:bg-copilot-accentHover transition">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
          <path stroke-linecap="round" d="M12 4v16m8-8H4"/>
        </svg>
        New Chat
      </button>
    </div>

    <!-- Chat history -->
    <div class="px-3 py-2 border-b border-copilot-border">
      <p class="text-xs font-semibold uppercase tracking-wider text-copilot-muted mb-2">Chat History</p>
      <ul id="session-list" class="space-y-0.5 max-h-36 overflow-y-auto"></ul>
    </div>

    <!-- Documents section -->
    <div class="px-3 py-2 border-b border-copilot-border flex-1 overflow-y-auto">
      <div class="flex items-center justify-between mb-2">
        <p class="text-xs font-semibold uppercase tracking-wider text-copilot-muted">Documents</p>
        <label class="cursor-pointer text-copilot-accent hover:text-copilot-accentHover transition" title="Upload file">
          <input id="file-input" type="file" accept=".pdf,.txt,.docx,.md" class="hidden" multiple />
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 4v12m-4-4l4-4 4 4"/>
          </svg>
        </label>
      </div>
      <ul id="doc-list" class="space-y-0.5"></ul>
      <p id="doc-uploading" class="hidden text-xs text-copilot-muted mt-1 animate-pulse">Uploading & indexing…</p>
    </div>

    <!-- URLs section -->
    <div class="px-3 py-2 border-t border-copilot-border">
      <p class="text-xs font-semibold uppercase tracking-wider text-copilot-muted mb-2">Web Sources</p>
      <form id="url-form" class="flex gap-1 mb-2">
        <input id="url-input" type="url" placeholder="https://…"
          class="flex-1 bg-copilot-bg border border-copilot-border rounded px-2 py-1 text-xs text-copilot-text focus:outline-none focus:border-copilot-accent" />
        <button type="submit"
          class="bg-copilot-accent text-copilot-bg text-xs font-semibold px-2 py-1 rounded hover:bg-copilot-accentHover transition">
          Add
        </button>
      </form>
      <ul id="url-list" class="space-y-0.5 max-h-32 overflow-y-auto"></ul>
    </div>

  </aside>

  <!-- ══════════════════════════════════════════════
       MAIN AREA
  ══════════════════════════════════════════════ -->
  <main class="flex-1 flex flex-col min-w-0 bg-copilot-bg">

    <!-- Topbar -->
    <header class="h-10 border-b border-copilot-border flex items-center justify-between px-4 shrink-0">
      <span id="chat-title" class="text-sm text-copilot-muted truncate">Select or start a chat</span>
      <span class="text-xs text-copilot-muted" id="context-badge"></span>
    </header>

    <!-- Messages -->
    <div id="messages" class="flex-1 overflow-y-auto px-6 py-4 space-y-4"></div>

    <!-- Empty state -->
    <div id="empty-state" class="flex-1 flex flex-col items-center justify-center text-center pointer-events-none absolute inset-0 mt-10">
      <svg class="w-16 h-16 text-copilot-border mb-4" fill="currentColor" viewBox="0 0 24 24">
        <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
      </svg>
      <p class="text-copilot-muted text-sm">Upload documents or add URLs,<br>then start a new chat.</p>
    </div>

    <!-- Input area -->
    <div class="border-t border-copilot-border px-4 py-3 bg-copilot-sidebar shrink-0">
      <!-- Active context chips -->
      <div id="context-chips" class="flex flex-wrap gap-1 mb-2"></div>

      <form id="chat-form" class="flex gap-2 items-end">
        <textarea id="chat-input" rows="1" placeholder="Ask a question about your documents…"
          class="flex-1 bg-copilot-bg border border-copilot-border rounded-xl px-4 py-2.5 text-sm text-copilot-text
                 focus:outline-none focus:border-copilot-accent resize-none overflow-hidden transition
                 max-h-40 leading-relaxed"
          style="height:42px"></textarea>
        <button id="send-btn" type="submit"
          class="bg-copilot-accent hover:bg-copilot-accentHover text-copilot-bg rounded-xl px-4 py-2.5 font-semibold text-sm
                 transition disabled:opacity-40 disabled:cursor-not-allowed shrink-0">
          Send
        </button>
      </form>
    </div>

  </main>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/main.js') }}" type="module"></script>
{% endblock %}