import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { BreadcrumbItem, BreadcrumbService } from '../../services/breadcrumb.service';

@Component({
  selector: 'app-breadcrumb',
  standalone: true,
  imports: [CommonModule, MatIconModule],
  template: `
    <nav class="breadcrumb-nav" *ngIf="breadcrumbs$ | async as breadcrumbs">
      <ol class="breadcrumb-list">
        <li 
          *ngFor="let item of breadcrumbs; let last = last" 
          class="breadcrumb-item"
          [class.active]="item.isActive"
        >
          <a 
            *ngIf="!item.isActive; else activeItem" 
            [routerLink]="item.url"
            class="breadcrumb-link"
          >
            {{ item.label }}
          </a>
          <ng-template #activeItem>
            <span class="breadcrumb-active">{{ item.label }}</span>
          </ng-template>
          <mat-icon *ngIf="!last" class="breadcrumb-separator">chevron_right</mat-icon>
        </li>
      </ol>
    </nav>
  `,
  styles: [`
    .breadcrumb-nav {
      padding: 0.5rem 0;
    }

    .breadcrumb-list {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: 0.5rem;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .breadcrumb-link {
      color: #6b7280;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 500;
      transition: color 0.2s ease;
    }

    .breadcrumb-link:hover {
      color: #374151;
    }

    .breadcrumb-active {
      color: #111827;
      font-size: 0.875rem;
      font-weight: 600;
    }

    .breadcrumb-separator {
      color: #9ca3af;
      font-size: 1rem;
    }
  `]
})
export class BreadcrumbComponent implements OnInit {
  breadcrumbs$: Observable<BreadcrumbItem[]>;

  constructor(
    private breadcrumbService: BreadcrumbService,
    private router: Router
  ) {
    this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
  }

  ngOnInit() {
    // Initialize breadcrumbs for current route
    this.breadcrumbService.breadcrumbs$.subscribe();
  }
}