import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
import { Router } from '@angular/router';
import { DynamicPageLayoutComponent } from '../../layouts/containers/dynamic-page-layout.component';
import { PageRenderModel } from '../../dynamic-renderer/page-renderer/page-renderer.model';
import { WebsiteRuntimeFacade } from '../../facades/website/website-runtime.facade';
import { TranslatePipe } from '../../i18n/translate.pipe';

@Component({
  selector: 'app-platform-home',
  standalone: true,
  imports: [DynamicPageLayoutComponent, TranslatePipe],
  template: `
    @if (loading()) {
      <section class="platform-loading section">
        <div class="page-container">{{ 'platform.loadingPage' | translate }}</div>
      </section>
    } @else if (model()) {
      <app-dynamic-page-layout [model]="model()" />
    } @else {
      <section class="platform-empty section">
        <div class="page-container">{{ 'platform.emptyConfig' | translate }}</div>
      </section>
    }
  `,
  styles: [
    `
      .platform-loading, .platform-empty { padding: 2rem; color: var(--text-secondary, #667a77); }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlatformHomeComponent {
  readonly model = signal<PageRenderModel | null>(null);
  readonly loading = signal(true);
  private readonly router = inject(Router);

  constructor(private readonly websiteRuntime: WebsiteRuntimeFacade) {
    this.websiteRuntime.getPageRenderModelForUrl(this.router.url).subscribe({
      next: (model) => {
        this.model.set(model);
        this.loading.set(false);
      },
      error: () => {
        this.model.set(null);
        this.loading.set(false);
      }
    });
  }
}
