import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExpenseChartComponent, ExpenseData } from '../expense-chart/expense-chart.component';

/**
 * 📊 ExpenseCardsGrid - Grid Flexível para Cards de Despesas
 * 
 * Permite exibir 1, 2 ou 3 cards de despesas de forma responsiva:
 * - 1 card: 100% largura
 * - 2 cards: 50% cada
 * - 3 cards: 33.33% cada
 * - Mobile: sempre 1 coluna
 */

// ✨ Interface para dados de comparação mensal
export interface MonthlyComparison {
  currentTotal: number;
  previousTotal: number;
  percentageChange: number;
  trend: 'up' | 'down' | 'stable';
  currentCount: number;
  previousCount: number;
}

export interface ExpenseCardConfig {
  id: string;
  title: string;
  data: ExpenseData[];
  previousMonthData?: ExpenseData[]; // ✨ NOVO: Dados do mês anterior
  config: any;
  enabled: boolean;
  order: number;
  description?: string;
  comparison?: MonthlyComparison; // ✨ NOVO: Dados de comparação
}

@Component({
  selector: 'app-expense-cards-grid',
  standalone: true,
  imports: [CommonModule, ExpenseChartComponent],
  template: `
    <div class="expense-cards-grid" [ngClass]="getGridClass()">
      <div 
        class="expense-card-wrapper" 
        *ngFor="let card of enabledCards"
        [style.order]="card.order"
        [attr.data-card-id]="card.id">
        
       
        <!-- Expense Chart -->
        <div class="card-content">
          <app-expense-chart
            [data]="card.data"
            [comparison]="card.comparison"
            [config]="card.config">
          </app-expense-chart>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .expense-cards-grid {
      display: grid;
      gap: 1.5rem;
      margin: 2rem 0;
      width: 100%;
    }

    /* Grid Classes - Configuração dinâmica */
    .expense-cards-grid.single-card {
      grid-template-columns: 1fr;
    }

    .expense-cards-grid.two-cards {
      grid-template-columns: 1fr 1fr;
    }

    .expense-cards-grid.three-cards {
      grid-template-columns: 1fr 1fr 1fr;
    }

    /* Card Wrapper */
    .expense-card-wrapper {
      background: var(--background);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: all 0.3s ease;
      position: relative;
    }

    .expense-card-wrapper:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-elevated);
    }

    /* Card Content - Ajuste para layout sem header */

    /* Card Content - Layout otimizado sem header */
    .card-content {
      position: relative;
      overflow: hidden;
      padding: 0; // Remove padding extra já que o expense-chart tem seu próprio padding
    }

    /* Responsividade */
    @media (max-width: 1200px) {
      .expense-cards-grid.three-cards {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .expense-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin: 1rem 0;
      }

      .expense-card-wrapper {
        border-radius: 8px;
      }

      /* ✨ Layout simplificado sem header */
    }

    /* Loading State */
    .expense-card-wrapper.loading {
      opacity: 0.7;
      pointer-events: none;
    }

    .expense-card-wrapper.loading::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(var(--background-rgb), 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
    }

    /* Dark Mode */
    .dark-theme .expense-card-wrapper {
      background: var(--surface);
      border: 1px solid var(--divider);
    }

    .dark-theme .card-header {
      background: var(--background);
    }

    /* Animation */
    .expense-card-wrapper {
      animation: fadeInUp 0.6s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Stagger animation for multiple cards */
    .expense-card-wrapper:nth-child(1) { animation-delay: 0.1s; }
    .expense-card-wrapper:nth-child(2) { animation-delay: 0.2s; }
    .expense-card-wrapper:nth-child(3) { animation-delay: 0.3s; }
  `]
})
export class ExpenseCardsGridComponent implements OnInit {
  @Input() cards: ExpenseCardConfig[] = [];
  @Input() maxCards: number = 3;
  @Input() loading: boolean = false;

  enabledCards: ExpenseCardConfig[] = [];

  ngOnInit() {
    this.updateEnabledCards();
  }

  ngOnChanges() {
    this.updateEnabledCards();
  }

  private updateEnabledCards() {
    this.enabledCards = this.cards
      .filter(card => card.enabled)
      .sort((a, b) => a.order - b.order)
      .slice(0, this.maxCards);
  }

  getGridClass(): string {
    const count = this.enabledCards.length;
    
    switch (count) {
      case 1:
        return 'single-card';
      case 2:
        return 'two-cards';
      case 3:
        return 'three-cards';
      default:
        return 'single-card';
    }
  }

}
