'use client';

import React, { useEffect, useState } from 'react';

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type RechartsComponentProps = Record<string, any>;

type RechartsModule = {
    ResponsiveContainer: React.ComponentType<RechartsComponentProps>;
    LineChart: React.ComponentType<RechartsComponentProps>;
    Line: React.ComponentType<RechartsComponentProps>;
    BarChart: React.ComponentType<RechartsComponentProps>;
    Bar: React.ComponentType<RechartsComponentProps>;
    PieChart: React.ComponentType<RechartsComponentProps>;
    Pie: React.ComponentType<RechartsComponentProps>;
    Cell: React.ComponentType<RechartsComponentProps>;
    XAxis: React.ComponentType<RechartsComponentProps>;
    YAxis: React.ComponentType<RechartsComponentProps>;
    ZAxis: React.ComponentType<RechartsComponentProps>;
    CartesianGrid: React.ComponentType<RechartsComponentProps>;
    Tooltip: React.ComponentType<RechartsComponentProps>;
    Legend: React.ComponentType<RechartsComponentProps>;
    AreaChart: React.ComponentType<RechartsComponentProps>;
    Area: React.ComponentType<RechartsComponentProps>;
    ReferenceLine: React.ComponentType<RechartsComponentProps>;
    ReferenceArea: React.ComponentType<RechartsComponentProps>;
    ComposedChart: React.ComponentType<RechartsComponentProps>;
    ScatterChart: React.ComponentType<RechartsComponentProps>;
    Scatter: React.ComponentType<RechartsComponentProps>;
    [key: string]: React.ComponentType<RechartsComponentProps> | unknown;
};

interface ClientOnlyRechartsProps {
    children: (recharts: RechartsModule) => React.ReactNode;
    /** Altura mínima do placeholder enquanto o chunk carrega (default 300). */
    minHeight?: number;
}

export default function ClientOnlyRecharts({ children, minHeight = 300 }: ClientOnlyRechartsProps) {
    const [recharts, setRecharts] = useState<RechartsModule | null>(null);
    const [mounted, setMounted] = useState(false);

    useEffect(() => {
        setMounted(true);
        if (typeof window !== 'undefined') {
            import('recharts').then((mod) => setRecharts(mod as unknown as RechartsModule));
        }
    }, []);

    if (!mounted || !recharts) {
        return (
            <div
                style={{
                    minHeight,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                }}
                role="status"
                aria-live="polite"
            >
                Carregando gráfico…
            </div>
        );
    }

    return <>{children(recharts)}</>;
}