<template>
    <div class="chart-wrap">
        <div class="chart-title">Top airports</div>

        <div v-if="series.length" class="chart-outer">
            <div class="chart-scroll" :style="{ height: scrollHeight }">
                <apexchart
                    type="bar"
                    :height="chartHeight"
                    :options="chartOptions"
                    :series="chartSeries"
                />
            </div>
            <div class="chart-footer">
                <span class="total-count">{{ totalAirports }}</span>
                <span class="total-label">total airports</span>
            </div>
        </div>

        <div v-else class="chart-empty">No airport data available</div>
    </div>
</template>

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

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

const MAX_VISIBLE = 12
const BAR_HEIGHT = 32

interface AirportCounts {
    departures: number
    arrivals: number
    upcoming: number
}

function buildAirportMap(flights: Flight[], key: 'departures' | 'arrivals' | 'upcoming'): Map<string, AirportCounts> {
    const map = new Map<string, AirportCounts>()

    const empty = (): AirportCounts => ({ departures: 0, arrivals: 0, upcoming: 0 })

    flights.forEach(f => {
        const depName = f.departure_airport?.iata_code
            ? `${f.departure_airport.iata_code} – ${f.departure_airport.name}`
            : f.departure_airport?.name ?? null

        const arrName = f.arrival_airport?.iata_code
            ? `${f.arrival_airport.iata_code} – ${f.arrival_airport.name}`
            : f.arrival_airport?.name ?? null

        if (depName) {
            const existing = map.get(depName) ?? empty()
            existing[key]++
            map.set(depName, existing)
        }

        if (arrName) {
            const existing = map.get(arrName) ?? empty()
            if (key !== 'upcoming') existing.arrivals++
            else existing[key]++
            map.set(arrName, existing)
        }
    })

    return map
}

function airportLabel(airport: Airport | null | undefined): string | null {
    if (!airport) return null
    return airport.iata_code ?? airport.icao_code ?? airport.name ?? null
}

const series = computed(() => {
    const past = new Map<string, AirportCounts & { label: string; fullName: string }>()
    const empty = () => ({ departures: 0, arrivals: 0, upcoming: 0, label: '', fullName: '' })

    props.flights.forEach(f => {
        const depLabel = airportLabel(f.departure_airport)
        const arrLabel = airportLabel(f.arrival_airport)

        if (depLabel) {
            const e = past.get(depLabel) ?? empty()
            e.departures++
            e.label = depLabel
            e.fullName = f.departure_airport?.name ?? depLabel
            past.set(depLabel, e)
        }
        if (arrLabel) {
            const e = past.get(arrLabel) ?? empty()
            e.arrivals++
            e.label = arrLabel
            e.fullName = f.arrival_airport?.name ?? arrLabel
            past.set(arrLabel, e)
        }
    })

    props.upcomingFlights.forEach(f => {
        const depLabel = airportLabel(f.departure_airport)
        const arrLabel = airportLabel(f.arrival_airport)

        if (depLabel) {
            const e = past.get(depLabel) ?? empty()
            e.upcoming++
            e.label = depLabel
            e.fullName = f.departure_airport?.name ?? depLabel
            past.set(depLabel, e)
        }
        if (arrLabel) {
            const e = past.get(arrLabel) ?? empty()
            e.upcoming++
            e.label = arrLabel
            e.fullName = f.arrival_airport?.name ?? arrLabel
            past.set(arrLabel, e)
        }
    })

    return [...past.entries()]
        .map(([, counts]) => ({ ...counts }))
        .sort((a, b) =>
            (b.departures + b.arrivals + b.upcoming) - (a.departures + a.arrivals + a.upcoming)
        )
})

const totalAirports = computed(() => series.value.length)
const chartHeight = computed(() => series.value.length * BAR_HEIGHT + 40)
const scrollHeight = computed(() => {
    const visible = Math.min(series.value.length, MAX_VISIBLE)
    return `${visible * BAR_HEIGHT + 40}px`
})

const chartSeries = computed(() => [
    { name: 'Departures', data: series.value.map(s => s.departures) },
    { name: 'Arrivals', data: series.value.map(s => s.arrivals) },
    { name: 'Upcoming', data: series.value.map(s => s.upcoming) },
])

const chartOptions = computed(() => ({
    chart: {
        type: 'bar',
        background: 'transparent',
        fontFamily: 'inherit',
        toolbar: { show: false },
        animations: { enabled: false },
        stacked: true,
    },
    theme: { mode: 'dark' },
    plotOptions: {
        bar: {
            horizontal: true,
            barHeight: '60%',
            borderRadius: 3,
            borderRadiusWhenStacked: 'last',
        },
    },
    colors: ['#4da6ff', '#a150d5', '#ffc107'],
    dataLabels: { enabled: false },
    xaxis: {
        categories: series.value.map(s => s.label),
        labels: { show: false },
        axisBorder: { show: false },
        axisTicks: { show: false },
    },
    yaxis: {
        labels: {
            style: {
                colors: '#778899',
                fontSize: '12px',
            },
        },
    },
    grid: { show: false },
    legend: {
        show: true,
        position: 'top',
        horizontalAlign: 'right',
        labels: { colors: '#778899' },
        markers: { width: 8, height: 8, radius: 2 },
        itemMargin: { horizontal: 8 },
    },
    tooltip: {
        theme: 'dark',
        shared: true,
        intersect: false,
        custom: ({ dataPointIndex }: { dataPointIndex: number }) => {
            const airport = series.value[dataPointIndex]
            if (!airport) return ''
            const rows = [
                { label: 'Departures', value: airport.departures, },
                { label: 'Arrivals', value: airport.arrivals, color: '#a150d5' },
                { label: 'Upcoming', value: airport.upcoming, color: '#ffc107' },
            ]
                .filter(r => r.value > 0)
                .map(r => `
                <div class="glass" style="display:flex;align-items:center;gap:6px;padding:2px 0">
                    <span style="width:8px;height:8px;border-radius:2px;background:${r.color};flex-shrink:0"></span>
                    <span style="color:#778899">${r.label}:</span>
                    <span style="color:#e0e6f0;margin-left:auto;padding-left:12px">${r.value} flights</span>
                </div>
            `).join('')

            return `
            <div class="glass" style="padding:10px 12px;min-width:180px">
                <div style="color:#e0e6f0;font-weight:500;margin-bottom:6px">${airport.fullName}</div>
                <div style="color:#556677;font-size:11px;margin-bottom:8px">${airport.label}</div>
                ${rows}
            </div>
        `
        },
    },
    states: {
        hover: { filter: { type: 'lighten', value: 0.1 } },
    },
}))
</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-outer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chart-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #334455 transparent;
}

.chart-scroll::-webkit-scrollbar {
    width: 4px;
}

.chart-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.chart-scroll::-webkit-scrollbar-thumb {
    background: #334455;
    border-radius: 2px;
}

.chart-footer {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 4px;
}

.total-count {
    font-size: 28px;
    font-weight: 600;
    color: #e0e6f0;
    line-height: 1;
}

.total-label {
    font-size: 13px;
    color: #556677;
}

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