import { Component, computed, input, output } from '@angular/core';
import { HeadingComponent } from '@shared/ui/heading/heading.component';
import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { PlaceholderOption } from '@shared/ui/rich-text-editor/rich-text-editor.component';
import { Brief, LibraryPassage } from '@brief/domain/brief';
import { OrgTemplate } from '@brief/domain/org-template';
import { Diagnostic } from '@brief/domain/placeholders';
import { BriefMsg } from '@brief/domain/brief.machine';
import { LetterCanvasComponent } from '@brief/ui/letter-canvas/letter-canvas.component';
import { DiagnosticsPanelComponent } from '@brief/ui/diagnostics-panel/diagnostics-panel.component';
import { RejectionCommentsComponent } from '@brief/ui/rejection-comments/rejection-comments.component';

/** Organism: the whole letter flow — status badge, the letter canvas (editable in
    place for the drafter, read-only for approver/locked), the diagnostics panel, and
    the action bar appropriate to status × permission. Presentational: emits edit +
    transition intents; the canEdit/canApprove/canReject/canSend inputs are
    server-computed decision flags (PRD-0002 phase P1) — this component never derives them. */
@Component({
  selector: 'app-letter-composer',
  imports: [
    HeadingComponent,
    StatusBadgeComponent,
    ButtonComponent,
    AlertComponent,
    LetterCanvasComponent,
    DiagnosticsPanelComponent,
    RejectionCommentsComponent,
  ],
  styles: [
    `
      :host {
        display: block;
      }
      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--rhc-space-max-md);
        flex-wrap: wrap;
        margin-block-end: var(--rhc-space-max-lg);
      }
      .panel {
        margin-block: var(--rhc-space-max-xl);
      }
      .bar {
        display: flex;
        flex-wrap: wrap;
        gap: var(--rhc-space-max-md);
        align-items: center;
        margin-block-start: var(--rhc-space-max-xl);
      }
    `,
  ],
  template: `
    <div class="head">
      <app-heading [level]="2">{{ title() }}</app-heading>
      <app-status-badge [label]="statusLabel()" [color]="statusColor()" />
    </div>

    @if (status() === 'rejected') {
      <app-rejection-comments mode="show" [comments]="rejectComments()" />
    }

    <app-letter-canvas
      [brief]="brief()"
      [orgTemplate]="orgTemplate()"
      [editableRegions]="canEdit() ? 'content' : 'none'"
      [availablePassages]="availablePassages()"
      [placeholders]="menu()"
      [diagnostics]="diagnostics()"
      (edit)="edit.emit($event)"
    />

    <div class="panel">
      <app-diagnostics-panel [diagnostics]="diagnostics()" (locate)="locate.emit($event)" />
    </div>

    <div class="bar">
      @switch (status()) {
        @case ('draft') {
          @if (canEdit()) {
            <app-button
              variant="primary"
              [disabled]="!canSubmit() || busy()"
              (click)="submit.emit()"
              >{{ submitLabel() }}</app-button
            >
            @if (!canSubmit()) {
              <span class="app-text-subtle">{{ submitHint() }}</span>
            }
          }
        }
        @case ('rejected') {
          @if (canEdit()) {
            <app-button
              variant="primary"
              [disabled]="!canSubmit() || busy()"
              (click)="submit.emit()"
              >{{ resubmitLabel() }}</app-button
            >
          }
        }
        @case ('submitted') {
          @if (canApprove() || canReject()) {
            <app-button variant="primary" [disabled]="busy()" (click)="approve.emit()">{{
              approveLabel()
            }}</app-button>
            <app-rejection-comments mode="entry" [busy]="busy()" (reject)="reject.emit($event)" />
          } @else {
            <app-alert type="info">{{ awaitingText() }}</app-alert>
          }
        }
        @case ('approved') {
          @if (canSend()) {
            <app-button variant="primary" [disabled]="busy()" (click)="send.emit()">{{
              sendLabel()
            }}</app-button>
          }
        }
        @case ('sent') {
          <app-alert type="ok">{{ sentText() }}</app-alert>
        }
      }
    </div>
  `,
})
export class LetterComposerComponent {
  brief = input.required<Brief>();
  orgTemplate = input.required<OrgTemplate>();
  availablePassages = input<readonly LibraryPassage[]>([]);
  diagnostics = input<readonly Diagnostic[]>([]);
  canEdit = input(false);
  canApprove = input(false);
  canReject = input(false);
  canSend = input(false);
  canSubmit = input(false);
  busy = input(false);

  edit = output<BriefMsg>();
  submit = output<void>();
  approve = output<void>();
  reject = output<string>();
  send = output<void>();
  locate = output<Diagnostic>();

  title = input($localize`:@@brief.title:Brief aan de zorgverlener`);
  submitLabel = input($localize`:@@brief.submit:Indienen ter beoordeling`);
  resubmitLabel = input($localize`:@@brief.resubmit:Opnieuw indienen`);
  submitHint = input(
    $localize`:@@brief.submitHint:Vul eerst alle verplichte secties en los fouten op.`,
  );
  approveLabel = input($localize`:@@brief.approve:Goedkeuren`);
  sendLabel = input($localize`:@@brief.send:Versturen`);
  awaitingText = input(
    $localize`:@@brief.awaiting:De brief wacht op beoordeling door een collega.`,
  );
  sentText = input($localize`:@@brief.sent:De brief is verzonden.`);

  protected status = computed(() => this.brief().status.tag);
  protected rejectComments = computed(() => {
    const s = this.brief().status;
    return s.tag === 'rejected' ? s.comments : '';
  });

  // The insert menu offers only valid, fillable, non-deprecated fields — inserting an
  // unknown/retired key is structurally impossible.
  protected menu = computed<PlaceholderOption[]>(() =>
    this.brief()
      .placeholders.filter((p) => p.fillable !== false && !p.deprecated)
      .map((p) => ({ key: p.key, label: p.label, autoResolvable: p.autoResolvable })),
  );

  protected statusLabel = computed(() => {
    switch (this.status()) {
      case 'draft':
        return $localize`:@@brief.status.draft:Concept`;
      case 'submitted':
        return $localize`:@@brief.status.submitted:Ter beoordeling`;
      case 'approved':
        return $localize`:@@brief.status.approved:Goedgekeurd`;
      case 'rejected':
        return $localize`:@@brief.status.rejected:Afgewezen`;
      case 'sent':
        return $localize`:@@brief.status.sent:Verzonden`;
    }
  });

  protected statusColor = computed(() => {
    switch (this.status()) {
      case 'draft':
        return 'var(--rhc-color-border-strong)';
      case 'submitted':
        return 'var(--rhc-color-oranje-500)';
      case 'approved':
      case 'sent':
        return 'var(--rhc-color-groen-500)';
      case 'rejected':
        return 'var(--rhc-color-rood-500)';
    }
  });
}
