import { Component, isDevMode } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SiteHeaderComponent } from '@shared/layout/site-header/site-header.component';
import { SiteFooterComponent } from '@shared/layout/site-footer/site-footer.component';
import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.component';

/** Template: persistent app chrome. Header + footer mount once; only the routed
    content inside <router-outlet> changes (and cross-fades — see styles.scss). */
@Component({
  selector: 'app-shell',
  imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent, DebugStateComponent],
  styles: [
    `
      :host {
        display: block;
      }
      .skip {
        position: absolute;
        left: var(--app-skip-link-offset);
        z-index: 1030;
      }
      .skip:focus {
        left: var(--rhc-space-max-md);
        top: var(--rhc-space-max-md);
        background: var(--rhc-color-wit);
        padding: var(--rhc-space-max-sm) var(--rhc-space-max-md);
        border-radius: var(--rhc-border-radius-sm);
      }
      .layout {
        display: flex;
        flex-direction: column;
        min-block-size: 100vh;
      }
      .main {
        flex: 1;
        inline-size: 100%;
        box-sizing: border-box;
      }
      .content {
        max-inline-size: var(--app-content-max);
        margin-inline: auto;
        padding: var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);
        box-sizing: border-box;
      }
    `,
  ],
  template: `
    <a href="#main" class="skip" i18n="@@shell.skipLink">Naar de inhoud</a>
    <div class="layout">
      <app-site-header />
      <main id="main" class="main">
        <div class="content">
          <router-outlet />
        </div>
      </main>
      <app-site-footer />
    </div>
    @if (isDev) {
      <app-debug-state />
    }
  `,
})
export class ShellComponent {
  protected readonly isDev = isDevMode();
}
