/**
* EqualizationDataTable Component
* Full data table for equalization view
*/
'use client';
import React from 'react';
import { useTranslations, useLocale } from 'next-intl';
import { motion, AnimatePresence } from 'framer-motion';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { useEqualizationData } from '@/contexts/EqualizationDataContext';
import { getProvincesByPayment, isTerritory } from '@/lib/visualizer/equalization';
import { provinces as provinceData } from '@/lib/visualizer/provinceData';
export function EqualizationDataTable() {
const t = useTranslations('equalization');
const tProvinces = useTranslations('provinces');
const locale = useLocale() as 'en' | 'fr';
const { showDataTable, selectedProvince, setSelectedProvince } = useVisualizerStore();
const { formatPaymentAmount, formatPerCapitaAmount, nationalStandard, data } = useEqualizationData();
const allProvinces = getProvincesByPayment();
if (!showDataTable) return null;
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
exit={{ opacity: 0, height: 0 }}
className="overflow-hidden"
>
<div className="bg-bg-secondary rounded-lg border border-border-subtle overflow-hidden">
{/* Header */}
<div className="px-4 py-3 border-b border-border-subtle flex items-center justify-between">
<h3 className="font-medium text-text-primary">{t('dataTable.title')}</h3>
<span className="text-xs text-text-tertiary">
{nationalStandard.fiscalYear}
</span>
</div>
{/* Table */}
<div className="overflow-x-auto">
<table className="w-full text-sm" aria-label={t('dataTable.ariaLabel')}>
<thead className="bg-bg-elevated text-text-secondary">
<tr>
<th className="px-4 py-2 text-left font-medium">
{t('dataTable.province')}
</th>
<th className="px-4 py-2 text-right font-medium">
{t('dataTable.status')}
</th>
<th className="px-4 py-2 text-right font-medium">
{t('dataTable.payment')}
</th>
<th className="px-4 py-2 text-right font-medium hidden sm:table-cell">
{t('dataTable.perCapita')}
</th>
<th className="px-4 py-2 text-right font-medium hidden md:table-cell">
{t('dataTable.fiscalCapacity')}
</th>
</tr>
</thead>
<tbody className="divide-y divide-border-subtle">
{allProvinces.map((province) => {
const isSelected = selectedProvince === province.provinceCode;
const isTerritorial = isTerritory(province.provinceCode);
return (
<tr
key={province.provinceCode}
onClick={() => setSelectedProvince(
isSelected ? null : province.provinceCode,
'table'
)}
className={`
cursor-pointer transition-colors
${isSelected
? 'bg-accent-red/10 hover:bg-accent-red/15'
: 'hover:bg-bg-elevated'
}
`}
>
<td className="px-4 py-2 font-medium text-text-primary">
{tProvinces(province.provinceCode)}
</td>
<td className="px-4 py-2 text-right">
{province.isReceiving ? (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400">
{t('dataTable.receiving')}
</span>
) : (
<span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-500/10 text-gray-400">
{t('dataTable.contributing')}
</span>
)}
</td>
<td className="px-4 py-2 text-right font-medium">
{province.isReceiving ? (
<span className="text-emerald-400">
{formatPaymentAmount(province.paymentMillions, locale)}
</span>
) : (
<span className="text-text-tertiary">—</span>
)}
</td>
<td className="px-4 py-2 text-right text-text-secondary hidden sm:table-cell">
{province.perCapitaPayment > 0
? formatPerCapitaAmount(province.perCapitaPayment, locale)
: '—'
}
</td>
<td className="px-4 py-2 text-right hidden md:table-cell">
<span className={`font-medium ${
province.fiscalCapacityIndex > 100
? 'text-blue-400'
: province.fiscalCapacityIndex < 100
? 'text-amber-400'
: 'text-text-secondary'
}`}>
{province.fiscalCapacityIndex}%
</span>
</td>
</tr>
);
})}
</tbody>
<tfoot className="bg-bg-elevated font-medium">
<tr>
<td className="px-4 py-2 text-text-primary">{t('dataTable.total')}</td>
<td className="px-4 py-2"></td>
<td className="px-4 py-2 text-right text-accent-red">
{formatPaymentAmount(nationalStandard.totalEnvelopeMillions, locale)}
</td>
<td className="px-4 py-2 hidden sm:table-cell"></td>
<td className="px-4 py-2 hidden md:table-cell"></td>
</tr>
</tfoot>
</table>
</div>
</div>
</motion.div>
</AnimatePresence>
);
}
