TestAnalytics

"use client";

import * as React from "react";
import {
  SurfaceLayout,
  SummaryRow,
  TimeRangeSelector,
  cn,
  type DateRange,
  type StatCardType,
} from "@reopt-ai/opt-ui";

// ── Types ──

/** Type definition for `TestAnalyticsTabId`. */
export type TestAnalyticsTabId =
  | "overview"
  | "stability"
  | "failures"
  | "flaky"
  | "performance"
  | "advanced";

/** Labels for `TestAnalytics`. */
export interface TestAnalyticsLabels {
  title?: string;
  overviewTab?: string;
  stabilityTab?: string;
  failuresTab?: string;
  flakyTab?: string;
  performanceTab?: string;
  advancedTab?: string;
  emptyTitle?: string;
  emptyDescription?: string;
  refreshLabel?: string;
}

const defaultLabels: Required<TestAnalyticsLabels> = {
  title: "Test Analytics",
  overviewTab: "Overview",
  stabilityTab: "Stability",
  failuresTab: "Failures",
  flakyTab: "Flaky",
  performanceTab: "Performance",
  advancedTab: "Advanced",
  emptyTitle: "No analytics data",
  emptyDescription: "Run tests to generate analytics data.",
  refreshLabel: "Refresh",
};

// ── Props ──

/** Props for `TestAnalytics`. */
export interface TestAnalyticsProps {
  /** Summary stat cards (pass rate, tests, runs, flaky count, etc.) */
  stats: StatCardType[];
  /** Active tab */
  activeTab?: TestAnalyticsTabId;
  /** Called when tab changes */
  onTabChange?: (tabId: TestAnalyticsTabId) => void;
  /** Tab content renderers */
  renderOverview?: () => React.ReactNode;
  renderStability?: () => React.ReactNode;
  renderFailures?: () => React.ReactNode;
  renderFlaky?: () => React.ReactNode;
  renderPerformance?: () => React.ReactNode;
  renderAdvanced?: () => React.ReactNode;
  /** Time range for filtering data */
  timeRange?: DateRange;
  /** Called when time range changes */
  onTimeRangeChange?: (range: DateRange) => void;
  /** Refresh handler */
  onRefresh?: () => void;
  loading?: boolean;
  header?: React.ReactNode;
  actions?: React.ReactNode;
  labels?: TestAnalyticsLabels;
  className?: string;
}

// ── Component ──

/** Renders the `TestAnalytics` component. */
export function TestAnalytics({
  stats,
  activeTab: controlledActiveTab,
  onTabChange,
  renderOverview,
  renderStability,
  renderFailures,
  renderFlaky,
  renderPerformance,
  renderAdvanced,
  timeRange,
  onTimeRangeChange,
  onRefresh,
  loading = false,
  header,
  actions,
  labels: customLabels,
  className,
}: TestAnalyticsProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const sectionId = React.useId();

  const [internalActiveTab, setInternalActiveTab] =
    React.useState<TestAnalyticsTabId>("overview");

  const activeTab = controlledActiveTab ?? internalActiveTab;

  const handleTabChange = React.useCallback(
    (tabId: string) => {
      setInternalActiveTab(tabId as TestAnalyticsTabId);
      onTabChange?.(tabId as TestAnalyticsTabId);
    },
    [onTabChange],
  );

  const isEmpty = stats.length === 0;

  const tabs = React.useMemo(
    () => [
      { id: "overview", label: labels.overviewTab },
      { id: "stability", label: labels.stabilityTab },
      { id: "failures", label: labels.failuresTab },
      { id: "flaky", label: labels.flakyTab },
      { id: "performance", label: labels.performanceTab },
      { id: "advanced", label: labels.advancedTab },
    ],
    [labels],
  );

  const tabRenderers: Record<
    TestAnalyticsTabId,
    (() => React.ReactNode) | undefined
  > = {
    overview: renderOverview,
    stability: renderStability,
    failures: renderFailures,
    flaky: renderFlaky,
    performance: renderPerformance,
    advanced: renderAdvanced,
  };

  return (
    <SurfaceLayout loading={loading} className={className}>
      {/* Header */}
      <div className="flex items-center justify-between">
        {header ? (
          <div>{header}</div>
        ) : (
          <h2 className="text-text-primary text-lg font-semibold">
            {labels.title}
          </h2>
        )}
        <div className="gap-element flex items-center">
          <TimeRangeSelector value={timeRange} onChange={onTimeRangeChange} />
          {onRefresh && (
            <button
              type="button"
              onClick={onRefresh}
              className="text-text-tertiary hover:text-text-primary rounded p-1.5 text-sm transition-colors"
              aria-label={labels.refreshLabel}
            >
              ↻
            </button>
          )}
          {actions}
        </div>
      </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>
      ) : (
        <>
          {/* Summary stat cards */}
          <SummaryRow stats={stats} columns={4} />

          {/* Tabbed content */}
          <section aria-labelledby={`${sectionId}-tabs`}>
            <span id={`${sectionId}-tabs`} className="sr-only">
              {labels.title}
            </span>
            <div
              role="tablist"
              aria-label={labels.title}
              className="border-border-subtle flex overflow-x-auto border-b"
            >
              {tabs.map((tab) => (
                <button
                  key={tab.id}
                  type="button"
                  role="tab"
                  aria-selected={activeTab === tab.id}
                  onClick={() => handleTabChange(tab.id)}
                  className={cn(
                    "px-4 py-2 text-sm font-medium transition-colors",
                    activeTab === tab.id
                      ? "border-accent text-text-primary border-b-2"
                      : "text-text-tertiary hover:text-text-secondary",
                  )}
                >
                  {tab.label}
                </button>
              ))}
            </div>
            <div role="tabpanel" className="py-4">
              {tabRenderers[activeTab]?.()}
            </div>
          </section>
        </>
      )}
    </SurfaceLayout>
  );
}

TestAnalytics.displayName = "TestAnalytics";