import { Component, OnInit, inject, signal } from '@angular/core';
import { BreakpointObserver } from '@angular/cdk/layout';
import { toSignal } from '@angular/core/rxjs-interop';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { map } from 'rxjs';
import { AuthService } from './auth/auth.service';
import { AssistantChatComponent } from './assistant/assistant-chat.component';
import { OfflineSyncService } from './offline/offline-sync.service';
import { OnlineStatusService } from './offline/online-status.service';
import { OnboardingOverlayComponent } from './onboarding/onboarding-overlay.component';

@Component({
  selector: 'app-root',
  imports: [
    RouterOutlet,
    RouterLink,
    RouterLinkActive,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatSidenavModule,
    MatToolbarModule,
    AssistantChatComponent,
    OnboardingOverlayComponent,
  ],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App implements OnInit {
  protected readonly auth = inject(AuthService);
  private readonly breakpointObserver = inject(BreakpointObserver);
  protected readonly offlineSync = inject(OfflineSyncService);
  protected readonly onlineStatus = inject(OnlineStatusService);

  protected readonly isCompact = toSignal(
    this.breakpointObserver.observe('(max-width: 800px)').pipe(map((state) => state.matches)),
    { initialValue: false },
  );
  protected readonly sidebarOpened = signal(false);

  ngOnInit(): void {
    if (this.auth.isAuthenticated()) {
      this.auth.loadCurrentUser().subscribe({ error: () => undefined });
    }

    void this.offlineSync.syncNow();
  }

  protected toggleSidebar(): void {
    this.sidebarOpened.update((opened) => !opened);
  }

  protected closeSidebarOnCompact(): void {
    if (this.isCompact()) {
      this.sidebarOpened.set(false);
    }
  }
}