import { Component } from '@angular/core';
import { HeadingComponent } from '@shared/ui/atoms/heading/heading.component';
import { HerregistratieWizardComponent } from '@herregistratie/ui/herregistratie-wizard/herregistratie-wizard.component';
import { ConceptCardComponent } from './concept-card.component';
import { SNIPPETS } from './snippets.generated';
import { highlightTs } from './highlight-ts';

/** Section 4: form as a state machine, shown as a live state diagram. One tagged union
    drives the UI — the marked state below is the wizard's current one. Composition-only. */
@Component({
  selector: 'app-concepts-form-machine-section',
  imports: [HeadingComponent, HerregistratieWizardComponent, ConceptCardComponent],
  styles: [
    `
      .machine {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0 0 1rem;
      }
      .node {
        padding: 0.4rem 0.8rem;
        border-radius: 999px;
        border: 1px solid var(--rhc-color-grijs-300);
        font-size: 0.82rem;
        color: var(--rhc-color-grijs-700);
        transition: all 0.15s;
      }
      .node.on {
        background: var(--rhc-color-hemelblauw-100);
        border-color: var(--rhc-color-hemelblauw-500);
        color: var(--rhc-color-hemelblauw-700);
        font-weight: 700;
        /* teaching motion: the active state pops as the wizard transitions (the .node
           transition above animates it; reduced-motion is handled globally). */
        transform: scale(1.06);
      }
    `,
  ],
  template: `
    <section class="app-section">
      <app-heading [level]="2">4 · Form als state machine</app-heading>
      <p class="app-lead">
        Eén tagged union stuurt de UI. Speel met de wizard — de gemarkeerde toestand is de huidige.
      </p>
      <div class="app-cols">
        <app-concept-card variant="bad" tag="Fout — losse booleans" [code]="code['machineBad']">
          <p class="app-note">
            Niets verhindert"submitting" mét validatiefouten of een successcherm met errors.
          </p>
        </app-concept-card>
        <app-concept-card
          variant="good"
          tag="Goed — één tagged union"
          [code]="code['machine']"
          [src]="src['machine']"
        >
          <div class="machine">
            @for (n of ['Editing', 'Submitting', 'Submitted', 'Failed']; track n) {
              <span class="node" [class.on]="w.state().tag === n">{{ n }}</span>
            }
          </div>
          <app-herregistratie-wizard #w />
        </app-concept-card>
      </div>
    </section>
  `,
})
export class FormMachineSection {
  // Deliberately-wrong illustration (no real source to link — it shows the anti-pattern).
  private readonly machineBad = `submitting = signal(false);
submitted  = signal(false);
errors     = signal<...>({});
// submitting === true && errors.size > 0 ? 🤷`;

  /** Highlighted HTML per snippet: `machine` comes from SNIPPETS (extracted from source by
      gen:snippets — it can't drift), `machineBad` is authored above. */
  protected readonly code: Record<string, string> = {
    machineBad: highlightTs(this.machineBad),
    machine: highlightTs(SNIPPETS['machine']),
  };

  /** The real file the linked snippet is extracted from (shown as a caption). */
  protected readonly src: Record<string, string> = {
    machine: 'registratie/domain/change-request.machine.ts',
  };
}