import React from 'react';
import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    Tooltip,
    ResponsiveContainer,
    Legend,
} from 'recharts';
import { SiteDetails } from '@/types/SiteData';

interface MonthlyBarChartProps {
    siteData: SiteDetails | null;
}

const consumptionColor = '#003049';
const generationColor = '#669bbc';

// Month names for X-axis labels
const MONTHS = [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
];

const MonthlyBarChart: React.FC<MonthlyBarChartProps> = ({ siteData }) => {
    const chartData = React.useMemo(() => {
        if (
            !siteData ||
            siteData.consumptionData.length === 0 ||
            siteData.generationData.length === 0
        ) {
            return [];
        }

        // Initialize totals
        const monthlyData = Array.from({ length: 12 }, (_, month) => ({
            month: MONTHS[month],
            consumption: 0,
            generation: 0,
        }));

        // Group daily data into months (assume data is in order from Jan 1 to Dec 31)
        // Group daily data into months (assume data is in order from Jan 1 to Dec 31)
        for (let i = 0; i < siteData.consumptionData.length; i++) {
            const monthIndex = Math.floor(i / 30.42); // Rough approximation
            if (monthIndex < 12) {
                monthlyData[monthIndex].consumption += siteData.consumptionData[i];
                monthlyData[monthIndex].generation += siteData.generationData[i];
            }
        }

        // ✅ Only return the last 6 months
        return monthlyData.slice(-6);

    }, [siteData]);

    if (!siteData || chartData.length === 0) {
        return (
            <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
                <div className="flex justify-between items-center mb-2">
                    <h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
                </div>
                <div className="h-96 w-full flex items-center justify-center">
                    <p className="text-white/70">No data available for chart. Please select a site.</p>
                </div>
            </div>
        );
    }

    return (
        <div className="bg-white p-4 rounded-lg shadow-md dark:bg-gray-800 dark:text-white-light">
            <div className="flex justify-between items-center mb-2">
                <h2 className="text-lg font-bold pb-3">Monthly Energy Yield</h2>
            </div>

            <div className="lg:h-[22.6vw] h-[290px] w-full pt-10">
                <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={chartData}>
                        <XAxis dataKey="month" tick={{ fontSize: 10 }}/>
                        <YAxis tick={{ fontSize: 10 }} />
                        <Tooltip />
                        <Legend />
                        <Bar dataKey="consumption" fill={consumptionColor} name="Consumption (kWh)" />
                        <Bar dataKey="generation" fill={generationColor} name="Generation (kWh)" />
                    </BarChart>
                </ResponsiveContainer>
            </div>
        </div>
    );
};

export default MonthlyBarChart;