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

const props = defineProps<{
    activeView: ProfileView;
    user: User
}>()

const emit = defineEmits<{
    'update:activeView': [view: ProfileView]
}>()

const page = usePage()
const isAchievementsPage = computed(() => page.component === 'UserAchievements'
)

function navigateTo(view: ProfileView) {
    if (isAchievementsPage.value) {
        const routeMap: Record<string, string> = {
            map: route('profile.map', { user: props.user.name }),
            board: route('profile.departure-board', { user: props.user.name }),
            passes: route('profile.boarding-passes', { user: props.user.name }),
        }
        router.visit(routeMap[view])
    } else {
        emit('update:activeView', view)
    }
}
</script>

<template>
    <div class="view-toolbar">
        <button
            class="view-btn"
            :class="{ active: activeView === 'map' }"
            @click="navigateTo('map')"
        >
            <span class="view-btn-icon mdi mdi-earth"></span>
            <span class="view-btn-label">MAP</span>
        </button>
        <button
            class="view-btn"
            :class="{ active: activeView === 'board' }"
            @click="navigateTo('board')"
        >
            <span class="view-btn-icon mdi mdi-table"></span>
            <span class="view-btn-label">Departure Board</span>
        </button>
        <button
            class="view-btn"
            :class="{ active: activeView === 'passes' }"
            @click="navigateTo('passes')"
        >
            <span class="view-btn-icon mdi mdi-ticket"></span>
            <span class="view-btn-label">Boarding Passes</span>
        </button>
        <button
            class="view-btn"
            :class="{ active: activeView === 'achievements' }"
            @click="router.visit(route('profile.achievements', { user: user.name }))"
        >
            <span class="view-btn-icon mdi mdi-trophy"></span>
            <span class="view-btn-label">Achievements</span>
        </button>
    </div>
</template>

<style scoped>
/* ── View toolbar ── */
.view-toolbar {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255,193,7,0.15);
    border-radius: 3px;
    width: fit-content;
    overflow: hidden;
}

.view-btn {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: transparent;
    border: none;
    border-right: 1px solid rgba(255,193,7,0.15);
    color: #556;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.view-btn:last-child {
    border-right: none;
}

.view-btn:hover {
    background: rgba(255,193,7,0.05);
    color: #9aa;
}

.view-btn.active {
    background: rgba(255,193,7,0.08);
    color: #ffc107;
}

.view-btn-icon {
    font-size: 0.8rem;
    opacity: 0.8;
}

.view-btn-label {
    text-transform: uppercase;
}

/* ── Mobile: 2×2 grid ── */
@media (max-width: 600px) {
    .view-toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .view-btn {
        border-right: 1px solid rgba(255,193,7,0.15);
        border-bottom: 1px solid rgba(255,193,7,0.15);
        justify-content: center;
    }

    /* Remove right border on even buttons (right column) */
    .view-btn:nth-child(2n) {
        border-right: none;
    }

    /* Remove bottom border on last row */
    .view-btn:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
</style>
