'use client';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
// packages/ui/src/internal/devtools/components/ConfigTab.tsx
/**
 * @fileoverview Config Tab Component
 * @description Framework config and environment variables
 *
 * @version 0.0.2
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Card, DescriptionList, Text, Badge, BADGE_VARIANT, Stack, } from '@donotdev/components';
import { getDndevConfig, getConfigSource } from '@donotdev/core';
import { MaskedValue } from './MaskedValue';
export const ConfigTab = () => {
    const config = getDndevConfig();
    const source = getConfigSource();
    const envVars = config?.env || {};
    if (!config) {
        return (_jsx(Card, { title: "Config", subtitle: "Not available", children: _jsxs(Text, { className: "dndev-text-muted-foreground", children: ["Config not loaded. Source: ", source.source] }) }));
    }
    const frameworkItems = [
        {
            label: 'Platform',
            value: _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: config.platform }),
        },
        {
            label: 'Mode',
            value: (_jsx(Badge, { variant: config.mode === 'development'
                    ? BADGE_VARIANT.DEFAULT
                    : BADGE_VARIANT.SECONDARY, children: config.mode })),
        },
        {
            label: 'Version',
            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.version })),
        },
    ];
    const summaryItems = [
        config.themes && {
            label: 'Themes',
            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.themes.discovered?.length || 0 })),
        },
        config.routes && {
            label: 'Routes',
            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.routes.mapping?.length || 0 })),
        },
        config.i18n && {
            label: 'Languages',
            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.i18n.languages?.join(', ') })),
        },
        config.features && {
            label: 'Features',
            value: (_jsx(Text, { className: "dndev-font-mono dndev-text-sm", children: config.features.available?.length || 0 })),
        },
    ].filter(Boolean);
    const envItems = Object.entries(envVars).map(([key, value]) => ({
        label: _jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: key }),
        value: _jsx(MaskedValue, { keyName: key, value: String(value) }),
    }));
    return (_jsxs(Stack, { style: { padding: 'var(--gap-md)' }, children: [_jsx(Card, { title: "Framework", subtitle: source.source, children: _jsx(DescriptionList, { items: frameworkItems }) }), summaryItems.length > 0 && (_jsx(Card, { title: "Discovery", children: _jsx(DescriptionList, { items: summaryItems }) })), envItems.length > 0 && (_jsx(Card, { title: "Environment", subtitle: `${envItems.length} variables`, children: _jsx(DescriptionList, { items: envItems }) }))] }));
};
