import { Component, Input, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';

// 🚛 Interface para dados de performance por tipo de frota
export interface FleetTypeData {
  totalRoutes: number;
  totalVolumes: number;
  totalDistance: number;
  changePercentage: number;
  trend: 'up' | 'down' | 'stable';
  hasAmbulance: number;
  // 📊 Breakdown por tipo de frota
  fleetTypes: {
    rental: FleetTypeInfo;
    corporate: FleetTypeInfo;
    aggregate: FleetTypeInfo;
    fixedRental: FleetTypeInfo;
    fixedDaily: FleetTypeInfo;
    other: FleetTypeInfo;
  };
}

export interface FleetTypeInfo {
  label: string;
  routes: number;
  volumes: number;
  distance: number;
  percentage: number;
  hasAmbulance: number;
}

@Component({
  selector: 'app-fleet-type-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="fleet-type-card">
      <!-- Header -->
      <div class="card-header">
        <div class="header-left">
          <div class="icon-container">
            <i class="fas fa-truck-moving"></i>
          </div>
          <div class="header-info">
            <h3>Tipo de Frota</h3>
            <p class="total-info">{{ formatNumber(data.totalRoutes) }} rotas · {{ formatNumber(data.totalVolumes) }} volumes · {{ formatNumber(data.totalDistance) }}km</p>
          </div>
        </div>
        <div class="trend-indicator" [class]="getTrendClass()">
          <i class="fas" [class.fa-arrow-up]="data.trend === 'up'" 
                        [class.fa-arrow-down]="data.trend === 'down'"
                        [class.fa-minus]="data.trend === 'stable'"></i>
          <span>{{ data.changePercentage.toFixed(1) }}%</span>
        </div>
      </div>

      <!-- Help Section -->
      <!-- <div class="help-section" *ngIf="data.hasAmbulance > 0">
        <div class="help-info">
          <i class="fas fa-ambulance help-icon"></i>
          <span class="help-text">{{ data.hasAmbulance }} rotas com ambulância acionada</span>
        </div>
      </div> -->

      <!-- Fleet Types Grid -->
      <div class="fleet-types-grid">
        <div class="fleet-type-item" 
             *ngFor="let item of getFleetTypeItems()" 
             [class]="'fleet-' + item.key">
          <div class="fleet-header">
            <div class="fleet-icon" [class]="'icon-' + item.key">
              <i class="fas" [class]="getFleetIcon(item.key)"></i>
            </div>
            <div class="fleet-info">
              <h4>{{ item.data.label }}</h4>
              <div class="fleet-stats">
                <span class="routes-count">{{ formatNumber(item.data.routes) }} rotas</span>
                <span class="volumes-count">{{ formatNumber(item.data.volumes) }} vol.</span>
                <span class="distance-count">{{ formatNumber(item.data.distance) }}km</span>
              </div>
            </div>
            <div class="fleet-percentage">
              {{ item.data.percentage.toFixed(1) }}%
            </div>
          </div>
          
          <!-- Progress Bar -->
          <div class="progress-bar">
            <div class="progress-fill" 
                 [style.width.%]="item.data.percentage"
                 [class]="'fill-' + item.key">
            </div>
          </div>
          
          <!-- Ambulance Indicator -->
          <div class="ambulance-indicator" *ngIf="item.data.hasAmbulance > 0">
            <div class="ambulance-badge">
              <i class="fas fa-ambulance"></i>
              <span class="ambulance-count">{{ item.data.hasAmbulance }}</span>
              <!-- <span class="ambulance-label">Ambulância{{ item.data.hasAmbulance > 1 ? 's' : '' }}</span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrl: './fleet-type-card.component.scss'
})
export class FleetTypeCardComponent implements OnInit {
  @Input() data: FleetTypeData = {
    totalRoutes: 0,
    totalVolumes: 0,
    totalDistance: 0,
    changePercentage: 0,
    trend: 'stable',
    hasAmbulance: 0,
    fleetTypes: {
      rental: { label: 'Rentals', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 },
      corporate: { label: 'Corporativo', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 },
      aggregate: { label: 'Agregado', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 },
      fixedRental: { label: 'Frota Fixa - Locação', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 },
      fixedDaily: { label: 'Frota Fixa - Diarista', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 },
      other: { label: 'Outros', routes: 0, volumes: 0, distance: 0, percentage: 0, hasAmbulance: 0 }
    }
  };

  ngOnInit() {
    console.log('🚛 DEBUG FleetTypeCard - Dados recebidos:', this.data);
  }

  /**
   * 🎨 Obter classe CSS para trend
   */
  getTrendClass(): string {
    return `trend-${this.data.trend}`;
  }

  /**
   * 🔢 Formatar números grandes
   */
  formatNumber(value: number): string {
    if (value >= 1000000) {
      return `${(value / 1000000).toFixed(1)}M`;
    } else if (value >= 1000) {
      return `${(value / 1000).toFixed(1)}K`;
    }
    return value.toString();
  }

  /**
   * 📊 Obter lista de tipos de frota com dados
   */
  getFleetTypeItems(): Array<{key: string, data: FleetTypeInfo}> {
    return Object.entries(this.data.fleetTypes)
      .map(([key, data]) => ({ key, data }))
      .filter(item => item.data.routes > 0)
      .sort((a, b) => b.data.routes - a.data.routes);
  }

  /**
   * 🎨 Obter ícone para tipo de frota
   */
  getFleetIcon(fleetType: string): string {
    const icons: { [key: string]: string } = {
      'rental': 'fa-car-side',
      'corporate': 'fa-building',
      'aggregate': 'fa-handshake',
      'fixedRental': 'fa-truck',
      'fixedDaily': 'fa-calendar-day',
      'other': 'fa-question-circle'
    };
    return icons[fleetType] || 'fa-truck';
  }
}
