<script setup lang="ts">
import { computed } from 'vue'
import { Achievement, Flight, User } from '@/Types/types'
import { useAircraftFamilies } from '@/Composables/useAircraftFamilies'
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[]
    families: Record<string, string[]>
}>()

const flights = computed(() => props.flights)
const { entries } = useAircraftFamilies(flights, props.families)
type Generation = { label: string; variants: string[] }

const GENERATIONS : Generation[] = [
    { label: 'Original', variants: ['737-100', '737-200'] },
    { label: 'Classic', variants: ['737-300', '737-400', '737-500'] },
    { label: 'Next Generation', variants: ['737-600', '737-700', '737-800', '737-900'] },
    { label: 'Max', variants: ['737 Max 7', '737 Max 8', '737 Max 9', '737 Max 10'] },
]

const generationGroups = computed(() =>
    GENERATIONS.map(generation => ({
        label: generation.label,
        entries: entries.value.filter(entry =>
            (generation.variants).includes(entry.family)
        ),
    })).filter(group => group.entries.length > 0)
)
</script>

<template>
    <Panel>
        <div v-for="group in generationGroups" :key="group.label" class="generation-group">
            <div class="table-toolbar">
                <PanelHeader>{{ group.label }}</PanelHeader>
            </div>

            <BadgeTable
                :rows="group.entries"
                :rowKey="entry => entry.family"
                :hasItems="entry => entry.flights.length > 0"
                labelWidth="8em"
            >
                <template #label="{ row: entry }">
                    <div class="family-label">
                        <span class="family-name">{{ entry.family }}</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>
        </div>
    </Panel>

    <slot name="extra" />
    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            To complete this challenge you must fly on at least one aircraft from every
            Boeing 737 variant.
        </p>
    </Panel>
    <Panel>
        <PanelHeader centered>Difficulty</PanelHeader>
        <p>
           This challenge is impossible to complete if you start today, but it's a fun one to look at because despite how common as the 737 is, it's very hard to find them all!
        </p>
        <ul>
            <li><b>-100</b> - It was never that popular, and is no longer in commercial service anywhere. This is what renders the challenge impossible today.</li>
            <li><b>-200</b> - Retired from Western fleets. A handful still fly in Africa and parts of Latin America on gravel-strip routes.</li>
            <li><b>-300 / 737-400 / 737-500</b> - Rare but doable with some creative routing.</li>
            <li><b>-600</b> - Much like it's Airbus A318 Equivalent, it sold poorly but is still in operation in Algeria and Canada.</li>
            <li><b>Max 7</b> - Not possible to fly yet due to lack of certification but should hopefully become common soon enough!</li>
        </ul>
    </Panel>
</template>

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

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

.family-name {
    font-size: 0.9rem;
    font-weight: 500;
}
</style>

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

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

.family-name {
    font-size: 0.9rem;
    font-weight: 500;
}
</style>
