import Budget from '../components/ui/Budget';
import { useEffect, useState } from 'react';
import api from '../services/api';
import { METRICS_WITHOUT_BUDGET_ROW, STAT_METRIC_KEYS } from '../types/stats.ts';
import TypographyAnimated from '@/components/ui/TypographyAnimated.tsx';
import { useLocale } from '@/context/LocaleContext';

const STATS_ENDPOINT = import.meta.env.VITE_STATS_ENDPOINT ?? '/api/stats';

export default function Dashboard() {
    const { t } = useLocale();
    const [stats, setStats] = useState<Partial<any> | null>(null);
    const metricsWithoutBudgetRowSet = new Set(METRICS_WITHOUT_BUDGET_ROW);
    const firstRowMetrics = STAT_METRIC_KEYS.filter((metricKey) => metricsWithoutBudgetRowSet.has(metricKey));
    const secondRowMetrics = STAT_METRIC_KEYS.filter((metricKey) => !metricsWithoutBudgetRowSet.has(metricKey));

    useEffect(() => {
        void loadStats();
    }, []);

    const loadStats = async () => {
        const { data } = await api.get(STATS_ENDPOINT);
        setStats(data);
    };

    return (
        <div className="w-full space-y-4">
                    <TypographyAnimated
                        variant="subtitle2"
                        prefix={t('dash', 'top_heading_prefix')}
                        rotatingWords={t('dash', 'top_heading_rotating')
                            .split('|')
                            .map((s) => s.trim())
                            .filter(Boolean)}
                        sx={{
                            color: 'text.primary',
                            fontWeight: 600,
                            textTransform: 'uppercase',
                            letterSpacing: '0.18em',
                            fontSize: '1.3rem',
                        }}
                    />  
            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {firstRowMetrics.map((metricKey) => (
                    <Budget key={metricKey} metricKey={metricKey} stats={stats ?? {}} />
                ))}
            </div>
            <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
                {secondRowMetrics.map((metricKey) => (
                    <Budget key={metricKey} metricKey={metricKey} stats={stats ?? {}} />
                ))}
            </div>
        </div>
    );
}