<template>
    <div class="chart-wrap">
        <div class="chart-title">Flight reasons</div>
        <apexchart
            v-if="series.length"
            type="donut"
            height="280"
            :options="chartOptions"
            :series="seriesData"
        />
        <div v-else class="chart-empty">No flight reason data available</div>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Flight } from '@/Types/types'

const props = defineProps<{
    flights: Flight[]
}>()

const series = computed(() => {
    const counts = new Map<string, number>()
    props.flights.forEach(f => {
        const reason = f.flight_reason?.name ?? 'Unknown'
        counts.set(reason, (counts.get(reason) ?? 0) + 1)
    })
    return [...counts.entries()]
        .sort((a, b) => b[1] - a[1])
        .map(([name, count]) => ({ name, count }))
})

const seriesData = computed(() => series.value.map(s => s.count))

const chartOptions = computed(() => ({
    chart: {
        type: 'donut',
        background: 'transparent',
        fontFamily: 'inherit',
    },
    theme: { mode: 'dark' },
    labels: series.value.map(s => s.name),
    colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
    dataLabels: {
        enabled: true,
        formatter: (val: number) => `${Math.round(val)}%`,
        style: { fontSize: '12px', fontWeight: 400 },
        dropShadow: { enabled: false },
    },
    plotOptions: {
        pie: {
            donut: {
                size: '60%',
                labels: {
                    show: true,
                    total: {
                        show: true,
                        label: 'Total',
                        fontSize: '13px',
                        color: '#556677',
                        formatter: () => props.flights.length.toString(),
                    },
                    value: {
                        fontSize: '22px',
                        fontWeight: 500,
                        color: '#e0e6f0',
                    },
                },
            },
        },
    },
    legend: {
        position: 'bottom',
        labels: { colors: '#778899' },
        markers: { width: 8, height: 8, radius: 2 },
        itemMargin: { horizontal: 12, vertical: 4 },
    },
    stroke: { width: 0 },
    tooltip: {
        theme: 'dark',
        y: {
            formatter: (val: number) => `${val} flights`,
        },
    },
}))
</script>

<style scoped>
.chart-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chart-title {
    font-size: 13px;
    font-weight: 500;
    color: #556677;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chart-empty {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #445566;
}
</style>
