import { jsx, jsxs } from 'react/jsx-runtime';
import React__default, { useState, useEffect, useMemo } from 'react';
import { SignalSlashIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
import { AnimatePresence, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { useNetworkStatus } from '../../../hooks/useNetworkStatus.js';
import { getDefaultQueue } from '../../../utils/actionQueue.js';
import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';

/**
 * OfflineIndicator - Visual indicator for offline status
 *
 * @example
 * // Basic usage - appears when offline
 * <OfflineIndicator />
 *
 * // With queue count
 * <OfflineIndicator showQueueCount queue={myQueue} />
 *
 * // Custom position and variant
 * <OfflineIndicator position="bottom-right" variant="badge" />
 */
const OfflineIndicator = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", className, }, ref) => {
    var _a, _b;
    const theme = offlineIndicatorTheme;
    const { isOnline, wasOffline } = useNetworkStatus();
    const [isVisible, setIsVisible] = useState(false);
    const [queueSize, setQueueSize] = useState(0);
    const [isSuccessfullyReconnected, setIsSuccessfullyReconnected] = useState(false);
    // Get action queue
    const actionQueue = queue !== null && queue !== void 0 ? queue : getDefaultQueue();
    // Track queue size
    useEffect(() => {
        if (!showQueueCount)
            return;
        const updateQueueSize = () => {
            setQueueSize(actionQueue.size);
        };
        // Initial check
        updateQueueSize();
        // Poll for updates (since queue doesn't have built-in subscriptions for external consumers)
        const interval = setInterval(updateQueueSize, 1000);
        return () => clearInterval(interval);
    }, [showQueueCount, actionQueue]);
    // Handle visibility based on network status
    useEffect(() => {
        if (!isOnline) {
            setIsVisible(true);
            setIsSuccessfullyReconnected(false);
        }
        else if (wasOffline || isSuccessfullyReconnected) {
            // Just came back online or currently showing reconnected state
            if (wasOffline && !isSuccessfullyReconnected) {
                setIsSuccessfullyReconnected(true);
            }
            if (autoHideOnline) {
                const timer = setTimeout(() => {
                    setIsVisible(false);
                    setIsSuccessfullyReconnected(false);
                }, autoHideDelay);
                return () => clearTimeout(timer);
            }
        }
        else {
            // Was never offline in this session or already hid after reconnection
            setIsVisible(false);
        }
    }, [
        isOnline,
        wasOffline,
        isSuccessfullyReconnected,
        autoHideOnline,
        autoHideDelay,
    ]);
    // Animation variants
    const animationVariants = useMemo(() => ({
        initial: {
            opacity: 0,
            y: position.startsWith("top") ? -20 : 20,
            scale: 0.95,
        },
        animate: {
            opacity: 1,
            y: 0,
            scale: 1,
        },
        exit: {
            opacity: 0,
            y: position.startsWith("top") ? -20 : 20,
            scale: 0.95,
        },
    }), [position]);
    const isOffline = !isOnline;
    const Icon = isOffline ? SignalSlashIcon : CheckCircleIcon;
    const message = isOffline ? offlineMessage : onlineMessage;
    const stateStyle = isOffline ? theme.offline : theme.online;
    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, transition: { duration: 0.2, ease: "easeOut" }, className: cn(theme.base, (_a = theme.positions) === null || _a === void 0 ? void 0 : _a[position], (_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant], stateStyle, className), role: "status", "aria-live": "polite", children: [jsx(Icon, { className: theme.icon, "aria-hidden": "true" }), jsxs("span", { className: theme.message, children: [message, showQueueCount && queueSize > 0 && isOffline && (jsxs("span", { className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] }))] })] })) }));
});
OfflineIndicator.displayName = "OfflineIndicator";

export { OfflineIndicator };
