import { CurrencyPipe } from '@angular/common';
import { Component, effect, inject, input, signal } from '@angular/core';
import { tap } from 'rxjs';
import { InfoCardModule } from '../../../core/components/info-card/info-card.component';
import {
  AccountingState,
  TourStateMeta,
} from '../../../core/data-access/graphql/generated/generated';
import { DashboardAccountingService } from '../dashboard-accounting.service';

@Component({
  selector: 'app-accounting-info-card',
  imports: [InfoCardModule, CurrencyPipe],
  template: `
    @if (kpi()) {
    <app-info-card>
      <div class="flex justify-around items-center">
        <div class="flex flex-col justify-center items-center">
          <div class="text-xl">{{ kpi()?.count }}</div>
          <div class="text-sm">Tickets</div>
        </div>
        @if(kpi()?.revenueSum && accountingState() !== AccountingState.Billed) {
        <div class="flex flex-col justify-center items-center">
          <div class="text-xl">
            {{ kpi()?.revenueSum | currency : 'EUR' : 'symbol' : '.2' }}
          </div>
          <div class="text-sm">Umsatz</div>
        </div>
        } @if(kpi()?.positiveRevenueDeviation && kpi()?.negativeRevenueDeviation
        && accountingState() === AccountingState.Billed) {
        <div class="flex flex-col justify-center items-center">
          <div class="text-xl text-green-600">
            +{{
              kpi()?.positiveRevenueDeviation
                | currency : 'EUR' : 'symbol' : '.2'
            }}
          </div>
          <div class="text-xl text-red-700">
            {{
              kpi()?.negativeRevenueDeviation
                | currency : 'EUR' : 'symbol' : '.2'
            }}
          </div>
          <div class="text-sm">Umsatz</div>
        </div>
        }
      </div>
    </app-info-card>
    }
    <!-- @switch (accountingState()) { @case (AccountingState.Billable) {
    <app-info-card>
      <div class="flex flex-col justify-center items-center">
        <div class="text-xl">124</div>
        <div class="text-sm">Tickets</div>
      </div>
    </app-info-card>
    } @case (AccountingState.PreparedForBilling) {
    <app-info-card>
      <div class="flex flex-col justify-center items-center">
        <div class="text-xl">124</div>
        <div class="text-sm">Tickets</div>
      </div>
    </app-info-card>
    } @case (AccountingState.Billed) {
    <app-info-card>
      <div class="flex flex-col justify-center items-center">
        <div class="text-xl">124</div>
        <div class="text-sm">Tickets</div>
      </div>
    </app-info-card>
    } } -->
  `,
  styles: ``,
})
export class AccountingInfoCardComponent {
  AccountingState = AccountingState;

  private service = inject(DashboardAccountingService);

  accountingState = input.required<AccountingState>();
  kpi = signal<TourStateMeta | undefined>(undefined);

  constructor() {
    effect(() => {
      this.service
        .fetchAccountingStateMeta(this.accountingState())
        .pipe(tap((res) => this.kpi.set(res)))
        .subscribe();
    });
  }
}
