<template>
    <div class="chart-wrap">
        <div class="chart-title">Flights per year</div>
        <apexchart
            type="bar"
            height="220"
            :options="chartOptions"
            :series="series"
        />
    </div>
</template>

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

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

const flightYear = (f: Flight): number =>
    Number(new Intl.DateTimeFormat('en', {
        timeZone: f.departure_airport.timezone,
        year: 'numeric',
    }).format(new Date(f.departure_date)))

const years = computed(() => {
    const allYears = new Set<number>()
    ;[...props.flights, ...props.upcomingFlights].forEach(f =>
        allYears.add(flightYear(f))
    )
    const sorted = [...allYears].sort((a, b) => a - b)

    let min = sorted[0]
    let max = sorted[sorted.length - 1]

    while (max - min + 1 < 5) {
        min--
        if (max - min + 1 < 5) max++
    }

    return Array.from({ length: max - min + 1 }, (_, i) => min + i)
})

const countByYear = (list: Flight[]) =>
    years.value.map(year => list.filter(f => flightYear(f) === year).length)

const series = computed(() => [
    { name: 'Flown',    data: countByYear(props.flights) },
    { name: 'Upcoming', data: countByYear(props.upcomingFlights) },
])

const chartOptions = computed(() => ({
    chart: {
        type: 'bar',
        stacked: true,
        toolbar: { show: false },
        background: 'transparent',
        fontFamily: 'inherit',
    },
    theme: { mode: 'dark' },
    plotOptions: {
        bar: {
            borderRadius: 3,
            borderRadiusWhenStacked: 'last',
            columnWidth: '55%',
        },
    },
    colors: ['#4da6ff', '#ffc107'],
    dataLabels: { enabled: false },
    grid: {
        borderColor: 'rgba(255,255,255,0.05)',
        yaxis: { lines: { show: true } },
        xaxis: { lines: { show: false } },
    },
    xaxis: {
        categories: years.value,
        axisBorder: { show: false },
        axisTicks: { show: false },
        labels: {
            style: { colors: '#445566', fontSize: '12px' },
        },
    },
    yaxis: {
        labels: {
            style: { colors: '#445566', fontSize: '12px' },
        },
    },
    legend: {
        position: 'top',
        horizontalAlign: 'right',
        labels: { colors: '#778899' },
        markers: { width: 8, height: 8, radius: 2 },
        itemMargin: { horizontal: 12 },
    },
    tooltip: {
        theme: 'dark',
        shared: true,
        intersect: false,
    },
    states: {
        hover: { filter: { type: 'lighten', value: 0.1 } },
        active: { filter: { type: 'none' } },
    },
}))
</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;
}
</style>
