InsightsDashboard

"use client";

import * as React from "react";
import {
  InsightsPanel,
  Button,
  Alert,
  Switch,
  SurfaceLayout,
  TimeRangeSelector,
  type InsightItem,
  type InsightsStat,
  type DetectionTypeDef,
  type DetectionConfig,
  type InsightsPanelLabels,
  type DateRange,
} from "@reopt-ai/opt-ui";

/** Labels for `InsightsDashboard`. */
export interface InsightsDashboardLabels extends InsightsPanelLabels {
  dashboard?: string;
  runDetection?: string;
  running?: string;
  emptyTitle?: string;
  emptyDescription?: string;
  emptyRunAction?: string;
  /** Label for the show dismissed toggle at surface level */
  showDismissedLabel?: string;
  /** Title for the detection settings panel */
  detectionPanelTitle?: string;
  /** Label for dismiss insight action */
  dismissButton?: string;
}

const defaultLabels: Required<InsightsDashboardLabels> = {
  dashboard: "Insights",
  runDetection: "Run Detection",
  running: "Running...",
  emptyTitle: "No insights yet",
  emptyDescription: "Run anomaly detection to discover insights.",
  emptyRunAction: "Run Detection",
  showDismissedLabel: "Show dismissed",
  detectionPanelTitle: "Detection Settings",
  dismissButton: "Dismiss",
  title: "",
  dismiss: "Dismiss",
  showDismissed: "Show dismissed",
  hideDismissed: "Hide dismissed",
  detectionTitle: "Detection Settings",
  daysLabel: "Days",
  zScoreLabel: "Z-Score",
};

/** Props for `InsightsDashboard`. */
export interface InsightsDashboardProps {
  insights: InsightItem[];
  stats?: InsightsStat[];
  detectionTypes?: DetectionTypeDef[];
  onDetectionTypeToggle?: (typeId: string, enabled: boolean) => void;
  detectionConfig?: DetectionConfig;
  onDetectionConfigChange?: (config: DetectionConfig) => void;
  onDismiss?: (id: string) => void;
  onInsightClick?: (insight: InsightItem) => void;
  onStatClick?: (statId: string) => void;
  /** Trigger detection run */
  onRun?: () => void;
  /** Whether detection is currently running */
  running?: boolean;
  /** Error message to display */
  error?: string;
  /** Controlled show/hide dismissed insights toggle */
  showDismissed?: boolean;
  /** Callback when show dismissed toggle changes */
  onShowDismissedChange?: (show: boolean) => void;
  /** Alias for onDismiss — dismiss a specific insight */
  onDismissInsight?: (insightId: string) => void;
  /** Detection method definitions (alias for detectionTypes) */
  detections?: Array<{
    id: string;
    name: string;
    enabled: boolean;
    description?: string;
  }>;
  /** Toggle a detection method (alias for onDetectionTypeToggle) */
  onDetectionToggle?: (detectionId: string, enabled: boolean) => void;
  /** Detection parameters as key-value record */
  detectionParams?: Record<string, number>;
  /** Callback when a detection parameter changes */
  onDetectionParamChange?: (key: string, value: number) => void;
  loading?: boolean;
  timeRange?: DateRange;
  onTimeRangeChange?: (range: DateRange) => void;
  header?: React.ReactNode;
  actions?: React.ReactNode;
  labels?: InsightsDashboardLabels;
  className?: string;
}

/** Renders the `InsightsDashboard` component. */
export function InsightsDashboard({
  insights,
  stats,
  detectionTypes,
  onDetectionTypeToggle,
  detectionConfig,
  onDetectionConfigChange,
  onDismiss,
  onInsightClick,
  onStatClick,
  onRun,
  running = false,
  error,
  showDismissed: controlledShowDismissed,
  onShowDismissedChange,
  onDismissInsight,
  detections,
  onDetectionToggle,
  detectionParams,
  onDetectionParamChange,
  loading = false,
  timeRange,
  onTimeRangeChange,
  header,
  actions,
  labels: customLabels,
  className,
}: InsightsDashboardProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const titleId = React.useId();

  // Merge detections alias into detectionTypes
  const mergedDetectionTypes: DetectionTypeDef[] | undefined =
    detectionTypes ??
    detections?.map((d) => ({ id: d.id, label: d.name, enabled: d.enabled }));
  const mergedDetectionToggle = onDetectionTypeToggle ?? onDetectionToggle;

  // Merge detectionParams into detectionConfig
  const mergedDetectionConfig: DetectionConfig | undefined =
    detectionConfig ??
    (detectionParams
      ? {
          days: detectionParams.days,
          zScoreThreshold: detectionParams.zScoreThreshold,
        }
      : undefined);
  const mergedDetectionConfigChange =
    onDetectionConfigChange ??
    (onDetectionParamChange
      ? (config: DetectionConfig) => {
          if (config.days != null) onDetectionParamChange("days", config.days);
          if (config.zScoreThreshold != null)
            onDetectionParamChange("zScoreThreshold", config.zScoreThreshold);
        }
      : undefined);

  // Merge dismiss callback
  const mergedDismiss = onDismiss ?? onDismissInsight;

  // Controlled vs uncontrolled showDismissed
  const [internalShowDismissed, setInternalShowDismissed] =
    React.useState(false);
  const isControlled = controlledShowDismissed !== undefined;
  const showDismissed = isControlled
    ? controlledShowDismissed
    : internalShowDismissed;
  const toggleShowDismissed = () => {
    const next = !showDismissed;
    if (onShowDismissedChange) {
      onShowDismissedChange(next);
    }
    if (!isControlled) {
      setInternalShowDismissed(next);
    }
  };

  const isEmpty =
    insights.length === 0 &&
    (!stats || stats.length === 0) &&
    (!mergedDetectionTypes || mergedDetectionTypes.length === 0) &&
    mergedDetectionConfig == null;

  const runButton = onRun ? (
    <Button variant="primary" size="sm" onClick={onRun} disabled={running}>
      {running ? labels.running : labels.runDetection}
    </Button>
  ) : null;

  const panelLabels: InsightsPanelLabels = {
    title: labels.title,
    dismiss: labels.dismissButton || labels.dismiss,
    showDismissed: labels.showDismissed,
    hideDismissed: labels.hideDismissed,
    emptyTitle: labels.emptyTitle,
    emptyDescription: labels.emptyDescription,
    detectionTitle: labels.detectionPanelTitle || labels.detectionTitle,
    daysLabel: labels.daysLabel,
    zScoreLabel: labels.zScoreLabel,
  };

  // Filter insights based on showDismissed state at surface level
  const visibleInsights = showDismissed
    ? insights
    : insights.filter((i) => !i.dismissed);

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

      {/* Show dismissed toggle (controlled or uncontrolled at surface level) */}
      {(onShowDismissedChange || !isControlled) && insights.length > 0 && (
        <div className="gap-element flex items-center">
          <Switch
            checked={showDismissed}
            onChange={toggleShowDismissed}
            size="sm"
          />
          <span className="text-text-secondary text-sm">
            {labels.showDismissedLabel}
          </span>
        </div>
      )}

      {/* Detection descriptions (from detections alias) */}
      {detections &&
        detections.some((d) => d.description) &&
        !detectionTypes && (
          <div className="gap-element flex flex-wrap">
            {detections
              .filter((d) => d.description)
              .map((d) => (
                <span
                  key={d.id}
                  className="text-text-tertiary text-xs"
                  title={d.description}
                >
                  <span className="font-medium">{d.name}:</span> {d.description}
                </span>
              ))}
          </div>
        )}

      {error && (
        <Alert variant="error" aria-live="polite">
          {error}
        </Alert>
      )}

      {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>
          {onRun && (
            <Button
              variant="primary"
              size="sm"
              className="mt-4"
              onClick={onRun}
              disabled={running}
            >
              {running ? labels.running : labels.emptyRunAction}
            </Button>
          )}
        </div>
      ) : (
        <InsightsPanel
          insights={visibleInsights}
          stats={stats}
          detectionTypes={mergedDetectionTypes}
          onDetectionTypeToggle={mergedDetectionToggle}
          detectionConfig={mergedDetectionConfig}
          onDetectionConfigChange={mergedDetectionConfigChange}
          onDismiss={mergedDismiss}
          onInsightClick={onInsightClick}
          onStatClick={onStatClick}
          labels={panelLabels}
        />
      )}
    </SurfaceLayout>
  );
}

InsightsDashboard.displayName = "InsightsDashboard";