<script setup lang="ts">
import {Airline, SharedProps} from "@/Types/types";
import {computed} from "vue";
import {usePage} from "@inertiajs/vue3";

const props = defineProps<{
    airline: Airline | null;
    size?: number | string;
}>();

const page = usePage<SharedProps>().props;
const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/id/${props.airline?.id}')`);
const logoStyle = computed(() => ({
    width: size.value,
    height: size.value,
    backgroundImage: logoUrl.value,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    display: 'inline-block',
}));
const size = computed(() => props.size ? props.size + 'px' : '30px');
</script>

<template>
    <v-tooltip location="top" :open-delay="200">
        <template #activator="{ props: tooltipProps }">
            <span class="airline-logo" v-bind="tooltipProps"></span>
        </template>

        <template #default>
            <div v-if="airline" class="airline-tooltip glass glass-border">
                <div class="tooltip-header">
                    <span class="airline-logo-tooltip" :style="logoStyle"></span>
                    <span class="airline-name">{{ airline.name }}</span>
                    <span v-if="airline.IATA_code || airline.ICAO_code" class="codes">
                        <span v-if="airline.IATA_code" class="code-badge">{{ airline.IATA_code }}</span>
                        <span v-if="airline.ICAO_code" class="code-badge">{{ airline.ICAO_code }}</span>
                    </span>
                </div>
                <div class="tooltip-divider"></div>
                <div class="tooltip-meta">
                    <span
                        v-if="airline.country"
                        :class="`fi fi-${airline.country.code.toLowerCase()}`"
                        class="country-flag"
                    ></span>
                    <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
                </div>
            </div>
            <span v-else class="airline-tooltip muted">Unknown airline</span>
        </template>
    </v-tooltip>
</template>

<style scoped>

:deep(.v-overlay__content) {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

span.airline-logo {
    width: v-bind(size);
    height: v-bind(size);
    background-image: v-bind(logoUrl);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.airline-tooltip {
    background: var(--surface);
    border: 1px solid var(--table-border);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    font-size: 0.85rem;
}

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.airline-name {
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.03em;
}

.tooltip-divider {
    height: 1px;
    background: var(--table-border);
}

.tooltip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.country-flag {
    font-size: 1rem;
}

.country-name {
    flex: 1;
    font-size: 0.8rem;
}

.codes {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

.code-badge {
    background: var(--accent-glow);
    border: 1px solid var(--accent-soft);
    color: var(--accent);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-family: monospace;
    letter-spacing: 0.05em;
}

.muted {
    color: var(--muted);
}
</style>
