<!-- Floating Action Button -->
<button class="ai-fab" (click)="toggle()" [class.active]="isOpen()">
  @if (isOpen()) {
    <i class="pi pi-times text-xl"></i>
  } @else {
    <i class="pi pi-sparkles text-xl"></i>
  }
</button>

<!-- Chat Panel -->
@if (isOpen()) {
  <div class="ai-panel">
    <!-- Header -->
    <div class="ai-header">
      <div class="ai-header-title">
        <i class="pi pi-sparkles"></i>
        <span>{{ 'AI_ASSISTANT.TITLE' | translate }}</span>
      </div>
      <button class="ai-header-close" (click)="toggle()">
        <i class="pi pi-times"></i>
      </button>
    </div>

    <!-- Messages -->
    <div class="ai-messages" #messagesContainer>
      @for (msg of messages(); track msg.timestamp) {
        <div class="ai-msg" [class.msg-user]="msg.role === 'user'" [class.msg-ai]="msg.role === 'assistant'">
          @if (msg.role === 'assistant') {
            <div class="msg-avatar">
              <i class="pi pi-sparkles"></i>
            </div>
          }
          <div class="msg-bubble">
            @for (part of parseContent(msg.content); track $index) {
              @if (part.type === 'link') {
                <a class="ai-route-link" (click)="navigateTo(part.route!)">
                  <i class="pi pi-arrow-circle-left"></i>
                  {{ part.text }}
                </a>
              } @else {
                <span [innerText]="part.text"></span>
              }
            }
          </div>
        </div>
      }

      <!-- Typing indicator -->
      @if (isLoading()) {
        <div class="ai-msg msg-ai">
          <div class="msg-avatar">
            <i class="pi pi-sparkles"></i>
          </div>
          <div class="msg-bubble typing-indicator">
            <span></span><span></span><span></span>
          </div>
        </div>
      }
    </div>

    <!-- Input -->
    <div class="ai-input-area">
      <input
        #inputField
        type="text"
        class="ai-input"
        [placeholder]="'AI_ASSISTANT.PLACEHOLDER' | translate"
        [(ngModel)]="inputText"
        (keydown)="onKeydown($event)"
        [disabled]="isLoading()"
      />
      <button
        class="ai-send-btn"
        (click)="send()"
        [disabled]="!inputText().trim() || isLoading()"
      >
        <i class="pi pi-send"></i>
      </button>
    </div>

    <!-- Footer -->
    <div class="ai-footer">
      {{ 'AI_ASSISTANT.POWERED_BY' | translate }}
      @if (lastProvider() === 'cache') {
        <span class="cache-badge">⚡ cache</span>
      }
    </div>
  </div>
}
