import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { TagRecord, TagService } from '../services/tag.service';

@Component({
  selector: 'app-tags',
  standalone: true,
  imports: [CommonModule, RouterLink],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="tags-page">
      <header class="tags-header">
        <h1>Browse Tags</h1>
        <a routerLink="/" class="back-link">← Library</a>
      </header>

      <!-- Skeleton -->
      <div *ngIf="showSpinner" class="tag-grid">
        <div *ngFor="let _ of skeletonItems" class="tag-item skeleton tag-skeleton"></div>
      </div>

      <!-- Error -->
      <div *ngIf="error && !showSpinner" class="error-card">
        <p>Failed to load tags. Please check your connection.</p>
        <button class="retry-btn" (click)="load()">Retry</button>
      </div>

      <!-- Empty -->
      <div *ngIf="!showSpinner && !error && tags.length === 0" class="empty-state">
        <span class="empty-icon">✦</span>
        <p>No tags yet. Upload some images and add tags to get started.</p>
      </div>

      <!-- Tag grid -->
      <div *ngIf="!showSpinner && !error && tags.length > 0" class="tag-grid">
        <div *ngFor="let tag of tags" class="tag-item">
          <a [routerLink]="['/']" [queryParams]="{ tags: tag.name }" class="tag-link">
            <span class="tag-name">{{ tag.name }}</span>
            <span class="tag-count">{{ tag.image_count }}</span>
          </a>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .tags-page { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
    .tags-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
    .tags-header h1 { margin: 0; }
    .back-link { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; }
    .back-link:hover { color: var(--text); }
    .tag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
    .tag-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition); }
    .tag-item:hover { border-color: var(--border-focus); }
    .tag-skeleton { height: 56px; }
    .tag-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; text-decoration: none; color: var(--text); }
    .tag-name { font-size: 0.95rem; font-weight: 500; }
    .tag-count { font-size: 0.8rem; color: var(--text-muted); background: var(--surface-raised); padding: 2px 8px; border-radius: var(--radius-chip); }
    .empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
    .empty-icon { display: block; font-size: 2rem; margin-bottom: 12px; }
    .error-card { text-align: center; padding: 40px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); }
    .error-card p { color: var(--text-muted); margin-bottom: 16px; }
    .retry-btn { padding: 8px 24px; background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: border-color var(--transition); }
    .retry-btn:hover { border-color: var(--border-focus); }
  `],
})
export class TagsComponent implements OnInit {
  tags: TagRecord[] = [];
  showSpinner = false;
  error = false;
  readonly skeletonItems = Array(12).fill(null);

  constructor(private tagService: TagService, private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.load();
  }

  load(): void {
    this.error = false;
    this.showSpinner = true;
    this.cdr.markForCheck();
    this.tagService.list('', 500, 0, 'count_desc', 1).subscribe({
      next: (res) => {
        this.tags = res.items;
        this.showSpinner = false;
        this.cdr.markForCheck();
      },
      error: () => {
        this.showSpinner = false;
        this.error = true;
        this.cdr.markForCheck();
      },
    });
  }
}
