no-copy-admin-panel-frontend/src/app/ui/tariff-management/TariffEditModal.tsx

import { useEffect, useState } from 'react';
import { useMutation } from '@tanstack/react-query';
import { updateTariffs } from '@/app/actions/tariffActions';
import { toast } from 'sonner';
import DropDownList from '@/app/components/dropDownList';
import { convertBytes } from '@/app/lib/convertBytes';

export interface EditingTariff {
	id: number;
	name: string;
	type: string;
	price: number;
	tokens: number;
	maxFilesCount: number;
	diskSize: number;
	maxUsers: number;
	description: string;
	tariffTerm: string;
}

export function TariffEditModal({ tariff, onClose, onSuccess }: {
	tariff: EditingTariff;
	onClose: () => void;
	onSuccess: () => void;
}) {
	const [formData, setFormData] = useState({
		price: tariff.price,
		name: tariff.name,
		tokens: tariff.tokens,
		maxFilesCount: tariff.maxFilesCount,
		diskSize: tariff.diskSize,
		maxUsers: tariff.maxUsers,
		description: tariff.description,
		tariffTerm: tariff.tariffTerm === 'YEAR' ? 'YEAR' : 'MONTHLY' as 'MONTHLY' | 'YEAR',
		accountType: tariff.type.includes('TOKEN') ? 'token' : tariff.type.includes('STUDIO') ? 'b2b' : 'b2c' as 'b2c' | 'b2b' | 'token'
	});

	const updateTariffMutation = useMutation({
		mutationFn: async () => {
			return await updateTariffs(
				tariff.id,
				formData.price,
				formData.name,
				tariff.type,
				formData.tokens,
				formData.maxFilesCount,
				formData.diskSize,
				formData.maxUsers,
				formData.description,
				formData.tariffTerm,
				formData.accountType
			);
		},
		onSuccess: (data) => {
			if (data !== null && data !== undefined) {
				toast.success('Тариф успешно обновлен');

				onSuccess();
			} else {
				toast.error('Не удалось обновить тариф');
			}
		},
		onError: () => {
			toast.error('Произошла ошибка при обновлении тарифа');
		},
	});

	const handleSubmit = () => {
		updateTariffMutation.mutate();
	};

	const handleChange = (field: string, value: any) => {
		setFormData(prev => ({ ...prev, [field]: value }));
	};

	return (
		<div className="tariff-edit-modal">
			<h2 className="tariff-edit-modal__title">Редактирование тарифа</h2>

			<div className="tariff-edit-modal__content">
				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">ID тарифа</label>
					<p className="tariff-edit-modal__value">{tariff.id}</p>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Тип тарифа</label>
					<p className="tariff-edit-modal__value">{tariff.type}</p>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Название</label>
					<input
						type="text"
						className="tariff-edit-modal__input"
						value={formData.name}
						onChange={(e) => handleChange('name', e.target.value)}
						placeholder="Введите название тарифа"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Цена (₽)</label>
					<input
						type="number"
						className="tariff-edit-modal__input"
						value={formData.price}
						onChange={(e) => handleChange('price', Number(e.target.value))}
						placeholder="Введите цену"
						min="0"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Количество токенов</label>
					<input
						type="number"
						className="tariff-edit-modal__input"
						value={formData.tokens}
						onChange={(e) => handleChange('tokens', Number(e.target.value))}
						placeholder="Введите количество токенов"
						min="0"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Максимальное количество файлов</label>
					<input
						type="number"
						className="tariff-edit-modal__input"
						value={formData.maxFilesCount}
						onChange={(e) => handleChange('maxFilesCount', Number(e.target.value))}
						placeholder="Введите максимальное количество файлов"
						min="0"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Размер диска</label>
					<input
						type="number"
						className="tariff-edit-modal__input"
						value={formData.diskSize}
						onChange={(e) => handleChange('diskSize', Number(e.target.value))}
						placeholder="Введите размер диска в ГБ"
						min="0"
						step="1"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Максимальное количество пользователей</label>
					<input
						type="number"
						className="tariff-edit-modal__input"
						value={formData.maxUsers}
						onChange={(e) => handleChange('maxUsers', Number(e.target.value))}
						placeholder="Введите максимальное количество пользователей"
						min="0"
					/>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Срок тарифа</label>
					<DropDownList
						value={formData.tariffTerm === 'YEAR' ? 'Год' : 'Месяц'}
						callBack={(value: string) => {
							handleChange('tariffTerm', value);
						}}
					>
						<li value="MONTHLY">Месяц</li>
						<li value="YEAR">Год</li>
					</DropDownList>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Тип аккаунта</label>
					<DropDownList
						value={
							formData.accountType === 'b2c' ? 'B2C' :
								formData.accountType === 'b2b' ? 'B2B' : 'Token'
						}
						callBack={(value: string) => {
							handleChange('accountType', value);
						}}
					>
						<li value="b2c">B2C</li>
						<li value="b2b">B2B</li>
						<li value="token">Token</li>
					</DropDownList>
				</div>

				<div className="tariff-edit-modal__info-section">
					<label className="tariff-edit-modal__label">Описание</label>
					<textarea
						className="tariff-edit-modal__textarea"
						value={formData.description}
						onChange={(e) => handleChange('description', e.target.value)}
						placeholder="Введите описание тарифа"
						rows={4}
					/>
				</div>

				<div className="tariff-edit-modal__actions">
					<button
						onClick={onClose}
						className="btn btn-secondary"
						disabled={updateTariffMutation.isPending}
					>
						Отмена
					</button>
					<button
						onClick={handleSubmit}
						className="btn btn-primary"
						disabled={updateTariffMutation.isPending}
					>
						{updateTariffMutation.isPending ? 'Сохранение...' : 'Сохранить'}
					</button>
				</div>
			</div>
		</div>
	);
}