import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
import { AfterViewChecked, Component, OnDestroy, OnInit, inject } from '@angular/core';
import { Chart, ArcElement, DoughnutController, Legend, Tooltip } from 'chart.js';
import { ExpensesService } from '../../core/services/expenses.service';
import { ShoppingListIntegrationService } from '../../core/services/shopping-list-integration.service';
import { StatsService } from '../../core/services/stats.service';
import { UiService } from '../../core/services/ui.service';
import type { CashflowResponse, Expense, ShoppingListSummary, StatsResponse } from '../../shared/models';

Chart.register(DoughnutController, ArcElement, Tooltip, Legend);

const DASHBOARD_CACHE_KEY = 'expense-control-dashboard-v6';
const chartPalette = ['#206bc4', '#2fb344', '#f59f00', '#d63939', '#9b4dca', '#4263eb', '#0ca678', '#e8590c'];

const formatLocalDate = (date: Date) => {
  const year = date.getFullYear();
  const month = `${date.getMonth() + 1}`.padStart(2, '0');
  const day = `${date.getDate()}`.padStart(2, '0');
  return `${year}-${month}-${day}`;
};

const getMonthRange = () => {
  const today = new Date();
  return {
    start: formatLocalDate(new Date(today.getFullYear(), today.getMonth(), 1)),
    end: formatLocalDate(today)
  };
};

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, CurrencyPipe, DatePipe],
  template: `
    <div class="page-header d-print-none mb-3 ec-page-header">
      <div class="row align-items-center g-3">
        <div class="col">
          <h2 class="page-title mb-1">{{ ui.t('nav.dashboard') }}</h2>
          <div class="text-secondary">{{ ui.t('dashboard.cashflowHint') }}</div>
        </div>
      </div>
    </div>

    <div class="row row-cards">
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.total') }}</div><div class="display-6">{{ (stats?.total || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.count') }}</div><div class="display-6">{{ stats?.count || 0 }}</div></div></div></div>
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.budgetUsage') }}</div><div class="display-6">{{ cashflow?.budgetUsagePercent || 0 }}%</div></div></div></div>
      <div class="col-md-3"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('cashflow.forecast') }}</div><div class="display-6">{{ (cashflow?.forecastCurrentMonth || 0) | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>

      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalSpend') }}</div><div class="display-6">{{ externalAmount() | currency:'PLN':'symbol':'1.2-2' }}</div></div></div></div>
      <div class="col-md-6"><div class="card pv-card overflow-hidden"><div class="card-body"><div class="text-secondary">{{ ui.t('dashboard.externalRecords') }}</div><div class="display-6">{{ externalCount() }}</div></div></div></div>

      <div class="col-lg-7 d-flex align-items-stretch">
        <div class="card pv-card h-100 w-100 overflow-hidden">
          <div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.share') }}</h3></div>
          <div class="card-body">
            @if (stats?.byCategory?.length) {
              <div class="ec-chart-wrap"><canvas id="dashboardCategoryChart"></canvas></div>
            } @else {
              <div class="alert alert-info mb-0">{{ ui.t('dashboard.noChartData') }}</div>
            }
          </div>
        </div>
      </div>

      <div class="col-lg-5 d-flex align-items-stretch">
        <div class="card pv-card h-100 w-100 overflow-hidden">
          <div class="card-header"><h3 class="card-title">{{ ui.t('nav.cashflow') }}</h3></div>
          <div class="card-body d-grid gap-3">
            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.actual') }}</span><strong>{{ (cashflow?.actualCurrent || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.budget') }}</span><strong>{{ (cashflow?.totalBudget || 0) | currency:'PLN':'symbol':'1.2-2' }}</strong></div>
            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.pending') }}</span><strong>{{ cashflow?.pendingApproval || 0 }}</strong></div>
            <div class="d-flex justify-content-between"><span class="text-secondary">{{ ui.t('cashflow.duplicates') }}</span><strong>{{ cashflow?.duplicateCount || 0 }}</strong></div>
            <div>
              <div class="form-label mb-2">{{ ui.t('budget.alerts') }}</div>
              <div class="d-grid gap-2">
                @for (alert of cashflow?.alerts || []; track alert.id) {
                  <div class="alert alert-warning mb-0 py-2 px-3">{{ alert.name }} · {{ alert.usagePercent }}%</div>
                } @empty {
                  <div class="text-secondary">{{ ui.t('common.noData') }}</div>
                }
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card overflow-hidden">
          <div class="card-header"><h3 class="card-title">{{ ui.t('dashboard.recent') }}</h3></div>
          <div class="table-responsive">
            <table class="table table-vcenter card-table mb-0">
              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.category') }}</th><th>{{ ui.t('expenses.field.status') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
              <tbody>
                @for (item of recentExpenses; track item.id) {
                  <tr>
                    <td>
                      <div class="fw-semibold">{{ item.title }}</div>
                      <div class="text-secondary small">{{ item.merchant || ui.t('expenses.noMerchant') }}</div>
                    </td>
                    <td>{{ item.category.name }}</td>
                    <td><span class="badge" [ngClass]="statusBadgeClass(item.status)">{{ ui.t('status.' + item.status.toLowerCase()) }}</span></td>
                    <td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td>
                  </tr>
                } @empty {
                  <tr><td colspan="4" class="text-secondary">{{ ui.t('common.noExpenses') }}</td></tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="col-lg-6">
        <div class="card overflow-hidden">
          <div class="card-header"><h3 class="card-title">{{ ui.t('cashflow.upcomingRecurring') }}</h3></div>
          <div class="table-responsive">
            <table class="table table-vcenter card-table mb-0">
              <thead><tr><th>{{ ui.t('table.title') }}</th><th>{{ ui.t('table.date') }}</th><th class="text-end">{{ ui.t('table.amount') }}</th></tr></thead>
              <tbody>
                @for (item of cashflow?.upcomingRecurring || []; track item.id) {
                  <tr><td>{{ item.title }}</td><td>{{ item.nextRunDate | date:'yyyy-MM-dd' }}</td><td class="text-end">{{ item.amount | currency:'PLN':'symbol':'1.2-2' }}</td></tr>
                } @empty {
                  <tr><td colspan="3" class="text-secondary">{{ ui.t('common.noData') }}</td></tr>
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  `
})
export class DashboardComponent implements OnInit, AfterViewChecked, OnDestroy {
  readonly ui = inject(UiService);
  private readonly expensesService = inject(ExpensesService);
  private readonly statsService = inject(StatsService);
  private readonly shoppingIntegration = inject(ShoppingListIntegrationService);

  recentExpenses: Expense[] = [];
  stats: StatsResponse | null = null;
  cashflow: CashflowResponse | null = null;
  externalSummary: ShoppingListSummary | null = null;
  private categoryChart?: Chart;
  private chartPending = false;

  ngOnInit() {
    this.restoreCache();
    this.loadDashboard();
  }

  ngAfterViewChecked() {
    if (this.chartPending) {
      this.chartPending = false;
      this.renderChart();
    }
  }

  ngOnDestroy() {
    this.categoryChart?.destroy();
  }

  loadDashboard() {
    const range = getMonthRange();
    this.expensesService.list().subscribe({ next: (response) => { this.recentExpenses = response.items.slice(0, 8); this.persistCache(); } });
    this.statsService.overview({ startDate: range.start, endDate: range.end, bucket: 'month' }).subscribe({ next: (response) => { this.stats = response; this.chartPending = true; this.persistCache(); } });
    this.statsService.cashflow().subscribe({ next: (response) => { this.cashflow = response; this.persistCache(); } });
    this.shoppingIntegration.summary({ start_date: range.start, end_date: range.end }).subscribe({ next: (response) => { this.externalSummary = response; this.persistCache(); }, error: () => { this.externalSummary = this.externalSummary ?? null; } });
  }

  externalAmount() { return Number(this.externalSummary?.total ?? this.externalSummary?.amount ?? this.externalSummary?.meta?.total_amount ?? 0); }
  externalCount() { return Number(this.externalSummary?.count ?? this.externalSummary?.records ?? this.externalSummary?.meta?.total_count ?? 0); }

  statusBadgeClass(status: string) {
    return {
      DRAFT: 'text-bg-secondary',
      PENDING: 'text-bg-warning',
      APPROVED: 'text-bg-success',
      REJECTED: 'text-bg-danger'
    }[status] || 'text-bg-secondary';
  }

  private scheduleChartRender() {
    requestAnimationFrame(() => this.renderChart());
  }

  private renderChart() {
    const canvas = document.getElementById('dashboardCategoryChart') as HTMLCanvasElement | null;
    if (!canvas || !this.stats?.byCategory?.length) {
      this.categoryChart?.destroy();
      return;
    }

    const colors = this.stats.byCategory.map((_, index) => chartPalette[index % chartPalette.length]);
    this.categoryChart?.destroy();
    this.categoryChart = new Chart(canvas, {
      type: 'doughnut',
      data: {
        labels: this.stats.byCategory.map((item) => item.categoryName),
        datasets: [{ data: this.stats.byCategory.map((item) => item.total), backgroundColor: colors, borderColor: '#ffffff', hoverOffset: 10 }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '66%',
        plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10, color: '#9ca3af' } } }
      }
    });
  }

  private restoreCache() {
    try {
      const raw = localStorage.getItem(DASHBOARD_CACHE_KEY);
      if (!raw) return;
      const parsed = JSON.parse(raw) as { recentExpenses?: Expense[]; stats?: StatsResponse | null; cashflow?: CashflowResponse | null; externalSummary?: ShoppingListSummary | null };
      this.recentExpenses = parsed.recentExpenses ?? [];
      this.stats = parsed.stats ?? null;
      this.cashflow = parsed.cashflow ?? null;
      this.externalSummary = parsed.externalSummary ?? null;
      this.chartPending = Boolean(this.stats?.byCategory?.length);
    } catch {}
  }

  private persistCache() {
    try {
      localStorage.setItem(DASHBOARD_CACHE_KEY, JSON.stringify({ recentExpenses: this.recentExpenses, stats: this.stats, cashflow: this.cashflow, externalSummary: this.externalSummary }));
    } catch {}
  }
}