import { Component, EventEmitter, Input, Output } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router';
import { TranslatePipe } from '@ngx-translate/core';
import type { LayoutId } from '../core/services/layout.service';
import { NAV_ITEMS } from './nav-items';
import { NavIconComponent } from './nav-icon.component';

export type SidebarVariant = 'default' | 'compact' | 'wide';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [RouterLink, RouterLinkActive, TranslatePipe, NavIconComponent],
  template: `
    @if (open) {
      <div
        class="fixed inset-0 z-30 bg-slate-900/40 lg:hidden"
        (click)="navigate.emit()"
        aria-hidden="true"
      ></div>
    }
    <aside
      class="fixed inset-y-0 left-0 z-40 transform border-r transition-transform lg:static lg:translate-x-0"
      [class]="asideClass()"
      [class.translate-x-0]="open"
      [class.-translate-x-full]="!open"
    >
      @if (variant === 'wide') {
        <div class="mb-6 hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-800 p-4 text-white lg:block">
          <p class="text-lg font-extrabold tracking-tight">{{ 'app.name' | translate }}</p>
          <p class="mt-1 text-xs text-brand-100">{{ 'layout.wideTagline' | translate }}</p>
        </div>
      }

      <nav [class]="navClass()" aria-label="Main">
        @for (item of navItems; track item.to) {
          <a
            [routerLink]="item.to"
            routerLinkActive="bg-brand-600 text-white"
            [routerLinkActiveOptions]="{ exact: item.to === '/' }"
            (click)="navigate.emit()"
            [title]="variant === 'compact' ? (item.labelKey | translate) : ''"
            [class]="linkClass()"
          >
            <app-nav-icon [icon]="item.icon" />
            @if (variant !== 'compact') {
              <span>{{ item.labelKey | translate }}</span>
            }
          </a>
        }
      </nav>
    </aside>
  `,
})
export class SidebarComponent {
  @Input() open = false;
  @Input() variant: SidebarVariant = 'default';
  @Output() navigate = new EventEmitter<void>();

  readonly navItems = NAV_ITEMS;

  asideClass(): string {
    const base =
      'border-slate-200 bg-white px-3 py-6 dark:border-slate-800 dark:bg-slate-900';
    switch (this.variant) {
      case 'compact':
        return `w-16 ${base}`;
      case 'wide':
        return `w-72 ${base} bg-gradient-to-b from-white to-brand-50/40 dark:from-slate-900 dark:to-brand-950/20`;
      default:
        return `w-64 ${base}`;
    }
  }

  navClass(): string {
    return this.variant === 'compact'
      ? 'mt-16 flex flex-col items-center gap-2 lg:mt-0'
      : 'mt-16 flex flex-col gap-1 lg:mt-0';
  }

  linkClass(): string {
    const base =
      'flex items-center rounded-xl text-sm font-medium text-slate-600 transition hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 [&.bg-brand-600]:text-white';
    if (this.variant === 'compact') {
      return `${base} justify-center p-2.5`;
    }
    if (this.variant === 'wide') {
      return `${base} gap-3 px-4 py-3 text-[0.95rem]`;
    }
    return `${base} gap-3 px-3.5 py-2.5`;
  }
}
