'use client'

import { useMonitoringStats } from '@/app/hooks/react-query/dashboard/useTariffStatistic';

export default function SubscriptionsStatistic() {
	const { data, isLoading, isError } = useMonitoringStats();

	if (isLoading) {
		return (
			<div className="admin-content">
				<div className="content-header">
					<h3>Статистика подписок</h3>
				</div>
				<div className="content-body">
					<div>Загрузка...</div>
				</div>
			</div>
		);
	}

	if (isError) {
		return (
			<div className="admin-content">
				<div className="content-header">
					<h3>Статистика подписок</h3>
				</div>
				<div className="content-body">
					<div>Ошибка при загрузке данных</div>
				</div>
			</div>
		);
	}

	const tariffs = data?.tariffs || [];

	return (
		<div className="admin-content">
			<div className="content-header">
				<h3>Статистика подписок</h3>
			</div>
			<div className="content-body">
				<table className="admin-table">
					<thead>
						<tr>
							<th>Тариф</th>
							<th>Пользователей</th>
							<th>Доля</th>
						</tr>
					</thead>
					<tbody>
						{tariffs.length > 0 ? (
							tariffs.map((tariff, index) => (
								<tr key={index}>
									<td>
										<span className={`badge badge-primary`}>
											{tariff.tariff_name}
										</span>
									</td>
									<td>{tariff.user_count}</td>
									<td>{tariff.usage_percent.toFixed(2)}%</td>
								</tr>
							))
						) : (
							<tr>
								<td colSpan={3} style={{ textAlign: 'center' }}>
									Нет данных
								</td>
							</tr>
						)}
					</tbody>
				</table>
			</div>
		</div>
	);
}