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

import MapViewer from '../components/main/MapViewer.vue';
import { formatLog } from '../utils/formatLog';
import { trpc } from '../utils/trpc';

type YearbookRange = Awaited<ReturnType<typeof trpc.yearbook.getRange.query>>;
type MapLayout = Awaited<ReturnType<typeof trpc.public.getMapLayout.query>>;
type HistoryData = {
    year: number;
    month: number;
    map: Omit<Awaited<ReturnType<typeof trpc.public.getCachedMap.query>>, 'history'>;
    nations: Array<{
        id: number;
        name: string;
        color: string;
        level: number;
        power: number;
        generalCount: number;
        cities: string[];
    }>;
    globalHistory: string[];
    globalAction: string[];
};

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const errorMessage = ref('');
const range = ref<YearbookRange | null>(null);
const mapLayout = ref<MapLayout | null>(null);
const history = ref<HistoryData | null>(null);
const selectedYearMonth = ref<number | null>(null);
const settingsOpen = ref(false);
const rankingBottom = ref(localStorage.getItem('yearbook-ranking-bottom') === 'true');
let historyRequestId = 0;
const serverID = computed(() => {
    const value = route.query.serverID;
    const raw = Array.isArray(value) ? value[0] : value;
    return typeof raw === 'string' && raw.trim() ? raw.trim() : undefined;
});

const parseYearMonth = (value: number): { year: number; month: number } => ({
    year: Math.floor(value / 12),
    month: (value % 12) + 1,
});

const availableYearMonths = computed(() => {
    if (!range.value) {
        return [];
    }
    const values: Array<{ value: number; label: string }> = [];
    for (let value = range.value.firstYearMonth; value <= range.value.currentYearMonth; value += 1) {
        const { year, month } = parseYearMonth(value);
        const suffix = value === range.value.currentYearMonth ? ' (현재)' : '';
        values.push({ value, label: `${year}년 ${month}월${suffix}` });
    }
    return values;
});

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

const loadHistory = async (): Promise<void> => {
    if (selectedYearMonth.value === null) {
        return;
    }
    const requestId = ++historyRequestId;
    loading.value = true;
    errorMessage.value = '';
    try {
        const { year, month } = parseYearMonth(selectedYearMonth.value);
        const result = await trpc.yearbook.getHistory.query({ year, month, serverID: serverID.value });
        if (requestId !== historyRequestId) {
            return;
        }
        if ('data' in result) {
            history.value = result.data;
        }
    } catch (error) {
        if (requestId !== historyRequestId) {
            return;
        }
        errorMessage.value = error instanceof Error ? error.message : '연감 데이터를 불러오지 못했습니다.';
    } finally {
        if (requestId === historyRequestId) {
            loading.value = false;
        }
    }
};

const moveMonth = (delta: number): void => {
    if (!range.value || selectedYearMonth.value === null) {
        return;
    }
    selectedYearMonth.value = Math.min(
        range.value.currentYearMonth,
        Math.max(range.value.firstYearMonth, selectedYearMonth.value + delta)
    );
};
const toggleRankingPosition = (): void => {
    rankingBottom.value = !rankingBottom.value;
    localStorage.setItem('yearbook-ranking-bottom', String(rankingBottom.value));
    settingsOpen.value = false;
};

watch(selectedYearMonth, () => {
    void loadHistory();
});

onMounted(async () => {
    loading.value = true;
    try {
        const [loadedRange, loadedLayout] = await Promise.all([
            trpc.yearbook.getRange.query(serverID.value ? { serverID: serverID.value } : undefined),
            trpc.public.getMapLayout.query(),
        ]);
        range.value = loadedRange;
        mapLayout.value = loadedLayout;
        selectedYearMonth.value = loadedRange.currentYearMonth;
    } catch (error) {
        errorMessage.value = error instanceof Error ? error.message : '연감 범위를 불러오지 못했습니다.';
        loading.value = false;
    }
});
</script>

<template>
    <main id="yearbook-container" class="yearbook-page legacy-bg0">
        <header class="yearbook-title legacy-bg0">
            <strong>연 감</strong>
            <button class="legacy-button close-button" type="button" @click="closePage">창 닫기</button>
            <span class="settings-menu">
                <button
                    class="legacy-button legacy-button--navigation"
                    type="button"
                    @click="settingsOpen = !settingsOpen"
                >
                    ⚙ 설정⌄
                </button>
                <button v-if="settingsOpen" class="settings-item" type="button" @click="toggleRankingPosition">
                    국가 순서 위치 변경(모바일 전용)
                </button>
            </span>
        </header>

        <section class="year-selector">
            <span>연월 선택:</span>
            <button
                class="legacy-button legacy-button--secondary"
                type="button"
                :disabled="selectedYearMonth === range?.firstYearMonth"
                @click="moveMonth(-1)"
            >
                ◀ 이전달
            </button>
            <select v-model="selectedYearMonth" aria-label="연월 선택">
                <option v-for="option in availableYearMonths" :key="option.value" :value="option.value">
                    {{ option.label }}
                </option>
            </select>
            <button
                class="legacy-button legacy-button--secondary"
                type="button"
                :disabled="selectedYearMonth === range?.currentYearMonth"
                @click="moveMonth(1)"
            >
                다음달 ▶
            </button>
        </section>

        <div v-if="errorMessage" class="yearbook-message error" role="alert">{{ errorMessage }}</div>
        <div v-else-if="loading && !history" class="yearbook-message">불러오는 중...</div>

        <section v-if="history" :class="['history-grid', { 'ranking-bottom': rankingBottom }]" :aria-busy="loading">
            <div class="map-position">
                <MapViewer :map-data="history.map" :map-layout="mapLayout" :loading="loading && !history" />
            </div>
            <aside class="nation-position">
                <table>
                    <thead>
                        <tr>
                            <th>국명</th>
                            <th>국력</th>
                            <th>장수</th>
                            <th>속령</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="nation in [...history.nations].sort(
                                (a, b) => (a.level > 0 ? 0 : 1) - (b.level > 0 ? 0 : 1) || b.power - a.power
                            )"
                            :key="nation.id"
                        >
                            <td>
                                <span :style="{ backgroundColor: nation.color }">{{ nation.name }}</span>
                            </td>
                            <td>{{ nation.power.toLocaleString() }}</td>
                            <td>{{ nation.generalCount.toLocaleString() }}</td>
                            <td>{{ nation.cities.length }}</td>
                        </tr>
                    </tbody>
                </table>
            </aside>
            <article class="history-log">
                <div class="section-heading legacy-bg1">중원 정세</div>
                <div class="log-content">
                    <!-- 레거시 색상 tag만 formatLog가 span으로 변환한다. -->
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <div v-for="(item, index) in history.globalHistory" :key="index" v-html="formatLog(item)" />
                </div>
            </article>
            <article class="history-log">
                <div class="section-heading legacy-bg1">장수 동향</div>
                <div class="log-content">
                    <!-- eslint-disable-next-line vue/no-v-html -->
                    <div v-for="(item, index) in history.globalAction" :key="index" v-html="formatLog(item)" />
                </div>
            </article>
        </section>

        <footer class="yearbook-footer">
            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
        </footer>
        <div class="dropdown-compat-buttons" aria-hidden="true">
            <button type="button" tabindex="-1" /><button type="button" tabindex="-1" />
        </div>
    </main>
</template>

<style scoped>
:global(body:has(.yearbook-page)) {
    min-width: 500px;
}

.yearbook-page {
    width: 1000px;
    min-height: 100vh;
    margin: 0 auto;
    color: #fff;
    font-family: var(--sammo-font-sans);
    font-size: 14px;
    background-color: transparent;
}

/* Ref's `.back_bar` keeps default text alignment; only the heading centres. */
.yearbook-title {
    position: relative;
    min-height: 32px;
    text-align: left;
    line-height: 21px;
    background-color: transparent;
}

.yearbook-title > strong {
    display: block;
    text-align: center;
}

.yearbook-title strong {
    display: inline-block;
    line-height: 32px;
    font-size: 20px;
    letter-spacing: 0.35em;
}

.yearbook-title .close-button,
.settings-menu {
    position: absolute;
    top: 0;
}
.yearbook-title .close-button {
    left: 0;
    height: 32px;
}
.settings-menu {
    right: 0;
    height: 32px;
}
.settings-menu > .legacy-button {
    height: 32px;
}
.settings-item {
    position: absolute;
    z-index: 5;
    top: 32px;
    right: 0;
    width: 250px;
    border: 1px solid #777;
    padding: 7px;
    background: #222;
    color: #fff;
}

.history-grid {
    border: 1px solid gray;
}

/* Ref's selector row is a `.center.row` with 1px gray rules above and below. */
.year-selector {
    display: grid;
    grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 37.5px;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding: 0;
    text-align: center;
}

.year-selector select {
    height: 32px;
    border: 1px solid gray;
    background: #191919;
    color: #fff;
    text-align: center;
}

.history-grid {
    display: grid;
    grid-template-columns: 700px 300px;
}

.map-position,
.nation-position {
    min-width: 0;
    padding: 0;
}
.map-position :deep(.map-meta),
.map-position :deep(.map-footnote) {
    display: none;
}

.nation-position table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    text-align: center;
}

.nation-position th,
.nation-position td {
    border: 0;
    border-left: 1px solid gray;
    padding: 1px 6px;
}
.nation-position th {
    padding: 2px 6px;
    background: #ccc;
    color: #000;
}
.nation-position td {
    text-align: right;
}
.nation-position td:first-child {
    text-align: left;
}

.section-heading {
    min-height: 28px;
    border-bottom: 1px solid gray;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.history-log {
    grid-column: 1 / -1;
}
.history-log:first-of-type {
    height: 128px;
}
.history-log:last-of-type {
    height: 65px;
}
.dropdown-compat-buttons {
    display: none;
}
.year-selector .legacy-button {
    border: 0;
    background: #444;
}
.settings-menu > .legacy-button,
.yearbook-title .close-button {
    border: 0;
    background: #00582c;
}

.log-content {
    min-height: 72px;
    padding: 1px 0;
    line-height: 1.35;
}

.yearbook-message {
    min-height: 80px;
    padding: 24px;
    text-align: center;
}

.error {
    color: #ff9c9c;
}

.yearbook-footer {
    padding: 11px;
    text-align: center;
}

@media (max-width: 1023px) {
    .yearbook-page {
        width: 500px;
    }

    .year-selector {
        grid-template-columns: 90px 100px 190px 100px;
        padding: 0;
    }

    .history-grid {
        display: flex;
        flex-direction: column;
    }

    .map-position,
    .nation-position {
        width: 100%;
        box-sizing: border-box;
    }
    .history-grid.ranking-bottom .nation-position {
        order: 4;
    }
    .history-log:first-of-type {
        height: 149px;
        margin-bottom: 0;
    }
}
</style>
