import {
  ChangeDetectionStrategy,
  Component,
  ViewEncapsulation,
  input,
  output,
} from '@angular/core';
import { Icon } from 'shared-ui';
import type { CitationRef } from './chatbot.types';

/**
 * Side-panel rendering of a single RAG citation's metadata. Split
 * out of `ChatbotHost` so the host component stays under the
 * `anyComponentStyle` budget per [ADR-0017](../../../../../../docs/decisions/0017-performance-budgets-lighthouse-ci.md);
 * the panel has a self-contained ARIA dialog role and an explicit
 * close action that the host wires to `service.selectCitation(null)`.
 */
@Component({
  selector: 'app-chatbot-citation-panel',
  imports: [Icon],
  templateUrl: './chatbot-citation-panel.html',
  styleUrl: './chatbot-citation-panel.scss',
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChatbotCitationPanel {
  readonly citation = input.required<CitationRef>();
  // `closed` rather than `close` — `close` collides with the standard
  // DOM event name and trips `@angular-eslint/no-output-native`.
  readonly closed = output<void>();

  protected readonly titleLabel = $localize`:@@chatbot.citation.panel.title:Citation details`;
  protected readonly closeLabel = $localize`:@@chatbot.citation.panel.close:Close citation details`;
  protected readonly sourceLabel = $localize`:@@chatbot.citation.source:Source`;
  protected readonly scoreLabel = $localize`:@@chatbot.citation.score:Score`;

  protected onClose(): void {
    this.closed.emit();
  }
}
