
<script setup lang="ts">
import type { Flight } from '@/Types/types'
import FlightsPerYearChart from '@/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue'
import FlightsPerMonthChart from '@/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue'
import FlightsPerDayChart from '@/Components/FlightsGoneBy/Charts/FlightsPerDayChart.vue'
import FlightReasonsChart from '@/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue'
import FlightClassChart from '@/Components/FlightsGoneBy/Charts/FlightClassChart.vue'
import SeatTypeChart from '@/Components/FlightsGoneBy/Charts/SeatTypeChart.vue'
import CountriesChart from '@/Components/FlightsGoneBy/Charts/CountriesChart.vue'
import ContinentsChart from '@/Components/FlightsGoneBy/Charts/ContinentsChart.vue'
import TopAirlinesChart from '@/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue'
import TopAirportsChart from '@/Components/FlightsGoneBy/Charts/TopAirportsChart.vue'
import TopRoutesChart from '@/Components/FlightsGoneBy/Charts/TopRoutesChart.vue'
import FlightTypeChart from '@/Components/FlightsGoneBy/Charts/FlightTypeChart.vue'
import {FlightStats} from "@/Composables/useFlightStats";
import TopAircraftChart from "@/Components/FlightsGoneBy/Charts/TopAircraftChart.vue";
import AllianceChart from "@/Components/FlightsGoneBy/Charts/AllianceChart.vue";

defineProps<{
    flightStats: FlightStats
}>()



</script>

<template>
    <div>
        <!-- Year — full width -->
        <div class="flight-charts glass">
            <FlightsPerYearChart :flight-stats="flightStats" />
        </div>

        <!-- Month + Day of week -->
        <div class="flight-charts glass charts-row">
            <FlightsPerMonthChart :flight-stats="flightStats" />
            <FlightsPerDayChart :flight-stats="flightStats" />
        </div>

        <!-- Reasons + Class + Seat type -->
        <div class="flight-charts glass charts-row">
            <FlightClassChart :flight-stats="flightStats" />
            <FlightReasonsChart :flight-stats="flightStats"  />
            <SeatTypeChart  :flight-stats="flightStats"  />
        </div>

        <!-- Countries (tall) + Continents & Flight Type stacked -->
        <div class="flight-charts glass charts-row">
            <CountriesChart :max-visible="18" :flight-stats="flightStats" class="chart-tall" />
            <div class="charts-stack">
                <ContinentsChart :flight-stats="flightStats" />
                <FlightTypeChart :flight-stats="flightStats" />
            </div>
        </div>

        <!-- Airlines + Airports -->
        <div class="flight-charts glass charts-row">
            <TopAirlinesChart :flight-stats="flightStats" />
            <div class="charts-stack">
                <AllianceChart :flight-stats="flightStats" />
            </div>
        </div>

        <!-- Routes + International vs Domestic -->
        <div class="flight-charts glass charts-row">
            <TopAirportsChart :flight-stats="flightStats" />
            <TopRoutesChart :flight-stats="flightStats" />
            <TopAircraftChart :flight-stats="flightStats" />
        </div>
    </div>
</template>

<style scoped>
.flight-charts {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 10px;
    margin-top: 12px;
}

.charts-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.charts-row > :deep(*) {
    flex: 1 1 300px;
    min-width: 0;
}


.chart-tall {
    flex: 1 1 300px;
    min-width: 0;
}

.charts-stack {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 768px) {
    .charts-row {
        flex-direction: column;
    }

    .charts-row > :deep(*) {
        width: 100%;
    }
}
</style>
