'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// packages/ui/src/internal/devtools/components/CookieTab.tsx
/**
 * @fileoverview Cookie Debug Tab
 * @description Comprehensive cookie consent debugging tools
 *
 * @version 0.0.1
 * @since 0.0.1
 * @author AMBROISE PARK Consulting
 */
import { RefreshCw, Trash2 } from 'lucide-react';
import { useState, useEffect } from 'react';
import { Button, BUTTON_VARIANT, Card, CopyToClipboard, Badge, Label, toast, DescriptionList, Text, Stack, } from '@donotdev/components';
import { useConsent, useConsentReady } from '@donotdev/core';
import { CONSENT_CATEGORY } from '@donotdev/core';
import { getCookie, deleteCookie } from '@donotdev/core';
const CONSENT_COOKIE_NAME = 'dndev-cookie-consent';
const formatJSON = (data) => {
    try {
        return JSON.stringify(data, null, 2);
    }
    catch (error) {
        return 'Error formatting data';
    }
};
export const CookieTab = () => {
    const hasConsented = useConsent('hasConsented');
    const categories = useConsent('categories');
    const timestamp = useConsent('timestamp');
    const version = useConsent('version');
    const reset = useConsent('reset');
    const showCookieBanner = useConsent('showCookieBanner');
    const isReady = useConsentReady();
    const [cookieValue, setCookieValue] = useState(null);
    const [domInfo, setDomInfo] = useState({});
    const [zIndexInfo, setZIndexInfo] = useState({});
    const refreshData = () => {
        const cookie = getCookie(CONSENT_COOKIE_NAME);
        setCookieValue(cookie);
        toast('success', 'Data refreshed');
        const cookieBanner = document.querySelector('[class*="cookie"]');
        const dialogs = document.querySelectorAll('[role="dialog"]');
        const overlays = document.querySelectorAll('[class*="overlay"]');
        const portals = document.querySelectorAll('[data-radix-portal]');
        setDomInfo({
            cookieBanner: {
                exists: !!cookieBanner,
                visible: cookieBanner
                    ? window.getComputedStyle(cookieBanner).display !== 'none'
                    : false,
                zIndex: cookieBanner
                    ? window.getComputedStyle(cookieBanner).zIndex
                    : null,
                position: cookieBanner
                    ? window.getComputedStyle(cookieBanner).position
                    : null,
                classes: cookieBanner ? cookieBanner.className : null,
            },
            dialogs: {
                count: dialogs.length,
                open: Array.from(dialogs).filter((d) => d.getAttribute('data-state') === 'open').length,
                elements: Array.from(dialogs).map((d) => ({
                    state: d.getAttribute('data-state'),
                    zIndex: window.getComputedStyle(d).zIndex,
                })),
            },
            overlays: {
                count: overlays.length,
                visible: Array.from(overlays).filter((o) => window.getComputedStyle(o).display !== 'none').length,
                zIndices: Array.from(overlays).map((o) => window.getComputedStyle(o).zIndex),
            },
            portals: {
                count: portals.length,
                elements: Array.from(portals).map((p) => ({
                    zIndex: window.getComputedStyle(p).zIndex,
                    children: p.children.length,
                })),
            },
        });
        const root = document.documentElement;
        setZIndexInfo({
            cssVariables: {
                '--z-overlay': getComputedStyle(root).getPropertyValue('--z-overlay'),
                '--z-modal': getComputedStyle(root).getPropertyValue('--z-modal'),
                '--z-tooltip': getComputedStyle(root).getPropertyValue('--z-tooltip'),
                '--z-toast': getComputedStyle(root).getPropertyValue('--z-toast'),
            },
            computed: {
                cookieBanner: cookieBanner
                    ? window.getComputedStyle(cookieBanner).zIndex
                    : 'N/A',
                highestDialog: dialogs.length > 0
                    ? Math.max(...Array.from(dialogs).map((d) => parseInt(window.getComputedStyle(d).zIndex || '0', 10)))
                    : 0,
                highestOverlay: overlays.length > 0
                    ? Math.max(...Array.from(overlays).map((o) => parseInt(window.getComputedStyle(o).zIndex || '0', 10)))
                    : 0,
            },
        });
    };
    useEffect(() => {
        refreshData();
    }, []);
    const handleResetConsent = () => {
        reset();
        setTimeout(() => {
            window.location.reload();
        }, 100);
    };
    const handleClearCookie = () => {
        deleteCookie(CONSENT_COOKIE_NAME);
        refreshData();
        toast('success', 'Cookie cleared');
    };
    const consentStateItems = [
        {
            label: 'Has Consented',
            value: (_jsx(Badge, { variant: hasConsented ? 'default' : 'destructive', children: hasConsented ? '✅ Yes' : '❌ No' })),
        },
        {
            label: 'Store Ready',
            value: (_jsx(Badge, { variant: isReady ? 'default' : 'destructive', children: isReady ? '✅ Ready' : '❌ Not Ready' })),
        },
        {
            label: 'Timestamp',
            value: (_jsx(Text, { as: "span", className: "dndev-font-mono dndev-text-sm", children: timestamp || 'Never' })),
        },
        {
            label: 'Version',
            value: (_jsx(Text, { as: "span", className: "dndev-font-mono dndev-text-sm", children: version || 'N/A' })),
        },
    ];
    const categoryItems = Object.entries(CONSENT_CATEGORY).map(([key, value]) => ({
        label: (_jsx(Text, { as: "span", className: "dndev-font-mono", children: key })),
        value: (_jsx(Badge, { variant: categories[value]
                ? 'default'
                : 'destructive', children: categories[value]
                ? '✅ Enabled'
                : '❌ Disabled' })),
    }));
    return (_jsx(Stack, { gap: "large", children: _jsx(Card, { title: "Cookie Consent Debug", footer: _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(Button, { onClick: refreshData, icon: RefreshCw, variant: BUTTON_VARIANT.OUTLINE, title: "Refresh Data", children: "Refresh" }), _jsx(Button, { onClick: handleResetConsent, icon: Trash2, variant: BUTTON_VARIANT.OUTLINE, title: "Reset Consent & Reload", children: "Reset & Reload" })] }), children: _jsxs(Stack, { gap: "large", children: [_jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Consent State" }), _jsx(CopyToClipboard, { text: formatJSON({
                                        hasConsented,
                                        categories,
                                        timestamp,
                                        version,
                                    }), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Consent state copied') })] }), children: _jsx(DescriptionList, { items: consentStateItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Categories" }), _jsx(CopyToClipboard, { text: formatJSON(categories), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Categories copied') })] }), children: _jsx(DescriptionList, { items: categoryItems }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Cookie Value" }), _jsxs(Stack, { direction: "row", gap: "tight", children: [_jsx(CopyToClipboard, { text: cookieValue || 'null', variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Cookie value copied') }), _jsx(Button, { onClick: handleClearCookie, icon: Trash2, variant: BUTTON_VARIANT.GHOST, title: "Clear Cookie", children: "Clear" })] })] }), children: _jsx("pre", { className: "dndev-overflow-y-auto dndev-font-mono dndev-text-xs dndev-max-h-60", children: cookieValue || 'No cookie found' }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "DOM Elements" }), _jsx(CopyToClipboard, { text: formatJSON(domInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'DOM info copied') })] }), children: _jsxs(Stack, { children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Cookie Banner:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Exists: ", domInfo.cookieBanner?.exists ? '✅' : '❌'] }), _jsxs(Text, { children: ["Visible: ", domInfo.cookieBanner?.visible ? '✅' : '❌'] }), _jsxs(Text, { children: ["z-index: ", domInfo.cookieBanner?.zIndex || 'N/A'] }), _jsxs(Text, { children: ["Position: ", domInfo.cookieBanner?.position || 'N/A'] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Dialogs:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.dialogs?.count || 0] }), _jsxs(Text, { children: ["Open: ", domInfo.dialogs?.open || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Overlays:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md", children: [_jsxs(Text, { children: ["Count: ", domInfo.overlays?.count || 0] }), _jsxs(Text, { children: ["Visible: ", domInfo.overlays?.visible || 0] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Portals:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md", children: _jsxs(Text, { children: ["Count: ", domInfo.portals?.count || 0] }) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Z-Index Stacking" }), _jsx(CopyToClipboard, { text: formatJSON(zIndexInfo), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Z-index info copied') })] }), children: _jsxs(Stack, { children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "CSS Variables:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.cssVariables || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value) || 'not set'] }, key))) })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "Computed Values:" }), _jsx(Stack, { gap: "tight", className: "dndev-ml-md dndev-font-mono dndev-text-sm", children: Object.entries(zIndexInfo.computed || {}).map(([key, value]) => (_jsxs(Text, { children: [key, ": ", String(value)] }, key))) })] })] }) }), _jsx(Card, { title: _jsxs(Stack, { direction: "row", align: "center", justify: "between", className: "dndev-w-full", children: [_jsx("span", { children: "Full Store State" }), _jsx(CopyToClipboard, { text: formatJSON({
                                        hasConsented,
                                        categories,
                                        timestamp,
                                        version,
                                        isReady,
                                    }), variant: BUTTON_VARIANT.GHOST, onCopy: () => toast('success', 'Store state copied') })] }), children: _jsx("pre", { className: "dndev-overflow-y-auto dndev-font-mono dndev-text-xs dndev-max-h-60", children: formatJSON({
                                hasConsented,
                                categories,
                                timestamp,
                                version,
                                isReady,
                            }) }) }), _jsx(Card, { title: "F12 DevTools Guide", children: _jsxs(Stack, { gap: "tight", children: [_jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "1. Open DevTools:" }), _jsxs(Text, { as: "span", className: "dndev-ml-md dndev-text-sm", children: ["Press ", _jsx("kbd", { children: "F12" }), " or ", _jsx("kbd", { children: "Ctrl+Shift+I" }), " (Windows) /", ' ', _jsx("kbd", { children: "Cmd+Option+I" }), " (Mac)"] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "2. Check Console:" }), _jsx(Text, { as: "span", className: "dndev-ml-md dndev-text-sm", children: "Look for cookie-related errors or logs. Copy any errors you see." })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "3. Inspect Cookie Banner:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md dndev-text-sm", children: [_jsx(Text, { as: "span", children: "\u2022 Right-click on page \u2192 \"Inspect\" \u2192 Find cookie banner element" }), _jsxs(Text, { as: "span", children: ["\u2022 Check if element exists:", ' ', _jsx("code", { className: "dndev-font-mono", children: "document.querySelector('[class*=\"cookie\"]')" })] }), _jsx(Text, { as: "span", children: "\u2022 Check z-index: Look in \"Computed\" tab for z-index value" }), _jsxs(Text, { as: "span", children: ["\u2022 Check visibility: Look for", ' ', _jsx("code", { className: "dndev-font-mono", children: "display: none" }), " or", ' ', _jsx("code", { className: "dndev-font-mono", children: "opacity: 0" })] })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "4. Check Application Tab:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md dndev-text-sm", children: [_jsx(Text, { as: "span", children: "\u2022 Go to \"Application\" \u2192 \"Cookies\" \u2192 Your domain" }), _jsxs(Text, { as: "span", children: ["\u2022 Look for", ' ', _jsx("code", { className: "dndev-font-mono", children: "dndev-cookie-consent" }), ' ', "cookie"] }), _jsx(Text, { as: "span", children: "\u2022 Check its value and expiration" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "5. Check Elements Tab:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md dndev-text-sm", children: [_jsxs(Text, { as: "span", children: ["\u2022 Search for", ' ', _jsx("code", { className: "dndev-font-mono", children: "[data-radix-portal]" }), ' ', "to find portals"] }), _jsx(Text, { as: "span", children: "\u2022 Check if any overlay is covering the banner (z-index higher than banner)" }), _jsx(Text, { as: "span", children: "\u2022 Use \"Select element\" tool (top-left icon) to hover and see z-index" })] })] }), _jsxs("div", { children: [_jsx(Label, { className: "dndev-font-semibold", children: "6. Console Commands:" }), _jsxs(Stack, { gap: "tight", className: "dndev-ml-md dndev-text-sm dndev-font-mono", children: [_jsxs(Text, { as: "span", children: ["\u2022 Get cookie:", ' ', _jsx("code", { children: "document.cookie.split('; ').find(c => c.startsWith('dndev-cookie-consent'))" })] }), _jsxs(Text, { as: "span", children: ["\u2022 Find banner:", ' ', _jsx("code", { children: "document.querySelector('[class*=\"cookie\"]')" })] }), _jsxs(Text, { as: "span", children: ["\u2022 Check z-index:", ' ', _jsx("code", { children: "getComputedStyle(document.querySelector('[class*=\"cookie\"]')).zIndex" })] }), _jsxs(Text, { as: "span", children: ["\u2022 Find all dialogs:", ' ', _jsx("code", { children: "document.querySelectorAll('[role=\"dialog\"]')" })] })] })] })] }) })] }) }) }));
};
