"use client";

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

type MarketingKpiGridProps = {
  data?: MarketingAnalyticsResponse;
  isLoading?: boolean;
  compact?: boolean;
};

const DASHBOARD_KPI_KEYS = [
  "Spending",
  "Leads",
  "CPL",
  "Front Revenue",
  "ROI",
  "Conversion Ratio",
] as const;

export function MarketingKpiGrid({
  data,
  isLoading,
  compact = false,
}: MarketingKpiGridProps) {
  if (isLoading || !data) {
    const skeletonCount = compact ? 6 : 10;
    return (
      <div
        className={
          compact
            ? "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
            : "grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5"
        }
      >
        {Array.from({ length: skeletonCount }).map((_, i) => (
          <div
            key={i}
            className="h-28 animate-pulse rounded-3xl border border-white/40 bg-white/30"
          />
        ))}
      </div>
    );
  }

  const cards = [
    {
      title: "Leads",
      value: formatMarketingCount(data.leads),
      hint: "Leads in filter scope",
      accent: "indigo" as const,
    },
    {
      title: "Spending",
      value: formatMarketingCurrency(data.spending),
      hint: "Allocated spend from AE breakdown table",
      accent: "rose" as const,
    },
    {
      title: "CPL",
      value: formatMarketingRatio(data.cpl),
      hint: "Spending ÷ Leads",
      accent: "amber" as const,
    },
    {
      title: "No of Customers",
      value: formatMarketingCount(data.accounts),
      hint: "Customers created in selected month",
      accent: "teal" as const,
    },
    {
      title: "Front Revenue",
      value: formatMarketingCurrency(data.frontRevenue),
      hint: "Sum of customer LTV",
      accent: "teal" as const,
    },
    {
      title: "Avg Customer Value",
      value: formatMarketingRatio(data.averageAccountValue),
      hint: "Front Revenue ÷ Customers",
      accent: "slate" as const,
    },
    {
      title: "Conversion Ratio",
      value: formatMarketingPercent(data.conversionRatioPct),
      hint:
        data.leads > 0
          ? `${formatMarketingCount(data.accounts)} customer${data.accounts === 1 ? "" : "s"} ÷ ${formatMarketingCount(data.leads)} leads`
          : "Customers ÷ Leads × 100",
      accent: "indigo" as const,
    },
    {
      title: "CPA",
      value: formatMarketingRatio(data.cpa),
      hint:
        data.accounts > 0
          ? `${formatMarketingCurrency(data.spending)} ÷ ${formatMarketingCount(data.accounts)} customer${data.accounts === 1 ? "" : "s"}`
          : "Spending ÷ Customers (this month)",
      accent: "amber" as const,
    },
    {
      title: "F Rev − MKTG",
      value: formatMarketingCurrency(data.frontRevenueMinusMarketing),
      hint: "Front Revenue − Spending",
      accent: "slate" as const,
    },
    {
      title: "ROI",
      value: formatMarketingPercent(data.roiPct),
      hint: "Front Revenue ÷ Spending × 100",
      accent: "rose" as const,
    },
  ];

  const visibleCards = compact
    ? cards.filter((card) =>
        DASHBOARD_KPI_KEYS.includes(
          card.title as (typeof DASHBOARD_KPI_KEYS)[number],
        ),
      )
    : cards;

  return (
    <div
      className={
        compact
          ? "grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
          : "grid gap-3 sm:grid-cols-2 xl:grid-cols-5"
      }
    >
      {visibleCards.map((card) => (
        <MarketingKpiCard key={card.title} {...card} />
      ))}
    </div>
  );
}