/**
* EqualizationGuidancePanel Component
* Left panel showing step navigation and explanations for desktop view
*/
'use client';
import React from 'react';
import { useLocale } from 'next-intl';
import { Info, DollarSign, BarChart3, Scale, Calculator, Trophy, ChevronRight } from 'lucide-react';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { TOTAL_EQUALIZATION_STEPS, EqualizationStep } from '@/lib/visualizer/equalization';
import { EqualizationChat } from './EqualizationChat';
const stepIcons: Record<number, React.ReactNode> = {
1: <Info className="w-4 h-4" />,
2: <DollarSign className="w-4 h-4" />,
3: <BarChart3 className="w-4 h-4" />,
4: <Scale className="w-4 h-4" />,
5: <BarChart3 className="w-4 h-4" />,
6: <Calculator className="w-4 h-4" />,
7: <Trophy className="w-4 h-4" />,
};
const stepData: Record<number, { en: { title: string; description: string }; fr: { title: string; description: string } }> = {
1: {
en: { title: 'What is Equalization?', description: 'Federal transfers ensuring comparable public services across provinces.' },
fr: { title: 'Qu\'est-ce que la péréquation?', description: 'Transferts fédéraux assurant des services publics comparables entre provinces.' },
},
2: {
en: { title: 'Revenue Sources', description: 'Five revenue categories measure provincial fiscal capacity.' },
fr: { title: 'Sources de revenus', description: 'Cinq catégories de revenus mesurent la capacité fiscale provinciale.' },
},
3: {
en: { title: 'Fiscal Capacity', description: 'Each province\'s ability to raise revenue, shown as % of national average.' },
fr: { title: 'Capacité fiscale', description: 'Capacité de chaque province à générer des revenus, en % de la moyenne nationale.' },
},
4: {
en: { title: 'National Standard', description: 'The 10-province average fiscal capacity — the benchmark.' },
fr: { title: 'Norme nationale', description: 'La capacité fiscale moyenne des 10 provinces — le point de référence.' },
},
5: {
en: { title: 'Above or Below?', description: 'Provinces below 100% are eligible for equalization payments.' },
fr: { title: 'Au-dessus ou en dessous?', description: 'Les provinces sous 100% sont admissibles aux paiements.' },
},
6: {
en: { title: 'Calculate Payments', description: 'Payment = (Gap below standard) × Population' },
fr: { title: 'Calculer les paiements', description: 'Paiement = (Écart sous la norme) × Population' },
},
7: {
en: { title: 'Final Results', description: 'Total equalization payments for the current fiscal year.' },
fr: { title: 'Résultats finaux', description: 'Total des paiements de péréquation pour l\'année fiscale en cours.' },
},
};
export function EqualizationGuidancePanel() {
const locale = useLocale() as 'en' | 'fr';
const { equalizationStep, setEqualizationStep, nextEqualizationStep } = useVisualizerStore();
const isLastStep = equalizationStep === TOTAL_EQUALIZATION_STEPS;
return (
<div className="flex flex-col h-full">
{/* Scrollable content area */}
<div className="flex-1 min-h-0 overflow-y-auto">
{/* Step List */}
<div className="space-y-1">
{Array.from({ length: TOTAL_EQUALIZATION_STEPS }, (_, i) => i + 1).map((step) => {
const isActive = step === equalizationStep;
const data = stepData[step][locale];
return (
<button
key={step}
onClick={() => setEqualizationStep(step as EqualizationStep)}
className={`
w-full text-left p-3 rounded-lg transition-all
${isActive
? 'bg-accent-red/10 border border-accent-red/30'
: 'hover:bg-bg-elevated border border-transparent'
}
`}
>
<div className="flex items-start gap-3">
<div className={`
flex-shrink-0 w-7 h-7 rounded-full flex items-center justify-center
${isActive ? 'bg-accent-red text-white' : 'bg-bg-elevated text-text-secondary'}
`}>
{stepIcons[step]}
</div>
<div className="flex-1 min-w-0">
<div className={`text-sm font-medium ${isActive ? 'text-text-primary' : 'text-text-secondary'}`}>
{data.title}
</div>
{isActive && (
<div className="text-xs text-text-tertiary mt-1">
{data.description}
</div>
)}
</div>
</div>
</button>
);
})}
</div>
{/* Chat Section */}
<div className="mt-4 pt-4 border-t border-border-subtle">
<EqualizationChat />
</div>
</div>
{/* Next Step Button - fixed at bottom, outside scrollable area */}
<div className="flex-shrink-0 pt-4 border-t border-border-subtle">
<button
onClick={nextEqualizationStep}
disabled={isLastStep}
className={`
w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors
${isLastStep
? 'bg-bg-elevated text-text-tertiary cursor-not-allowed'
: 'bg-accent-red text-white hover:bg-accent-red/90'
}
`}
>
{isLastStep
? (locale === 'en' ? 'Complete' : 'Terminé')
: (locale === 'en' ? 'Next Step' : 'Étape suivante')
}
{!isLastStep && <ChevronRight className="w-4 h-4" />}
</button>
</div>
</div>
);
}
