import Link from "next/link";
import type { ActiveCampaignCounts, AppsFlyerDailyFunnelResponse } from "@/lib/daily-control-cards";
import { mergePaidOnboardingMetrics, type PaidOnboardingByPlatform } from "@/lib/paid-onboarding-daily";
import type { TrackedEventsDailyResponse, TrackedEventsResponse } from "@/lib/tracked-events";
import type { AppsFlyerCampaignPerformanceResponse } from "@/lib/appsflyer-campaign-performance";
import type { CampaignPerformance } from "@/lib/campaign-performance";
import { GlobalOverviewCards } from "@/components/dashboard/GlobalOverviewCards";
import { ChartCard } from "@/components/dashboard/ChartCard";
import { AppsFlyerCampaignTable } from "@/components/dashboard/AppsFlyerCampaignTable";
import { CostEfficiencyMetrics, PaidMediaFunnel } from "@/components/dashboard/PaidMediaFunnel";
import { CampaignCpaChart, CostEvolutionChart, EventDistributionChart, InstallToStartRateChart, OnboardingFunnelChart, OverviewDistributionDonuts, SeoDeviceTrafficPies, StartToSuccessRateChart } from "@/components/dashboard/Charts";

type Props = { apiResponse: AppsFlyerDailyFunnelResponse; paidOnboarding: PaidOnboardingByPlatform; previousPaidOnboarding: PaidOnboardingByPlatform; trackedEvents: TrackedEventsDailyResponse; onboardingEvents: TrackedEventsResponse; appsFlyerCampaigns: AppsFlyerCampaignPerformanceResponse; since: string; until: string; activeCampaignCounts?: ActiveCampaignCounts | null; campaignPerformance?: CampaignPerformance[]; currentCdc: number | null; previousCdc: number | null };

export function StatisticsDashboard({ apiResponse, paidOnboarding, previousPaidOnboarding, trackedEvents, onboardingEvents, appsFlyerCampaigns, since, until, activeCampaignCounts, campaignPerformance = [], currentCdc, previousCdc }: Props) {
  const statisticsResponse = mergePaidOnboardingMetrics(apiResponse, paidOnboarding, previousPaidOnboarding);
  const data = statisticsResponse.data ?? [];
  return <main className="dashboard">
    <nav className="dashboardModes" aria-label="Navigation du tableau de bord">
      <Link href="/">Vue globale</Link><Link className="active" href="/statistiques" aria-current="page">Statistiques</Link><Link href="/appsflyer">AppsFlyer</Link>
    </nav>
    <section className="globalOverview" aria-label="Statistiques d’acquisition">
      <GlobalOverviewCards response={apiResponse} paidOnboarding={paidOnboarding} previousPaidOnboarding={previousPaidOnboarding} activeCampaignCounts={activeCampaignCounts} currentCdc={currentCdc} previousCdc={previousCdc} />
      <div className="overviewCharts"><ChartCard title="Distribution des événements" subtitle="Utilisateurs actifs par jour · sélectionnez plusieurs événements pour les comparer" size="full" tall defaultShowValues={false}><EventDistributionChart days={trackedEvents.days ?? []} since={since} until={until} /></ChartCard></div>
      <div className="overviewCharts"><PaidMediaFunnel response={statisticsResponse} /></div>
      <div className="overviewCharts"><CostEfficiencyMetrics response={statisticsResponse} currentCdc={currentCdc} previousCdc={previousCdc} /></div>
      <div className="overviewConversionCharts"><ChartCard title="Install vers démarrage" subtitle="Taux de passage quotidien des installs vers un onboarding démarré" size="full"><InstallToStartRateChart data={data} /></ChartCard><ChartCard title="Démarrage vers réussite" subtitle="Taux de passage quotidien des démarrages vers un onboarding réussi" size="full"><StartToSuccessRateChart data={data} /></ChartCard></div>
      <div className="overviewCharts"><ChartCard title="Cost Evolution (Daily)" subtitle="Évolution quotidienne du coût par réussite onboarding et du coût par CDC" size="full" tall defaultShowValues={false}><CostEvolutionChart data={data} /></ChartCard></div>
      <div className="overviewLegend"><span>↑ Une hausse est positive pour les KPI de volume</span><span>↓ Une baisse est positive pour les KPI de coût</span><span>Valeurs calculées sur la période sélectionnée</span></div>
      <div className="overviewCharts"><AppsFlyerCampaignTable response={appsFlyerCampaigns} /></div><div className="overviewCharts"><OnboardingFunnelChart response={onboardingEvents} /></div><div className="overviewCharts"><SeoDeviceTrafficPies response={onboardingEvents} /></div>
      <div className="overviewCharts"><ChartCard title="Coût par onboarding réussi, par campagne" subtitle="En MAD, face à la cible de 1 500 — trafic payant uniquement" size="full" tall><CampaignCpaChart campaigns={campaignPerformance} /></ChartCard></div>
      <div className="overviewCharts"><OverviewDistributionDonuts response={statisticsResponse} paidOnboarding={paidOnboarding} /></div>
    </section>
  </main>;
}