<script setup lang="ts">
import { computed, ref } from 'vue'
import { Achievement, Airline, Alliance, Flight, User } from '@/Types/types'
import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
import PanelSubHeader from '@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue'
import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
import InlineBadge from '@/Components/FlightsGoneBy/InlineBadge.vue'
import AirlineLogo from '@/Components/FlightsGoneBy/AirlineLogo.vue'
import AllianceLogo from '@/Components/FlightsGoneBy/AllianceLogo.vue'
import FlightBadge from "@/Components/FlightsGoneBy/FlightBadge.vue";


interface AirlineEntry {
    airline: Airline
    flights: Flight[]
}

const props = defineProps<{
    achievement: Achievement
    user: User
    isFollowing: boolean
    alliance: Alliance
    airlines: Airline[]
    flights: Flight[]
}>()

const flightsByAirline = computed(() => {
    const allianceAirlineIds = new Set(props.airlines.map(a => a.id))
    const map = new Map<string, AirlineEntry>()

    // Pre-populate every alliance airline so unflown ones still appear
    for (const airline of props.airlines) {
        map.set(rowKey(airline), { airline, flights: [] })
    }

    for (const flight of props.flights) {
        const airline = flight.airline
        if (!airline || !allianceAirlineIds.has(airline.id)) continue
        map.get(rowKey(airline))?.flights.push(flight)
    }

    return map
})

function rowKey(airline: Airline): string {
    return airline.IATA_code ?? airline.internal_name
}

const rows = computed(() => [...flightsByAirline.value.keys()])

function entryFor(key: string): AirlineEntry {
    return flightsByAirline.value.get(key)!
}

</script>

<template>
    <!-- Header -->
    <Panel>
        <div class="alliance-header">
            <AllianceLogo :alliance="alliance" size="56" />
            <div>
                <PanelHeader centered>{{ alliance.name }}</PanelHeader>
                <PanelSubHeader centered>
                    <slot />
                </PanelSubHeader>
            </div>
        </div>
    </Panel>


    <!-- Airlines table -->
    <Panel>
        <div class="table-toolbar">
            <PanelHeader>Airlines</PanelHeader>
        </div>

        <BadgeTable
            :rows="rows"
            :rowKey="key => key"
            :hasItems="key => entryFor(key).flights.length > 0"
            labelWidth="14em"
        >
            <template #label="{ row: key }">
                <div class="airline-label" >
                    <AirlineLogo :airline="entryFor(key).airline" size="24" />
                    <span>{{ entryFor(key).airline.name }}</span>
                </div>
            </template>

            <template #items="{ row: key }">
                <FlightBadge
                    v-for="flight in entryFor(key).flights"
                    :key="flight.id"
                    :title="`${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`"
                    :flight="flight" />
            </template>
        </BadgeTable>
    </Panel>

    <!-- Slot for alliance-specific panels -->
    <slot name="extra" />

    <!-- Requirements -->
    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            To complete this challenge you must fly with every current member airline of
            <strong>{{ alliance.name }}</strong>. Alliance membership changes over time, so the
            required airlines reflect the current roster.
        </p>

        <p>
            Codeshare flights do not count, the operating carrier must be a member of {{alliance.name}}.
        </p>
    </Panel>
</template>

<style scoped>
.alliance-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}


.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}


.airline-label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
}

</style>
