/**
* EqualizationExplainer Component
* Main container for the equalization step-by-step explainer
*/
'use client';
import React, { useEffect } from 'react';
import { useTranslations } from 'next-intl';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { useVisualizerStore } from '@/hooks/useVisualizerStore';
import { TOTAL_EQUALIZATION_STEPS } from '@/lib/visualizer/equalization';
import { StepperNav } from './StepperNav';
import {
Step1Introduction,
Step2RevenueSources,
Step3FiscalCapacity,
Step4NationalStandard,
Step5Comparison,
Step6Calculation,
Step7Results,
} from './steps';
const stepComponents = {
1: Step1Introduction,
2: Step2RevenueSources,
3: Step3FiscalCapacity,
4: Step4NationalStandard,
5: Step5Comparison,
6: Step6Calculation,
7: Step7Results,
};
export function EqualizationExplainer() {
const t = useTranslations('equalization');
const {
equalizationStep,
nextEqualizationStep,
prevEqualizationStep,
setEqualizationStep,
} = useVisualizerStore();
// Keyboard navigation
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
nextEqualizationStep();
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
prevEqualizationStep();
} else if (e.key >= '1' && e.key <= '7') {
e.preventDefault();
setEqualizationStep(parseInt(e.key) as 1 | 2 | 3 | 4 | 5 | 6 | 7);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, [nextEqualizationStep, prevEqualizationStep, setEqualizationStep]);
const StepComponent = stepComponents[equalizationStep];
const isFirstStep = equalizationStep === 1;
const isLastStep = equalizationStep === TOTAL_EQUALIZATION_STEPS;
return (
<div className="flex flex-col h-full">
{/* Stepper navigation */}
<div className="pb-4 border-b border-border-subtle">
<StepperNav />
</div>
{/* Step content */}
<div className="flex-1 overflow-y-auto py-4 px-1">
<StepComponent />
</div>
{/* Navigation buttons */}
<div className="pt-4 border-t border-border-subtle flex items-center justify-between gap-4">
<button
onClick={prevEqualizationStep}
disabled={isFirstStep}
className={`
flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors
${isFirstStep
? 'text-text-tertiary cursor-not-allowed'
: 'text-text-secondary hover:text-text-primary hover:bg-bg-secondary'
}
`}
>
<ChevronLeft className="w-4 h-4" />
{t('navigation.previous')}
</button>
{/* Step indicator for mobile */}
<span className="text-xs text-text-tertiary sm:hidden">
{equalizationStep}/{TOTAL_EQUALIZATION_STEPS}
</span>
<button
onClick={nextEqualizationStep}
disabled={isLastStep}
className={`
flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors
${isLastStep
? 'text-text-tertiary cursor-not-allowed'
: 'bg-accent-red text-white hover:bg-accent-red/90'
}
`}
>
{t('navigation.next')}
<ChevronRight className="w-4 h-4" />
</button>
</div>
{/* Keyboard hint */}
<p className="text-center text-xs text-text-tertiary mt-2 hidden sm:block">
{t('navigation.keyboardHint')}
</p>
</div>
);
}
