import { Box, Divider, IconButton, Stack } from '@mui/material';
import { memo, useEffect, useState } from 'react';
import { DangerOutlinedButton, PrimaryButton } from '../../common/Buttons/Buttons';
import { HeaderContainer, ModalBackdrop, ModalContainer, ModalTitle } from '../../common/Modal/ModalStyled';
import { StyledTextField } from '../../common/StyledTextField';
import { Cancel } from '../../common/icons/icons';

const TITLES = { program: 'Переименование программы', project: 'Переименование проекта' };

// AURORA-1980: target — результат getRenameTarget; onSubmit получает обрезанное название.
// Окно само не закрывается после отправки: закрытие/остаток при ошибке решает родитель.
const RenameNodeModalComponent = ({ target, isSaving = false, onClose, onSubmit }) => {
	const [name, setName] = useState('');

	useEffect(() => {
		setName(target?.name ?? '');
	}, [target]);

	if (!target) return null;

	const isFormValid = name.trim() !== '';

	const handleBackdropClick = (e) => {
		if (e.target === e.currentTarget) onClose();
	};

	const handleSave = () => {
		if (!isFormValid || isSaving) return;
		onSubmit?.(name.trim());
	};

	return (
		<ModalBackdrop isOpen onClick={handleBackdropClick}>
			<ModalContainer height='max-content'>
				<HeaderContainer>
					<Stack direction='row' spacing={2} sx={{ alignItems: 'center' }}>
						<ModalTitle>{TITLES[target.kind]}</ModalTitle>
					</Stack>
					<IconButton size='small' onClick={onClose}>
						<Cancel />
					</IconButton>
				</HeaderContainer>

				<Box>
					<Divider sx={{ marginBottom: '0.75rem' }} />
					<StyledTextField label='Название' value={name} onChange={(e) => setName(e.target.value)} />
					<Stack direction='row' spacing={0.75} sx={{ justifyContent: 'flex-end', marginTop: '1.5rem', width: '100%' }}>
						<DangerOutlinedButton onClick={onClose} disabled={isSaving}>
							Отмена
						</DangerOutlinedButton>
						<PrimaryButton onClick={handleSave} disabled={!isFormValid || isSaving} loading={isSaving}>
							Сохранить
						</PrimaryButton>
					</Stack>
				</Box>
			</ModalContainer>
		</ModalBackdrop>
	);
};

export const RenameNodeModal = memo(RenameNodeModalComponent);