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' ? 'Male' : 'Female';
	};

	console.log(userInfo)

	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') || 'User Information'}</h4>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('fullName') || 'Full Name'}:
							</div>
							<div className="info-value">
								{userInfo.fullName}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('email')}:
							</div>
							<div className="info-value">
								{userInfo.email}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('phone') || 'Phone'}:
							</div>
							<div className="info-value">
								{userInfo.phone}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('company')}:
							</div>
							<div className="info-value">
								{userInfo.company || '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('gender') || 'Gender'}:
							</div>
							<div className="info-value">
								{getGenderText(userInfo.genderType)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('birthday') || 'Birthday'}:
							</div>
							<div className="info-value">
								{userInfo.birthday ? formatDate(userInfo.birthday) : '-'}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('createdAt') || 'Registered'}:
							</div>
							<div className="info-value">
								{formatDateTime(userInfo.createdAt)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('verifiedStatus') || 'Verification Status'}:
							</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') || 'Tariff Information'}</h4>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tariffName') || 'Tariff'}:
							</div>
							<div className="info-value">
								{userInfo.tariffInfo.tariffName}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tariffStatus') || 'Status'}:
							</div>
							<div className="info-value">
								{getStatusBadge(userInfo.tariffInfo.status)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('tokens') || 'Tokens'}:
							</div>
							<div className="info-value">
								{userInfo.tariffInfo.tokens || 0}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('startDate') || 'Start Date'}:
							</div>
							<div className="info-value">
								{formatDate(userInfo.tariffInfo.startTariff)}
							</div>
						</div>
						<div className="info-item">
							<div className="info-label">
								{t('endDate') || 'End Date'}:
							</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') || 'Storage Information'}</h4>
					</div>
					<div className="info-item">
						<div className="info-label">
							{t('diskUsage') || 'Disk Usage'}:
						</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') || 'Files'}:
						</div>
						<div className="info-value">
							{userInfo.tariffInfo.currentFileCounts} / {userInfo.tariffInfo.maxFileCounts}
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}