<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue"
import { Head, router } from '@inertiajs/vue3'
import { computed, ref, watchEffect } from 'vue'
import { Flight, ProfileView, RegionRange, User, FlightRange, FlightScope } from "@/Types/types"
import { useFlightStats } from "@/Composables/useFlightStats"
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
import BoardingPasses from "@/Components/FlightsGoneBy/BoardingPasses.vue"
import FlightMapAndCharts from "@/Components/FlightsGoneBy/FlightMapAndCharts.vue"
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue"
import { useFlights } from "@/Composables/useFlights"

defineOptions({ layout: MainLayout })

const props = defineProps<{
    user: User
    canEdit: boolean
    canView: boolean
    selectedFlightId?: number | null
    initialView?: ProfileView
    followStatus: string
    flightCount: number
}>()

// ── Flights state ─────────────────────────────────────────────────────────────

const { flights, flightsLoading } = useFlights(`/internal/user/${props.user.name}/flights`)
const localSelectedFlightId = ref(props.selectedFlightId ?? null)

// ── Filter state ──────────────────────────────────────────────────────────────

const filtersOpen = ref(window.innerWidth >= 1024)

const selectedYears          = ref<number[]>([])
const selectedAirlines       = ref<number[]>([])
const selectedAlliances      = ref<number[]>([])
const selectedCountries      = ref<string[]>([])
const selectedContinents     = ref<string[]>([])
const selectedFlightClasses  = ref<number[]>([])
const selectedCrewTypes      = ref<number[]>([])
const selectedFlightScopes   = ref<FlightScope[]>([])
const selectedFlightRanges   = ref<FlightRange[]>([])
const selectedRegionRanges   = ref<RegionRange[]>([])
const selectedFlightReasons  = ref<number[]>([])
const selectedSeatTypes      = ref<number[]>([])
const selectedManufacturers  = ref<string[]>([])
const selectedAircraftModels = ref<number[]>([])
const selectedAirportRegions = ref<number[]>([])

const activeFilterCount = computed(() =>
    selectedYears.value.length +
    selectedAirlines.value.length +
    selectedAlliances.value.length +
    selectedCountries.value.length +
    selectedContinents.value.length +
    selectedFlightClasses.value.length +
    selectedCrewTypes.value.length +
    selectedFlightScopes.value.length +
    selectedFlightRanges.value.length +
    selectedRegionRanges.value.length +
    selectedFlightReasons.value.length +
    selectedSeatTypes.value.length +
    selectedManufacturers.value.length +
    selectedAircraftModels.value.length +
    selectedAirportRegions.value.length
)

function onFiltersChange(filters: {
    years: number[]
    airlines: number[]
    alliances: number[]
    countries: string[]
    continents: string[]
    flightClasses: number[]
    crewTypes: number[]
    flightScopes: FlightScope[]
    flightRanges: FlightRange[]
    regionRanges: RegionRange[]
    flightReasons: number[]
    seatTypes: number[]
    manufacturers: string[]
    aircraftModels: number[]
    airportRegions: number[]
}) {
    localSelectedFlightId.value  = null
    selectedYears.value          = filters.years
    selectedAirlines.value       = filters.airlines
    selectedAlliances.value      = filters.alliances
    selectedCountries.value      = filters.countries
    selectedContinents.value     = filters.continents
    selectedFlightClasses.value  = filters.flightClasses
    selectedCrewTypes.value      = filters.crewTypes
    selectedFlightScopes.value   = filters.flightScopes
    selectedFlightRanges.value   = filters.flightRanges
    selectedRegionRanges.value   = filters.regionRanges
    selectedFlightReasons.value  = filters.flightReasons
    selectedSeatTypes.value      = filters.seatTypes
    selectedManufacturers.value  = filters.manufacturers
    selectedAircraftModels.value = filters.aircraftModels
    selectedAirportRegions.value = filters.airportRegions
}

// ── Filtering ─────────────────────────────────────────────────────────────────

function matchesFilters(f: Flight): boolean {
    const date = new Date(f.departure_date)
    if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
    if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
    if (selectedAlliances.value.length && !selectedAlliances.value.includes(f.airline?.alliance?.id ?? -1)) return false
    if (selectedCountries.value.length) {
        const depCode = f.departure_airport.region?.country?.code
        const arrCode = f.arrival_airport.region?.country?.code
        if (!selectedCountries.value.includes(depCode ?? '') && !selectedCountries.value.includes(arrCode ?? '')) return false
    }
    if (selectedContinents.value.length) {
        const depCode = f.departure_airport.region?.continent?.code
        const arrCode = f.arrival_airport.region?.continent?.code
        if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
    }
    if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
    if (selectedCrewTypes.value.length && !selectedCrewTypes.value.includes(f.crew_type?.id ?? -1)) return false
    if (selectedFlightScopes.value.length && !selectedFlightScopes.value.includes(f.scope)) return false
    if (selectedFlightRanges.value.length && !selectedFlightRanges.value.includes(f.range)) return false
    if (selectedRegionRanges.value.length && !selectedRegionRanges.value.includes(f.region_range)) return false
    if (selectedFlightReasons.value.length && !selectedFlightReasons.value.includes(f.flight_reason?.id ?? -1)) return false
    if (selectedSeatTypes.value.length && !selectedSeatTypes.value.includes(f.seat_type?.id ?? -1)) return false
    if (selectedManufacturers.value.length && !selectedManufacturers.value.includes(f.aircraft?.manufacturer_code ?? '')) return false
    if (selectedAircraftModels.value.length && !selectedAircraftModels.value.includes(f.aircraft?.id ?? -1)) return false
    if (selectedAirportRegions.value.length) {
        const depRegion = f.departure_airport.region?.id
        const arrRegion = f.arrival_airport.region?.id
        if (!selectedAirportRegions.value.includes(depRegion ?? -1) &&
            !selectedAirportRegions.value.includes(arrRegion ?? -1)) return false
    }
    return true
}

const filteredFlights = computed(() => flights.value.filter(matchesFilters))
const stats = useFlightStats(filteredFlights)

watchEffect(() => {
    const _ = [
        stats.perYear.value,
        stats.perMonth.value,
        stats.perDay.value,
        stats.topAirlines.value,
        stats.topAirports.value,
        stats.countries.value,
    ]
})

// ── View switching ────────────────────────────────────────────────────────────

const activeView = ref<ProfileView>(props.initialView ?? 'board')

const routeNames: Record<Exclude<ProfileView, 'achievements'>, string> = {
    map:    'profile.map',
    board:  'profile.departure-board',
    passes: 'profile.boarding-passes',
} as const

function toggleFilters(e: MouseEvent) {
    filtersOpen.value = !filtersOpen.value
    ;(e.currentTarget as HTMLButtonElement).blur()
}

function switchView(view: ProfileView) {
    if (view === 'achievements') {
        router.visit(route('profile.achievements', { user: props.user.name }))
        return
    }

    const flightId = view === 'board' ? localSelectedFlightId.value : null
    localSelectedFlightId.value = null
    activeView.value = view
    window.history.replaceState(
        window.history.state,
        '',
        route(routeNames[view], {
            user: props.user.name,
            ...(flightId ? { flight: flightId } : {})
        })
    )
}
</script>

<template>
    <ProfileLayout :title="`${user.name}'s Flights`"  :canView="canView"  :followStatus="followStatus" :flightCount="flightCount" :user="user" :loading="flightsLoading">

        <div class="toolbar">
            <ProfileViewSwitcher :user="user" :active-view="activeView" @update:active-view="switchView" />
            <button
                class="filter-toggle"
                :class="{ active: filtersOpen || activeFilterCount > 0 }"
                @click="toggleFilters"
            >
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>
                </svg>
                Filters
                <span v-if="activeFilterCount > 0" class="filter-badge">{{ activeFilterCount }}</span>
            </button>
        </div>

        <div v-show="filtersOpen" class="filter-panel">
            <FlightFilter :flights="flights" @change="onFiltersChange" />
        </div>

        <DepartureBoard v-if="activeView === 'board'" :flight-id="localSelectedFlightId" :flight-stats="stats" :canEdit="canEdit" :user="user" />
        <BoardingPasses v-if="activeView === 'passes'" :flight-stats="stats" :canEdit="canEdit" :user="user" />
        <FlightMapAndCharts v-if="activeView === 'map'" :stats="stats" :canEdit="canEdit" />

    </ProfileLayout>
</template>

<style scoped>
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid #334455;
    border-radius: 6px;
    color: #778899;
    cursor: pointer;
    font-size: 13px;
    padding: 6px 12px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.filter-toggle:focus {
    outline: none;
}

@media (hover: hover) {
    .filter-toggle:hover {
        border-color: #4da6ff;
        color: #4da6ff;
    }
}

.filter-toggle.active {
    border-color: #4da6ff;
    color: #4da6ff;
}

.filter-badge {
    background: #4da6ff;
    color: #0a1628;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 2px 6px;
}

.filter-panel {
    margin-bottom: 12px;
}

@media (max-width: 640px) {
    .toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-toggle {
        width: 100%;
        justify-content: center;
    }
}
</style>
