'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/devtools/components/DesignTab.tsx
/**
 * @fileoverview Design Tab Component
 * @description Unified design debugging: themes, color ratio, typography
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { Palette, Type } from 'lucide-react';
import { useState, useEffect } from 'react';
import { Card, Button, BUTTON_VARIANT, Stack, Label, Badge, BADGE_VARIANT, Alert, ALERT_VARIANT, DescriptionList, Text, ScrollArea, Accordion, CopyToClipboard, toast, } from '@donotdev/components';
import { useTheme, useThemeReady } from '@donotdev/core';
export const DesignTab = () => {
    const currentTheme = useTheme('currentTheme');
    const availableThemes = useTheme('availableThemes');
    const isDarkMode = useTheme('isDarkMode');
    const isReady = useThemeReady();
    // Load cached analysis from localStorage
    const loadCachedAnalysis = () => {
        try {
            const cached = localStorage.getItem('dndev-design-analysis');
            if (cached) {
                const parsed = JSON.parse(cached);
                if (parsed.colorRatio)
                    setColorRatio(parsed.colorRatio);
                if (parsed.typography)
                    setTypography(parsed.typography);
                if (parsed.fontSizeColors)
                    setFontSizeColors(parsed.fontSizeColors);
            }
        }
        catch (e) {
            // Ignore cache errors
        }
    };
    // Save analysis to localStorage
    const saveAnalysis = (colorRatioData, typographyData, fontSizeColorsData) => {
        try {
            localStorage.setItem('dndev-design-analysis', JSON.stringify({
                colorRatio: colorRatioData,
                typography: typographyData,
                fontSizeColors: fontSizeColorsData,
                timestamp: new Date().toISOString(),
            }));
        }
        catch (e) {
            // Ignore save errors
        }
    };
    useEffect(() => {
        loadCachedAnalysis();
    }, []);
    const [colorRatio, setColorRatio] = useState(null);
    const [typography, setTypography] = useState(null);
    const [isAnalyzing, setIsAnalyzing] = useState(false);
    const [highlightedSize, setHighlightedSize] = useState(null);
    const [fontSizeColors, setFontSizeColors] = useState({});
    // Normalize font size for comparison (round to 2 decimals)
    const normalizeFontSize = (size) => {
        return parseFloat(size).toFixed(2) + 'px';
    };
    // Highlight/unhighlight elements by font size
    const toggleHighlight = (size) => {
        // Clear previous highlights
        document.querySelectorAll('[data-dndev-highlight]').forEach((el) => {
            el.style.outline = '';
            el.removeAttribute('data-dndev-highlight');
        });
        if (highlightedSize === size) {
            setHighlightedSize(null);
            return;
        }
        // Highlight elements with matching font size - ONLY leaf nodes
        const elements = document.querySelectorAll('*');
        let count = 0;
        const normalizedSize = normalizeFontSize(size);
        elements.forEach((el) => {
            if (isOverlayElement(el))
                return;
            // Only highlight leaf nodes (same logic as analysis)
            const hasText = el.textContent && el.textContent.trim().length > 0;
            const hasChildElements = el.children.length > 0;
            if (!hasText || hasChildElements)
                return;
            const style = getComputedStyle(el);
            if (normalizeFontSize(style.fontSize) === normalizedSize) {
                el.style.outline = '2px solid var(--primary)';
                el.setAttribute('data-dndev-highlight', 'true');
                count++;
            }
        });
        setHighlightedSize(size);
        toast('info', `Highlighting ${count} elements with ${size}`);
    };
    // Apply color to elements with matching font size
    const applyFontSizeColor = (size, color) => {
        // Clear previous color for this size
        document
            .querySelectorAll(`[data-dndev-font-size-color="${size}"]`)
            .forEach((el) => {
            el.style.color = '';
            el.removeAttribute('data-dndev-font-size-color');
        });
        if (!color) {
            setFontSizeColors((prev) => {
                const next = { ...prev };
                delete next[size];
                return next;
            });
            return;
        }
        // Apply color to all elements with this font size - ONLY leaf nodes
        const elements = document.querySelectorAll('*');
        let count = 0;
        const normalizedSize = normalizeFontSize(size);
        elements.forEach((el) => {
            if (isOverlayElement(el))
                return;
            // Only color leaf nodes (same logic as analysis)
            const hasText = el.textContent && el.textContent.trim().length > 0;
            const hasChildElements = el.children.length > 0;
            if (!hasText || hasChildElements)
                return;
            const style = getComputedStyle(el);
            if (normalizeFontSize(style.fontSize) === normalizedSize) {
                el.style.color = color;
                el.setAttribute('data-dndev-font-size-color', size);
                count++;
            }
        });
        const newColors = { ...fontSizeColors, [size]: color };
        setFontSizeColors(newColors);
        saveAnalysis(colorRatio, typography, newColors);
    };
    // Clear highlights on unmount or when dialog closes
    const clearHighlights = () => {
        document.querySelectorAll('[data-dndev-highlight]').forEach((el) => {
            el.style.outline = '';
            el.removeAttribute('data-dndev-highlight');
        });
        document.querySelectorAll('[data-dndev-font-size-color]').forEach((el) => {
            el.style.color = '';
            el.removeAttribute('data-dndev-font-size-color');
        });
        setHighlightedSize(null);
        setFontSizeColors({});
        saveAnalysis(colorRatio, typography, {});
    };
    // Get CSS variables from :root
    const getCSSVariables = () => {
        const root = document.documentElement;
        const style = getComputedStyle(root);
        const vars = {};
        const relevantVars = [
            '--background',
            '--foreground',
            '--card',
            '--card-foreground',
            '--popover',
            '--popover-foreground',
            '--primary',
            '--primary-foreground',
            '--secondary',
            '--secondary-foreground',
            '--muted',
            '--muted-foreground',
            '--accent',
            '--accent-foreground',
            '--destructive',
            '--destructive-foreground',
            '--border',
            '--input',
            '--ring',
            '--radius',
            '--font-sans',
            '--font-mono',
            '--font-family',
        ];
        relevantVars.forEach((varName) => {
            const value = style.getPropertyValue(varName).trim();
            if (value)
                vars[varName] = value;
        });
        return vars;
    };
    // Check if element is inside devtools, dialogs, or overlays
    const isOverlayElement = (el) => {
        return !!(el.closest('[data-dndev-devtools]') ||
            el.closest('[data-radix-portal]') ||
            el.closest('[role="dialog"]') ||
            el.closest('[data-state="open"]') ||
            el.closest('.dndev-sheet-content'));
    };
    const analyzeTypography = () => {
        const elements = document.querySelectorAll('*');
        const fontSizeMap = new Map();
        const fontFamilyMap = new Map();
        let analyzedCount = 0;
        elements.forEach((el) => {
            if (isOverlayElement(el))
                return;
            if (el.tagName === 'SCRIPT' ||
                el.tagName === 'STYLE' ||
                el.tagName === 'NOSCRIPT')
                return;
            const style = getComputedStyle(el);
            const rect = el.getBoundingClientRect();
            if (rect.width === 0 || rect.height === 0)
                return;
            if (style.display === 'none' || style.visibility === 'hidden')
                return;
            // ONLY leaf nodes with text, no children
            const hasText = el.textContent && el.textContent.trim().length > 0;
            if (!hasText || el.children.length > 0)
                return;
            analyzedCount++;
            const fontSize = style.fontSize;
            const fontSizeRounded = parseFloat(fontSize).toFixed(2) + 'px';
            fontSizeMap.set(fontSizeRounded, (fontSizeMap.get(fontSizeRounded) || 0) + 1);
            const fontFamily = style.fontFamily
                ?.split(',')[0]
                ?.trim()
                ?.replace(/['"]/g, '');
            if (fontFamily) {
                fontFamilyMap.set(fontFamily, (fontFamilyMap.get(fontFamily) || 0) + 1);
            }
        });
        const fontSizes = Array.from(fontSizeMap.entries())
            .map(([size, count]) => ({ size, count }))
            .sort((a, b) => b.count - a.count);
        const fontFamilies = Array.from(fontFamilyMap.entries())
            .map(([family, count]) => ({ family, count }))
            .sort((a, b) => b.count - a.count);
        return {
            fontSizes,
            fontFamilies,
            totalElements: analyzedCount,
        };
    };
    const analyzeColorRatio = () => {
        const elements = document.querySelectorAll('*');
        const colorMap = new Map();
        elements.forEach((el) => {
            // Skip overlay/devtools elements
            if (isOverlayElement(el))
                return;
            const style = getComputedStyle(el);
            const bg = style.backgroundColor;
            const rect = el.getBoundingClientRect();
            const area = rect.width * rect.height;
            if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent' && area > 0) {
                const existing = colorMap.get(bg) || { count: 0, area: 0 };
                colorMap.set(bg, {
                    count: existing.count + 1,
                    area: existing.area + area,
                });
            }
        });
        const totalArea = Array.from(colorMap.values()).reduce((sum, v) => sum + v.area, 0);
        if (totalArea === 0)
            return { dominant: 0, secondary: 0, accent: 0, details: [] };
        const colors = Array.from(colorMap.entries())
            .map(([color, data]) => ({
            color,
            percentage: (data.area / totalArea) * 100,
        }))
            .sort((a, b) => b.percentage - a.percentage);
        // Simplified categorization based on percentage
        const dominant = colors
            .slice(0, 2)
            .reduce((sum, c) => sum + c.percentage, 0);
        const secondary = colors
            .slice(2, 5)
            .reduce((sum, c) => sum + c.percentage, 0);
        const accent = colors.slice(5).reduce((sum, c) => sum + c.percentage, 0);
        return {
            dominant,
            secondary,
            accent,
            details: colors.slice(0, 15).map((c) => ({
                ...c,
                category: c.percentage > 30
                    ? 'dominant'
                    : c.percentage > 10
                        ? 'secondary'
                        : 'accent',
            })),
        };
    };
    const runAnalysis = () => {
        setIsAnalyzing(true);
        try {
            const colorRatioData = analyzeColorRatio();
            const typographyData = analyzeTypography();
            setColorRatio(colorRatioData);
            setTypography(typographyData);
            saveAnalysis(colorRatioData, typographyData, fontSizeColors);
            toast('success', 'Analysis complete');
        }
        catch (error) {
            console.error('Analysis failed:', error);
            toast('error', 'Analysis failed');
        }
        finally {
            setIsAnalyzing(false);
        }
    };
    // Format analysis results for clipboard
    const getAnalysisJson = () => {
        return JSON.stringify({
            theme: {
                current: currentTheme,
                isDarkMode,
                isReady,
                availableCount: availableThemes.length,
            },
            cssVariables: getCSSVariables(),
            colorRatio: colorRatio || null,
            typography: typography || null,
            timestamp: new Date().toISOString(),
        }, null, 2);
    };
    const copyAnalysis = () => {
        navigator.clipboard
            .writeText(getAnalysisJson())
            .then(() => {
            toast('success', 'Analysis copied to clipboard');
        })
            .catch(() => {
            toast('error', 'Failed to copy');
        });
    };
    const cssVars = getCSSVariables();
    const themeItems = [
        {
            label: 'Current',
            value: _jsx(Text, { className: "dndev-font-mono", children: currentTheme }),
        },
        {
            label: 'Dark Mode',
            value: (_jsx(Badge, { variant: isDarkMode ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.SECONDARY, children: isDarkMode ? 'Yes' : 'No' })),
        },
        {
            label: 'Ready',
            value: (_jsx(Badge, { variant: isReady ? BADGE_VARIANT.DEFAULT : BADGE_VARIANT.DESTRUCTIVE, children: isReady ? 'Yes' : 'No' })),
        },
        {
            label: 'Available',
            value: (_jsxs(Text, { className: "dndev-font-mono", children: [availableThemes.length, " themes"] })),
        },
    ];
    const isColorCompliant = colorRatio &&
        colorRatio.dominant >= 50 &&
        colorRatio.dominant <= 70 &&
        colorRatio.secondary >= 20 &&
        colorRatio.secondary <= 40 &&
        colorRatio.accent >= 5 &&
        colorRatio.accent <= 20;
    return (_jsxs(Stack, { style: { padding: 'var(--gap-md)' }, children: [_jsx(Accordion, { type: "single", collapsible: true, items: [
                    {
                        value: 'theme',
                        trigger: _jsx("span", { children: "Theme Info" }),
                        content: (_jsxs(Stack, { children: [_jsx(Card, { title: "Theme", subtitle: currentTheme, children: _jsx(DescriptionList, { items: themeItems }) }), _jsx(Card, { title: "CSS Variables", subtitle: `${Object.keys(cssVars).length} variables`, children: _jsx(ScrollArea, { className: "dndev-max-h-48", children: _jsx(Stack, { gap: "tight", children: Object.entries(cssVars).map(([name, value]) => (_jsxs(Stack, { direction: "row", align: "center", justify: "between", gap: "tight", children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: name }), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
                                                                    width: '1rem',
                                                                    height: '1rem',
                                                                    backgroundColor: `var(${name})`,
                                                                    border: '1px solid var(--border)',
                                                                    borderRadius: 'var(--radius-sm)',
                                                                } }), _jsx(Text, { className: "dndev-font-mono dndev-text-xs dndev-text-muted-foreground", children: value })] })] }, name))) }) }) })] })),
                    },
                ] }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(Button, { onClick: runAnalysis, variant: BUTTON_VARIANT.DEFAULT, icon: Palette, disabled: isAnalyzing, style: { flex: 1 }, children: isAnalyzing ? 'Analyzing...' : 'Analyze Page' }), _jsx(Button, { onClick: copyAnalysis, variant: BUTTON_VARIANT.OUTLINE, disabled: !colorRatio && !typography, children: "Copy JSON" })] }), colorRatio && (_jsx(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "60/30/10 Color Ratio" }), _jsx(Badge, { variant: isColorCompliant
                                ? BADGE_VARIANT.DEFAULT
                                : BADGE_VARIANT.SECONDARY, children: isColorCompliant ? '✓ Balanced' : '⚠ Review' })] }), children: _jsxs(Stack, { gap: "tight", children: [_jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Dominant (60%)" }), _jsxs("span", { className: colorRatio.dominant >= 50 && colorRatio.dominant <= 70
                                        ? 'dndev-text-primary'
                                        : 'dndev-text-destructive', children: [colorRatio.dominant.toFixed(1), "%"] })] }), _jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Secondary (30%)" }), _jsxs("span", { className: colorRatio.secondary >= 20 && colorRatio.secondary <= 40
                                        ? 'dndev-text-primary'
                                        : 'dndev-text-destructive', children: [colorRatio.secondary.toFixed(1), "%"] })] }), _jsxs(Stack, { direction: "row", justify: "between", children: [_jsx("span", { children: "Accent (10%)" }), _jsxs("span", { className: colorRatio.accent >= 5 && colorRatio.accent <= 20
                                        ? 'dndev-text-primary'
                                        : 'dndev-text-destructive', children: [colorRatio.accent.toFixed(1), "%"] })] }), colorRatio.details.length > 0 && (_jsx(Accordion, { type: "single", collapsible: true, items: [
                                {
                                    value: 'colors',
                                    trigger: (_jsxs("span", { className: "dndev-text-sm", children: ["Top Colors (", colorRatio.details.length, ")"] })),
                                    content: (_jsx(Stack, { gap: "tight", children: colorRatio.details.map((c, i) => (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { style: {
                                                        width: '1rem',
                                                        height: '1rem',
                                                        backgroundColor: c.color,
                                                        border: '1px solid var(--border)',
                                                        flexShrink: 0,
                                                    } }), _jsxs(Text, { className: "dndev-text-xs dndev-font-mono", style: { flex: 1 }, children: [c.percentage.toFixed(1), "%"] }), _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, children: c.category })] }, i))) })),
                                },
                            ] }))] }) })), typography && typography.fontFamilies.length > 0 && (_jsx(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Font Families" }), _jsxs(Badge, { variant: BADGE_VARIANT.SECONDARY, children: [typography.fontFamilies.length, " families"] })] }), children: _jsx(Stack, { gap: "tight", className: "dndev-mt-xs", children: typography.fontFamilies.map((f, i) => (_jsxs(Stack, { direction: "row", justify: "between", align: "center", gap: "tight", style: {
                            padding: 'var(--gap-sm)',
                            borderRadius: 'var(--radius-sm)',
                        }, children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", style: { flex: 1 }, children: f.family }), _jsxs(Text, { className: "dndev-text-xs", style: {
                                    opacity: 0.6,
                                    minWidth: '2rem',
                                    textAlign: 'end',
                                }, children: [f.count, "\u00D7"] })] }, i))) }) })), typography && (_jsxs(Card, { content: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Font Sizes" }), _jsxs(Badge, { variant: BADGE_VARIANT.SECONDARY, children: [typography.totalElements, " elements"] })] }), children: [_jsxs(Stack, { direction: "row", align: "center", justify: "between", children: [_jsxs(Label, { className: "dndev-text-sm dndev-font-semibold", children: [typography.fontSizes.length, " sizes"] }), (highlightedSize || Object.keys(fontSizeColors).length > 0) && (_jsx(Button, { variant: BUTTON_VARIANT.GHOST, onClick: clearHighlights, style: { padding: '0 var(--gap-sm)', height: 'auto' }, children: _jsx(Text, { className: "dndev-text-xs", children: "Clear All" }) }))] }), _jsx(Stack, { gap: "tight", className: "dndev-mt-xs", children: typography.fontSizes.map((f, i) => {
                            const isOrphan = f.count < 5;
                            const isHighlighted = highlightedSize === f.size;
                            const currentColor = fontSizeColors[f.size] || '';
                            const findOrphanElements = () => {
                                const normalizedSize = normalizeFontSize(f.size);
                                const found = Array.from(document.querySelectorAll('*')).filter((el) => {
                                    if (el.closest('[data-dndev-devtools]') ||
                                        el.closest('[data-radix-portal]') ||
                                        el.closest('[role="dialog"]'))
                                        return false;
                                    const style = getComputedStyle(el);
                                    const hasText = el.textContent && el.textContent.trim().length > 0;
                                    if (!hasText || el.children.length > 0)
                                        return false;
                                    return normalizeFontSize(style.fontSize) === normalizedSize;
                                });
                                found.forEach((el) => {
                                    // Log text content only (not the DOM node) to avoid memory leaks from retained element refs
                                    console.log('[DesignTab]', el.textContent?.trim().substring(0, 50));
                                    el.style.outline = '2px solid red';
                                });
                                console.log(`[DesignTab] Found ${found.length} elements with ${f.size}`);
                            };
                            return (_jsxs(Stack, { direction: "row", justify: "between", align: "center", gap: "tight", style: {
                                    padding: 'var(--gap-sm)',
                                    borderRadius: 'var(--radius-sm)',
                                    backgroundColor: isHighlighted
                                        ? 'var(--primary)'
                                        : 'transparent',
                                    color: isHighlighted
                                        ? 'var(--primary-foreground)'
                                        : 'inherit',
                                }, children: [_jsxs(Stack, { direction: "row", align: "center", gap: "tight", onClick: () => toggleHighlight(f.size), style: { cursor: 'pointer', flex: 1 }, children: [_jsx(Text, { className: "dndev-font-mono dndev-text-xs", children: f.size }), isOrphan && (_jsx(Badge, { variant: BADGE_VARIANT.DESTRUCTIVE, children: "orphan" }))] }), isOrphan ? (_jsx(Button, { variant: BUTTON_VARIANT.GHOST, onClick: (e) => {
                                            e.stopPropagation();
                                            findOrphanElements();
                                        }, style: {
                                            padding: '0 var(--gap-sm)',
                                            height: '1.5rem',
                                            minWidth: '2rem',
                                        }, title: `Find ${f.size} elements in console`, children: _jsx(Text, { className: "dndev-text-xs", children: "\uD83D\uDD0D" }) })) : (_jsx("input", { type: "color", value: currentColor || '#000000', onChange: (e) => applyFontSizeColor(f.size, e.target.value), onClick: (e) => e.stopPropagation(), style: {
                                            width: '2rem',
                                            height: '1.5rem',
                                            border: '1px solid var(--border)',
                                            borderRadius: 'var(--radius-sm)',
                                            cursor: 'pointer',
                                            padding: 0,
                                        }, title: `Color elements with ${f.size}` })), _jsxs(Text, { className: "dndev-text-xs", style: {
                                            opacity: isHighlighted ? 1 : 0.6,
                                            minWidth: '2rem',
                                            textAlign: 'end',
                                        }, children: [f.count, "\u00D7"] })] }, i));
                        }) })] })), !colorRatio && !typography && (_jsx(Alert, { variant: ALERT_VARIANT.INFO, children: "Click \"Analyze Page\" to check color ratio and typography" }))] }));
};
