<!--
  Chatbot launcher — always rendered (even when the panel is open)
  so the focus-return effect can target a stable element. Hidden
  visually behind the panel via SCSS when `isOpen()`.
-->
<button
  #launcher
  type="button"
  class="chatbot-launcher"
  [class.chatbot-launcher--hidden]="isOpen()"
  [attr.aria-label]="launcherLabel"
  [attr.aria-expanded]="isOpen()"
  [attr.aria-controls]="titleId"
  (click)="onOpen()"
  (keydown)="onLauncherKeydown($event)"
>
  <lib-icon name="message-circle" [size]="22" />
</button>

@if (isOpen()) {
<section
  class="chatbot-panel"
  [class.chatbot-panel--fullscreen]="isFullscreen()"
  role="dialog"
  aria-modal="false"
  [attr.aria-label]="titleLabel"
  [attr.aria-labelledby]="titleId"
  (keydown.escape)="onClose()"
>
  <header class="chatbot-panel__header">
    <h2 [id]="titleId" class="chatbot-panel__title">{{ titleLabel }}</h2>

    <div class="chatbot-panel__header-actions">
      <button
        type="button"
        class="chatbot-icon-button"
        [attr.aria-label]="fullscreenLabel()"
        (click)="onToggleFullscreen()"
      >
        <lib-icon [name]="isFullscreen() ? 'minimize-2' : 'maximize-2'" [size]="18" />
      </button>
      <button
        type="button"
        class="chatbot-icon-button"
        [attr.aria-label]="closeLabel"
        (click)="onClose()"
      >
        <lib-icon name="x" [size]="20" />
      </button>
    </div>
  </header>

  <div class="chatbot-panel__body">
    @if (isEmpty()) {
    <p class="chatbot-greeting">{{ greetingLabel }}</p>

    <ul class="chatbot-suggestions" role="list">
      @for (suggestion of suggestions; track suggestion.key) {
      <li>
        <button
          type="button"
          class="chatbot-suggestion"
          (click)="onSelectSuggestion(suggestion.label)"
        >
          {{ suggestion.label }}
        </button>
      </li>
      }
    </ul>
    } @else {
    <!--
          role="log" is not allowed on <ol> / <ul> per ARIA — using a
          plain <div> with <article> children so axe-linter is happy
          and the live region announces incoming tokens correctly.
        -->
    <div
      class="chatbot-messages"
      role="log"
      aria-live="polite"
      aria-relevant="additions"
      [attr.aria-busy]="isStreaming()"
    >
      @for (message of messages(); track message.id) {
      <article
        class="chatbot-message"
        [class.chatbot-message--user]="message.role === 'user'"
        [class.chatbot-message--assistant]="message.role === 'assistant'"
        [class.chatbot-message--error]="message.errorCode !== undefined"
      >
        @if (message.errorCode !== undefined && message.errorMessage !== undefined) {
        <div role="alert" class="chatbot-message__error">{{ message.errorMessage }}</div>
        } @else {
        <p class="chatbot-message__content">{{ message.content }}</p>

        @if (message.role === 'assistant' && !message.done) {
        <span class="chatbot-typing" aria-hidden="true">
          <span class="chatbot-typing__dot"></span>
          <span class="chatbot-typing__dot"></span>
          <span class="chatbot-typing__dot"></span>
        </span>
        <span class="sr-only">{{ streamingLabel }}</span>
        } @if (message.citations.length > 0) {
        <ul class="chatbot-citations" role="list">
          @for (citation of message.citations; track citation.chunkId) {
          <li>
            <button
              type="button"
              class="chatbot-citation"
              [attr.aria-label]="citationButtonLabel(citation)"
              (click)="onSelectCitation(citation)"
            >
              [{{ citation.index }}]
            </button>
          </li>
          }
        </ul>
        } }
      </article>
      }
    </div>
    }
  </div>

  <form class="chatbot-panel__form" (submit)="onSubmit($event)">
    <label class="sr-only" [attr.for]="inputId">{{ inputLabel }}</label>
    <textarea
      [id]="inputId"
      class="chatbot-panel__input"
      rows="1"
      [value]="draft()"
      (input)="onDraftInput($event)"
      (keydown.enter)="onEnterKey($event)"
      [placeholder]="placeholderLabel"
      [disabled]="isStreaming()"
    ></textarea>

    @if (isStreaming()) {
    <button
      type="button"
      class="chatbot-action chatbot-action--stop"
      [attr.aria-label]="stopLabel"
      (click)="onStop()"
    >
      <lib-icon name="square" [size]="18" />
    </button>
    } @else {
    <button
      type="submit"
      class="chatbot-action chatbot-action--send"
      [attr.aria-label]="sendLabel"
      [disabled]="!draft().trim()"
    >
      <lib-icon name="send" [size]="18" />
    </button>
    }
  </form>
</section>
} @if (selectedCitation(); as citation) {
<app-chatbot-citation-panel [citation]="citation" (closed)="onSelectCitation(null)" />
}
