/**
 * Graph Legend Component
 * Displays color groups with counts and allows filtering by clicking
 */

import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GroupLegendItem } from './graph-data.types';

@Component({
  selector: 'app-graph-legend',
  standalone: true,
  imports: [CommonModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @if (items().length > 0) {
      <div class="flex flex-wrap gap-2 p-3 bg-card dark:bg-card rounded-lg shadow-md">
        @for (item of items(); track item.groupIndex) {
          <button
            type="button"
            (click)="itemClicked.emit(item.groupIndex)"
            [class.opacity-50]="!item.active"
            [class.ring-2]="!item.active"
            [class.ring-gray-400]="!item.active"
            class="flex items-center gap-2 px-3 py-1.5 rounded-full bg-surface1 dark:bg-surface2 hover:bg-surface1 dark:hover:bg-gray-600 transition-all cursor-pointer group">
            
            <!-- Color chip -->
            <div 
              class="w-3 h-3 rounded-full ring-1 ring-gray-300 dark:ring-gray-600"
              [style.background-color]="item.color">
            </div>
            
            <!-- Query text -->
            <span class="text-xs font-medium text-main dark:text-main group-hover:text-main dark:group-hover:text-gray-100">
              {{ item.query }}
            </span>
            
            <!-- Count badge -->
            <span class="text-xs font-semibold px-1.5 py-0.5 rounded bg-surface2 dark:bg-gray-600 text-main dark:text-main">
              {{ item.count }}
            </span>
          </button>
        }
      </div>
    }
  `
})
export class GraphLegendComponent {
  items = input.required<GroupLegendItem[]>();
  itemClicked = output<number>();
}