import React from 'react';

/**
 * Shared trace utilities for CLI, devtools, and dashboard
 *
 * Provides reusable trace snapshot handling, formatting, and analysis
 * across the tailwind-styled-v4 ecosystem without introducing coupling.
 */
interface TraceSnapshot {
    generatedAt: string;
    buildMs: number | null;
    scanMs: number | null;
    analyzeMs: number | null;
    compileMs: number | null;
    memoryMb: {
        rss: number;
        heapUsed: number;
        heapTotal: number;
    } | null;
    classCount: number | null;
    fileCount: number | null;
    cssBytes: number | null;
    mode: string | null;
    eventsReceived?: number;
    eventsProcessed?: number;
    batchesProcessed?: number;
    incrementalUpdates?: number;
    fullRescans?: number;
}
interface TraceSummary {
    workspace: {
        totalPackages: number;
        totalFiles: number;
        totalClasses: number;
        lastScanDurationMs: number;
        lastBuildDurationMs: number;
    };
    cache: {
        hitRate: number;
        totalEntries: number;
        memoryUsageMb: number;
    };
    pipeline: {
        scanDurationMs: number;
        analyzeDurationMs: number;
        compileDurationMs: number;
        totalDurationMs: number;
    };
    health: {
        status: "healthy" | "degraded" | "unhealthy";
        issues: Array<{
            severity: string;
            message: string;
        }>;
    };
}
/**
 * Get health status color for UI rendering
 */
declare function getHealthColor(status?: string): string;
/**
 * Get mode color for UI rendering
 */
declare function getModeColor(mode?: string | null): string;
/**
 * Format memory in human-readable format
 */
declare function formatMemory(bytes: number): string;
/**
 * Format duration in human-readable format
 */
declare function formatDuration(ms: number | null): string;
/**
 * Get color for build time indicator
 */
declare function getBuildTimeColor(ms: number | null): string;
/**
 * Get color for memory usage indicator
 */
declare function getMemoryColor(mb: number): string;
/**
 * Calculate pipeline time distribution
 */
declare function getPipelinePercentages(metrics: TraceSnapshot): {
    scanPct: number;
    analyzePct: number;
    compilePct: number;
};

/**
 * Class Inspector — reusable surface inspection untuk DevTools.
 * Menggunakan inspectClass() dari @tailwind-styled/engine.
 *
 * Dipakai oleh:
 * - DevTools TracePanel → class detail panel
 * - CLI `tw why <class>` → terminal output
 * - Dashboard `/inspect?class=` endpoint
 *
 * Surface ini reusable sesuai requirement dari execution-log.
 */
interface ClassInspectResult {
    className: string;
    css: string;
    properties: Array<{
        property: string;
        value: string;
    }>;
    conflicts: string[];
    usedIn: string[];
    risk: "low" | "medium" | "high";
    bundleBytes: number;
    fetchedAt: number;
}
interface InspectorFetchOptions {
    /** Dashboard base URL (default: http://localhost:7421) */
    baseUrl?: string;
    /** Timeout ms (default: 3000) */
    timeoutMs?: number;
}
/**
 * Fetch inspection data untuk sebuah class dari dashboard server.
 * Dashboard server pakai inspectClass() dari engine secara internal.
 *
 * @example
 * // Di DevTools panel:
 * const result = await fetchClassInspection("flex")
 * console.log(result.properties) // [{ property: "display", value: "flex" }]
 * console.log(result.usedIn)     // ["src/Button.tsx"]
 */
declare function fetchClassInspection(className: string, opts?: InspectorFetchOptions): Promise<ClassInspectResult | null>;
/** Format inspection result untuk CLI terminal output */
declare function formatClassInspectionCli(result: ClassInspectResult): string;
/** Format for JSON output (CLI --json flag) */
declare function formatClassInspectionJson(result: ClassInspectResult): string;

/**
 * tailwind-styled-v4 — DevTools v4
 *
 * Panels:
 *   🔍 Inspector  — hover element, see classes + variants
 *   ⚡ State      — list all reactive state components + active states
 *   📦 Container  — list container query components + active breakpoints
 *   🎨 Tokens     — live token editor with instant preview
 *   📊 Analyzer   — duplicate patterns + unused variants (runtime scan)
 *   🔬 Trace      — build timeline, pipeline events, memory profile
 *
 * Keyboard shortcuts:
 *   Ctrl+Shift+D  → toggle devtools
 *   Escape        → close
 *   1-6           → switch panels
 */

declare function TwDevTools(): React.ReactElement | null;
declare function DevToolsProvider(): React.ReactElement | null;

export { type ClassInspectResult, DevToolsProvider, type InspectorFetchOptions, type TraceSnapshot, type TraceSummary, TwDevTools, fetchClassInspection, formatClassInspectionCli, formatClassInspectionJson, formatDuration, formatMemory, getBuildTimeColor, getHealthColor, getMemoryColor, getModeColor, getPipelinePercentages };