"use client";

import * as React from "react";
import type {
  MarketingAnalyticsQuery,
} from "@/api/rtk/marketing-api";
import { useMarketingAnalyticsData } from "@/features/marketing";
import { withAllocatedSpendingKpis } from "@/features/marketing/utils/marketing-drill-helpers";
import {
  MarketingAnalyticsFilters,
  getDefaultMarketingAnalyticsFilters,
  marketingFiltersToQuery,
  type MarketingFiltersState,
} from "./marketing-analytics-filters";
import { MarketingAnalyticsExportActions } from "./marketing-analytics-export-actions";
import { MarketingKpiGrid } from "./marketing-kpi-grid";
import { MarketingPageShell } from "./marketing-page-shell";
import { MarketingTeamAnalyticsTables } from "./marketing-team-analytics-tables";

function filtersEqual(
  a: MarketingFiltersState,
  b: MarketingFiltersState,
): boolean {
  return (
    a.month === b.month &&
    a.brand === b.brand &&
    a.leadChannelId === b.leadChannelId &&
    a.divisionId === b.divisionId &&
    a.teamId === b.teamId
  );
}

export default function MarketingAnalyticsPage() {
  const defaults = React.useMemo(
    () => getDefaultMarketingAnalyticsFilters(),
    [],
  );
  const [draftFilters, setDraftFilters] =
    React.useState<MarketingFiltersState>(defaults);
  const [appliedFilters, setAppliedFilters] =
    React.useState<MarketingFiltersState>(defaults);

  const analyticsQuery = React.useMemo(
    () => marketingFiltersToQuery(appliedFilters),
    [appliedFilters],
  );

  const { data, isLoading, isFetching } =
    useMarketingAnalyticsData(analyticsQuery);

  const loading = isLoading || isFetching;

  const kpiData = React.useMemo(
    () => (data ? withAllocatedSpendingKpis(data) : undefined),
    [data],
  );

  const handleTableTeamChange = React.useCallback((nextTeamId: string) => {
    const patch = { teamId: nextTeamId || undefined };
    setDraftFilters((prev) => ({ ...prev, ...patch }));
    setAppliedFilters((prev) => ({ ...prev, ...patch }));
  }, []);

  const handleClearFilters = React.useCallback(() => {
    const next = getDefaultMarketingAnalyticsFilters();
    setDraftFilters(next);
    setAppliedFilters(next);
  }, []);

  const exportDisabled = loading || !data;

  return (
    <MarketingPageShell
      title="Analytics"
      subtitle="Marketing KPIs, CPL, CPA, conversion ratio, front revenue, and ROI"
      headerActions={
        <MarketingAnalyticsExportActions
          query={analyticsQuery}
          disabled={exportDisabled}
        />
      }
    >
      <div className="flex flex-col gap-4">
        <MarketingAnalyticsFilters
          value={draftFilters}
          onChange={setDraftFilters}
          isApplying={loading}
          hasPendingChanges={!filtersEqual(draftFilters, appliedFilters)}
          onApply={() => setAppliedFilters(draftFilters)}
          onClear={handleClearFilters}
        />

        <section aria-label="Summary KPIs" aria-busy={loading}>
          <MarketingKpiGrid data={kpiData} isLoading={loading} />
        </section>

        <section aria-label="Team breakdown" className="flex flex-col gap-3">
          <div className="px-1">
            <h2 className="font-['Lexend'] text-sm font-extrabold tracking-tight text-text">
              Team breakdown
            </h2>
            <p className="mt-0.5 text-xs font-medium text-gray-500 font-['Lexend_Deca']">
              AE and BDR performance by associate and marketing channel
            </p>
          </div>

          <MarketingTeamAnalyticsTables
            teams={data?.teamBreakdown ?? []}
            analytics={data}
            isLoading={loading}
            teamId={appliedFilters.teamId ?? ""}
            onTeamIdChange={handleTableTeamChange}
            divisionId={appliedFilters.divisionId}
          />
        </section>
      </div>
    </MarketingPageShell>
  );
}