<template>
    <view class="match-shell-page">
        <WorldCupPanel v-if="currentView === 'worldcup'" :initial-tab="worldcupState.tab"
            :initial-cid="worldcupState.cid" @back="showMatchCenter" />
        <MatchCenterPanel v-else @open-worldcup="openWorldCup" />
    </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import MatchCenterPanel from './MatchCenterPanel.vue'
import WorldCupPanel from './WorldCupPanel.vue'

type ShellView = 'worldcup' | 'match'

const props = withDefaults(defineProps<{
    initialView?: ShellView
    routeOptions?: Record<string, any>
}>(), {
    initialView: 'match',
    routeOptions: () => ({})
})

const currentView = ref<ShellView>('match')
const worldcupState = ref<{ tab: string; cid: number | null }>({
    tab: 'live',
    cid: null
})

const parseNumber = (value: any) => {
    const parsed = Number(value || 0)
    return parsed > 0 ? parsed : null
}

const applyState = () => {
    currentView.value = props.initialView
    worldcupState.value = {
        tab: String(props.routeOptions?.tab || 'live'),
        cid: parseNumber(props.routeOptions?.cid)
    }
}

const openWorldCup = (payload?: { tab?: string; cid?: number | null }) => {
    worldcupState.value = {
        tab: payload?.tab || 'live',
        cid: payload?.cid ?? null
    }
    currentView.value = 'worldcup'
}

const showMatchCenter = () => {
    currentView.value = 'match'
}

watch(
    () => [props.initialView, props.routeOptions],
    () => {
        applyState()
    },
    { immediate: true, deep: true }
)
</script>

<style lang="scss" scoped>
.match-shell-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    overflow: hidden;
}
</style>
