<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {Head, Link} from "@inertiajs/vue3";
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
import {Achievement, Flight, User, UserAchievement} from "@/Types/types";
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import AirportPanel from "@/Components/FlightsGoneBy/Panels/AirportPanel.vue";
import AirlinePanel from "@/Components/FlightsGoneBy/Panels/AirlinePanel.vue";
import AircraftPanel from "@/Components/FlightsGoneBy/Panels/AircraftPanel.vue";
import RoutePanel from "@/Components/FlightsGoneBy/Panels/RoutePanel.vue";
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";

defineOptions({ layout: MainLayout })

const props = defineProps<{
    user: User
    flight: Flight
    flightCount: number
    isFollowing: boolean
}>()
</script>

<template>
    <ProfileLayout
        :user="user"
        :is-following="isFollowing"
        :flight-count="flightCount"
        :loading="false">
        <Head :title="`${flight.flight_number ?? user.name + '\'s Flight'}`" />

        <div class="flight-profile">
            <ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Flights`" :href="route('profile.departure-board', { user: user.name, flight: flight.id })" />

            <!-- Main grid -->
            <div class="profile-grid">
                <RoutePanel :flight="flight" />
                <Panel label="Flight Details">
                    <BoardingPass :showToolTips="false" style="width:100%;max-width:600px; margin:0 auto" :flight="flight"/>
                    <DetailRows>

                    </DetailRows>
                </Panel>
                <AircraftPanel :flight="flight"/>
                <AirportPanel :airport="flight.departure_airport" label="Departure" />
                <AirportPanel :airport="flight.arrival_airport" label="Arrival" />
                <AirlinePanel :airline="flight.airline" v-if="flight.airline" />
            </div>
        </div>
    </ProfileLayout>
</template>

<style scoped>

.flight-profile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;  /* removed padding */
    font-family: 'Barlow', sans-serif;
    color: var(--text);
}

/* Grid */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;  /* single column by default (mobile) */
    gap: 1rem;
}

@media (min-width: 600px) {
    .profile-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .profile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

</style>
