import { Component, inject, signal } from '@angular/core';
import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { AuthService } from './core/auth.service';
import { LangService } from './core/lang.service';
import { PushService } from './core/push.service';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    @if (auth.isAuthed()) {
      <div class="layout">
        <aside class="sidebar">
          <div class="brand">
            <img src="assets/askar-logo.png" class="brand-logo" [alt]="lang.t('brand')" />
            <span class="b-sub">{{ lang.t('ops_subtitle') }}</span>
          </div>
          <nav class="menu">
            <a routerLink="/dashboard" routerLinkActive="on" class="m-item"><i>▤</i> {{ lang.t('nav_dashboard') }}</a>
            @if (auth.can('bms.leads.view')) { <a routerLink="/leads" routerLinkActive="on" class="m-item"><i>☷</i> {{ lang.t('nav_leads') }}</a> }
            @if (auth.can('bms.bookings.view')) { <a routerLink="/tasks" routerLinkActive="on" class="m-item"><i>✓</i> {{ lang.t('nav_tasks') }}</a> }
            @if (auth.can('bms.bookings.view')) { <a routerLink="/visits" routerLinkActive="on" class="m-item"><i>◷</i> {{ lang.t('nav_visits') }}</a> }
            @if (auth.can('bms.halls.view')) { <a routerLink="/match" routerLinkActive="on" class="m-item"><i>✧</i> {{ lang.t('nav_match') }}</a> }
            @if (auth.can('bms.assets.view')) { <a routerLink="/assets" routerLinkActive="on" class="m-item"><i>▦</i> {{ lang.t('nav_assets') }}</a> }
            @if (auth.can('bms.bookings.view')) { <a routerLink="/transfers" routerLinkActive="on" class="m-item"><i>⇄</i> {{ lang.t('nav_transfers') }}</a> }
            @if (auth.can('bms.maintenance.view')) { <a routerLink="/maintenance" routerLinkActive="on" class="m-item"><i>🛠</i> {{ lang.t('nav_maintenance') }}</a> }
            @if (auth.can('bms.bookings.manage')) { <a routerLink="/change-requests" routerLinkActive="on" class="m-item"><i>✎</i> {{ lang.t('nav_change_requests') }}</a> }
            @if (auth.can('bms.ai.use')) { <a routerLink="/assistant" routerLinkActive="on" class="m-item"><i>✦</i> {{ lang.t('nav_assistant') }}</a> }
          </nav>
        </aside>

        <div class="content">
          <header class="topbar">
            <div></div>
            <div class="top-right">
              <button class="lang" [title]="lang.t('enable_notifications')" (click)="enablePush()">{{ pushOn() ? '🔔' : '🔕' }}</button>
              <button class="lang" (click)="lang.toggle()">{{ lang.lang() === 'ar' ? 'EN' : 'عربي' }}</button>
              <span class="user">{{ auth.user()?.name }}</span>
              <button class="logout" (click)="logout()">{{ lang.t('sign_out') }}</button>
            </div>
          </header>
          <main class="main"><router-outlet /></main>
        </div>
      </div>
    } @else {
      <router-outlet />
    }
  `,
  styles: [`
    .layout { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
    [dir='rtl'] .layout { grid-template-columns: var(--side) 1fr; }
    .sidebar { background: var(--brand); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; }
    .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px; }
    .brand-logo { width: 100%; max-width: 150px; height: auto; display: block; }
    .b-sub { display: block; font-size: .72rem; letter-spacing: 2px; text-transform: uppercase; opacity: .55; }
    .menu { display: flex; flex-direction: column; gap: 4px; }
    .m-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 9px; color: #cdd0db; font-weight: 500; transition: all .18s; }
    .m-item i { font-style: normal; opacity: .8; width: 18px; text-align: center; }
    .m-item:hover { background: rgba(255,255,255,.07); color: #fff; }
    .m-item.on { background: linear-gradient(135deg, var(--gold), var(--gold-deep)); color: #fff; }
    .content { display: flex; flex-direction: column; min-width: 0; }
    .topbar { height: 64px; background: var(--panel); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 26px; position: sticky; top: 0; z-index: 10; }
    .top-right { display: flex; align-items: center; gap: 16px; }
    .user { font-weight: 600; }
    .lang { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
    .lang:hover { border-color: var(--gold); color: var(--gold-deep); }
    .logout { border: none; background: none; color: var(--danger); font-weight: 600; cursor: pointer; font-family: inherit; }
    .main { padding: 30px 32px; }
    @media (max-width: 820px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar { position: static; height: auto; flex-direction: row; align-items: center; justify-content: space-between; }
      .brand { flex-direction: row; }
      .brand-logo { max-width: 110px; }
      .menu { flex-direction: row; }
      .b-sub { display: none; }
    }
  `],
})
export class AppComponent {
  auth = inject(AuthService);
  lang = inject(LangService);
  private router = inject(Router);
  private push = inject(PushService);
  pushOn = signal(false);

  async enablePush(): Promise<void> {
    this.pushOn.set(await this.push.enable());
  }

  logout(): void {
    this.auth.clear();
    this.router.navigate(['/login']);
  }
}
