import { useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { removeTariffs } from '@/app/actions/tariffActions';
import { toast } from 'sonner';

interface TariffDeleteModalProps {
	tariffId: number;
	tariffName: string;
	onClose: () => void;
	onSuccess: () => void;
}

export function TariffDeleteModal({ tariffId, tariffName, onClose, onSuccess }: TariffDeleteModalProps) {
	const [isConfirmText, setIsConfirmText] = useState('');
	const confirmText = 'УДАЛИТЬ';

	const deleteTariffMutation = useMutation({
		mutationFn: async () => {
			return await removeTariffs(tariffId);
		},
		onSuccess: (data) => {
			if (data !== null && data !== undefined) {
				toast.success('Тариф успешно удален');
				onSuccess();
			} else {
				toast.error('Не удалось удалить тариф');
			}
		},
		onError: () => {
			toast.error('Произошла ошибка при удалении тарифа');
		},
	});

	const handleDelete = () => {
		deleteTariffMutation.mutate();
	};

	const getDisplayName = (name: string) => {
		if (name) {
			return name.toUpperCase().replace(/_/g, ' ');
		}
		return `ID: ${tariffId}`;
	};

	return (
		<div className="tariff-delete-modal">
			<h2 className="tariff-delete-modal__title">Удаление тарифа</h2>

			<div className="tariff-delete-modal__content">
				<div className="tariff-delete-modal__warning">
					<p className="warning-text">
						Вы действительно хотите удалить тариф <strong>"{getDisplayName(tariffName)}"</strong>?
					</p>
				</div>

				<div className="tariff-delete-modal__info">
					<p>Это действие невозможно отменить.</p>
				</div>

				<div className="tariff-delete-modal__confirm">
					<label className="confirm-label">
						Для подтверждения введите <strong>{confirmText}</strong>
					</label>
					<input
						type="text"
						className="confirm-input"
						value={isConfirmText}
						onChange={(e) => setIsConfirmText(e.target.value)}
						placeholder={`Введите "${confirmText}"`}
					/>
				</div>

				<div className="tariff-delete-modal__actions">
					<button
						onClick={onClose}
						className="btn btn-secondary"
						disabled={deleteTariffMutation.isPending}
					>
						Отмена
					</button>
					<button
						onClick={handleDelete}
						className="btn btn-danger"
						disabled={isConfirmText !== confirmText || deleteTariffMutation.isPending}
					>
						{deleteTariffMutation.isPending ? 'Удаление...' : 'Удалить'}
					</button>
				</div>
			</div>
		</div>
	);
}