"use client";

import { useState } from "react";
import { ControlStrip } from "./MetricCards";
import { DailyView, MonthlyView, WeeklyView } from "./DashboardViews";
import { buildDailyControlCards, type ActiveCampaignCounts, type AppsFlyerDailyFunnelResponse } from "@/lib/daily-control-cards";
import type { CampaignPerformance } from "@/lib/campaign-performance";
import type { MonthlyProjectionCards, MonthlyProjectionCharts } from "@/lib/monthly-projection-cards";
import type { TrackedEventsDailyResponse, TrackedEventsResponse } from "@/lib/tracked-events";
import { CampaignCpaChart, CostEvolutionChart, EventDistributionChart, InstallToStartRateChart, OnboardingFunnelChart, OverviewDistributionDonuts, SeoDeviceTrafficPies, StartToSuccessRateChart } from "./Charts";
import { ChartCard } from "./ChartCard";
import { CostEfficiencyMetrics, PaidMediaFunnel } from "./PaidMediaFunnel";
import { AppsFlyerCampaignTable } from "./AppsFlyerCampaignTable";
import type { AppsFlyerCampaignPerformanceResponse } from "@/lib/appsflyer-campaign-performance";
import { GlobalOverviewCards } from "./GlobalOverviewCards";
import type { AppsFlyerDailyStatsResponse } from "@/lib/appsflyer-daily-stats";
import type { Ga4DailyOnboardingResponse } from "@/lib/ga4-daily-onboarding";
import { mergeAcquisitionMetrics } from "@/lib/acquisition-metrics-response";
import { mergePaidOnboardingMetrics, type PaidOnboardingByPlatform } from "@/lib/paid-onboarding-daily";

type Period = "daily" | "weekly";
type DashboardMode = "overview" | "objectives" | "details";
const tabs: { id: Period; label: string; action: string }[] = [{ id: "daily", label: "Quotidien", action: "détecter" },{ id: "weekly", label: "Hebdomadaire", action: "arbitrer" }];

export function AcquisitionDashboard({ apiResponse, appsFlyerDailyStats, ga4DailyOnboarding, paidOnboarding, previousPaidOnboarding, weeklyGa4DailyOnboarding, weeklyApiResponse, trackedEvents, onboardingEvents, appsFlyerCampaigns, since, until, weeklySince, activeCampaignCounts, overviewCampaignPerformance = [], campaignPerformance = [], monthlyProjectionCards, previousCdcAccounts, monthlyProjectionCharts }: { apiResponse: AppsFlyerDailyFunnelResponse; appsFlyerDailyStats: AppsFlyerDailyStatsResponse; ga4DailyOnboarding: Ga4DailyOnboardingResponse; paidOnboarding: PaidOnboardingByPlatform; previousPaidOnboarding: PaidOnboardingByPlatform; weeklyGa4DailyOnboarding: Ga4DailyOnboardingResponse; weeklyApiResponse: AppsFlyerDailyFunnelResponse; trackedEvents: TrackedEventsDailyResponse; onboardingEvents: TrackedEventsResponse; appsFlyerCampaigns: AppsFlyerCampaignPerformanceResponse; since: string; until: string; weeklySince: string; activeCampaignCounts?: ActiveCampaignCounts | null; overviewCampaignPerformance?: CampaignPerformance[]; campaignPerformance?: CampaignPerformance[]; monthlyProjectionCards: MonthlyProjectionCards; previousCdcAccounts: number | null; monthlyProjectionCharts: MonthlyProjectionCharts }) {
  const [mode, setMode] = useState<DashboardMode>("overview");
  const [period, setPeriod] = useState<Period>("daily");
  const chartApiResponse = mergeAcquisitionMetrics(apiResponse, appsFlyerDailyStats, ga4DailyOnboarding);
  const overviewApiResponse = mergePaidOnboardingMetrics(apiResponse, paidOnboarding, previousPaidOnboarding);
  const weeklyChartApiResponse = mergeAcquisitionMetrics(weeklyApiResponse, { daily: [] }, weeklyGa4DailyOnboarding);
  const mappedControls = buildDailyControlCards(chartApiResponse, until, activeCampaignCounts);
  const controls = Object.values(mappedControls).map(({ subtitle, ...card }) => ({ ...card, detail: subtitle }));
  const data = overviewApiResponse.data ?? [];
  const cdc = monthlyProjectionCards.cdcAccounts.rawValue;
  return (
    <main className="dashboard">
      <nav className="dashboardModes" aria-label="Affichage du tableau de bord">
        <button className={mode === "overview" ? "active" : ""} onClick={() => setMode("overview")} aria-pressed={mode === "overview"}>Vue globale</button>
        <button className={mode === "objectives" ? "active" : ""} onClick={() => setMode("objectives")} aria-pressed={mode === "objectives"}>Objectifs</button>
        <button className={mode === "details" ? "active" : ""} onClick={() => setMode("details")} aria-pressed={mode === "details"}>Détails</button>
      </nav>

      {mode === "overview" ? (
        <section className="globalOverview" aria-label="Vue globale des indicateurs">
          <GlobalOverviewCards response={apiResponse} paidOnboarding={paidOnboarding} previousPaidOnboarding={previousPaidOnboarding} activeCampaignCounts={activeCampaignCounts} currentCdc={cdc} previousCdc={previousCdcAccounts} />
          <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={overviewApiResponse} />
          </div>
          <div className="overviewCharts">
            <CostEfficiencyMetrics response={overviewApiResponse} currentCdc={cdc} previousCdc={previousCdcAccounts} />
          </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={overviewCampaignPerformance} />
            </ChartCard>
          </div>
          <div className="overviewCharts">
            <OverviewDistributionDonuts response={overviewApiResponse} paidOnboarding={paidOnboarding} />
          </div>
        </section>
      ) : mode === "objectives" ? (
        <section className="view" aria-label="Objectifs mensuels">
          <MonthlyView cards={monthlyProjectionCards} charts={monthlyProjectionCharts} />
          <footer>Sources : Google Ads API, Meta Marketing API, AppsFlyer Pull API, GA4 Data API et export CRM Saham. Conversion appliquée : 11 MAD par euro.<br />Période affichée : {since} → {until} · Horizon du plan : juillet → décembre 2026</footer>
        </section>
      ) : (
        <>
          <ControlStrip items={controls} />
          <nav className="tabs" aria-label="Période d’analyse">
            {tabs.map((tab) => <button key={tab.id} className={period === tab.id ? "active" : ""} onClick={() => setPeriod(tab.id)} aria-pressed={period === tab.id}>{tab.label}<span>{tab.action}</span></button>)}
          </nav>
          <section className="view">
            {period === "daily" && <DailyView apiResponse={apiResponse} appsFlyerDailyStats={appsFlyerDailyStats} ga4DailyOnboarding={ga4DailyOnboarding} until={until} />}
            {period === "weekly" && <WeeklyView apiResponse={weeklyChartApiResponse} campaigns={campaignPerformance} until={until} />}
          </section>
          <footer>Sources : Google Ads API, Meta Marketing API, AppsFlyer Pull API, GA4 Data API et export CRM Saham. Conversion appliquée : 11 MAD par euro.<br />{period === "weekly" ? `Période d’arbitrage : ${weeklySince} → ${until}` : `Période affichée : ${since} → ${until}`}</footer>
        </>
      )}
    </main>
  );
}