<script setup lang="ts">
import {Flight, UserActionFlightUpdatedData} from "@/Types/types";
import AirportFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/AirportFieldChange.vue";
import AircraftFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/AircraftFieldChange.vue";
import AirlineFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/AirlineFieldChange.vue";
import GenericFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/GenericFieldChange.vue";
import DateFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/DateFieldChange.vue";
import FlightClassFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/FlightClassFieldChange.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";

const props = defineProps<{
    data: UserActionFlightUpdatedData
}>()

const fieldLabels: Record<string, string> = {
    flight_number: 'Flight Number',
    departure_date: 'Departure Date',
    arrival_date: 'Arrival Date',
    departure_airport_id: 'Departure Airport',
    arrival_airport_id: 'Arrival Airport',
    airline_id: 'Airline',
    aircraft_id: 'Aircraft',
    aircraft_registration: 'Aircraft Registration',
    flight_class_id: 'Flight Class',
    seat_number: 'Seat Number',
    seat_type_id: 'Seat Type',
    flight_reason_id: 'Flight Reason',
    crew_type_id: 'Crew Type',
    note: 'Note',
    auto_update: 'Auto Update',
}

const relationMap: Record<string, { relation: string, display: string }> = {
    flight_reason_id:  { relation: 'flight_reason',  display: 'name' },
    seat_type_id:      { relation: 'seat_type',       display: 'name' },
    flight_class_id:   { relation: 'flight_class',    display: 'name' },
    crew_type_id:      { relation: 'crew_type',        display: 'name' },
}

function resolveValue(flight: Flight, field: string): string {
    const mapping = relationMap[field]
    if (mapping) {
        return (flight as any)[mapping.relation]?.[mapping.display] ?? 'None'
    }
    return (flight as any)[field] ?? 'None'
}
</script>

<template>
    <div class="updated-flight">
    <span v-if="data.updated.flight_number" class="flight-summary">
        <AirlineLogo :airline="data.updated.airline" />
        <span>Flight <strong>{{ data.updated.flight_number }}</strong> on {{ data.updated.departure_date_display }} at {{ data.updated.departure_time_display }}</span>
    </span>
        <span v-else class="flight-summary">
        <AirlineLogo :airline="data.updated.airline" />
        <span>Flight from {{ data.updated.departure_airport.municipality }} ({{ data.updated.departure_airport.display_code }}) → {{ data.updated.arrival_airport.municipality }} ({{ data.updated.arrival_airport.display_code }}) on {{ data.updated.departure_date_display }} at {{ data.updated.departure_time_display }}</span>
    </span>
    </div>
    <div class="changes">

        <template v-for="change in data.changes" :key="change.field">
            <AirportFieldChange
                v-if="change.field === 'departure_airport_id' || change.field === 'arrival_airport_id'"
                :change="change"
                :label="change.field === 'departure_airport_id' ? 'Departure Airport' : 'Arrival Airport'"
                :original="data.original"
                :updated="data.updated"
            />
            <AircraftFieldChange
                v-else-if="change.field === 'aircraft_id'"
                :original="data.original"
                :updated="data.updated"
            />
            <AirlineFieldChange
                v-else-if="change.field === 'airline_id'"
                :original="data.original"
                :updated="data.updated"
            />
            <DateFieldChange
                v-else-if="change.field === 'departure_date' || change.field === 'arrival_date'"
                :change="change"
                :label="change.field === 'departure_date' ? 'Departure Date' : 'Arrival Date'"
                :original="data.original"
                :updated="data.updated"
            />
            <FlightClassFieldChange
                v-else-if="change.field === 'flight_class_id'"
                :original="data.original"
                :updated="data.updated"
            />
            <GenericFieldChange
                v-else
                :label="fieldLabels[change.field] ?? change.field"
            >
                <template #from>{{ resolveValue(data.original, change.field) }}</template>
                <template #to>{{ resolveValue(data.updated, change.field) }}</template>
            </GenericFieldChange>
        </template>
    </div>
</template>

<style scoped>
.changes {
    display: flex;
    flex-direction: column;

}

.updated-flight {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.flight-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

.flight-summary strong {
    color: #f9fafb;
    font-weight: 600;
}

</style>
