{# partials/ai_chat_widget.html — Floating AI Chat Widget (bottom-right on all pages) #}
{% if admin_config.ai_enabled | default(false) %}
<div x-data="aiChatWidget()" x-init="init()" x-cloak x-show="!isHidden">

  {# ── Floating toggle button ──────────────────────────────────────────── #}
  <button
    @click="toggle()"
    class="ai-chat-fab"
    :class="{ 'ai-chat-fab--active': isOpen }"
    title="AI Chat"
  >
    <span class="material-symbols-outlined" x-show="!isOpen">chat</span>
    <span class="material-symbols-outlined" x-show="isOpen">close</span>
  </button>

  {# ── Chat panel ──────────────────────────────────────────────────────── #}
  <div
    class="ai-chat-panel"
    x-show="isOpen"
    x-transition:enter="ai-chat-panel-enter"
    x-transition:enter-start="ai-chat-panel-enter-start"
    x-transition:enter-end="ai-chat-panel-enter-end"
    x-transition:leave="ai-chat-panel-leave"
    x-transition:leave-start="ai-chat-panel-leave-start"
    x-transition:leave-end="ai-chat-panel-leave-end"
    @click.outside="isOpen = false"
  >
    {# Header #}
    <div class="ai-chat-panel-header">
      <div style="display: flex; align-items: center; gap: 10px;">
        <div class="ai-chat-panel-avatar">
          <span class="material-symbols-outlined">smart_toy</span>
        </div>
        <div>
          <div class="ai-chat-panel-title">AI Assistant</div>
          <div class="ai-chat-panel-subtitle">
            <span style="width: 6px; height: 6px; background: var(--success-500); border-radius: 50%; display: inline-block; margin-right: 4px;"></span>
            Online
          </div>
        </div>
      </div>
      <div style="display: flex; align-items: center; gap: 6px;">
        <template x-if="agents.length > 1">
          <select class="ai-chat-agent-select" x-model="selectedAgent">
            <template x-for="agent in agents" :key="agent.name">
              <option :value="agent.name" x-text="agent.name"></option>
            </template>
          </select>
        </template>
        <button @click="goFullScreen()" class="ai-chat-panel-action" title="Open full page">
          <span class="material-symbols-outlined">open_in_new</span>
        </button>
        <button @click="isOpen = false" class="ai-chat-panel-action" title="Close">
          <span class="material-symbols-outlined">close</span>
        </button>
      </div>
    </div>

    {# Messages #}
    <div class="ai-chat-panel-messages" x-ref="panelMessages">
      <template x-if="messages.length === 0">
        <div class="ai-chat-panel-empty">
          <span class="material-symbols-outlined" style="font-size: 28px; color: var(--text-disabled);">auto_awesome</span>
          <p>Ask me anything about your data.</p>
        </div>
      </template>

      <template x-for="(msg, idx) in messages" :key="idx">
        <div class="ai-chat-panel-msg" :class="msg.role === 'user' ? 'ai-chat-panel-msg--user' : 'ai-chat-panel-msg--ai'">
          <div class="ai-chat-panel-msg-body" x-html="formatMessage(msg.text)"></div>
        </div>
      </template>

      <template x-if="isTyping && !streamingStarted">
        <div class="ai-chat-panel-msg ai-chat-panel-msg--ai">
          <div class="ai-chat-panel-msg-body">
            <div class="ai-chat-typing">
              <div class="ai-chat-typing-dot"></div>
              <div class="ai-chat-typing-dot"></div>
              <div class="ai-chat-typing-dot"></div>
            </div>
          </div>
        </div>
      </template>
    </div>

    {# Input #}
    <div class="ai-chat-panel-input">
      <textarea
        class="ai-chat-panel-input-field"
        x-model="userInput"
        @keydown.enter.prevent="sendMessage()"
        placeholder="Ask AI..."
        rows="1"
        x-ref="panelInput"
        :disabled="isTyping"
      ></textarea>
      <button
        class="ai-chat-panel-send"
        @click="sendMessage()"
        :disabled="!userInput.trim() || isTyping"
      >
        <span class="material-symbols-outlined">arrow_upward</span>
      </button>
    </div>
  </div>
</div>

<style>
  .ai-chat-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: white;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    transition: all var(--duration-base) var(--easing-spring);
  }

  .ai-chat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  }

  .ai-chat-fab:active {
    transform: scale(0.95);
  }

  .ai-chat-fab--active {
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
  }

  .ai-chat-fab--active:hover {
    box-shadow: var(--shadow-lg);
  }

  .ai-chat-fab .material-symbols-outlined {
    font-size: 24px;
    pointer-events: none;
  }

  .ai-chat-panel {
    position: fixed;
    bottom: 92px;
    right: 24px;
    width: 380px;
    height: 520px;
    background: var(--surface-raised);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    z-index: 8999;
    overflow: hidden;
  }

  [data-theme="dark"] .ai-chat-panel {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }

  .ai-chat-panel-enter { transition: all 0.25s var(--easing-spring); }
  .ai-chat-panel-enter-start { opacity: 0; transform: translateY(16px) scale(0.95); }
  .ai-chat-panel-enter-end { opacity: 1; transform: translateY(0) scale(1); }
  .ai-chat-panel-leave { transition: all 0.15s var(--easing-in); }
  .ai-chat-panel-leave-start { opacity: 1; transform: translateY(0) scale(1); }
  .ai-chat-panel-leave-end { opacity: 0; transform: translateY(8px) scale(0.97); }

  .ai-chat-panel-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--surface-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--surface-raised);
  }

  .ai-chat-panel-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }

  .ai-chat-panel-avatar .material-symbols-outlined {
    font-size: 18px;
    pointer-events: none;
  }

  .ai-chat-panel-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
  }

  .ai-chat-panel-subtitle {
    font-size: var(--text-2xs);
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
  }

  .ai-chat-agent-select {
    padding: 3px 8px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-family: var(--font-body);
    cursor: pointer;
    outline: none;
    max-width: 130px;
    height: 28px;
  }

  .ai-chat-agent-select:focus {
    border-color: var(--primary-500);
  }

  .ai-chat-panel-action {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast);
  }

  .ai-chat-panel-action:hover {
    background: var(--surface-inset);
    color: var(--text-primary);
  }

  .ai-chat-panel-action .material-symbols-outlined {
    font-size: 18px;
    pointer-events: none;
  }

  .ai-chat-panel-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .ai-chat-panel-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-disabled);
  }

  .ai-chat-panel-empty p {
    font-size: var(--text-xs);
    margin: 0;
    color: var(--text-disabled);
  }

  .ai-chat-panel-msg {
    display: flex;
    max-width: 90%;
    animation: chatMsgIn 0.2s var(--easing-out);
  }

  .ai-chat-panel-msg--user {
    align-self: flex-end;
  }

  .ai-chat-panel-msg--ai {
    align-self: flex-start;
  }

  .ai-chat-panel-msg-body {
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-primary);
  }

  .ai-chat-panel-msg--ai .ai-chat-panel-msg-body {
    background: var(--surface-inset);
    border: 1px solid var(--surface-border);
    border-top-left-radius: var(--radius-sm);
  }

  .ai-chat-panel-msg--user .ai-chat-panel-msg-body {
    background: var(--primary-600);
    color: white;
    border-top-right-radius: var(--radius-sm);
  }

  .ai-chat-panel-msg-body p { margin: 0 0 6px 0; }
  .ai-chat-panel-msg-body p:last-child { margin-bottom: 0; }
  .ai-chat-panel-msg-body code {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.06);
  }

  [data-theme="dark"] .ai-chat-panel-msg-body code {
    background: rgba(255,255,255,0.1);
  }

  .ai-chat-panel-msg--user .ai-chat-panel-msg-body code {
    background: rgba(255,255,255,0.2);
    color: white;
  }

  .ai-chat-panel-input {
    padding: 12px 16px;
    border-top: 1px solid var(--surface-border);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    background: var(--surface-raised);
  }

  .ai-chat-panel-input-field {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    background: var(--surface-base);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 100px;
    line-height: 1.5;
    transition: border-color var(--duration-fast) var(--easing-out);
  }

  .ai-chat-panel-input-field::placeholder {
    color: var(--text-disabled);
  }

  .ai-chat-panel-input-field:focus {
    border-color: var(--primary-500);
    box-shadow: var(--shadow-focus);
  }

  .ai-chat-panel-send {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--primary-600);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--duration-fast) var(--easing-out);
  }

  .ai-chat-panel-send:hover {
    background: var(--primary-700);
  }

  .ai-chat-panel-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ai-chat-panel-send .material-symbols-outlined {
    font-size: 18px;
    pointer-events: none;
  }

  .ai-chat-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
  }

  .ai-chat-typing-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-disabled);
    animation: typingBounce 1.2s infinite;
  }

  .ai-chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
  .ai-chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-3px); opacity: 1; }
  }

  @media (max-width: 480px) {
    .ai-chat-panel {
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 0;
    }

    .ai-chat-fab {
      bottom: 16px;
      right: 16px;
    }
  }
</style>

<script>
function aiChatWidget() {
  return {
    isOpen: false,
    messages: [],
    userInput: '',
    isTyping: false,
    streamingStarted: false,
    conversationId: null,
    selectedAgent: 'default',
    agents: [],

    get isHidden() {
      const path = window.location.pathname;
      return path.includes('/ai/chat') || path.endsWith('/login');
    },

    async init() {
      await this.loadAgents();
      this.$nextTick(() => {
        if (this.$refs.panelInput) {
          this.$refs.panelInput.addEventListener('input', () => {
            this.$refs.panelInput.style.height = 'auto';
            this.$refs.panelInput.style.height = Math.min(this.$refs.panelInput.scrollHeight, 100) + 'px';
          });
        }
      });
    },

    async loadAgents() {
      try {
        const resp = await fetch(window.__ADMIN_PATH__ + '/ai/agents/api');
        this.agents = await resp.json();
        if (this.agents.length && !this.agents.find(a => a.name === this.selectedAgent)) {
          this.selectedAgent = this.agents[0].name;
        }
      } catch (e) {
        this.agents = [{ name: 'default', model: 'unknown', tools: 0 }];
      }
    },

    toggle() {
      this.isOpen = !this.isOpen;
      if (this.isOpen) {
        this.$nextTick(() => {
          this.$refs.panelInput?.focus();
          this.scrollToBottom();
        });
      }
    },

    goFullScreen() {
      window.location.href = window.__ADMIN_PATH__ + '/ai/chat';
    },

    async sendMessage() {
      const text = this.userInput.trim();
      if (!text || this.isTyping) return;

      this.addMessage('user', text);
      this.userInput = '';
      if (this.$refs.panelInput) {
        this.$refs.panelInput.style.height = 'auto';
      }
      this.isTyping = true;
      this.streamingStarted = false;
      this.scrollToBottom();

      if (!this.conversationId) {
        this.conversationId = (crypto.randomUUID && crypto.randomUUID()) || ('conv-' + Date.now());
      }

      try {
        const msgId = 'msg-' + Date.now();
        const body = {
          id: this.conversationId,
          trigger: 'submit-message',
          messages: [{ id: msgId, role: 'user', parts: [{ type: 'text', text }] }],
          agent: this.selectedAgent,
          page_url: window.location.pathname
        };

        const resp = await fetch(window.__ADMIN_PATH__ + '/ai/chat/stream', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'text/event-stream' },
          body: JSON.stringify(body)
        });

        if (!resp.ok || !resp.body) {
          this.isTyping = false;
          const err = await resp.json().catch(() => null);
          this.addMessage('ai', 'Error: ' + ((err && err.error) || resp.statusText));
          return;
        }

        const reply = { role: 'ai', text: '' };
        this.messages.push(reply);
        const activeReply = this.messages[this.messages.length - 1];
        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';

        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          const chunks = buffer.split('\n');
          buffer = chunks.pop();
          for (const chunk of chunks) {
            this.processStreamChunk(chunk, activeReply);
          }
        }
        if (buffer.trim()) this.processStreamChunk(buffer, activeReply);
        this.isTyping = false;
        this.streamingStarted = false;
      } catch (e) {
        this.isTyping = false;
        this.streamingStarted = false;
        this.addMessage('ai', 'Request failed: ' + e.message);
      }

      this.scrollToBottom();
    },

    processStreamChunk(chunk, reply) {
      const lines = chunk.split('\n');
      for (let line of lines) {
        line = line.trim();
        if (!line || line === '[DONE]') continue;
        if (line.startsWith('data: ')) {
          line = line.slice(6).trim();
        }

        try {
          if (line.startsWith('{')) {
            const data = JSON.parse(line);
            if (data.type === 'text-delta') {
              if (!this.streamingStarted) this.streamingStarted = true;
              reply.text += data.delta || '';
              this.scrollToBottom();
            } else if (data.type === 'error') {
              if (!this.streamingStarted) this.streamingStarted = true;
              reply.text += '\n\n**Error:** ' + (data.errorText || data.error || 'Unknown error');
              this.scrollToBottom();
            }
          } else if (line.startsWith('0:')) {
            const delta = JSON.parse(line.slice(2));
            if (!this.streamingStarted) this.streamingStarted = true;
            reply.text += delta || '';
            this.scrollToBottom();
          }
        } catch (e) {}
      }
    },

    addMessage(role, text) {
      this.messages.push({ role, text });
    },

    formatMessage(text) {
      if (!text) return '';

      const placeholders = [];
      let html = text.replace(/<function=(\w+)\s*(\{[^}]*\})?\s*>\s*<\/function>/g, (match, toolName, argsJson) => {
        let argsHtml = '';
        if (argsJson) {
          try {
            const args = JSON.parse(argsJson);
            const argsStr = Object.entries(args)
              .map(([k, v]) => `<span class="ai-tool-arg-key">${k}</span>: <span class="ai-tool-arg-val">${JSON.stringify(v)}</span>`)
              .join(', ');
            argsHtml = `<div class="ai-tool-args">${argsStr}</div>`;
          } catch (e) {
            argsHtml = `<div class="ai-tool-args"><code>${argsJson}</code></div>`;
          }
        }
        const ph = `__TOOL_PH_${placeholders.length}__`;
        placeholders.push(`<div class="ai-tool-call"><span class="ai-tool-icon">⚡</span><span class="ai-tool-name">${toolName}</span>${argsHtml}</div>`);
        return ph;
      });

      html = html
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/`([^`]+)`/g, '<code>$1</code>')
        .replace(/\n/g, '<br>');

      placeholders.forEach((tc, i) => {
        html = html.replace(`__TOOL_PH_${i}__`, tc);
      });

      return html;
    },

    scrollToBottom() {
      this.$nextTick(() => {
        const el = this.$refs.panelMessages;
        if (el) el.scrollTop = el.scrollHeight;
      });
    }
  };
}
</script>
{% endif %}