import { jsx } from 'react/jsx-runtime';
import React__default, { useState, useRef, useCallback, useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { tabsTheme } from './Tabs.theme.js';
import { TabsContext } from './TabsContext.js';
import { TabsList } from './TabsList.js';
import { TabsTrigger } from './TabsTrigger.js';
import { TabsBody } from './TabsBody.js';

/**
 * Tabs component for organizing content into separate views
 * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Body
 * Supports optional Framer Motion animations and comprehensive accessibility
 */
const TabsComponent = React__default.forwardRef(({ value, defaultValue, onValueChange, orientation = "horizontal", size = "md", disabled = false, children, className, darkMode = false, ...props }, ref) => {
    const [currentValue, setCurrentValue] = useState(value || defaultValue || "");
    // Track trigger elements for underline positioning
    const triggerRefs = useRef(new Map());
    // Handle controlled vs uncontrolled
    const isControlled = value !== undefined;
    const activeValue = isControlled ? value : currentValue;
    // Dev-time warnings for common issues
    if (process.env.NODE_ENV !== 'production') {
        // Warn if no defaultValue or value provided and no active tab will be selected
        if (!value && !defaultValue && currentValue === "") {
            // eslint-disable-next-line no-console
            console.warn("Tabs: No 'value' or 'defaultValue' provided. Consider providing at least 'defaultValue' for initial tab selection.");
        }
        // Warn if both controlled and uncontrolled props are provided
        if (value !== undefined && defaultValue !== undefined) {
            // eslint-disable-next-line no-console
            console.warn("Tabs: Both 'value' and 'defaultValue' provided. Component will be controlled (value takes precedence).");
        }
        // Warn if controlled but no onValueChange handler
        if (isControlled && !onValueChange) {
            // eslint-disable-next-line no-console
            console.warn("Tabs: 'value' prop provided but no 'onValueChange' handler. Tabs will not be interactive.");
        }
    }
    // Safe value change handler with error handling
    const handleValueChange = useCallback((newValue) => {
        try {
            if (!isControlled) {
                setCurrentValue(newValue);
            }
            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
        }
        catch (error) {
            if (process.env.NODE_ENV !== 'production') {
                // eslint-disable-next-line no-console
                console.error("Error in tabs value change handler:", error);
            }
        }
    }, [isControlled, onValueChange]);
    // Register and unregister trigger elements for underline positioning
    const registerTrigger = useCallback((triggerValue, element) => {
        triggerRefs.current.set(triggerValue, element);
    }, []);
    const unregisterTrigger = useCallback((triggerValue) => {
        triggerRefs.current.delete(triggerValue);
    }, []);
    // Memoize context value to prevent unnecessary re-renders
    const contextValue = useMemo(() => ({
        value: activeValue,
        onValueChange: handleValueChange,
        orientation: orientation,
        size,
        disabled,
        registerTrigger,
        unregisterTrigger,
    }), [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
    // Memoize theme classes for performance
    const themeClasses = useMemo(() => ({
        baseStyle: tabsTheme.baseStyle,
        disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
    }), [disabled]);
    return (jsx(TabsContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, darkMode && "dark", className // User overrides take precedence
            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
            , "aria-orientation": orientation, ...props, children: children }) }));
});
// Set display name for dev tools and Storybook
TabsComponent.displayName = "Tabs";
// Create compound component with proper typing
const Tabs = Object.assign(TabsComponent, {
    List: TabsList,
    Trigger: TabsTrigger,
    Body: TabsBody,
});

export { Tabs };
