<script setup lang="ts">
import { computed } from 'vue'
import { Achievement, Flight, User } from '@/Types/types'
import { Continent, useUndirectedContinentPairs } from '@/Composables/useContinentPairs'
import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.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 { entries, completedCount, totalCount } = useUndirectedContinentPairs(flights, continents)
</script>

<template>
    <!-- Continent pairs table -->
    <Panel>
        <div class="table-toolbar">
            <PanelHeader>Continent Pairs</PanelHeader>
        </div>

        <BadgeTable
            :rows="entries"
            :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 at least one flight between every possible
            pair of continents — including flights within the same continent.
        </p>
        <p>
            For <strong>same-continent pairs</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;
}

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

.pair-name {
    font-size: 0.9rem;
}
</style>
