<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import { Head } from '@inertiajs/vue3';

defineOptions({
    layout: MainLayout
})

interface Airport {
    id: number
    name: string
    iata_code: string
}

interface Airline {
    id: number
    name: string
    iata_code: string
}

interface Aircraft {
    id: number
    model_full_name: string
    designator: string
}

interface SeatType {
    id: number
    name: string
}

interface FlightReason {
    id: number
    name: string
}

interface FlightClass {
    id: number
    name: string
}

interface Flight {
    id: number
    flight_number: string | null
    departure_date: string
    arrival_date: string
    aircraft_registration: string | null
    seat_number: string | null
    note: string | null
    departure_airport: Airport
    arrival_airport: Airport
    airline: Airline | null
    aircraft: Aircraft | null
    seat_type: SeatType | null
    flight_reason: FlightReason | null
    flight_class: FlightClass | null
}

defineProps<{
    user: {
        id: number
        name: string
        email: string
    }
    flights: Flight[]
}>()
</script>

<template>
    <Head :title="`${user.name}'s Flights`" />

    <div class="p-6">
        <h1 class="text-2xl font-bold mb-6">{{ user.name }}'s Flights</h1>

        <table class="w-full border-collapse border border-gray-300">
            <thead>
            <tr class="bg-gray-100">
                <th class="border border-gray-300 px-4 py-2 text-left">Flight</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Departure</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Arrival</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Date</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Airline</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Aircraft</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Class</th>
                <th class="border border-gray-300 px-4 py-2 text-left">Seat</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="flight in flights" :key="flight.id" class="hover:bg-gray-50">
                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_number ?? '—' }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.departure_airport.iata_code }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.arrival_airport.iata_code }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.departure_date }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.airline?.name ?? '—' }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.aircraft?.designator ?? '—' }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.flight_class?.name ?? '—' }}</td>
                <td class="border border-gray-300 px-4 py-2">{{ flight.seat_number ?? '—' }}</td>
            </tr>
            <tr v-if="flights.length === 0">
                <td colspan="8" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
                    No flights found.
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>
