'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/devtools/components/StoresTab.tsx
/**
 * @fileoverview Stores Tab Component
 * @description Displays registered Zustand stores from globalThis._DNDEV_STORES_
 *
 * @version 0.0.2
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { RefreshCw } from 'lucide-react';
import { useState, useEffect, useCallback } from 'react';
import { Stack, Card, Accordion, ScrollArea, JsonViewer, Text, Badge, BADGE_VARIANT, Button, BUTTON_VARIANT, } from '@donotdev/components';
const STORE_NAMES = {
    'theme-store': 'Theme',
    'consent-store': 'Consent',
    'navigation-store': 'Navigation',
    'loading-store': 'Loading',
    'overlay-store': 'Overlay',
    'network-store': 'Network',
    'abort-store': 'Abort',
    'i18n-store': 'i18n',
    'error-store': 'Error',
};
export const StoresTab = () => {
    const [storeStates, setStoreStates] = useState({});
    const [storeNames, setStoreNames] = useState([]);
    const refreshStores = useCallback(() => {
        const registry = globalThis._DNDEV_STORES_;
        if (!registry) {
            setStoreNames([]);
            setStoreStates({});
            return;
        }
        const names = Object.keys(registry);
        setStoreNames(names);
        const states = {};
        names.forEach((name) => {
            try {
                const store = registry[name];
                if (store?.getState) {
                    states[name] = store.getState();
                }
                else {
                    states[name] = { _error: 'No getState method' };
                }
            }
            catch (e) {
                states[name] = { _error: String(e) };
            }
        });
        setStoreStates(states);
    }, []);
    useEffect(() => {
        // StoresTab is only rendered inside DevTools (dev-only), but guard defensively
        if (process.env.NODE_ENV !== 'development')
            return;
        refreshStores();
        const interval = setInterval(refreshStores, 1000);
        return () => clearInterval(interval);
    }, [refreshStores]);
    const getDisplayName = (name) => STORE_NAMES[name] || name.replace(/-store$/, '').replace(/-/g, ' ');
    if (storeNames.length === 0) {
        return (_jsx(Stack, { style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: "Stores", subtitle: "No stores registered", children: _jsx(Text, { className: "dndev-text-muted-foreground", children: "globalThis._DNDEV_STORES_ is empty or not initialized." }) }) }));
    }
    return (_jsx(Stack, { style: { padding: 'var(--gap-md)' }, children: _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Stores" }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: storeNames.length }), _jsx(Button, { variant: BUTTON_VARIANT.GHOST, icon: RefreshCw, onClick: refreshStores, title: "Refresh stores" })] })] }), children: _jsx(Accordion, { type: "single", collapsible: true, items: storeNames.map((name) => {
                    const state = storeStates[name];
                    const hasError = state?._error;
                    return {
                        value: name,
                        trigger: (_jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx(Text, { className: "dndev-font-medium", children: getDisplayName(name) }), _jsx(Text, { className: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground", children: name })] })),
                        content: hasError ? (_jsx(Text, { className: "dndev-text-destructive dndev-text-sm", children: state._error })) : (_jsx(ScrollArea, { className: "dndev-max-h-64", children: _jsx(JsonViewer, { data: state, defaultDepth: 2, showCopyButton: true }) })),
                    };
                }) }) }) }));
};
