<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {Head, Link} from "@inertiajs/vue3";
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
import {Flight, User} from "@/Types/types";
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPasses/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";
import PanelLabel from "@/Components/FlightsGoneBy/Panels/PanelLabel.vue";

defineOptions({ layout: MainLayout })

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

<template>
    <ProfileLayout
        :canView="canView"
        :user="user"
        :followStatus="followStatus"
        :flight-count="flightCount"
        showCount
        :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 :user="user" :showToolTips="false" style="width:100%;max-width:600px; margin:0 auto" :flight="flight" :canEdit="canEdit" />
                    <DetailRows v-if="flight.other_users_on_flight.length > 0">
                        <PanelLabel>Other Users On This Flight</PanelLabel>
                        <div class="d-flex flex-wrap ga-2">
                            <v-chip
                                v-for="userName in flight.other_users_on_flight"
                                :key="userName"
                                :href="route('profile.view', userName)"
                                color="primary"
                                variant="tonal"
                                link
                            >
                                {{ userName }}
                            </v-chip>
                        </div>
                    </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>
