import { Component, computed, inject } from '@angular/core';
import { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';
import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
import { AlertComponent } from '@shared/ui/alert/alert.component';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { BriefStore } from '@brief/application/brief.store';
import { LetterComposerComponent } from '@brief/ui/letter-composer/letter-composer.component';

/** Page: thin container. Injects the root store, kicks off the load, and passes its
    derived read-model to the composer. Business/UI logic lives below in pure pieces;
    this just wires signals to the organism and events back to store commands. */
@Component({
  selector: 'app-brief-page',
  imports: [PageShellComponent, SpinnerComponent, AlertComponent, ButtonComponent, LetterComposerComponent],
  styles: [`
    .brief-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--rhc-space-max-md);margin-block-end:var(--rhc-space-max-lg)}
    .save{color:var(--rhc-color-foreground-subtle);font-size:0.9em}
  `],
  template: `
    <app-page-shell
      [heading]="heading"
      [intro]="intro"
      backLink="/dashboard">
      @if (lastError(); as err) { <app-alert type="error">{{ err }}</app-alert> }

      @switch (model().tag) {
        @case ('loading') { <app-spinner /> }
        @case ('failed') {
          <app-alert type="error">{{ failedText }}</app-alert>
          <app-button variant="secondary" (click)="reload()">{{ retryText }}</app-button>
        }
        @case ('loaded') {
          <div class="brief-toolbar">
            <span class="save" role="status" aria-live="polite">{{ saveText() }}</span>
            <app-button variant="subtle" [disabled]="store.busy()" (click)="resetDemo()">{{ resetLabel }}</app-button>
          </div>
          <app-letter-composer
            [brief]="brief()!"
            [availablePassages]="availablePassages()"
            [diagnostics]="store.diagnostics()"
            [editable]="store.editable()"
            [role]="store.role"
            [canSubmit]="store.canSubmit()"
            [busy]="store.busy()"
            (edit)="store.edit($event)"
            (submit)="store.submit()"
            (approve)="store.approve()"
            (reject)="store.reject($event)"
            (send)="store.send()" />
        }
      }
    </app-page-shell>
  `,
})
export class BriefPage {
  protected store = inject(BriefStore);
  protected model = this.store.model;
  protected lastError = this.store.lastError;

  protected heading = $localize`:@@brief.page.heading:Brief opstellen`;
  protected intro = $localize`:@@brief.page.intro:Stel de brief aan de zorgverlener samen uit standaardteksten en vrije tekst.`;
  protected failedText = $localize`:@@brief.page.failed:De brief kon niet worden geladen.`;
  protected retryText = $localize`:@@brief.page.retry:Opnieuw proberen`;
  protected resetLabel = $localize`:@@brief.page.reset:Opnieuw beginnen (demo)`;

  private savingText = $localize`:@@brief.page.saving:Concept opslaan…`;
  private savedText = $localize`:@@brief.page.saved:Concept opgeslagen`;
  private saveErrorText = $localize`:@@brief.page.saveError:Opslaan mislukt`;

  /** Debounced-save state, surfaced in a polite live region. */
  protected saveText = computed(() => {
    switch (this.store.saveState()) {
      case 'saving': return this.savingText;
      case 'saved': return this.savedText;
      case 'error': return this.saveErrorText;
      default: return '';
    }
  });

  constructor() {
    void this.store.load();
  }

  protected resetDemo() {
    void this.store.resetDemo();
  }

  // Narrow the loaded state for the template.
  protected brief() {
    const s = this.model();
    return s.tag === 'loaded' ? s.brief : null;
  }
  protected availablePassages() {
    const s = this.model();
    return s.tag === 'loaded' ? s.availablePassages : [];
  }

  protected reload() {
    void this.store.load();
  }
}
