import { Component, OnInit, computed, inject, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { LayoutService } from '../core/services/layout.service';
import { ReminderNotificationService } from '../core/services/reminder-notification.service';
import { HorizontalNavComponent } from './horizontal-nav.component';
import { NavbarComponent } from './navbar.component';
import { SidebarComponent, SidebarVariant } from './sidebar.component';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [RouterOutlet, NavbarComponent, SidebarComponent, HorizontalNavComponent],
  template: `
    @if (layoutService.layout() === 'topnav') {
      <div class="flex min-h-screen flex-col">
        <app-navbar [showMenuToggle]="false" />
        <app-horizontal-nav />
        <main [class]="mainClass()">
          <router-outlet />
        </main>
      </div>
    } @else {
      <div class="min-h-screen lg:flex">
        <app-sidebar
          [open]="sidebarOpen()"
          [variant]="sidebarVariant()"
          (navigate)="closeSidebar()"
        />
        <div class="flex min-h-screen flex-1 flex-col">
          <app-navbar (toggleSidebar)="toggleSidebar()" />
          <main [class]="mainClass()">
            <router-outlet />
          </main>
        </div>
      </div>
    }
  `,
})
export class AppLayoutComponent implements OnInit {
  readonly layoutService = inject(LayoutService);
  private readonly reminders = inject(ReminderNotificationService);
  readonly sidebarOpen = signal(false);

  ngOnInit(): void {
    this.reminders.start();
  }

  readonly sidebarVariant = computed((): SidebarVariant => {
    const id = this.layoutService.layout();
    if (id === 'compact') return 'compact';
    if (id === 'wide') return 'wide';
    return 'default';
  });

  readonly mainClass = computed(() => {
    const base = 'mx-auto w-full flex-1 px-4 py-6 sm:px-6 sm:py-8';
    switch (this.layoutService.layout()) {
      case 'topnav':
        return `${base} max-w-7xl`;
      case 'wide':
        return `${base} max-w-6xl`;
      case 'compact':
        return `${base} max-w-6xl`;
      default:
        return `${base} max-w-6xl`;
    }
  });

  toggleSidebar(): void {
    this.sidebarOpen.update((v) => !v);
  }

  closeSidebar(): void {
    this.sidebarOpen.set(false);
  }
}
