import { Component, EventEmitter, Output, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-icon-picker',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="icon-picker bg-surface1 dark:bg-gray-800 border border-border dark:border-gray-700 rounded-lg shadow-xl p-2 w-64">
      <input type="text" class="w-full mb-2 px-2 py-1 text-sm rounded bg-transparent border border-border dark:border-gray-700"
             placeholder="Search" (input)="onSearch($event)">
      <div class="max-h-64 overflow-y-auto grid grid-cols-8 gap-1">
        <button *ngFor="let ic of filtered()" class="p-1 rounded hover:bg-surface2 dark:hover:bg-gray-700 text-lg"
                (click)="pick(ic)">{{ ic }}</button>
      </div>
    </div>
  `,
  styles: [`
    :host { display: block; }
  `]
})
export class IconPickerComponent {
  @Output() select = new EventEmitter<string>();

  private readonly all = [
    '😀','😁','😂','🤣','😊','😇','🙂','😉','😍','😘','🤔','🤨','😐','😴','🤒','🤕','👍','👎','👉','👈','👆','👇','✅','⚠️','ℹ️','💡','⭐','🚀','📌','🔔','📎','📝','📦','🧠','🎯','🏷️','🏁','🔍','🛠️','⚙️','💬','📣','🧩','🎉','🔥','💥','✨','🌟','🪄'
  ];

  query = signal('');
  filtered = signal<string[]>(this.all);

  onSearch(ev: Event) {
    const q = (ev.target as HTMLInputElement).value.toLowerCase();
    this.query.set(q);
    if (!q) { this.filtered.set(this.all); return; }
    this.filtered.set(this.all.filter(ic => ic.toLowerCase().includes(q)));
  }

  pick(ic: string) { this.select.emit(ic); }
}