import React, { useEffect, useMemo, useState } from 'react';
import { usePage } from '@inertiajs/react';
import axios from 'axios';
import ReactECharts from 'echarts-for-react';

export default function EmailStatistics() {
    const { auth } = usePage<{ auth: { user: { api_token: string } } }>().props;
    const [filter, setFilter] = useState('30');
    const [fetchingData, setFetchingData] = useState(false);
    const [results, setResults] = useState<any>(null);

    const authHeaders = {
        headers: {
            Authorization: `Bearer ${auth?.user?.api_token}`,
        },
    };

    const fetchData = async (url?: string) => {
        setFetchingData(true);
        try {
            const response = await axios.get(
                url || `/api/logs/emails/aggregated?type=${filter}`,
                authHeaders
            );
            setResults(response.data.result);
        } finally {
            setFetchingData(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    const handleFilterChange = (value: string) => {
        setFilter(value);
        fetchData(`/api/logs/emails/aggregated?type=${value}`);
    };

    const chartOption = useMemo(() => {
        if (!results) return null;

        // Normalize labels: API may return an object (e.g. keyed by index) or an array
        const rawLabels = results.labels ?? [];
        const labelsArr = Array.isArray(rawLabels) ? rawLabels.slice() : Object.values(rawLabels);
        const labels = labelsArr.reverse();

        // Normalize data to array too (in case it's an object)
        const rawData = results.data ?? [];
        const dataArr = Array.isArray(rawData) ? rawData : Object.values(rawData);

        return {
            tooltip: { trigger: 'axis' },
            xAxis: {
                type: 'category',
                data: labels,
                axisLabel: { rotate: 45 },
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: 'Emails Dispatched',
                    data: dataArr,
                    type: 'bar',
                    itemStyle: {
                        color: '#06b6d4',
                    },
                },
            ],
            grid: { left: 40, right: 20, bottom: 60, top: 30 },
        };
    }, [results]);

    const totalEmails = results?.data?.reduce((a: number, b: number) => a + b, 0) || 0;

    return (
        <div className="bg-white rounded-lg shadow">
            <div className="p-6">
                <div className="flex justify-end mb-4">
                    <select
                        value={filter}
                        onChange={(e) => handleFilterChange(e.target.value)}
                        className="rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
                    >
                        <option value="30">Last 30 days</option>
                        <option value="6">Last 6 months</option>
                        <option value="12">Last 12 months</option>
                    </select>
                </div>

                <div className="flex justify-center mt-4">
                    <div className="w-full max-w-xs bg-cyan-500 rounded py-4 text-center">
                        <h2 className="text-2xl font-bold text-white">{totalEmails}</h2>
                        <p className="text-white text-sm">{results?.message?.[0]}</p>
                    </div>
                </div>

                {chartOption && (
                    <div className="mt-6">
                        <ReactECharts option={chartOption} style={{ height: 334 }} />
                    </div>
                )}
            </div>
        </div>
    );
}