import * as React from 'react';
import { alpha } from '@mui/material/styles';
import { outlinedInputClasses } from '@mui/material/OutlinedInput';
import { svgIconClasses } from '@mui/material/SvgIcon';
import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
import { toggleButtonClasses } from '@mui/material/ToggleButton';
import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
import { gray, brand } from '../themePrimitives';

/* eslint-disable import/prefer-default-export */
export const inputsCustomizations = {
    MuiButtonBase: {
        defaultProps: {
            disableTouchRipple: true,
            disableRipple: true,
        },
        styleOverrides: {
            root: ({ theme }) => ({
                boxSizing: 'border-box',
                transition: 'all 100ms ease-in',
                '&:focus-visible': {
                    outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
                    outlineOffset: '2px',
                },
            }),
        },
    },
    MuiButton: {
        styleOverrides: {
            root: ({ theme }) => ({
                boxShadow: 'none',
                borderRadius: (theme.vars || theme).shape.borderRadius,
                textTransform: 'none',
                variants: [
                    {
                        props: {
                            size: 'small',
                        },
                        style: {
                            height: '2.25rem',
                            padding: '8px 12px',
                        },
                    },
                    {
                        props: {
                            size: 'medium',
                        },
                        style: {
                            height: '2.5rem', // 40px
                        },
                    },
                    {
                        props: {
                            color: 'primary',
                            variant: 'contained',
                        },
                        style: {
                            color: 'white',
                            backgroundColor: gray[900],
                            backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
                            boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
                            border: `1px solid ${gray[700]}`,
                            '&:hover': {
                                backgroundImage: 'none',
                                backgroundColor: gray[700],
                                boxShadow: 'none',
                            },
                            '&:active': {
                                backgroundColor: gray[800],
                            },
                            ...theme.applyStyles('dark', {
                                color: '#ccc',
                                backgroundColor: gray[700],
                                backgroundImage: `linear-gradient(to bottom, ${gray[600]}, ${gray[700]})`,
                                boxShadow: `inset 0 1px 0 ${gray[500]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
                                border: `1px solid ${gray[600]}`,
                                '&:hover': {
                                    backgroundImage: 'none',
                                    backgroundColor: gray[600],
                                    boxShadow: 'none',
                                },
                                '&:active': {
                                    backgroundColor: gray[500],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'secondary',
                            variant: 'contained',
                        },
                        style: {
                            color: 'white',
                            backgroundColor: brand[300],
                            backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
                            boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
                            border: `1px solid ${brand[500]}`,
                            '&:hover': {
                                backgroundColor: brand[700],
                                boxShadow: 'none',
                            },
                            '&:active': {
                                backgroundColor: brand[700],
                                backgroundImage: 'none',
                            },
                            ...theme.applyStyles('dark', {
                                color: '#ccc',
                                backgroundColor: brand[600],
                                backgroundImage: `linear-gradient(to bottom, ${alpha(brand[500], 0.8)}, ${brand[600]})`,
                                boxShadow: `inset 0 2px 0 ${alpha(brand[400], 0.2)}, inset 0 -2px 0 ${alpha(brand[800], 0.4)}`,
                                border: `1px solid ${brand[600]}`,
                                '&:hover': {
                                    backgroundColor: brand[500],
                                    boxShadow: 'none',
                                },
                                '&:active': {
                                    backgroundColor: brand[500],
                                    backgroundImage: 'none',
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            variant: 'outlined',
                        },
                        style: {
                            color: (theme.vars || theme).palette.text.primary,
                            border: '1px solid',
                            borderColor: gray[200],
                            backgroundColor: alpha(gray[50], 0.3),
                            '&:hover': {
                                backgroundColor: gray[100],
                                borderColor: gray[300],
                            },
                            '&:active': {
                                backgroundColor: gray[200],
                            },
                            ...theme.applyStyles('dark', {
                                backgroundColor: gray[800],
                                borderColor: gray[700],

                                '&:hover': {
                                    backgroundColor: gray[900],
                                    borderColor: gray[600],
                                },
                                '&:active': {
                                    backgroundColor: gray[900],
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'secondary',
                            variant: 'outlined',
                        },
                        style: {
                            color: brand[700],
                            border: '1px solid',
                            borderColor: brand[200],
                            backgroundColor: brand[50],
                            '&:hover': {
                                backgroundColor: brand[100],
                                borderColor: brand[400],
                            },
                            '&:active': {
                                backgroundColor: alpha(brand[200], 0.7),
                            },
                            ...theme.applyStyles('dark', {
                                color: brand[50],
                                border: '1px solid',
                                borderColor: brand[900],
                                backgroundColor: alpha(brand[900], 0.3),
                                '&:hover': {
                                    borderColor: brand[700],
                                    backgroundColor: alpha(brand[900], 0.6),
                                },
                                '&:active': {
                                    backgroundColor: alpha(brand[900], 0.5),
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            variant: 'text',
                        },
                        style: {
                            color: gray[600],
                            '&:hover': {
                                backgroundColor: gray[100],
                            },
                            '&:active': {
                                backgroundColor: gray[200],
                            },
                            ...theme.applyStyles('dark', {
                                color: '#ccc',
                                '&:hover': {
                                    backgroundColor: gray[700],
                                },
                                '&:active': {
                                    backgroundColor: alpha(gray[700], 0.7),
                                },
                            }),
                        },
                    },
                    {
                        props: {
                            color: 'secondary',
                            variant: 'text',
                        },
                        style: {
                            color: brand[700],
                            '&:hover': {
                                backgroundColor: alpha(brand[100], 0.5),
                            },
                            '&:active': {
                                backgroundColor: alpha(brand[200], 0.7),
                            },
                            ...theme.applyStyles('dark', {
                                color: brand[100],
                                '&:hover': {
                                    backgroundColor: alpha(brand[900], 0.5),
                                },
                                '&:active': {
                                    backgroundColor: alpha(brand[900], 0.3),
                                },
                            }),
                        },
                    },
                ],
            }),
        },
    },
    MuiIconButton: {
        variants: [
            {
                props: { variant: 'action' },
                style: ({ theme, ownerState }) => {
                    const baseStyle = {
                        boxShadow: 'none',
                        borderRadius: 4,
                        textTransform: 'none',
                        fontWeight: theme.typography.fontWeightMedium,
                        letterSpacing: 0,
                        color: theme.palette.text.primary,
                        border: '1px solid',
                        borderColor: gray[200],
                        backgroundColor: alpha(gray[50], 0.3),
                        '&:hover': {
                            backgroundColor: gray[100],
                            borderColor: gray[300],
                        },
                        '&:active': {
                            backgroundColor: gray[200],
                        },
                        ...(theme.applyStyles?.('dark', {
                            backgroundColor: gray[800],
                            borderColor: gray[700],
                            '&:hover': {
                                backgroundColor: gray[900],
                                borderColor: gray[600],
                            },
                            '&:active': {
                                backgroundColor: gray[900],
                            },
                        }) || {}),
                    };

                    // Add size-specific adjustments
                    if (ownerState.size === 'small') {
                        Object.assign(baseStyle, {
                            width: '1.5rem',
                            height: '1.5rem',
                            padding: '0.25rem',
                            [`& .${svgIconClasses.root}`]: {
                                fontSize: '1rem',
                            },
                        });
                    } else if (ownerState.size === 'medium') {
                        Object.assign(baseStyle, {
                            width: '2.5rem',
                            height: '2.5rem',
                        });
                    }

                    return baseStyle;
                },
            },
        ],
    },

    MuiToggleButtonGroup: {
        styleOverrides: {
            root: ({ theme }) => ({
                borderRadius: '10px',
                boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
                [`& .${toggleButtonGroupClasses.selected}`]: {
                    color: brand[500],
                },
                ...theme.applyStyles('dark', {
                    [`& .${toggleButtonGroupClasses.selected}`]: {
                        color: '#fff',
                    },
                    boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
                }),
            }),
        },
    },
    MuiToggleButton: {
        styleOverrides: {
            root: ({ theme }) => ({
                padding: '12px 16px',
                textTransform: 'none',
                borderRadius: '10px',
                fontWeight: 500,
                ...theme.applyStyles('dark', {
                    color: gray[400],
                    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
                    [`&.${toggleButtonClasses.selected}`]: {
                        color: brand[300],
                    },
                }),
            }),
        },
    },
    MuiCheckbox: {
        defaultProps: {
            disableRipple: true,
            icon: (
                <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
            ),
            checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
            indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
        },
        styleOverrides: {
            root: ({ theme }) => ({
                margin: 10,
                height: 16,
                width: 16,
                borderRadius: 5,
                border: '1px solid ',
                borderColor: alpha(gray[300], 0.8),
                boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
                backgroundColor: alpha(gray[100], 0.4),
                transition: 'border-color, background-color, 120ms ease-in',
                '&:hover': {
                    borderColor: brand[300],
                },
                '&.Mui-focusVisible': {
                    outline: `3px solid ${alpha(brand[500], 0.5)}`,
                    outlineOffset: '2px',
                    borderColor: brand[400],
                },
                '&.Mui-checked': {
                    color: 'white',
                    backgroundColor: brand[500],
                    borderColor: brand[500],
                    boxShadow: `none`,
                    '&:hover': {
                        backgroundColor: brand[600],
                    },
                },
                ...theme.applyStyles('dark', {
                    borderColor: alpha(gray[700], 0.8),
                    boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
                    backgroundColor: alpha(gray[900], 0.8),
                    '&:hover': {
                        borderColor: brand[300],
                    },
                    '&.Mui-focusVisible': {
                        borderColor: brand[400],
                        outline: `3px solid ${alpha(brand[500], 0.5)}`,
                        outlineOffset: '2px',
                    },
                }),
            }),
        },
    },
    // MuiInputBase: {
    //     styleOverrides: {
    //         root: {
    //             border: 'none',
    //         },
    //         input: {
    //             '&::placeholder': {
    //                 opacity: 0.7,
    //                 color: gray[500],
    //             },
    //         },
    //     },
    // },
    MuiOutlinedInput: {
        styleOverrides: {
            input: {
                padding: 0,
            },

            root: ({ theme }) => ({
                padding: '8px 12px',
                color: (theme.vars || theme).palette.text.primary,
                borderRadius: (theme.vars || theme).shape.borderRadius,
                backgroundColor: (theme.vars || theme).palette.background.default,
                transition: 'border 120ms ease-in',

                // Hover should change the outline color (target the outline element)
                [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
                    borderColor: theme.palette.grey?.[400] ?? '#bdbdbd',
                },

                // Focused -> change outline color (keep no blue if you want custom color)
                [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
                    borderColor: (theme.vars || theme).palette.primary?.main ?? '#1976d2',
                    borderWidth: 1,
                },

                // Error state -> red outline
                [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
                    borderColor: (theme.vars || theme).palette.error?.main ?? '#d32f2f',
                    borderWidth: 1,
                },

                ...theme.applyStyles?.('dark', {
                    color: '#ccc',
                    backgroundColor: gray[800],
                    '&:hover .MuiOutlinedInput-notchedOutline': {
                        borderColor: '#242a37',
                    },
                    [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
                        borderColor: (theme.vars || theme).palette.primary?.main ?? '#1976d2',
                    },
                }),

                // Keep your variants if needed
                variants: [
                    {
                        props: { size: 'small' },
                        style: { /* ... */ },
                    },
                    {
                        props: { size: 'medium' },
                        style: { /* ... */ },
                    },
                ],
            }),

            // IMPORTANT: restore a visible border on the notchedOutline
            notchedOutline: ({ theme }) => ({
                borderColor: (theme.vars || theme).palette.divider,
                borderWidth: 1,
                ...theme.applyStyles?.('dark', {
                    borderColor: '#242a37',
                }),
            }),
        },
    },
    // MuiInputAdornment: {
    //     styleOverrides: {
    //         root: ({ theme }) => ({
    //             color: (theme.vars || theme).palette.grey[500],
    //             ...theme.applyStyles('dark', {
    //                 color: (theme.vars || theme).palette.grey[400],
    //             }),
    //         }),
    //     },
    // },
    // MuiFormLabel: {
    //     styleOverrides: {
    //         root: ({ theme }) => ({
    //             typography: theme.typography.caption,
    //             marginBottom: 8,
    //             fontSize: "13px",
    //         }),
    //     },
    // },
};