"use client";

import { useMemo, useState, type CSSProperties } from "react";
import type { ActiveCampaignCounts, AppsFlyerDailyFunnelResponse, AppsFlyerDailyFunnelRow } from "@/lib/daily-control-cards";
import type { PaidOnboardingByPlatform, PaidOnboardingTotals } from "@/lib/paid-onboarding-daily";

type Platform = "all" | "meta" | "google";
type MetricKey = Exclude<keyof AppsFlyerDailyFunnelRow, "date" | "source_status">;
type Trend = { change?: string; direction?: "up" | "down"; positive?: boolean; fillPercent?: number };
type Card = Trend & { icon: string; tone: string; label: string; value: string };

const compact = new Intl.NumberFormat("fr-FR", { notation: "compact", maximumFractionDigits: 1 });
const integer = new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 0 });

function metric(total: Record<string, number | null> | undefined, rows: AppsFlyerDailyFunnelRow[], key: MetricKey) {
  const aggregate = total?.[key];
  if (typeof aggregate === "number" && Number.isFinite(aggregate)) return aggregate;
  const values = rows.map((row) => row[key]).filter((value): value is number => typeof value === "number" && Number.isFinite(value));
  return values.length ? values.reduce((sum, value) => sum + value, 0) : null;
}

function trend(current: number | null, previous: number | null, lowerIsBetter = false): Trend {
  if (current === null || previous === null || previous === 0) return {};
  const percentage = (current - previous) / previous * 100;
  return {
    change: `${percentage >= 0 ? "+" : ""}${percentage.toFixed(1)} %`,
    direction: percentage >= 0 ? "up" : "down",
    positive: lowerIsBetter ? percentage <= 0 : percentage >= 0,
    fillPercent: Math.min(Math.abs(percentage), 100),
  };
}

const ratio = (numerator: number | null, denominator: number | null) =>
  numerator !== null && denominator !== null && denominator > 0 ? numerator / denominator : null;

function paidMetric(data: PaidOnboardingByPlatform, platform: Platform, key: keyof PaidOnboardingTotals) {
  const meta = data.meta.totals?.[key];
  const google = data.google.totals?.[key];
  if (platform === "meta") return typeof meta === "number" && Number.isFinite(meta) ? meta : null;
  if (platform === "google") return typeof google === "number" && Number.isFinite(google) ? google : null;
  return typeof meta === "number" && Number.isFinite(meta) && typeof google === "number" && Number.isFinite(google)
    ? meta + google
    : null;
}

export function GlobalOverviewCards({ response, paidOnboarding, previousPaidOnboarding, activeCampaignCounts, currentCdc, previousCdc }: {
  response: AppsFlyerDailyFunnelResponse;
  paidOnboarding: PaidOnboardingByPlatform;
  previousPaidOnboarding: PaidOnboardingByPlatform;
  activeCampaignCounts?: ActiveCampaignCounts | null;
  currentCdc: number | null;
  previousCdc: number | null;
}) {
  const [platform, setPlatform] = useState<Platform>("all");

  const cards = useMemo<Card[]>(() => {
    const currentRows = response.data ?? [];
    const previousRows = response.previous?.data ?? [];
    const currentTotal = response.total;
    const previousTotal = response.previous?.total;
    const spendKey: MetricKey = platform === "all" ? "total_spend" : platform === "meta" ? "meta_spend" : "google_spend";
    const campaignKey = platform === "all" ? "active_campaigns_total" : `${platform}_active_campaigns`;
    const currentCampaigns = activeCampaignCounts
      ? platform === "all" ? activeCampaignCounts.total_active_campaigns : platform === "meta" ? activeCampaignCounts.meta_active_campaigns : activeCampaignCounts.google_active_campaigns
      : typeof currentTotal?.[campaignKey] === "number" ? currentTotal[campaignKey] : null;
    const previousCampaigns = typeof previousTotal?.[campaignKey] === "number" ? previousTotal[campaignKey] : null;
    const currentSpend = metric(currentTotal, currentRows, spendKey);
    const previousSpend = metric(previousTotal, previousRows, spendKey);
    const currentInstalls = paidMetric(paidOnboarding, platform, "installs");
    const previousInstalls = paidMetric(previousPaidOnboarding, platform, "installs");
    const currentStarts = paidMetric(paidOnboarding, platform, "onboarding_start");
    const previousStarts = paidMetric(previousPaidOnboarding, platform, "onboarding_start");
    const currentSuccesses = paidMetric(paidOnboarding, platform, "onboarding_success");
    const previousSuccesses = paidMetric(previousPaidOnboarding, platform, "onboarding_success");
    const volume = (value: number | null) => value === null ? "N/A" : compact.format(value);
    const money = (value: number | null) => value === null ? "N/A" : `${integer.format(value)} MAD`;
    const costCard = (label: string, icon: string, tone: string, currentDenominator: number | null, previousDenominator: number | null): Card => {
      const current = ratio(currentSpend, currentDenominator);
      const previous = ratio(previousSpend, previousDenominator);
      return { icon, tone, label, value: money(current), ...trend(current, previous, true) };
    };

    return [
      { icon: "◉", tone: "blue", label: "Campagnes actives", value: currentCampaigns === null ? "N/A" : integer.format(currentCampaigns), ...trend(currentCampaigns, previousCampaigns) },
      { icon: "▣", tone: "teal", label: "Dépense publicitaire", value: currentSpend === null ? "N/A" : `${compact.format(currentSpend)} MAD`, ...trend(currentSpend, previousSpend) },
      { icon: "↓", tone: "blue", label: "Installs", value: volume(currentInstalls), ...trend(currentInstalls, previousInstalls) },
      costCard("Coût / install (CPI)", "$", "orange", currentInstalls, previousInstalls),
      { icon: "▶", tone: "purple", label: "Démarrages onboarding", value: volume(currentStarts), ...trend(currentStarts, previousStarts) },
      costCard("Coût / démarrage", "♙", "orange", currentStarts, previousStarts),
      { icon: "✓", tone: "teal", label: "Onboardings réussis", value: volume(currentSuccesses), ...trend(currentSuccesses, previousSuccesses) },
      costCard("Coût / réussite", "▥", "red", currentSuccesses, previousSuccesses),
      { icon: "⚑", tone: "orange", label: "CDC", value: volume(currentCdc), ...trend(currentCdc, previousCdc) },
      costCard("Coût / CDC", "⌾", "purple", currentCdc, previousCdc),
    ];
  }, [activeCampaignCounts, currentCdc, paidOnboarding, platform, previousCdc, previousPaidOnboarding, response]);

  return <>
    <header className="overviewHeader"><p>Vue consolidée de la période sélectionnée</p><h2>Global Overview</h2></header>
    <div className="overviewFilters" aria-label="Filtres de la vue globale">
      <label><span>Plateforme</span><select value={platform} onChange={(event) => setPlatform(event.target.value as Platform)}><option value="all">Meta + Google</option><option value="meta">Meta</option><option value="google">Google</option></select></label>
    </div>
    <div className="overviewGrid">
      {cards.map((card) => <article className={`overviewCard ${card.change ? card.positive ? "trendPositive" : "trendNegative" : ""}`} key={card.label} style={{ "--trend-fill": `${card.fillPercent ?? 0}%` } as CSSProperties}>
        <div className="overviewLabel"><span className={`overviewIcon ${card.tone}`} aria-hidden="true">{card.icon}</span><h2>{card.label}</h2></div>
        <strong>{card.value}</strong>
        {card.change && card.direction
          ? <p className={`overviewTrend ${card.positive ? "positive" : "negative"}`}><b>{card.direction === "up" ? "↑" : "↓"} {card.change}</b><small>vs période précédente</small></p>
          : <p className="overviewTrend unavailable"><b>— N/A</b><small>variation indisponible</small></p>}
      </article>)}
    </div>
  </>;
}