import { CollectorEvent, Collector } from '@junctionjs/core';

/**
 * @junctionjs/debug - Event Store
 *
 * Ring buffer that captures all collector events for the debug panel.
 * Subscribes to the collector's event system and maintains an in-memory
 * log with aggregate counters.
 */

interface DebugEntry {
    /** Auto-incrementing ID */
    id: number;
    /** ISO timestamp from the collector event */
    timestamp: string;
    /** Collector event type */
    type: CollectorEvent;
    /** Raw payload from the event */
    payload: unknown;
}
interface DebugCounters {
    total: number;
    valid: number;
    invalid: number;
    sent: Record<string, number>;
    errors: Record<string, number>;
    consentChanges: number;
    queueFlushes: number;
}
interface DebugStore {
    /** Get all stored entries (newest last) */
    getEntries: () => DebugEntry[];
    /** Get entries filtered by type */
    getByType: (type: CollectorEvent) => DebugEntry[];
    /** Get aggregate counters */
    getCounters: () => DebugCounters;
    /** Get consent categories for a destination (captured at init) */
    getDestinationConsent: (name: string) => string[] | undefined;
    /** Clear all entries and reset counters */
    clear: () => void;
    /** Subscribe to updates (called on every new entry) */
    onUpdate: (callback: () => void) => () => void;
    /** Unsubscribe from all collector events and clean up */
    destroy: () => void;
}

/**
 * @junctionjs/debug - Panel
 *
 * DOM construction for the debug overlay. All rendering uses vanilla DOM
 * inside a shadow root for complete style isolation.
 *
 * 4 tabs: Events | Consent | Destinations | Context
 */

type PanelPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";

/**
 * @junctionjs/debug
 *
 * In-page debug overlay for Junction. Shows real-time event flow,
 * consent state, destination status, and context snapshot.
 *
 * Zero dependencies. Vanilla DOM in a shadow root. ~5KB gzipped.
 *
 * Usage:
 *   import { createDebugPanel } from "@junctionjs/debug";
 *
 *   const panel = createDebugPanel(window.jct, {
 *     shortcut: "ctrl+shift+j",
 *     startOpen: false,
 *     position: "bottom-right",
 *   });
 *
 *   // Or for Astro integration:
 *   // The panel auto-injects when debug: true in your junction config.
 */

interface DebugPanelOptions {
    /**
     * Keyboard shortcut to toggle the panel (default: "ctrl+shift+j").
     * Format: modifier keys joined with "+" followed by a key.
     * Examples: "ctrl+shift+j", "meta+shift+d", "ctrl+shift+."
     */
    shortcut?: string;
    /** Maximum events to retain in the ring buffer (default: 500) */
    maxEvents?: number;
    /** Start with the panel open (default: false) */
    startOpen?: boolean;
    /** Panel position on screen (default: "bottom-right") */
    position?: PanelPosition;
}
interface DebugPanelInstance {
    /** Open the debug panel */
    open: () => void;
    /** Close the debug panel */
    close: () => void;
    /** Toggle open/close */
    toggle: () => void;
    /** Remove the panel from the DOM and unsubscribe from all events */
    destroy: () => void;
    /** Access the underlying event store (for programmatic use) */
    store: DebugStore;
}
declare function createDebugPanel(collector: Collector, options?: DebugPanelOptions): DebugPanelInstance;

export { type DebugCounters, type DebugEntry, type DebugPanelInstance, type DebugPanelOptions, type DebugStore, type PanelPosition, createDebugPanel };