AnalyticsDashboard

"use client";

import * as React from "react";
import {
  SurfaceLayout,
  SummaryRow,
  TimeRangeSelector,
  cn,
  type DateRange,
} from "@reopt-ai/opt-ui";
import {
  LineChart,
  BarChart,
  PieChart,
  type ChartDataPoint,
  type ChartSeriesDef,
  type PieChartDataPoint,
} from "@reopt-ai/opt-charts";

/** Statistic shape for `AnalyticsDashboard`. */
export interface AnalyticsDashboardStat {
  id: string;
  title: string;
  value: string;
  change: string;
  trend: "up" | "down" | "neutral";
  sparklineData?: number[];
}

/** Item shape for `AnalyticsNav`. */
export interface AnalyticsNavItem {
  id: string;
  label: string;
  description?: string;
  icon?: string;
  href?: string;
  onClick?: () => void;
}

/** Labels for `AnalyticsDashboard`. */
export interface AnalyticsDashboardLabels {
  analytics?: string;
  trend?: string;
  breakdown?: string;
  pie?: string;
  tools?: string;
  emptyTitle?: string;
  emptyDescription?: string;
}

const defaultLabels: Required<AnalyticsDashboardLabels> = {
  analytics: "Analytics",
  trend: "Trend",
  breakdown: "Breakdown",
  pie: "Distribution",
  tools: "Analysis Tools",
  emptyTitle: "No analytics data",
  emptyDescription: "Analytics data will appear here once available.",
};

/** Props for `AnalyticsDashboard`. */
export interface AnalyticsDashboardProps {
  stats: AnalyticsDashboardStat[];
  trendData?: ChartDataPoint[];
  trendSeries?: ChartSeriesDef[];
  breakdownData?: ChartDataPoint[];
  breakdownSeries?: ChartSeriesDef[];
  pieData?: PieChartDataPoint[];
  /** Navigation cards for analysis tools */
  navItems?: AnalyticsNavItem[];
  /** Footer content (e.g., SDK info, integration details) */
  footer?: React.ReactNode;
  header?: React.ReactNode;
  actions?: React.ReactNode;
  /** Custom filter/alert area rendered between stats and charts (e.g., metric selector badges, callouts) */
  filterContent?: React.ReactNode;
  /** Additional content rendered between charts and nav items (e.g., top events table, recent activity) */
  tableContent?: React.ReactNode;
  labels?: AnalyticsDashboardLabels;
  loading?: boolean;
  timeRange?: DateRange;
  onTimeRangeChange?: (range: DateRange) => void;
  className?: string;
}

/** Renders the `AnalyticsDashboard` component. */
export function AnalyticsDashboard({
  stats,
  trendData = [],
  trendSeries = [],
  breakdownData = [],
  breakdownSeries = [],
  pieData,
  navItems,
  footer,
  header,
  actions,
  filterContent,
  tableContent,
  labels: customLabels,
  loading = false,
  timeRange,
  onTimeRangeChange,
  className,
}: AnalyticsDashboardProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const titleId = React.useId();
  const trendId = React.useId();
  const breakdownId = React.useId();
  const pieId = React.useId();
  const toolsId = React.useId();

  const isEmpty = stats.length === 0;
  const hasNavItems = navItems && navItems.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 id={titleId} className="text-text-primary text-lg font-semibold">
            {labels.analytics}
          </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>
      ) : (
        <>
          <SummaryRow stats={stats} columns={4} />

          {filterContent}

          {trendData.length > 0 && trendSeries.length > 0 && (
            <section aria-labelledby={trendId}>
              <h3
                id={trendId}
                className="text-text-tertiary mb-2 text-sm font-medium"
              >
                {labels.trend}
              </h3>
              <LineChart
                data={trendData}
                series={trendSeries}
                aria-label={labels.trend}
              />
            </section>
          )}

          {breakdownData.length > 0 && breakdownSeries.length > 0 && (
            <section aria-labelledby={breakdownId}>
              <h3
                id={breakdownId}
                className="text-text-tertiary mb-2 text-sm font-medium"
              >
                {labels.breakdown}
              </h3>
              <BarChart
                data={breakdownData}
                series={breakdownSeries}
                aria-label={labels.breakdown}
              />
            </section>
          )}

          {pieData && pieData.length > 0 && (
            <section aria-labelledby={pieId}>
              <h3
                id={pieId}
                className="text-text-tertiary mb-2 text-sm font-medium"
              >
                {labels.pie}
              </h3>
              <PieChart data={pieData} aria-label={labels.pie} />
            </section>
          )}

          {tableContent}

          {hasNavItems && (
            <section aria-labelledby={toolsId}>
              <h3
                id={toolsId}
                className="text-text-tertiary mb-3 text-sm font-medium"
              >
                {labels.tools}
              </h3>
              <nav
                aria-label={labels.tools}
                className="gap-group grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"
              >
                {navItems.map((item) => {
                  const content = (
                    <>
                      {item.icon && (
                        <span className="text-lg" aria-hidden="true">
                          {item.icon}
                        </span>
                      )}
                      <span className="text-text-primary text-sm font-medium">
                        {item.label}
                      </span>
                      {item.description && (
                        <span className="text-text-tertiary text-xs">
                          {item.description}
                        </span>
                      )}
                    </>
                  );

                  const cls =
                    "gap-element flex flex-col rounded-lg border border-border-subtle p-3 transition-colors hover:bg-bg-subtle";

                  if (item.href) {
                    return (
                      <a key={item.id} href={item.href} className={cls}>
                        {content}
                      </a>
                    );
                  }
                  return (
                    <button
                      key={item.id}
                      type="button"
                      onClick={item.onClick}
                      className={cn(cls, "text-left")}
                    >
                      {content}
                    </button>
                  );
                })}
              </nav>
            </section>
          )}

          {footer && <div>{footer}</div>}
        </>
      )}
    </SurfaceLayout>
  );
}

AnalyticsDashboard.displayName = "AnalyticsDashboard";