<script setup lang="ts">
import {
    UserAction,
    UserActionFlightBookedData,
    UserActionFlightCancelledData,
    UserActionFlightUpdatedData
} from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import FlightBookedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightBookedFeedItem.vue";
import {computed} from "vue";
import {Link} from "@inertiajs/vue3";
import FlightUpdatedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightUpdatedFeedItem.vue";
import FlightCancelledFeedItem from "@/Components/FlightsGoneBy/Feed/FlightCancelledFeedItem.vue";
import FlightImportedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightImportedFeedItem.vue";
import FlightMovedFeedItem from "@/Components/FlightsGoneBy/Feed/FlightMovedFeedItem.vue";
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
import Avatar from "@/Components/FlightsGoneBy/Feed/Avatar.vue";

const props = defineProps<{
    action: UserAction
}>()

const flight = computed(() =>{
    if (props.action.type === 'flight_booked' || props.action.type === 'flight_logged' || props.action.type === 'flight_departing' || props.action.type === 'flight_arriving' || props.action.type === 'flight_imported'){
        return (props.action.data as UserActionFlightBookedData).flight
    } else if (props.action.type === 'flight_updated'){
        return (props.action.data as UserActionFlightUpdatedData).updated
    } else {
        return null
    }
})

const badgeVariant = computed(() => {
    switch (props.action.type) {
        case 'flight_booked': return 'generic'
        case 'flight_logged': return 'generic'
        case 'flight_departing': return 'generic'
        case 'flight_arriving': return 'generic'
        case 'flight_imported': return 'economy'
        case 'flight_updated': return 'economy'
        case 'flight_cancelled': return 'crew'
        default: return 'economy'
    }
})

function timeAgo(dateStr: string): string {
    const diff = Date.now() - new Date(dateStr).getTime()
    const mins = Math.floor(diff / 60000)
    if (mins < 1) return 'just now'
    if (mins < 60) return `${mins}m ago`
    const hrs = Math.floor(mins / 60)
    if (hrs < 24) return `${hrs}h ago`
    return `${Math.floor(hrs / 24)}d ago`
}
</script>

<template>
    <div class="feed-item glass glass-border">
        <div class="card-top">
            <Avatar :user="action.user" />
            <div class="meta">
                <span class="name">
                    <Link :href="route('profile.view', { user: action.user?.name })">
                        {{ action.user?.name ?? 'Unknown' }}
                    </Link>
                </span>
                <span class="time">{{ timeAgo(action.created_at) }}</span>
            </div>
            <span class="type-badge">
                <InlineBadge :variant="badgeVariant">{{ action.display_type }}</InlineBadge>
            </span>
        </div>
        <div class="card-content">
            <FlightBookedFeedItem v-if="action.type == 'flight_booked' || action.type == 'flight_logged'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightBookedFeedItem>
            <FlightImportedFeedItem v-if="action.type == 'flight_imported'" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightImportedFeedItem>
            <FlightUpdatedFeedItem v-if="action.type == 'flight_updated'" :data="(action.data as UserActionFlightUpdatedData)" ></FlightUpdatedFeedItem>
            <FlightCancelledFeedItem v-if="action.type == 'flight_cancelled'" :data="(action.data as UserActionFlightCancelledData)"  flight=""></FlightCancelledFeedItem>
            <FlightMovedFeedItem v-if="action.type == 'flight_departing' || action.type== 'flight_arriving'" :action="action.type" :flight="(action.data as UserActionFlightBookedData).flight" ></FlightMovedFeedItem>
        </div>
        <div class="card-actions">
            <ButtonLink  v-if="flight" :href="route('profile.flight', { user: action.user?.name, userFlight: flight?.id })"  label="View Flight" />
        </div>
    </div>
</template>

<style scoped>
.feed-item {
    padding: 0;
    overflow: hidden;
}


.card-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
}

.card-content {
    padding: 0;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.name {
    font-weight: 600;
    font-size: 0.9rem;
}

.time {
    font-size: 0.75rem;
    color: #9ca3af;
}


.changes dt {
    color: #9ca3af;
    text-transform: capitalize;
    white-space: nowrap;
}

.changes dd {
    margin: 0;
    font-weight: 500;
    word-break: break-word;
}


.view-flight-link svg {
    width: 0.85rem;
    height: 0.85rem;
}
</style>
