import * as react_jsx_runtime from 'react/jsx-runtime';
import { ReactNode } from 'react';

/**
 * ChartFrame decouples chart width from live parent width changes by debouncing
 * ResizeObserver callbacks. Prevents Recharts (under @mantine/charts) from firing
 * dozens of full re-renders during the sidebar collapse/expand animation.
 *
 * How it works: the outer div observes its real container width. The inner div
 * is given a fixed pixel width from React state, which Recharts' own
 * ResponsiveContainer reads. State only updates after `debounceMs` of quiet, so
 * the chart doesn't re-render on every frame of the sidebar transition.
 *
 * @repo/ui context: used wherever a @mantine/charts component renders inside
 * a layout that has a CSS-transitioned collapsible sidebar. Without this wrapper,
 * every frame of the sidebar animation fires ResizeObserver → Recharts scale
 * recomputation → React reconciliation → SVG regeneration, saturating the main
 * thread and causing animation jitter.
 */
interface ChartFrameProps {
    h: number;
    debounceMs?: number;
    children: ReactNode;
}
declare function ChartFrame({ h, debounceMs, children }: ChartFrameProps): react_jsx_runtime.JSX.Element;

/**
 * CyberAreaChart — Reusable area chart with cyber/high-tech aesthetic.
 *
 * Features:
 * - SVG gradient fills with neon color palette (light/dark aware)
 * - Gaussian blur glow filters on lines
 * - Glassmorphism tooltip with backdrop blur
 * - Animated pulsing active dots
 * - Dotted grid lines at low opacity
 * - Baseline glow line when all values are zero
 * - Consistent slide-in animation on every mount
 */
interface CyberSeries {
    /** The key in each data record that holds this series' value. */
    dataKey: string;
    /** Display name shown in tooltip. Defaults to dataKey. */
    name?: string;
    /** Which cyber color to use. Defaults to 'cyan'. */
    color?: 'cyan' | 'blue' | 'green' | 'red' | 'yellow';
    /** Animation duration in ms. Defaults to 1200. */
    animationDuration?: number;
}
interface CyberAreaChartProps {
    data: Record<string, unknown>[];
    series: CyberSeries[];
    /** Key in each data record used for the X axis. Defaults to 'time'. */
    xDataKey?: string;
    /** Chart height in px. Defaults to 300. */
    height?: number;
    /** Y-axis label text. */
    yAxisLabel?: string;
    /** Y-axis domain. Defaults to [0, 'auto']. */
    yDomain?: [number | string | ((v: number) => number), number | string | ((v: number) => number)];
    /** Custom Y-axis tick formatter. */
    yTickFormatter?: (value: number) => string;
    /** Custom X-axis tick formatter. When provided, raw data values are used as keys and this formats the display. */
    xTickFormatter?: (value: string) => string;
    /** Whether to show the dotted grid. Defaults to true. */
    showGrid?: boolean;
    /** Whether to show a glowing baseline when all values are 0. Defaults to true. */
    showZeroBaseline?: boolean;
    /** Which cyber color to use for the zero baseline. Defaults to the first series' color. */
    baselineColor?: 'cyan' | 'blue' | 'green' | 'red' | 'yellow';
    /** Render as line only (no gradient fill). Defaults to false. */
    lineOnly?: boolean;
    /** Custom tooltip value formatter. Defaults to String(value). */
    tooltipFormatter?: (value: number) => string;
    /** Chart margin overrides. */
    margin?: {
        top?: number;
        right?: number;
        bottom?: number;
        left?: number;
    };
}
declare function CyberLegendItem({ color, label }: {
    color: string;
    label: string;
}): react_jsx_runtime.JSX.Element;
declare function CyberAreaChart({ data, series, xDataKey, height, yAxisLabel, yDomain, yTickFormatter, showGrid, showZeroBaseline, baselineColor, lineOnly, margin, xTickFormatter, tooltipFormatter }: CyberAreaChartProps): react_jsx_runtime.JSX.Element;

/**
 * Cyber chart theme — color palette and shared config for light/dark modes.
 *
 * Theme-derived values (grid, tick text, tooltip) use CSS custom properties
 * so they automatically match whatever color theme the app uses.
 * Only the neon accent colors (cyan, blue, green, red) differ between light/dark.
 */
interface CyberColors {
    cyan: string;
    cyanDim: string;
    blue: string;
    green: string;
    greenDim: string;
    red: string;
    redDim: string;
    yellow: string;
    magenta: string;
    grid: string;
    gridLine: string;
    tickText: string;
    tooltipBg: string;
    tooltipBorder: string;
    tooltipText: string;
    cardGlow: string;
    dotStroke: string;
}
/** Returns the resolved cyber color palette for the current color scheme. */
declare function useCyberColors(): CyberColors;
/** Map a series dataKey to its color from the palette. */
declare function getSeriesColor(key: string, colors: CyberColors): string;

interface CyberDonutSegment {
    name: string;
    value: number;
    color: string;
}
interface CyberDonutProps {
    /** Title shown above the ring. Omit to suppress. */
    title?: string;
    /** Segment data. Component handles empty-state detection internally. */
    segments: CyberDonutSegment[];
    /** Center value displayed in the donut hole. */
    centerValue: string | number;
    /** Sub-label below the center value. */
    centerLabel: string;
    /** Color override for the center value text. Defaults to var(--mantine-color-text). */
    centerValueColor?: string;
    /** SVG filter ID namespace. REQUIRED when multiple donuts coexist on the same page. */
    glowId: string;
    /** Cyber color palette. Obtain via useCyberColors(). */
    colors: CyberColors;
    /** Donut size in px. Defaults to 120. */
    size?: number;
    /** Inner radius of the ring. Defaults to 36. */
    innerRadius?: number;
    /** Outer radius of the ring. Defaults to 52. */
    outerRadius?: number;
    /** When true, shows '-' for center value and legend counts. */
    isLoading?: boolean;
    /** Whether to show the legend below the donut. Defaults to true. */
    showLegend?: boolean;
}
declare function CyberDonutTooltip({ active, payload, colors }: {
    active?: boolean;
    payload?: Array<{
        name?: string;
        value?: number;
        payload?: {
            color?: string;
        };
    }>;
    colors: CyberColors;
}): react_jsx_runtime.JSX.Element | null;
declare function CyberDonut({ title, segments, centerValue, centerLabel, centerValueColor, glowId, colors, size, innerRadius, outerRadius, isLoading, showLegend }: CyberDonutProps): react_jsx_runtime.JSX.Element;

/**
 * Time range selector for dashboard metrics
 */
type TimeRange = '1h' | '24h' | '7d' | '30d';
/**
 * Execution health metrics response
 * Success rate, P95 duration, execution counts, and trend data
 * trendData includes executionCount for throughput visualization (eliminates separate API call)
 */
interface ExecutionHealthMetrics {
    successRate: number;
    p95Duration: number;
    totalExecutions: number;
    trendData: Array<{
        time: string;
        rate: number;
        successCount: number;
        errorCount: number;
        warningCount: number;
        executionCount: number;
    }>;
    statusCounts: {
        success: number;
        failed: number;
        pending: number;
        warning: number;
    };
    peakPeriod: string;
    granularity: 'hour' | 'day';
}
/**
 * Error analysis metrics response
 * Error categories and top failing resources
 */
interface ErrorAnalysisMetrics {
    totalErrors: number;
    errorsByCategory: Array<{
        category: string;
        count: number;
        percentage: number;
    }>;
    topFailingResources: Array<{
        resourceId: string;
        name: string;
        errorCount: number;
        failureRate: number;
    }>;
}
/**
 * Business impact metrics response
 * ROI, labor savings, and cost analysis
 */
interface BusinessImpactMetrics {
    totalSavingsUsd: number;
    totalCostUsd: number;
    netSavingsUsd: number;
    roi: number;
}
/**
 * Cost breakdown metrics response
 * Per-resource cost analysis
 */
interface CostBreakdownMetrics {
    resources: Array<{
        resourceId: string;
        totalCostUsd: number;
        executionCount: number;
        avgCostUsd: number;
    }>;
}
/**
 * Dashboard metrics response
 * Aggregates core observability metrics in a single response
 * Note: Throughput data is now included in executionHealth.trendData.executionCount
 */
interface DashboardMetrics {
    executionHealth: ExecutionHealthMetrics;
    costBreakdown: CostBreakdownMetrics;
    businessImpact: BusinessImpactMetrics;
    /** ISO timestamp of the currently active deployment, or null if none */
    activeDeploymentDate: string | null;
    /** Deployment version of the active deployment, or null if none */
    activeDeploymentVersion: string | null;
}
/**
 * Cost trend data point for time-series charts
 * Represents a single time bucket (hour or day)
 */
interface CostTrendDataPoint {
    time: string;
    totalCostUsd: number;
    executionCount: number;
    avgCostPerExecution: number;
}
/**
 * Cost trends response (time-series data)
 */
interface CostTrendsResponse {
    trendData: CostTrendDataPoint[];
    granularity: 'hour' | 'day';
    totalCostUsd: number;
    totalExecutions: number;
}
/**
 * Cost summary response with MTD and projections
 */
interface CostSummaryResponse {
    current: {
        totalCostUsd: number;
        executionCount: number;
    };
    previous: {
        totalCostUsd: number;
        executionCount: number;
    };
    mtd: {
        totalCostUsd: number;
        daysElapsed: number;
    };
    projection: {
        monthlyCostUsd: number;
        confidence: 'low' | 'medium' | 'high';
    };
    trend: {
        changePercent: number;
        direction: 'up' | 'down' | 'flat';
    };
}

interface ActivityTrendChartProps {
    timestamps: Date[];
    total: number;
    isLoading: boolean;
    timeRange: TimeRange;
}
declare function ActivityTrendChart({ timestamps, total, isLoading, timeRange }: ActivityTrendChartProps): react_jsx_runtime.JSX.Element;

interface CostTrendChartProps {
    data?: CostTrendsResponse;
    summaryData?: CostSummaryResponse;
    isLoading: boolean;
    error?: Error | null;
}
declare function CostTrendChart({ data, summaryData, isLoading, error }: CostTrendChartProps): react_jsx_runtime.JSX.Element;

interface HeroStatsRowProps {
    resourcesData?: {
        workflows: unknown[];
        agents: unknown[];
        total: number;
    };
    resourcesLoading: boolean;
    dashboardData?: DashboardMetrics;
    dashboardLoading: boolean;
    unresolvedErrorCount: number | null;
    errorsLoading: boolean;
}
declare function HeroStatsRow({ resourcesData, resourcesLoading, dashboardData, dashboardLoading, unresolvedErrorCount, errorsLoading }: HeroStatsRowProps): react_jsx_runtime.JSX.Element;

interface CombinedTrendChartProps {
    healthData?: ExecutionHealthMetrics;
    errorData?: ErrorAnalysisMetrics;
    isLoading: boolean;
    error?: Error | null;
    timeRange: TimeRange;
    /** Optional navigation action rendered in the header (e.g., a Link button). */
    navigationAction?: ReactNode;
    compact?: boolean;
}
declare function CombinedTrendChart({ healthData, errorData: _errorData, isLoading, error, timeRange, navigationAction, compact }: CombinedTrendChartProps): react_jsx_runtime.JSX.Element;

export { ActivityTrendChart, ChartFrame, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors };
export type { ActivityTrendChartProps, ChartFrameProps, CombinedTrendChartProps, CostTrendChartProps, CyberAreaChartProps, CyberColors, CyberDonutProps, CyberDonutSegment, CyberSeries, HeroStatsRowProps };
