"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AiButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * @file AiButton.tsx
 * AI-Enhanced Button Component
 */
const react_1 = require("react");
const useAiOptimization_1 = require("../hooks/useAiOptimization");
const useUsageLearning_1 = require("../hooks/useUsageLearning");
const usePredictiveLoading_1 = require("../hooks/usePredictiveLoading");
require("./AiButton.css");
/**
 * AI-Enhanced Button with self-optimization and predictive capabilities
 */
const AiButton = ({ text, variant = 'primary', size = 'medium', onClick, href, disabled = false, aiConfig = {
    optimize: true,
    predictiveLoading: true,
    usageLearning: true,
    autoAccessibility: true,
}, className = '', ...props }) => {
    const buttonRef = (0, react_1.useRef)(null);
    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
    const [isPredicting, setIsPredicting] = (0, react_1.useState)(false);
    // AI Hooks
    const { optimizedProps, recordInteraction } = (0, useAiOptimization_1.useAiOptimization)({
        component: 'button',
        enabled: aiConfig.optimize,
    });
    const { usageCount, recordUsage } = (0, useUsageLearning_1.useUsageLearning)({
        componentId: `ai-button-${text.toLowerCase().replace(/\s+/g, '-')}`,
        enabled: aiConfig.usageLearning,
    });
    const { preload, confidence } = (0, usePredictiveLoading_1.usePredictiveLoading)({
        target: href,
        enabled: aiConfig.predictiveLoading,
    });
    // Handle click with AI tracking
    const handleClick = (0, react_1.useCallback)(() => {
        if (disabled || isLoading)
            return;
        // Record usage for learning
        if (aiConfig.usageLearning) {
            recordUsage();
        }
        // Record interaction for optimization
        if (aiConfig.optimize) {
            recordInteraction({
                action: 'click',
                timestamp: Date.now(),
                context: {
                    variant,
                    size,
                    usageCount,
                },
            });
        }
        // Handle navigation or callback
        if (href && !onClick) {
            setIsLoading(true);
            window.location.href = href;
        }
        else if (onClick) {
            onClick();
        }
    }, [disabled, isLoading, onClick, href, recordUsage, recordInteraction, variant, size, usageCount, aiConfig]);
    // Predictive loading on hover
    const handleMouseEnter = (0, react_1.useCallback)(() => {
        if (aiConfig.predictiveLoading && href) {
            setIsPredicting(true);
            preload();
        }
    }, [aiConfig.predictiveLoading, href, preload]);
    const handleMouseLeave = (0, react_1.useCallback)(() => {
        setIsPredicting(false);
    }, []);
    // Auto-accessibility enhancements
    (0, react_1.useEffect)(() => {
        if (aiConfig.autoAccessibility && buttonRef.current) {
            const button = buttonRef.current;
            // Ensure proper ARIA attributes
            if (!button.getAttribute('aria-label') && text) {
                button.setAttribute('aria-label', `${text} ${variant} button`);
            }
            // Add keyboard navigation if not present
            const handleKeyPress = (e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    handleClick();
                }
            };
            button.addEventListener('keypress', handleKeyPress);
            return () => button.removeEventListener('keypress', handleKeyPress);
        }
    }, [aiConfig.autoAccessibility, text, variant, handleClick]);
    // Build class names
    const classNames = [
        'llm-ui-button',
        `llm-ui-button--${variant}`,
        `llm-ui-button--${size}`,
        aiConfig.optimize && 'llm-ui-button--ai-optimized',
        aiConfig.predictiveLoading && 'llm-ui-button--predictive',
        isPredicting && 'is-predicting',
        isLoading && 'is-loading',
        disabled && 'is-disabled',
        className,
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, className: classNames, onClick: handleClick, disabled: disabled || isLoading, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-ai-component": "button", "data-ai-optimize": aiConfig.optimize, "data-ai-predictive": aiConfig.predictiveLoading, "data-ai-usage-learning": aiConfig.usageLearning, "data-usage-count": usageCount, "data-prediction-confidence": confidence, ...optimizedProps, ...props, children: [isPredicting && ((0, jsx_runtime_1.jsx)("span", { className: "llm-ui-button__preloader", "aria-hidden": "true" })), (0, jsx_runtime_1.jsx)("span", { className: "llm-ui-button__text", children: text }), aiConfig.optimize && ((0, jsx_runtime_1.jsx)("span", { className: "llm-ui-button__ai-indicator", "aria-label": "AI-optimized", children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: (0, jsx_runtime_1.jsx)("path", { d: "M8 0L10.5 5.5L16 8L10.5 10.5L8 16L5.5 10.5L0 8L5.5 5.5L8 0Z" }) }) })), isLoading && ((0, jsx_runtime_1.jsx)("span", { className: "llm-ui-button__loader", "aria-label": "Loading" }))] }));
};
exports.AiButton = AiButton;
//# sourceMappingURL=AiButton.js.map