<template>
    <span v-if="rawCount > 0" class="bm-designer__badge bm-designer__badge--raw" :title="title">
        {{ rawCount }} raw {{ rawCount === 1 ? 'value' : 'values' }}
    </span>
</template>

<script>
/**
 * Mirrors VariantRawValueAuditor::audit() — walks every base.{state}.{breakpoint}
 * cell of the property tree counting {raw: …} wraps. Empty/null wraps don't count.
 */
export default {
    name: 'RawValueBadge',
    props: {
        propertiesJson: { type: Object, default: () => ({}) },
    },
    computed: {
        rawCount() {
            return this.audit(this.propertiesJson).rawCount;
        },
        tokenCount() {
            return this.audit(this.propertiesJson).tokenCount;
        },
        title() {
            return `${this.tokenCount} token-bound, ${this.rawCount} raw. Token-binding helps the design system stay coherent.`;
        },
    },
    methods: {
        audit(tree) {
            let raw = 0;
            let token = 0;
            const base = (tree && tree.base) || null;
            if (!base || typeof base !== 'object') {
                return { rawCount: 0, tokenCount: 0 };
            }
            Object.values(base).forEach((stateCells) => {
                if (!stateCells || typeof stateCells !== 'object') return;
                Object.values(stateCells).forEach((breakpointCell) => {
                    if (!breakpointCell || typeof breakpointCell !== 'object') return;
                    Object.values(breakpointCell).forEach((properties) => {
                        if (!properties || typeof properties !== 'object') return;
                        Object.values(properties).forEach((wrap) => {
                            if (!wrap || typeof wrap !== 'object') return;
                            if (typeof wrap.token === 'string' && wrap.token !== '') {
                                token += 1;
                            } else if (wrap.raw !== undefined && wrap.raw !== null && wrap.raw !== '') {
                                raw += 1;
                            }
                        });
                    });
                });
            });
            return { rawCount: raw, tokenCount: token };
        },
    },
};
</script>
