<script setup lang="ts">
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import { Flight, SharedProps } from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
import Distance from "@/Components/Distance.vue";
import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
import { usePage } from "@inertiajs/vue3";
import { User } from "@/Types/types";
import Mono from "@/Components/FlightsGoneBy/Mono.vue";
import DayDifference from "@/Components/FlightsGoneBy/DayDifference.vue";

const props = defineProps<{
    flight: Flight
    user: User
    canEdit: boolean
    highlighted?: boolean
    group?: 'upcoming' | 'departed'
    isSorting?: boolean
    columnsToShow: string[]
}>()

const page = usePage<SharedProps>()

const reasonBadgeVariant = (reason: string) => {
    switch (reason) {
        case 'No Particular Reason':
            return 'economy'
        case 'Pleasure':
            return 'generic'
        case 'Business':
            return 'business'
        case 'Crew':
            return 'crew'
        case 'Visiting Friends / Relatives':
            return 'general_aviation'
    }
}

const showColumn = (column: string) => props.columnsToShow.includes(column)

</script>

<template>
    <tr
        class="v-data-table__tr"
        :class="[
            group && !isSorting ? `group-row--${group}` : '',
            highlighted ? 'flight-row--highlighted' : '',
        ]"
        :data-flight-id="flight.id"
    >
        <td v-if="showColumn('airline')" class="v-data-table__td airline-logo-cell">
            <AirlineLogo size="32" :airline="flight.airline" class="airline-logo-img" />
        </td>

        <td v-if="showColumn('flight_number')" class="v-data-table__td flight-number-cell">
            <div class="flight-cell">
                <Mono class="flight-number">
                    {{ flight.flight_number }}
                </Mono>
            </div>
        </td>

        <td v-if="showColumn('airline.name')" class="v-data-table__td">
           <Mono >{{ flight.airline?.name }}</Mono>
        </td>

        <td v-if="showColumn('airline.iata_code')" class="v-data-table__td ">
            <Mono muted small >{{ flight.airline?.iata_code }}</Mono>
        </td>

        <td v-if="showColumn('airline.icao_code')" class="v-data-table__td ">
            <Mono muted small>{{ flight.airline?.icao_code }}</Mono>
        </td>


        <td v-if="showColumn('departure_airport')" class="v-data-table__td">
            <AirportToolTip :airport="flight.departure_airport">
                <Mono class="iata">{{ flight.departure_airport.display_code }}</Mono><br/>
            </AirportToolTip>
            <span class="city-name">{{ flight.departure_airport.municipality }}</span>
        </td>

        <td v-if="showColumn('arrival_airport')" class="v-data-table__td">
            <AirportToolTip :airport="flight.arrival_airport">
                <span class="iata"><Mono>{{ flight.arrival_airport.display_code }}</Mono></span><br/>
            </AirportToolTip>
            <span class="city-name" >{{ flight.arrival_airport.municipality }}</span>
        </td>

        <td v-if="showColumn('departure_date')" class="v-data-table__td">
            <span class="date-cell"><Mono muted smaller>{{ flight.departure_date_display }}</Mono></span>
        </td>

        <td v-if="showColumn('departure_time')" class="v-data-table__td">
            <span class="time-cell">
                <Mono small>{{flight.departure_time_display}}</Mono>
            </span>
        </td>

        <td v-if="showColumn('arrival_time')" class="v-data-table__td arrival-time-cell">
            <Mono small>{{flight.arrival_time_display}}</Mono>
            <DayDifference :value="flight.arrival_day_difference" />
        </td>

        <td v-if="showColumn('duration')" class="v-data-table__td duration-cell">
            <Mono muted small>{{ flight.duration_display ?? '—' }}</Mono>
        </td>

        <td v-if="showColumn('distance')" class="v-data-table__td distance-cell">
            <Mono muted small>
                <Distance :unit="page.props.auth.user?.resolved_settings?.distance_unit" :value="Math.round(flight.distance)" />
            </Mono>
        </td>

        <td v-if="showColumn('aircraft.manufacturer_code')" class="v-data-table__td aircraft-cell">
            <Mono muted small>{{ flight.aircraft?.manufacturer_code }}</Mono>
        </td>

        <td v-if="showColumn('aircraft.model_full_name')" class="v-data-table__td aircraft-cell">
            <Mono muted small>{{ flight.aircraft?.model_full_name }}</Mono>
        </td>

        <td v-if="showColumn('aircraft.display_name_short')" class="v-data-table__td aircraft-cell">
            <AircraftToolTip v-if="flight.aircraft" :aircraft="flight.aircraft" :flight="flight">
                <Mono muted small>{{ flight.aircraft?.display_name_short }}</Mono>
            </AircraftToolTip>
        </td>


        <td v-if="showColumn('aircraft')" class="v-data-table__td aircraft-cell">
            <AircraftToolTip v-if="flight.aircraft" :aircraft="flight.aircraft" :flight="flight">
                <Mono muted small>{{ flight.aircraft?.designator }}</Mono>
            </AircraftToolTip>
        </td>

        <td v-if="showColumn('registration')" class="v-data-table__td registration-cell">
            <Mono muted smaller v-if="flight.aircraft_registration">{{ flight.aircraft_registration }}</Mono>
        </td>

        <td v-if="showColumn('flight_class')" class="v-data-table__td  class-badges-cell">
            <FlightClassBadge :flight="flight" />
        </td>

        <td v-if="showColumn('seat_type_id')" class="v-data-table__td  class-badges-cell">
            <InlineBadge v-if="flight.seat_type?.name && flight.seat_type?.name !== 'Unassigned'" variant="economy">{{ flight.seat_type?.name }}</InlineBadge>
        </td>

        <td v-if="showColumn('seat_number')" class="v-data-table__td  class-badges-cell">
            <InlineBadge v-if="flight.seat_number" variant="economy">{{ flight.seat_number }}</InlineBadge>
        </td>

        <td v-if="showColumn('flight_reason_id')" class="v-data-table__td  class-badges-cell">
            <InlineBadge v-if="flight.flight_reason" :variant="reasonBadgeVariant(flight.flight_reason.name)">{{ flight.flight_reason?.name.replace('Visiting Friends / Relatives', 'VFR') }}</InlineBadge>
        </td>

        <td v-if="showColumn('class_seat_combined')" class="v-data-table__td  class-badges-cell">
            <span class="class-cell">
                <CrewTooltip v-if="flight.flight_reason?.name == 'Crew' && flight.crew_type" :crew-type="flight.crew_type!">
                    <FlightClassBadge v-if="flight.flight_class?.internal_name === 'crew'" :flight="flight" />
                    <InlineBadge v-else variant="crew">Crew</InlineBadge>
                </CrewTooltip>
                <FlightClassBadge v-if="flight.flight_reason?.name !== 'Crew' || flight.flight_class?.internal_name !== 'crew'" :flight="flight" />
                <InlineBadge v-if="flight.seat_number" variant="economy">{{ flight.seat_number }}</InlineBadge>
                <InlineBadge v-if="flight.seat_type?.name && flight.seat_type?.name !== 'Unassigned'" variant="economy">{{ flight.seat_type?.name }}</InlineBadge>
            </span>
        </td>

        <td class="v-data-table__td actions-cell">
            <UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="flight" />
        </td>
    </tr>
</template>

<style scoped>
.airline-logo-cell {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    padding-right: 0 !important;
}

.city-name{
    color: #556;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .75rem;
}

.flight-number-cell {
    padding-left: 0.5rem !important;
}

.flight-cell {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.arrival-time-cell {
    white-space: nowrap;
}

.class-cell {
    display: flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.5rem;
    overflow-x: auto;
    max-width: 160px;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: none;
    &::-webkit-scrollbar { display: none; }
}

.iata {
    font-weight: 600;
}

.class-cell {
    display: flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.5rem;
}

.actions-cell {
    width: 40px;
    padding: 0 0.5rem !important;
    text-align: right;
}

.flight-row--highlighted td {
    background: rgba(255, 193, 7, 0.08) !important;
    transition: background 0.3s ease;
}

@media (max-width: 1200px) {
    :deep(.v-data-table__td) {
        padding: 0 4px !important;
        font-size: 0.8rem;
    }

    .arrival-time-cell {
        white-space: nowrap;
    }

    .flight-number-cell {
        padding-left: 4px !important;
    }

    .actions-cell {
        padding: 0 2px !important;
    }

    .flight-number-cell,
    .duration-cell,
    .distance-cell,
    .aircraft-cell,
    .registration-cell {
        white-space: nowrap;
    }

    .airline-logo-cell {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        padding: 0 !important;
    }

    .v-data-table__td.airline-logo-cell {
        padding: 0 !important;
    }

    .class-badges-cell {
        max-width: 140px;
        overflow: hidden;
    }

    .class-cell > *:not(:first-child) {
        display: none;
    }


}
</style>
