<template>
    <div class="col-span-2 bg-white  rounded-lg p-6 shadow-md w-full">
        <div>
            <MeterGroup :value="value" labelPosition="start">
                <template #label="{ value }">
                    <div class="flex flex-wrap gap-4">
                        <template v-for="val of value" :key="i">
                            <Card class="flex-1 border border-surface shadow-none">
                                <template #content>
                                    <div class="flex justify-between gap-8">
                                        <div class="flex flex-col gap-1">
                                            <span class="text-surface-500 dark:text-surface-400 text-sm">{{
                                                val.label }}</span>
                                            <span class="font-bold text-lg">{{ val.value }}</span>
                                        </div>
                                        <span
                                            class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center"
                                            :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
                                            <i :class="val.icon" />
                                        </span>
                                    </div>
                                </template>
                            </Card>
                        </template>
                    </div>
                </template>
                <!-- <template #meter="slotProps">
                    <span :class="slotProps.class"
                        :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
                </template>
                <template #start="{ totalPercent }">
                    <div class="flex justify-between mt-4 mb-2 relative">
                        <span>Progreso</span>
                        <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent
                            }}%</span>
                        <span class="font-medium">1Ton CO₂</span>
                    </div>
                </template> -->
            </MeterGroup>
        </div>
    </div>
    <div class="col-span-2 bg-white  rounded-lg p-6 shadow-md w-full mt-10">
        <div>
            <div class="font-medium text-lg leading-6 text-gray-600">Estadística de CO₂ Ahorrado</div>
            <div class="mt-0.5 text-sm text-gray-500">Estimación de CO₂ ahorrado por compartir viajes en vez de
                usar
                autos individuales.</div>
            <Chart type="bar" :data="chartDataBar" :options="chartOptionsBar" class="h-[30rem]" />
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Chart from 'primevue/chart';
import Button from 'primevue/button';
import MeterGroup from 'primevue/metergroup';
import Card from 'primevue/card';

import axios from 'axios';

const value = ref([]);

onMounted(async () => {
    const { data } = await axios.get('/dashboard/metricas');

    value.value = [
        { label: 'Autos eliminados', color1: '#34d399', color2: '#fbbf24', value: data.autos_eliminados, icon: 'pi pi-car' },
        { label: 'Árboles equivalentes', color1: '#fbbf24', color2: '#60a5fa', value: data.arboles_equivalentes, icon: 'pi pi-globe' },
        { label: 'Ahorro en gasolina', color1: '#60a5fa', color2: '#c084fc', value: data.ahorro_gasolina, icon: 'pi pi-gauge' },
        { label: 'Kilómetros compartidos', color1: '#c084fc', color2: '#c084fc', value: data.kilometros_compartidos + ' km', icon: 'pi pi-compass' }
    ];

    chartDataBar.value = setChartDataBar(data.co2_mensual);
    chartOptionsBar.value = setChartOptionsBar();
});

const chartDataBar = ref();
const chartOptionsBar = ref();

const setChartDataBar = (co2Data) => {
    const documentStyle = getComputedStyle(document.documentElement);

    return {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        datasets: [
            {
                label: 'CO₂ Ahorrado (kg)',
                backgroundColor: documentStyle.getPropertyValue('--p-cyan-500'),
                borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
                data: co2Data // ← usa los datos dinámicos
            }
        ]
    };
};

const setChartOptionsBar = () => {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--p-text-color');
    const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');
    const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');

    return {
        maintainAspectRatio: false,
        aspectRatio: 0.8,
        plugins: {
            legend: {
                labels: {
                    color: textColor
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: textColorSecondary,
                    font: {
                        weight: 500
                    }
                },
                grid: {
                    display: false,
                    drawBorder: false
                }
            },
            y: {
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder,
                    drawBorder: false
                }
            }
        }
    };
}

</script>