import dynamic from 'next/dynamic';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import type { ApexOptions } from 'apexcharts';

import { IRootState } from '@/store';
import { getThemeChartColors, getThemeChartFont, getThemeChartSliceLabelColors } from '@/lib/theme-colors';
import { journeyDonutToolbar } from './journey-chart-options';

const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });

export type FunnelDonutStep = {
    key: string;
    label: string;
    count: number;
};

interface JourneyFunnelDonutProps {
    steps: FunnelDonutStep[];
    sessionStart: number;
}

const JourneyFunnelDonut = ({ steps, sessionStart }: JourneyFunnelDonutProps) => {
    const colorScheme = useSelector((state: IRootState) => state.themeConfig.colorScheme);
    const chartColors = useMemo(() => getThemeChartColors(colorScheme), [colorScheme]);
    const sliceLabelColors = useMemo(
        () => getThemeChartSliceLabelColors(chartColors, colorScheme),
        [chartColors, colorScheme]
    );
    const base = Math.max(Number(sessionStart) || 0, 1);
    const labels = useMemo(() => steps.map((s) => s.label), [steps]);
    const series = useMemo(
        () => steps.map((s) => Math.round((Number(s.count) / base) * 1000) / 10),
        [steps, base]
    );

    const options = useMemo<ApexOptions>(
        () => ({
            chart: { type: 'donut', fontFamily: getThemeChartFont(colorScheme), ...journeyDonutToolbar },
            labels,
            colors: chartColors,
            legend: { position: 'bottom', fontSize: '12px' },
            dataLabels: {
                enabled: true,
                formatter: (val) => `${Math.round(Number(val))}%`,
                ...(sliceLabelColors ? { style: { colors: sliceLabelColors } } : {}),
            },
            tooltip: {
                y: {
                    formatter: (val, opts) => {
                        const idx = opts?.seriesIndex ?? 0;
                        const count = steps[idx]?.count ?? 0;
                        return `${count} session (${val}% dari start)`;
                    },
                },
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '62%',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: 'Sessions',
                                formatter: () => String(sessionStart || 0),
                            },
                        },
                    },
                },
            },
            stroke: { width: 0 },
        }),
        [labels, steps, sessionStart, chartColors, colorScheme, sliceLabelColors]
    );

    if (!steps.length) {
        return <p className="text-sm text-gray-400">Belum ada data funnel.</p>;
    }

    return (
        <div>
            <p className="text-xs text-gray-500 mb-2">Share tiap step vs session start</p>
            <ReactApexChart options={options} series={series} type="donut" height={280} />
        </div>
    );
};

export default JourneyFunnelDonut;