<template>
    <FlightMap :page="page.props" :flights="mappedFlights" class="profile-map__map" />
    <FlightFillter :flights="flights" @change="onFiltersChange" />
    <FlightStatsBar :flights="pastFlights" :upcoming-flights="upcomingFlights" />
    <FlightCharts :flights="pastFlights" :upcoming-flights="upcomingFlights" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { usePage } from '@inertiajs/vue3'
import type { Flight, SharedProps } from '@/Types/types'
import FlightStatsBar from '@/Components/FlightsGoneBy/FlightStatsBar.vue'

import FlightFillter from "@/Components/FlightsGoneBy/FlightFillter.vue";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";

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

const page = usePage<SharedProps>()
const now  = new Date()

const selectedYears         = ref<number[]>([])
const selectedAirlines      = ref<number[]>([])
const selectedCountries     = ref<string[]>([])
const selectedContinents    = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])

function onFiltersChange(filters: {
    years: number[]
    airlines: number[]
    countries: string[]
    continents: string[]
    flightClasses: number[]
}) {
    selectedYears.value         = filters.years
    selectedAirlines.value      = filters.airlines
    selectedCountries.value     = filters.countries
    selectedContinents.value    = filters.continents
    selectedFlightClasses.value = filters.flightClasses
}

function matchesFilters(f: Flight, date: Date): boolean {
    if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
    if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
    if (selectedCountries.value.length) {
        const depCode = f.departure_airport.region?.country?.code
        const arrCode = f.arrival_airport.region?.country?.code
        if (!selectedCountries.value.includes(depCode ?? '') && !selectedCountries.value.includes(arrCode ?? '')) return false
    }
    if (selectedContinents.value.length) {
        const depCode = f.departure_airport.region?.continent?.code
        const arrCode = f.arrival_airport.region?.continent?.code
        if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
    }
    if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
    return true
}

// ── Filtered flights ──────────────────────────────────────────────────────────

const pastFlights = computed(() =>
    props.flights.filter(f => {
        const date = new Date(f.departure_date)
        return date <= now && matchesFilters(f, date)
    })
)

const upcomingFlights = computed(() =>
    props.flights.filter(f => {
        const date = new Date(f.departure_date)
        return date > now && matchesFilters(f, date)
    })
)

const mappedFlights = computed(() => [
    ...pastFlights.value,
    ...upcomingFlights.value,
])
</script>

<style scoped>
</style>
