no-copy-admin-panel-frontend/src/app/ui/users/user-info-modal-window.tsx

import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';

interface User {
	fullName: string;
	company: string | null;
	email: string;
	active: boolean;
	phone: string;
	genderType: 'MALE' | 'FEMALE';
	birthday: string | null;
	createdAt: string;
	subscriptionType: 'DEMO' | string;
	tariffs: null;
	tariffInfo: TariffInfo;
	permission: null;
	verifiedStatus: 'VERIFIED' | 'PENDING' | 'UNVERIFIED';
}

interface TariffInfo {
	id: string;
	status: 'EXPIRED' | 'ACTIVE' | 'PENDING';
	startTariff: string;
	endTariff: string;
	tariffId: number;
	tariffName: string;
	tokens: number;
	maxFileOnDisk: number;
	currentFileOnDisk: number;
	currentFileCounts: number;
	maxFileCounts: number;
}

export function UserInfoModalWindow({
	userInfo,
	setWindowClose,
	setWindowChildren
}: {
	userInfo: User, // Исправлено: ожидаем User, а не TariffInfo
	setWindowClose: any,
	setWindowChildren: any
}) {
	const t = useTranslations('Global');

	const formatBytes = (bytes: number) => {
		if (bytes === 0) return '0 Bytes';
		const k = 1024;
		const sizes = ['Bytes', 'KB', 'MB', 'GB'];
		const i = Math.floor(Math.log(bytes) / Math.log(k));
		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
	};

	const getStatusBadge = (status: string) => {
		const statusConfig = {
			'ACTIVE': { class: 'status-active', text: 'Active' },
			'EXPIRED': { class: 'status-expired', text: 'Expired' },
			'PENDING': { class: 'status-pending', text: 'Pending' },
			'VERIFIED': { class: 'status-verified', text: 'Verified' },
			'UNVERIFIED': { class: 'status-unverified', text: 'Unverified' }
		};
		const config = statusConfig[status as keyof typeof statusConfig];
		return config ? <span className={`status-badge ${config.class}`}>{config.text}</span> : status;
	};

	const getGenderText = (gender: string) => {
		return gender === 'MALE' ? t('male') : t('female');
	};

	return (
		<div className="modal-window-view-user">
			<div className="modal-window-view-user-content">
				<div className="user-info-wrapper">
					{/* Карточка информации о пользователе */}
					<div className="user-info-card">
						<div className="info-header">
							<h4>{t('userInformation')}</h4>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('fullName')}:
							</div>
							<div className="info-value">
								{userInfo?.fullName ? userInfo.fullName : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('email')}:
							</div>
							<div className="info-value">
								{userInfo?.email ? userInfo.email : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('phone')}:
							</div>
							<div className="info-value">
								{userInfo?.phone ? userInfo.phone : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('company')}:
							</div>
							<div className="info-value">
								{userInfo?.company ? userInfo.company : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('gender')}:
							</div>
							<div className="info-value">
								{getGenderText(userInfo?.genderType)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('birthday')}:
							</div>
							<div className="info-value">
								{userInfo?.birthday ? formatDate(userInfo.birthday) : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('createdAt')}:
							</div>
							<div className="info-value">
								{formatDateTime(userInfo?.createdAt)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('verifiedStatus')}:
							</div>
							<div className="info-value">
								{getStatusBadge(userInfo?.verifiedStatus)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('active')}:
							</div>
							<div className="info-value">
								{userInfo?.active ? 'active' : 'not active'}
							</div>
						</div>
					</div>

					{/* Карточка информации о тарифе */}
					<div className="user-info-card">
						<div className="info-header">
							<h4>{t('tariffInformation')}</h4>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tariffName')}:
							</div>
							<div className="info-value">
								{userInfo?.tariffInfo?.tariffName ? userInfo?.tariffInfo?.tariffName : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tariffStatus')}:
							</div>
							<div className="info-value">
								{getStatusBadge(userInfo?.tariffInfo?.status)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tokens')}:
							</div>
							<div className="info-value">
								{userInfo?.tariffInfo?.tokens ? userInfo?.tariffInfo?.tokens : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('startDate')}:
							</div>
							<div className="info-value">
								{formatDate(userInfo?.tariffInfo?.startTariff)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('endDate')}:
							</div>
							<div className="info-value">
								{formatDate(userInfo?.tariffInfo?.endTariff)}
							</div>
						</div>
					</div>
				</div>

				{/* Карточка использования диска */}
				<div className="user-info-card">
					<div className="info-header">
						<h4>{t('storageInformation')}</h4>
					</div>
					<div className="info-item">
						<div className="info-label">
							{t('diskUsage')}:
						</div>
						<div className="info-value">
							{formatBytes(userInfo?.tariffInfo?.currentFileOnDisk)} / {formatBytes(userInfo?.tariffInfo?.maxFileOnDisk)}
						</div>
					</div>
					<div className="info-item">
						<div className="info-label">
							{t('fileCount')}:
						</div>
						<div className="info-value">
							{userInfo?.tariffInfo?.currentFileCounts} / {userInfo?.tariffInfo?.maxFileCounts}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}