'use client';

import React from 'react';
import ClientOnlyRecharts from '@/components/charts/ClientOnlyRecharts';

interface AreaChartProps {
    data: Record<string, unknown>[];
    dataKey: string;
    areas: Array<{
        key: string;
        name: string;
        color?: string;
        fillOpacity?: number;
    }>;
    height?: number;
    showGrid?: boolean;
    showLegend?: boolean;
    showTooltip?: boolean;
    stacked?: boolean;
    /** Gradiente suave no preenchimento (ideal para visão executiva) */
    useGradient?: boolean;
    tooltipFormatter?: (
        value: number | string,
        name: string | number
    ) => [React.ReactNode, React.ReactNode];
    yAxisTickFormatter?: (value: number) => string;
    xAxisTickFormatter?: (value: string) => string;
}

export default function AreaChart({
    data,
    dataKey,
    areas,
    height = 300,
    showGrid = true,
    showLegend = true,
    showTooltip = true,
    stacked = false,
    useGradient = false,
    tooltipFormatter,
    yAxisTickFormatter,
    xAxisTickFormatter,
}: AreaChartProps) {
    return (
        <ClientOnlyRecharts minHeight={height}>
            {({
                ResponsiveContainer,
                AreaChart: RechartsAreaChart,
                Area,
                XAxis,
                YAxis,
                CartesianGrid,
                Tooltip,
                Legend,
            }) => (
                <ResponsiveContainer width="100%" height={height}>
                    <RechartsAreaChart data={data} stackOffset={stacked ? 'expand' : undefined}>
                        <defs>
                            {useGradient &&
                                areas.map((area, i) => {
                                    const c = area.color || '#27132e';
                                    const id = `area-gradient-${area.key}-${i}`;
                                    return (
                                        <linearGradient key={id} id={id} x1="0" y1="0" x2="0" y2="1">
                                            <stop
                                                offset="0%"
                                                stopColor={c}
                                                stopOpacity={area.fillOpacity ?? 0.5}
                                            />
                                            <stop offset="100%" stopColor={c} stopOpacity={0.05} />
                                        </linearGradient>
                                    );
                                })}
                        </defs>
                        {showGrid && (
                            <CartesianGrid strokeDasharray="3 3" strokeOpacity={0.2} vertical={false} />
                        )}
                        <XAxis
                            dataKey={dataKey}
                            tick={{ fontSize: 12 }}
                            tickFormatter={xAxisTickFormatter}
                        />
                        <YAxis tick={{ fontSize: 12 }} tickFormatter={yAxisTickFormatter} />
                        {showTooltip && <Tooltip formatter={tooltipFormatter} />}
                        {showLegend && <Legend />}
                        {areas.map((area, i) => {
                            const fill = useGradient
                                ? `url(#area-gradient-${area.key}-${i})`
                                : area.color || '#27132e';
                            return (
                                <Area
                                    key={area.key}
                                    type="monotone"
                                    dataKey={area.key}
                                    name={area.name}
                                    stroke={area.color || '#27132e'}
                                    strokeWidth={2}
                                    fill={fill}
                                    fillOpacity={useGradient ? 1 : area.fillOpacity || 0.6}
                                    stackId={stacked ? '1' : undefined}
                                />
                            );
                        })}
                    </RechartsAreaChart>
                </ResponsiveContainer>
            )}
        </ClientOnlyRecharts>
    );
}