<div class="container chat-wrapper">

  <!-- ── Chat Interface ────────────────────────────────────────────────────── -->
  <div class="chat-layout">

      <!-- Sidebar info -->
      <aside class="chat-sidebar glass-panel">
        <h3 class="sidebar-title">RAG Pipeline</h3>
        <div class="pipeline-step">
          <span class="step-dot"></span>
          <span>Angular → n8n Webhook</span>
        </div>
        <div class="pipeline-step">
          <span class="step-dot"></span>
          <span>n8n → Ollama (Gemma 4)</span>
        </div>
        <div class="pipeline-step">
          <span class="step-dot"></span>
          <span>n8n → Angular Response</span>
        </div>

        <!-- Agent readiness indicator (driven by NestJS webhook probe) -->
        <div class="n8n-status-row">
          <span class="n8n-status-dot"
                [class.dot-green]="surveillance.n8nStatus() === 'ready'"
                [class.dot-yellow]="surveillance.n8nStatus() === 'checking'"
                [class.dot-red]="surveillance.n8nStatus() === 'not-ready'">
          </span>
          <span class="n8n-status-label"
                [class.state-online]="surveillance.n8nStatus() === 'ready'"
                [class.state-warn]="surveillance.n8nStatus() === 'checking'"
                [class.state-offline]="surveillance.n8nStatus() === 'not-ready'">
            Agent:
            {{ surveillance.n8nStatus() === 'ready' ? 'Ready'
             : surveillance.n8nStatus() === 'not-ready' ? 'Not Ready'
             : 'Checking...' }}
          </span>
        </div>

        <button class="btn btn-outline sidebar-clear" (click)="clearChat()">
          Clear Chat
        </button>
      </aside>

      <!-- Chat panel -->
      <div class="chat-panel glass-panel">
        <div class="chat-header">
          <span class="chat-title">PALM OIL <span class="accent-gold">INTELLIGENCE</span></span>
          <span class="chat-lego">Lego 03 · 06</span>
        </div>

        <!-- Message list -->
        <div class="message-list" #messageList>
          @for (msg of messages(); track msg.timestamp) {
            <div class="message" [class]="'message--' + msg.role">
              <div class="message-bubble">
                <p class="message-text">{{ msg.text }}</p>
                <div class="message-meta">
                  <span class="message-time">{{ formatTime(msg.timestamp) }}</span>
                  @if (msg.durationMs) {
                    <span class="message-latency">{{ msg.durationMs }}ms</span>
                  }
                </div>
              </div>
            </div>
          }

          @if (loading()) {
            <div class="message message--bot">
              <div class="message-bubble">
                <div class="thinking-dots">
                  <span></span><span></span><span></span>
                </div>
                <p class="thinking-label">Routing → Ollama synthesizing...</p>
              </div>
            </div>
          }
        </div>

        <!-- NestJS offline banner — socket proxy unavailable -->
        @if (surveillance.nestStatus() === 'OFFLINE') {
          <div class="n8n-offline-banner">
            🔴 NestJS offline — chat proxy unavailable. Restore the backend to send messages.
          </div>
        }

        <!-- Agent not ready banner — NestJS cannot reach n8n webhook -->
        @if (surveillance.nestStatus() === 'ONLINE' && surveillance.n8nStatus() === 'not-ready') {
          <div class="n8n-offline-banner">
            🟡 LLM agent not ready — NestJS cannot reach the n8n webhook. Check that n8n is running and the workflow is active.
          </div>
        }

        <!-- Input row -->
        <div class="chat-input-row">
          <textarea
            class="chat-input"
            [(ngModel)]="inputText"
            (keydown)="onEnter($event)"
            placeholder="Ask about palm oil ripeness, site data, operational reports..."
            rows="2"
            [disabled]="loading() || chatSocket.sending() || surveillance.nestStatus() === 'OFFLINE' || surveillance.n8nStatus() !== 'ready'">
          </textarea>
          <button
            class="btn btn-primary send-btn"
            (click)="sendMessage()"
            [disabled]="!inputText.trim() || loading() || chatSocket.sending() || surveillance.nestStatus() === 'OFFLINE' || surveillance.n8nStatus() !== 'ready'">
            {{ chatSocket.sending() ? '...' : 'Send' }}
          </button>
        </div>

        <div class="chat-hint">Enter to send · Shift+Enter for new line · Socket → NestJS → n8n</div>
      </div>

    </div>

</div>
