import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { CategoryType, CATEGORY_CONFIGS, CategoryConfig } from '../../../domain/finances/account-payable/interfaces/accountpayable.interface';

/**
 * 🎨 CategorySelectorComponent - Seletor Visual de Categorias
 * 
 * Componente inspirado na UI da imagem fornecida com categorias visuais
 * - Grid de categorias com ícones coloridos
 * - Funciona como FormControl
 * - Suporte a hover e seleção
 * - Responsivo para mobile
 */
@Component({
  selector: 'app-category-selector',
  standalone: true,
  imports: [CommonModule],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CategorySelectorComponent),
      multi: true
    }
  ],
  template: `
    <div class="category-selector">
      <h3 class="category-title">{{ title }}</h3>
      
      <div class="category-grid">
        <div 
          *ngFor="let category of categories" 
          class="category-card"
          [class.selected]="selectedCategory === category.key"
          [style.background-color]="category.bgColor"
          [style.color]="category.color"
          (click)="selectCategory(category.key)"
          [title]="category.description">
          
          <div class="category-icon">
            <i class="fas {{ category.icon }}"></i>
          </div>
          
          <div class="category-label">
            {{ category.label }}
          </div>
        </div>
      </div>

      <!-- Categoria selecionada (feedback visual) -->
      <div *ngIf="selectedCategory && selectedCategory !== 'uncategorized'" class="selected-feedback">
        <span class="selected-text">Categoria selecionada:</span>
        <span class="selected-badge" 
              [style.background-color]="getSelectedConfig()?.bgColor"
              [style.color]="getSelectedConfig()?.color">
          <i class="fas {{ getSelectedConfig()?.icon }}"></i>
          {{ getSelectedConfig()?.label }}
        </span>
      </div>
    </div>
  `,
  styles: [`
    .category-selector {
      width: 100%;
      padding: 1rem;
    }

    .category-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-primary, #333);
      margin-bottom: 1.5rem;
      text-align: left;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .category-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.5rem 1rem;
      border-radius: 1rem;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      border: 2px solid transparent;
      min-height: 120px;
      position: relative;
      overflow: hidden;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0,0,0,0.15);
      }

      &.selected {
        border-color: #007bff;
        box-shadow: 0 4px 16px rgba(0,123,255,0.3);
        transform: translateY(-2px);
        
        &::after {
          content: '✓';
          position: absolute;
          top: 8px;
          right: 8px;
          background: #007bff;
          color: white;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 0.8rem;
          font-weight: bold;
        }
      }
    }

    .category-icon {
      margin-bottom: 0.75rem;
      
      i {
        font-size: 2rem;
        opacity: 0.9;
      }
    }

    .category-label {
      font-size: 0.9rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
    }

    .selected-feedback {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      background: #f8f9fa;
      border-radius: 0.5rem;
      border-left: 4px solid #007bff;
    }

    .selected-text {
      font-size: 0.9rem;
      color: var(--text-secondary, #666);
      font-weight: 500;
    }

    .selected-badge {
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      border-radius: 1rem;
      font-size: 0.8rem;
      font-weight: 600;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);

      i {
        margin-right: 0.5rem;
        font-size: 0.9rem;
      }
    }

    // Dark mode support
    [data-theme="dark"] & {
      .category-title {
        color: var(--text-primary-dark, #fff);
      }

      .selected-feedback {
        background: #2d3748;
        border-left-color: #4299e1;
      }

      .selected-text {
        color: var(--text-secondary-dark, #a0aec0);
      }
    }

    // Mobile responsive
    @media (max-width: 768px) {
      .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.75rem;
      }

      .category-card {
        padding: 1rem 0.5rem;
        min-height: 100px;
      }

      .category-icon i {
        font-size: 1.5rem;
      }

      .category-label {
        font-size: 0.8rem;
      }

      .category-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
      }
    }

    // Ultra-small screens
    @media (max-width: 480px) {
      .category-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
  `]
})
export class CategorySelectorComponent implements ControlValueAccessor {
  @Input() title: string = 'Categorias';
  @Input() categories: CategoryConfig[] = CATEGORY_CONFIGS;
  @Output() categorySelected = new EventEmitter<CategoryType>();

  selectedCategory: CategoryType = 'uncategorized';

  // ControlValueAccessor implementation
  private onChange = (value: CategoryType) => {};
  private onTouched = () => {};

  writeValue(value: CategoryType): void {
    this.selectedCategory = value || 'uncategorized';
  }

  registerOnChange(fn: (value: CategoryType) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  selectCategory(categoryKey: CategoryType): void {
    this.selectedCategory = categoryKey;
    this.onChange(categoryKey);
    this.onTouched();
    this.categorySelected.emit(categoryKey);
  }

  getSelectedConfig(): CategoryConfig | undefined {
    return this.categories.find(cat => cat.key === this.selectedCategory);
  }
} 