import { formsBaseTheme } from '../forms.theme.js';

/**
 * Default theme for the Input component - Clean & Organized
 * Uses flat structure with design tokens
 */
const inputTheme = {
    // Base container styles
    wrapperStyle: formsBaseTheme.wrapperStyle,
    // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
    inputGroupStyle: "relative flex rounded-[var(--form-radius)] outline outline-1 outline-[var(--color-border)] " +
        "bg-white transition-all " +
        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)]",
    // JS-driven focus ring (applied when isFocused is true)
    inputGroupFocusStyle: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
        "ring-4 ring-[var(--color-primary)]/10 " +
        "dark:outline-[var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
    // JS-driven focus ring for invalid state
    inputGroupFocusInvalidStyle: "outline-2 outline-[var(--color-danger)] -outline-offset-1 " +
        "ring-4 ring-[var(--color-danger)]/10 " +
        "dark:outline-[var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
    // Base input styles - extends common form control with design tokens
    baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
    // Size variants - composed from atomic tokens
    sizes: {
        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
    },
    // State variants - custom invalid state without focus-within (focus handled via JS)
    states: {
        default: formsBaseTheme.states.default,
        disabled: formsBaseTheme.states.disabled,
        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] " +
            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
    },
    // Helper text styles with state handling
    helperText: formsBaseTheme.helperText,
    // Icon positioning styles
    iconStartStyle: formsBaseTheme.iconStyles.left,
    iconEndStyle: formsBaseTheme.iconStyles.right,
    // Icon padding configuration
    iconPadding: formsBaseTheme.iconStyles.padding,
    // Content styles - prefix/suffix content with size-aware font sizes
    contentStyle: {
        sm: `flex items-center px-3 ${formsBaseTheme.sizes.sm.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
        md: `flex items-center px-3 ${formsBaseTheme.sizes.md.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
        lg: `flex items-center px-3 ${formsBaseTheme.sizes.lg.text} text-[var(--color-text-muted)] shrink-0 dark:text-[var(--color-neutral-500)]`,
    },
    contentStartStyle: "pr-0 " +
        "[&:has([aria-haspopup])]:pl-0 " +
        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
        "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
        "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
    contentEndStyle: "pl-0 " +
        "[&:has([aria-haspopup])]:pr-0 " +
        "[&_[aria-haspopup]]:outline-none [&_[aria-haspopup]]:ring-0 [&_[aria-haspopup]]:shadow-none " +
        "[&_[aria-haspopup]]:border-none [&_[aria-haspopup]]:rounded-none [&_[aria-haspopup]]:bg-transparent " +
        "[&_[aria-haspopup]]:min-h-0 [&_[aria-haspopup]]:h-full",
    // Keyboard shortcut display
    keyboardShortcutStyle: "absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-muted)] z-10 " +
        "dark:text-[var(--color-neutral-500)]",
    // Password toggle button with hover states
    passwordToggleStyle: "absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer " +
        "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors z-10 " +
        "dark:text-[var(--color-neutral-500)] dark:hover:text-[var(--color-neutral-200)]",
    // Number input controls
    numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
    numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
        "text-[var(--color-text-muted)] hover:bg-[var(--color-background-tertiary)] " +
        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",
    // Type-specific styles organized by input type
    typeStyles: {
        password: {
            toggleIconActive: "size-5 text-[var(--color-text-primary)] dark:text-[var(--color-neutral-200)]",
            toggleIconInactive: "size-5 text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
        },
        search: {
            iconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
        },
        number: {
            incrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
            decrementIconStyle: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)]",
        },
    },
    // Password strength indicator with design tokens
    passwordStrengthIndicator: {
        containerStyle: "flex items-center gap-1",
        labelStyle: "text-sm font-semibold mr-1",
        dotStyle: "size-1.5 rounded-full",
        dotActiveStyle: "bg-current",
        dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",
        strengthStyles: {
            weak: {
                label: "Weak",
                color: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
            },
            moderate: {
                label: "Moderate",
                color: "text-[var(--color-warning)] dark:text-[var(--color-warning-400)]",
            },
            strong: {
                label: "Strong",
                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
            },
            "very-strong": {
                label: "Very Strong",
                color: "text-[var(--color-success)] dark:text-[var(--color-success-400)]",
            },
        },
    },
};

export { inputTheme };
