<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';

import { trpc } from '../utils/trpc';

type HallOption = {
    season: number;
    scenarios: Array<{ id: number; name: string; count: number }>;
};

type HallEntry = {
    generalId: number;
    name: string;
    ownerName?: string | null;
    nationName: string;
    bgColor: string;
    fgColor: string;
    picture?: string | null;
    imageServer?: number;
    value: number;
    printValue: string;
    serverName?: string;
    serverIdx?: number;
    scenarioName?: string;
    startTime?: string | null;
    unitedTime?: string | null;
};

type HallSection = {
    title: string;
    valueType: 'int' | 'percent';
    entries: HallEntry[];
};

type HallPayload = {
    sections: HallSection[];
};

const router = useRouter();
const loading = ref(false);
const errorMessage = ref('');
const options = ref<HallOption[]>([]);
const selectedSeason = ref<number | null>(null);
const selectedScenario = ref<number | null>(null);
const data = ref<HallPayload | null>(null);

const selection = computed({
    get: () =>
        selectedSeason.value === null
            ? ''
            : selectedScenario.value === null
              ? `season:${selectedSeason.value}`
              : `scenario:${selectedSeason.value}:${selectedScenario.value}`,
    set: (value: string) => {
        const [kind, season, scenario] = value.split(':');
        selectedSeason.value = Number(season);
        selectedScenario.value = kind === 'scenario' ? Number(scenario) : null;
    },
});

const imageUrl = (entry: HallEntry): string => {
    const picture = entry.picture?.trim() || 'default.jpg';
    return entry.imageServer ? `${import.meta.env.BASE_URL}d_pic/${picture}` : `/image/icons/${picture}`;
};

const closePage = async (): Promise<void> => {
    if (window.opener) {
        window.close();
        return;
    }
    await router.push('/');
};

const loadOptions = async (): Promise<void> => {
    try {
        options.value = await trpc.ranking.getHallOfFameOptions.query();
        if (options.value.length > 0 && selectedSeason.value === null) {
            selectedSeason.value = options.value[0]!.season;
        }
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '명예의 전당 옵션을 불러오지 못했습니다.';
    }
};

const loadHall = async (): Promise<void> => {
    if (selectedSeason.value === null) {
        data.value = null;
        return;
    }
    loading.value = true;
    errorMessage.value = '';
    try {
        data.value = (await trpc.ranking.getHallOfFame.query({
            season: selectedSeason.value,
            scenario: selectedScenario.value ?? undefined,
        })) as HallPayload;
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '명예의 전당 데이터를 불러오지 못했습니다.';
    } finally {
        loading.value = false;
    }
};

watch([selectedSeason, selectedScenario], () => {
    void loadHall();
});

onMounted(async () => {
    await loadOptions();
    await loadHall();
});
</script>

<template>
    <main id="container" class="legacy-hall-page legacy-bg0">
        <div class="legacy-hall-title">
            명 예 의 전 당<br />
            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
        </div>

        <label class="scenario-search">
            시나리오 검색 :
            <select v-model="selection" aria-label="시나리오 검색">
                <template v-for="season in options" :key="season.season">
                    <option :value="`season:${season.season}`">* 시즌 : {{ season.season }} 종합 *</option>
                    <option
                        v-for="scenario in season.scenarios"
                        :key="`${season.season}:${scenario.id}`"
                        :value="`scenario:${season.season}:${scenario.id}`"
                    >
                        {{ scenario.name }}({{ scenario.count }}회)
                    </option>
                </template>
            </select>
        </label>

        <div v-if="errorMessage" class="legacy-message error">{{ errorMessage }}</div>
        <div v-else-if="loading" class="legacy-message">불러오는 중...</div>
        <div v-else-if="!data" class="legacy-message">표시할 데이터가 없습니다.</div>

        <section v-if="data" class="hall-sections">
            <article v-for="section in data.sections" :key="section.title" class="rankView legacy-bg0">
                <h2 class="rankType legacy-bg1">{{ section.title }}</h2>
                <ul>
                    <li v-for="(entry, rank) in section.entries" :key="`${section.title}:${entry.generalId}:${rank}`">
                        <div class="hall-rank legacy-bg2">{{ rank + 1 }}위</div>
                        <div class="hall-img">
                            <img class="generalIcon" :src="imageUrl(entry)" width="64" height="64" :alt="entry.name" />
                        </div>
                        <div
                            v-if="entry.serverName"
                            class="hall-server"
                            :title="`${entry.scenarioName ?? ''} ${entry.startTime ?? ''} ~ ${entry.unitedTime ?? ''}`"
                        >
                            {{ entry.serverName }}{{ entry.serverIdx }}기
                        </div>
                        <div class="hall-nation" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
                            {{ entry.nationName || '-' }}
                        </div>
                        <div class="hall-name" :style="{ backgroundColor: entry.bgColor, color: entry.fgColor }">
                            <span>{{ entry.name || '-' }}</span>
                            <small v-if="entry.ownerName">({{ entry.ownerName }})</small>
                        </div>
                        <div class="hall-value">{{ entry.printValue }}</div>
                    </li>
                </ul>
            </article>
        </section>

        <div class="legacy-hall-bottom">
            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
        </div>
    </main>
</template>

<style scoped>
:global(body) {
    min-width: 500px;
    overflow-x: hidden;
}

.legacy-hall-page {
    width: 500px;
    min-height: 100vh;
    margin: 0 auto 100px;
    color: #fff;
    font-family: Pretendard, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    font-size: 14px;
}

.legacy-hall-title,
.legacy-hall-bottom {
    text-align: center;
}

.legacy-hall-title {
    padding-top: 2px;
}

.scenario-search {
    display: block;
    padding: 2px 0;
    text-align: center;
}

.scenario-search select {
    min-width: 220px;
    border: 1px solid #555;
    background: #ddd;
    color: #303030;
}

.legacy-message {
    border: 1px solid gray;
    padding: 12px;
    text-align: center;
}

.legacy-message.error {
    color: #ff6b6b;
}

.hall-sections {
    display: block;
}

.rankView {
    position: relative;
    margin: auto;
    outline: 1px solid gray;
}

.rankType {
    margin: 0;
    border-bottom: 1px solid gray;
    padding: 2px;
    font-size: 1.17em;
    text-align: center;
}

.rankView ul {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: -1px 0;
    padding: 0;
    list-style: none;
}

.rankView li {
    box-sizing: border-box;
    flex: 0 0 100px;
    width: 100px;
    min-height: 149px;
    margin: 0;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    text-align: center;
    vertical-align: top;
}

.hall-rank,
.hall-server,
.hall-nation,
.hall-value {
    border-bottom: 1px solid gray;
}

.hall-img {
    height: 64px;
}

.generalIcon {
    display: inline-block;
    width: 64px;
    height: 64px;
    object-fit: cover;
}

.hall-server,
.hall-nation,
.hall-name {
    font-size: 11px;
}

.hall-name {
    display: flex;
    height: 28px;
    flex-direction: column;
    justify-content: center;
}

.hall-name small {
    font-size: 95%;
}

.hall-value {
    box-sizing: border-box;
    padding: 3px 0;
    line-height: 13px;
}

@media (min-width: 1000px) {
    :global(body) {
        min-width: 1000px;
    }

    .legacy-hall-page {
        width: 1000px;
    }
}
</style>
