AcquisitionAnalysis

"use client";

import * as React from "react";
import {
  TabsRoot,
  TabList,
  Tab,
  TabPanel,
  FilterBar,
  DataTable,
  SurfaceLayout,
  SummaryRow,
  TimeRangeSelector,
  type ColumnDef,
  type FilterGroupDef,
  type DateRange,
} from "@reopt-ai/opt-ui";
import {
  LineChart,
  BarChart,
  type ChartDataPoint,
  type ChartSeriesDef,
} from "@reopt-ai/opt-charts";

interface ChannelRow {
  id: string;
  channel: string;
  users: string;
  conversion: string;
  [k: string]: unknown;
}
interface CampaignRow {
  id: string;
  campaign: string;
  impressions: string;
  clicks: string;
  ctr: string;
  [k: string]: unknown;
}
interface ReferrerRow {
  id: string;
  [k: string]: unknown;
}

/** Statistic shape for `Acquisition`. */
export interface AcquisitionStat {
  id: string;
  title: string;
  value: string;
  change: string;
  trend: "up" | "down" | "neutral";
}

/** Labels for `AcquisitionAnalysis`. */
export interface AcquisitionAnalysisLabels {
  title?: string;
  overview?: string;
  channels?: string;
  campaigns?: string;
  referrers?: string;
  attribution?: string;
  filtersLabel?: string;
  statsLabel?: string;
  detailsLabel?: string;
  emptyTitle?: string;
  emptyDescription?: string;
}

const defaultLabels: Required<AcquisitionAnalysisLabels> = {
  title: "Acquisition",
  overview: "Overview",
  channels: "Channels",
  campaigns: "Campaigns",
  referrers: "Referrers",
  attribution: "Attribution",
  filtersLabel: "Filters",
  statsLabel: "Statistics",
  detailsLabel: "Acquisition details",
  emptyTitle: "No acquisition data",
  emptyDescription: "There is no acquisition data to display yet.",
};

/** Props for `AcquisitionAnalysis`. */
export interface AcquisitionAnalysisProps {
  stats: AcquisitionStat[];
  trendData?: ChartDataPoint[];
  trendSeries?: ChartSeriesDef[];
  channelData?: ChannelRow[];
  channelColumns?: ColumnDef<ChannelRow>[];
  campaignData?: CampaignRow[];
  campaignColumns?: ColumnDef<CampaignRow>[];
  /** Referrer domain table data */
  referrerData?: ReferrerRow[];
  referrerColumns?: ColumnDef<ReferrerRow>[];
  /** Attribution bar chart data (e.g., first/last touch model) */
  attributionData?: ChartDataPoint[];
  attributionSeries?: ChartSeriesDef[];
  /** FilterBar definitions (e.g., conversion event, date range) */
  filters?: FilterGroupDef[];
  onFilterChange?: (
    filterId: string,
    value: string | string[] | boolean,
  ) => void;
  header?: React.ReactNode;
  actions?: React.ReactNode;
  labels?: AcquisitionAnalysisLabels;
  loading?: boolean;
  timeRange?: DateRange;
  onTimeRangeChange?: (range: DateRange) => void;
  className?: string;
}

/** Renders the `AcquisitionAnalysis` component. */
export function AcquisitionAnalysis({
  stats,
  trendData = [],
  trendSeries = [],
  channelData = [],
  channelColumns = [
    { id: "channel", header: "Channel", accessor: "channel" as const },
    { id: "users", header: "Users", accessor: "users" as const },
    { id: "conversion", header: "Conversion", accessor: "conversion" as const },
  ],
  campaignData = [],
  campaignColumns = [
    { id: "campaign", header: "Campaign", accessor: "campaign" as const },
    {
      id: "impressions",
      header: "Impressions",
      accessor: "impressions" as const,
    },
    { id: "clicks", header: "Clicks", accessor: "clicks" as const },
    { id: "ctr", header: "CTR", accessor: "ctr" as const },
  ],
  referrerData,
  referrerColumns = [
    { id: "domain", header: "Domain", accessor: "domain" as keyof ReferrerRow },
    { id: "visits", header: "Visits", accessor: "visits" as keyof ReferrerRow },
    {
      id: "conversion",
      header: "Conversion",
      accessor: "conversion" as keyof ReferrerRow,
    },
  ],
  attributionData,
  attributionSeries,
  filters,
  onFilterChange,
  header,
  actions,
  labels: customLabels,
  loading = false,
  timeRange,
  onTimeRangeChange,
  className,
}: AcquisitionAnalysisProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const sectionId = React.useId();

  const isEmpty = stats.length === 0;
  const hasFilters = filters && filters.length > 0;
  const hasReferrers = referrerData && referrerData.length > 0;
  const hasAttribution =
    attributionData &&
    attributionData.length > 0 &&
    attributionSeries &&
    attributionSeries.length > 0;

  return (
    <SurfaceLayout loading={loading} className={className}>
      {header || actions ? (
        <div className="flex items-center justify-between">
          {header && <div>{header}</div>}
          <div className="gap-element flex items-center">
            <TimeRangeSelector value={timeRange} onChange={onTimeRangeChange} />
            {actions}
          </div>
        </div>
      ) : (
        <div className="flex items-center justify-between">
          <h2 className="text-text-primary text-lg font-semibold">
            {labels.title}
          </h2>
          <TimeRangeSelector value={timeRange} onChange={onTimeRangeChange} />
        </div>
      )}

      {isEmpty ? (
        <div
          role="status"
          className="flex flex-col items-center justify-center py-16 text-center"
        >
          <h3 className="text-text-primary text-lg font-medium">
            {labels.emptyTitle}
          </h3>
          <p className="text-text-tertiary mt-1 text-sm">
            {labels.emptyDescription}
          </p>
        </div>
      ) : (
        <>
          {hasFilters && (
            <section aria-labelledby={`${sectionId}-filters`}>
              <span id={`${sectionId}-filters`} className="sr-only">
                {labels.filtersLabel}
              </span>
              <FilterBar filters={filters} onFilterChange={onFilterChange} />
            </section>
          )}

          <section aria-labelledby={`${sectionId}-stats`}>
            <span id={`${sectionId}-stats`} className="sr-only">
              {labels.statsLabel}
            </span>
            <SummaryRow stats={stats} columns={4} />
          </section>

          <section aria-labelledby={`${sectionId}-tabs`}>
            <span id={`${sectionId}-tabs`} className="sr-only">
              {labels.detailsLabel}
            </span>
            <TabsRoot defaultSelectedId="overview">
              <TabList>
                <Tab id="overview">{labels.overview}</Tab>
                <Tab id="channels">{labels.channels}</Tab>
                <Tab id="campaigns">{labels.campaigns}</Tab>
                {hasReferrers && <Tab id="referrers">{labels.referrers}</Tab>}
                {hasAttribution && (
                  <Tab id="attribution">{labels.attribution}</Tab>
                )}
              </TabList>
              <TabPanel tabId="overview">
                {trendData.length > 0 && trendSeries.length > 0 && (
                  <div className="pt-4">
                    <LineChart
                      data={trendData}
                      series={trendSeries}
                      aria-label="Acquisition trend"
                    />
                  </div>
                )}
              </TabPanel>
              <TabPanel tabId="channels">
                <div className="pt-4">
                  <DataTable
                    columns={channelColumns}
                    data={channelData}
                    keyExtractor={(r) => r.id}
                  />
                </div>
              </TabPanel>
              <TabPanel tabId="campaigns">
                <div className="pt-4">
                  <DataTable
                    columns={campaignColumns}
                    data={campaignData}
                    keyExtractor={(r) => r.id}
                  />
                </div>
              </TabPanel>
              {hasReferrers && (
                <TabPanel tabId="referrers">
                  <div className="pt-4">
                    <DataTable
                      columns={referrerColumns}
                      data={referrerData}
                      keyExtractor={(r) => r.id}
                    />
                  </div>
                </TabPanel>
              )}
              {hasAttribution && (
                <TabPanel tabId="attribution">
                  <div className="pt-4">
                    <BarChart
                      data={attributionData}
                      series={attributionSeries}
                      layout="vertical"
                      aria-label={labels.attribution}
                    />
                  </div>
                </TabPanel>
              )}
            </TabsRoot>
          </section>
        </>
      )}
    </SurfaceLayout>
  );
}

AcquisitionAnalysis.displayName = "AcquisitionAnalysis";