<script setup lang="ts">
import { computed } from 'vue'
import { Achievement, Flight, User } from '@/Types/types'
import { Continent, useDirectedContinentPairs } from '@/Composables/useContinentPairs'
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 FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'
defineOptions({ inheritAttrs: false })
const props = defineProps<{
    achievement: Achievement
    user: User
    followStatus: string
    flights: Flight[]
    continents: Continent[]
}>()

const flights = computed(() => props.flights)
const continents = computed(() => props.continents.filter(c => c.internal_name !== 'antarctica'))

const { entriesByDeparture, departureNames, completedCount, totalCount } =
    useDirectedContinentPairs(flights, continents)
</script>

<template>

    <!-- One panel per departure continent -->
    <Panel v-for="dep in departureNames" :key="dep">
        <div class="table-toolbar">
            <PanelHeader>Departing {{ dep }}</PanelHeader>
        </div>

        <BadgeTable
            :rows="entriesByDeparture.get(dep) ?? []"
            :rowKey="entry => entry.key"
            :hasItems="entry => entry.flights.length > 0"
            labelWidth="18em"
        >
            <template #label="{ row: entry }">
                <div class="pair-label">
                    <span class="pair-name">{{ entry.label }}</span>
                </div>
            </template>

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

    <slot name="extra" />

    <!-- Requirements -->
    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            To complete this challenge you must fly between every possible pair of continents
            in <strong>both directions</strong> — a flight from Europe to Asia and a separate
            flight from Asia to Europe are each required.
        </p>
        <p>
            For <strong>same-continent routes</strong> (e.g. Africa → Africa), only
            <strong>international flights</strong> count — domestic flights within the same
            country are excluded.
        </p>
    </Panel>
</template>

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