import type { DashboardMonthlyActivity } from '@admin/types/dashboard';
import { ensureDashboardChartScripts } from '@admin/lib/load-dashboard-chart-scripts';
import { useEffect, useRef } from 'react';

declare global {
    interface Window {
        ApexCharts?: new (
            element: HTMLElement,
            options: Record<string, unknown>,
        ) => { render: () => void; destroy: () => void };
    }
}

type ContentActivityChartProps = {
    activity: DashboardMonthlyActivity;
};

export function ContentActivityChart({ activity }: ContentActivityChartProps) {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const element = containerRef.current;
        if (!element) {
            return;
        }

        let chart: { destroy: () => void } | null = null;
        let cancelled = false;

        ensureDashboardChartScripts()
            .then(() => {
                if (cancelled || !window.ApexCharts) {
                    return;
                }

                chart = new window.ApexCharts(element, {
                    series: [
                        {
                            name: 'New content',
                            type: 'area',
                            data: activity.content,
                        },
                        {
                            name: 'Contact messages',
                            type: 'line',
                            data: activity.messages,
                        },
                    ],
                    chart: {
                        height: 300,
                        type: 'line',
                        stacked: false,
                        toolbar: { show: false },
                        zoom: { enabled: false },
                    },
                    colors: ['rgb(90,102,241)', 'rgb(96,165,250)'],
                    stroke: { width: [2, 2], curve: 'smooth' },
                    fill: {
                        type: ['gradient', 'solid'],
                        gradient: {
                            shadeIntensity: 1,
                            opacityFrom: 0.45,
                            opacityTo: 0.05,
                            stops: [0, 90, 100],
                        },
                    },
                    grid: { borderColor: 'rgba(107,114,128,0.1)' },
                    legend: {
                        position: 'top',
                        horizontalAlign: 'right',
                    },
                    dataLabels: { enabled: false },
                    xaxis: {
                        categories: activity.labels,
                        labels: {
                            style: { colors: 'rgb(107,114,128)', fontSize: '12px' },
                        },
                    },
                    yaxis: {
                        min: 0,
                        labels: {
                            style: { colors: 'rgb(107,114,128)', fontSize: '12px' },
                        },
                    },
                });

                chart.render();
            })
            .catch((error) => {
                console.error('[Dashboard activity chart]', error);
            });

        return () => {
            cancelled = true;
            chart?.destroy();
        };
    }, [activity]);

    return <div ref={containerRef} id="dashboard-content-activity" className="min-h-[300px]" />;
}