import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { RouterLink } from '@angular/router';
import { SessionStore } from '../../core/auth/session.store';
import { MenuService } from '../../core/menu/menu.service';

@Component({
  selector: 'sbo-home-page',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [RouterLink],
  template: `
    <h1>Bienvenido, {{ session.user()?.firstName }}</h1>
    <p class="sub">{{ session.company() }}</p>
    @for (m of menu.modules(); track m.id) {
      <section>
        <h2>{{ m.label }}</h2>
        <div class="links">
          @for (i of m.items; track i.path) {
            <a [routerLink]="i.path">{{ i.label }}</a>
          }
        </div>
      </section>
    }
  `,
  styles: `
    h1 { margin: 0; font-size: 18px; font-weight: 600; }
    .sub { margin: 2px 0 16px; color: var(--quiet); }
    h2 { margin: 12px 0 6px; font-size: 13px; color: var(--quiet); text-transform: uppercase; letter-spacing: .4px; }
    .links { display: flex; flex-wrap: wrap; gap: 6px; }
    a { padding: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
    a:hover { background: var(--row-sel); border-color: var(--focus); }
  `,
})
export class HomePage {
  protected readonly session = inject(SessionStore);
  protected readonly menu = inject(MenuService);
}