"use client";

import type { MarketingSpendSummary } from "@/api/rtk/marketing-api";
import {
  MarketingKpiCard,
  formatMarketingCount,
  formatMarketingCurrency,
} from "./marketing-kpi-card";

type SpendSummaryCardsProps = {
  summary?: MarketingSpendSummary;
  periodLabel?: string;
  isLoading?: boolean;
  previousMonthSummary?: MarketingSpendSummary;
  previousMonthLabel?: string;
  isPreviousMonthLoading?: boolean;
  showPreviousMonth?: boolean;
};

function formatMonthOverMonthChange(
  current: number,
  previous: number,
): string | null {
  if (previous <= 0) return current > 0 ? "New vs last month" : null;
  const pct = ((current - previous) / previous) * 100;
  const sign = pct > 0 ? "+" : "";
  return `${sign}${pct.toFixed(1)}% vs last month`;
}

export function SpendSummaryCards({
  summary,
  periodLabel,
  isLoading,
  previousMonthSummary,
  previousMonthLabel,
  isPreviousMonthLoading = false,
  showPreviousMonth = false,
}: SpendSummaryCardsProps) {
  if (isLoading || !summary) {
    return (
      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <div
            key={i}
            className="h-28 animate-pulse rounded-3xl border border-white/40 bg-white/30"
          />
        ))}
      </div>
    );
  }

  const avgPerEntry =
    summary.entryCount > 0
      ? summary.totalAmount / summary.entryCount
      : null;

  const momChange =
    showPreviousMonth && previousMonthSummary
      ? formatMonthOverMonthChange(
          summary.totalAmount,
          previousMonthSummary.totalAmount,
        )
      : null;

  const cards = [
    {
      title: "Total spending",
      value: formatMarketingCurrency(summary.totalAmount),
      hint: momChange ?? periodLabel ?? "Filtered period",
      accent: "rose" as const,
    },
    ...(showPreviousMonth
      ? [
          {
            title: "Previous month",
            value:
              isPreviousMonthLoading || !previousMonthSummary
                ? "—"
                : formatMarketingCurrency(previousMonthSummary.totalAmount),
            hint: previousMonthLabel ?? "Month before selected period",
            accent: "slate" as const,
          },
        ]
      : [
          {
            title: "Months in range",
            value: formatMarketingCount(summary.monthCount),
            hint: "Distinct calendar months with spend",
            accent: "teal" as const,
          },
        ]),
    {
      title: "Entries",
      value: formatMarketingCount(summary.entryCount),
      hint: "Spend rows in filter scope",
      accent: "indigo" as const,
    },
    {
      title: "Avg per entry",
      value: avgPerEntry != null ? formatMarketingCurrency(avgPerEntry) : "—",
      hint: "Total ÷ entries",
      accent: "amber" as const,
    },
  ];

  return (
    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
      {cards.map((card) => (
        <MarketingKpiCard key={card.title} {...card} />
      ))}
    </div>
  );
}