import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
import { Button, Menu, MenuItem, Stack } from '@mui/material';
import { memo, useEffect, useState } from 'react';

const warningColors = {
	bg: '#fff7e6',
	text: '#b54708',
	border: '#FCD99C',
	hover: '#fff1d6',
};

const ValidationErrorsAlert = ({ errors = [], onNavigateToColumn }) => {
	const [anchorEl, setAnchorEl] = useState(null);
	const isOpen = Boolean(anchorEl);

	useEffect(() => {
		if (errors.length === 0) {
			setAnchorEl(null);
		}
	}, [errors.length]);

	if (errors.length === 0) return null;

	const handleNavigate = (columnId) => {
		onNavigateToColumn?.(columnId);
		setAnchorEl(null);
	};

	return (
		<>
			<Button
				variant='outlined'
				onClick={(e) => setAnchorEl(e.currentTarget)}
				sx={{
					ml: 2,
					maxWidth: 360,
					height: '2.5rem',
					borderRadius: '0.5rem',
					bgcolor: warningColors.bg,
					color: warningColors.text,
					borderColor: warningColors.border,
					textTransform: 'none',
					justifyContent: 'space-between',
					px: 1.5,
					gap: 1,
					'&:hover': {
						bgcolor: warningColors.hover,
						borderColor: warningColors.border,
					},
				}}>
				<Stack direction='row' sx={{ alignItems: 'center', gap: 1, minWidth: 0, flex: 1 }}>
					<WarningAmberRoundedIcon sx={{ fontSize: '1.1rem', flexShrink: 0 }} />
					<span
						style={{
							overflow: 'hidden',
							textOverflow: 'ellipsis',
							whiteSpace: 'nowrap',
							textAlign: 'left',
						}}>
						Контроль ошибок
					</span>
				</Stack>

				<Stack direction='row' sx={{ alignItems: 'center', gap: 0.25, flexShrink: 0 }}>
					<span>Подробнее</span>
					<KeyboardArrowDownIcon
						sx={{
							fontSize: '1.25rem',
							transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
							transition: 'transform 0.2s ease',
						}}
					/>
				</Stack>
			</Button>

			<Menu
				anchorEl={anchorEl}
				open={isOpen}
				onClose={() => setAnchorEl(null)}
				anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
				transformOrigin={{ vertical: 'top', horizontal: 'left' }}
				slotProps={{
					paper: {
						'data-validation-errors-menu': true,
						sx: {
							mt: 0.5,
							bgcolor: warningColors.bg,
							color: warningColors.text,
							border: `1px solid ${warningColors.border}`,
							borderRadius: '0.5rem',
							boxShadow: 'none',
							minWidth: anchorEl?.offsetWidth,
							maxWidth: 420,
						},
					},
				}}>
				{errors.map((error) => (
					<MenuItem
						key={error.id}
						onClick={() => handleNavigate(error.columnId)}
						sx={{
							whiteSpace: 'normal',
							color: warningColors.text,
							cursor: 'pointer',
							'&:hover': {
								bgcolor: warningColors.hover,
							},
						}}>
						{error.message}
					</MenuItem>
				))}
			</Menu>
		</>
	);
};

export default memo(ValidationErrorsAlert);