<script setup lang="ts">
import { computed } from 'vue'
import { Achievement, 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 AllianceLogo from '@/Components/FlightsGoneBy/AllianceLogo.vue'
import FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'

defineOptions({ inheritAttrs: false })

const props = defineProps<{
    achievement: Achievement
    user: User
    followStatus: string
    majorAlliances: Alliance[]
    flights: Flight[]
}>()

interface AllianceEntry {
    alliance: Alliance
    flights: Flight[]
}


const alliances = computed<AllianceEntry[]>(() => {
    const entries = props.majorAlliances.map(alliance => ({ alliance, flights: [] as Flight[] }))
    const byName = new Map(entries.map(e => [e.alliance.internal_name, e]))

    for (const flight of props.flights) {
        const key = flight.airline?.alliance?.internal_name
        if (!key) continue
        byName.get(key)?.flights.push(flight)
    }

    return entries
})

const completedCount = computed(
    () => alliances.value.filter(a => a.flights.length > 0).length
)

function flightTitle(flight: Flight): string {
    const name = flight.airline?.name ?? 'Unknown airline'
    return `${name}: ${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`
}
</script>

<template>
    <!-- Header -->
    <Panel>
        <div class="alliance-header">
            <div class="logo-row">
                <AllianceLogo
                    v-for="entry in alliances"
                    :key="entry.alliance.internal_name"
                    :alliance="entry.alliance"
                    size="56"
                />
            </div>
            <div>
                <PanelHeader centered>Major Alliances</PanelHeader>
                <PanelSubHeader centered>
                    {{ completedCount }} / {{ alliances.length }} alliances flown
                </PanelSubHeader>
            </div>
        </div>
    </Panel>

    <!-- Per-alliance breakdown -->
    <Panel v-for="entry in alliances" :key="entry.alliance.internal_name">
        <div class="table-toolbar">
            <PanelHeader>{{ entry.alliance.name }}</PanelHeader>
        </div>

        <BadgeTable
            :rows="[entry.alliance.internal_name]"
            :rowKey="key => key"
            :hasItems="() => entry.flights.length > 0"
            labelWidth="14em"
        >
            <template #label>
                <div class="airline-label">
                    <AllianceLogo :alliance="entry.alliance" size="24" />
                    <span>{{ entry.alliance.name }}</span>
                </div>
            </template>

            <template #items>
                <FlightBadge
                    v-for="flight in entry.flights"
                    :key="flight.id"
                    :title="flightTitle(flight)"
                    :flight="flight"
                />
            </template>
        </BadgeTable>
    </Panel>

    <!-- Requirements -->
    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            To complete this challenge you must fly with at least one member airline from each of
            the three major alliances. Unlike the individual alliance challenges, you don't need
            to fly every airline in an alliance — just one flight per alliance is enough.
        </p>

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

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

.logo-row {
    display: flex;
    gap: 0.75rem;
}

.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>
