import React from 'react';
import ReactApexChart from 'react-apexcharts';
import type { ApexOptions } from 'apexcharts';
import { CardTitle } from '../ui/Typography';
import { englishToPersian, formatWithThousands } from '@/utils/numberUtils';

interface ApexAreaChartCardProps {
    data: { name: string; value: number }[];
    title?: string;
    color?: string;
}

const formatNumber = (value: number | string) => {
    const formatted = formatWithThousands(value);
    return englishToPersian(formatted);
};

export const ApexAreaChartCard = ({ data, title, color = '#3b82f6' }: ApexAreaChartCardProps) => {
    const categories = data.map((item) => item.name);
    const series = [
        {
            name: title || '',
            data: data.map((item) => item.value),
        },
    ];

    const options: ApexOptions = {
        chart: {
            type: 'area',
            height: 250,
            toolbar: { show: false },
            zoom: { enabled: false },
            fontFamily: 'inherit',
        },
        colors: [color],
        dataLabels: { enabled: false },
        stroke: {
            curve: 'smooth',
            width: 3,
        },
        fill: {
            type: 'gradient',
            gradient: {
                shadeIntensity: 1,
                opacityFrom: 0.45,
                opacityTo: 0.05,
                stops: [0, 90, 100],
            },
        },
        grid: {
            strokeDashArray: 4,
            padding: { left: 12, right: 12 },
        },
        xaxis: {
            categories,
            labels: {
                style: { fontSize: '11px' },
                formatter: (value) => englishToPersian(value),
            },
            axisBorder: { show: true },
            axisTicks: { show: true },
        },
        yaxis: {
            labels: {
                style: { fontSize: '11px' },
                formatter: (value) => formatNumber(value),
                minWidth: 70,
                align: 'right',
                offsetX: 0,
            },
        },
        tooltip: {
            y: {
                formatter: (value) => formatNumber(value),
            },
            x: {
                formatter: (value) => englishToPersian(value),
            },
        },
    };

    return (
        <div className="card p-3 sm:p-4 lg:p-6">
            {title && (
                <CardTitle className="mb-3 sm:mb-4">
                    {title}
                </CardTitle>
            )}
            <ReactApexChart options={options} series={series} type="area" height={250} />
        </div>
    );
};
