<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;
        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 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;
    }
    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 ('data' in result) {
            history.value = result.data;
        }
    } catch (error) {
        history.value = null;
        errorMessage.value = error instanceof Error ? error.message : '연감 데이터를 불러오지 못했습니다.';
    } finally {
        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)
    );
};

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-bg2">
            <strong>연 감</strong>
            <button class="legacy-button" type="button" @click="closePage">창 닫기</button>
        </header>

        <section class="year-selector legacy-border">
            <span>연월 선택:</span>
            <button
                class="legacy-button"
                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"
                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">
            <div class="map-position">
                <MapViewer :map-data="history.map" :map-layout="mapLayout" :loading="loading" />
            </div>
            <aside class="nation-position">
                <div class="section-heading legacy-bg1">세력 일람</div>
                <table>
                    <thead>
                        <tr>
                            <th>국가</th>
                            <th>국력</th>
                            <th>도시</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="nation in history.nations" :key="nation.id">
                            <td :style="{ color: nation.color }">{{ nation.name }}</td>
                            <td>{{ nation.power.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>
    </main>
</template>

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

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

.yearbook-title {
    position: relative;
    min-height: 42px;
    border: 1px solid gray;
    text-align: center;
    line-height: 42px;
}

.yearbook-title strong {
    font-size: 20px;
    letter-spacing: 0.35em;
}

.yearbook-title .legacy-button {
    position: absolute;
    top: 5px;
    right: 6px;
}

.legacy-border,
.history-grid,
.map-position,
.nation-position,
.history-log {
    border: 1px solid gray;
}

.year-selector {
    display: grid;
    grid-template-columns: 110px 110px minmax(220px, 1fr) 110px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: 42px;
    padding: 3px 12px;
    text-align: right;
}

.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: 4px;
}

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

.nation-position th,
.nation-position td {
    border: 1px solid #555;
    padding: 4px 2px;
}

.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;
}

.log-content {
    min-height: 72px;
    padding: 7px 10px;
    line-height: 1.35;
}

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

.error {
    color: #ff9c9c;
}

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

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

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

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

    .map-position,
    .nation-position {
        width: 100%;
        box-sizing: border-box;
    }
}
</style>
