<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { PLATFORM_CONFIGS } from '@/config/platforms';
import { getToken, logout, mockLogin } from '@/shared/auth';
import type { CrawlTaskState } from '@/types';

const token = ref<string | null>(null);
const selectedPlatformId = ref(PLATFORM_CONFIGS[0]?.id ?? '');
const isLoading = ref(true);
const isScanning = ref(false);
const errorMessage = ref('');
const crawlState = ref<CrawlTaskState | null>(null);
const elapsedSeconds = ref(0);
let timer: number | undefined;

const manifest = getRuntimeManifest();
const extensionName = manifest?.name ?? '店闪';
const extensionVersion = manifest?.version ?? '0.0.0';
const extensionDescription =
    manifest?.description || '自动打开商家后台，按平台配置顺序采集页面数据。';

const selectedPlatform = computed(() =>
    PLATFORM_CONFIGS.find((platform) => platform.id === selectedPlatformId.value) ?? null,
);

const isLoggedIn = computed(() => token.value !== null);
const isCrawling = computed(() => crawlState.value?.status === 'running');

onMounted(async () => {
    token.value = await getToken();
    await refreshCrawlState();
    timer = window.setInterval(() => {
        updateElapsedSeconds();
        void refreshCrawlState();
    }, 1000);
    isLoading.value = false;
});

onUnmounted(() => {
    if (timer) {
        window.clearInterval(timer);
    }
});

async function handleLogin() {
    errorMessage.value = '';
    token.value = await mockLogin();
}

async function handleLogout() {
    errorMessage.value = '';
    await logout();
    token.value = null;
}

async function handleScan() {
    errorMessage.value = '';

    if (!selectedPlatform.value) {
        errorMessage.value = '请选择要爬取的平台';
        return;
    }

    isScanning.value = true;

    try {
        const response = await sendBackgroundMessage<CrawlTaskState>({
            action: 'START_CRAWL',
            payload: { platformId: selectedPlatform.value.id },
        });

        if (!response.ok) {
            errorMessage.value = response.error ?? '打开平台窗口失败';
            return;
        }

        crawlState.value = response.data ?? null;
        updateElapsedSeconds();
    } catch (error: unknown) {
        errorMessage.value = error instanceof Error ? error.message : '打开平台窗口失败';
    } finally {
        isScanning.value = false;
    }
}

async function handleCancelCrawl() {
    const response = await sendBackgroundMessage<CrawlTaskState>({ action: 'CANCEL_CRAWL' });
    crawlState.value = response.data ?? null;
}

async function refreshCrawlState() {
    const response = await sendBackgroundMessage<CrawlTaskState | null>({ action: 'GET_CRAWL_STATE' });

    if (response.ok) {
        crawlState.value = response.data ?? null;
        updateElapsedSeconds();
    }
}

function updateElapsedSeconds() {
    if (!crawlState.value) {
        elapsedSeconds.value = 0;
        return;
    }

    elapsedSeconds.value = Math.max(0, Math.floor((Date.now() - crawlState.value.startedAt) / 1000));
}

function formatElapsed(totalSeconds: number): string {
    const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
    return `${minutes}:${seconds}`;
}

function getStepClass(status: string): string {
    if (status === 'running') {
        return 'border-emerald-500 bg-emerald-50 text-emerald-700';
    }

    if (status === 'success') {
        return 'border-green-500 bg-green-50 text-green-700';
    }

    if (status === 'failed') {
        return 'border-red-500 bg-red-50 text-red-700';
    }

    return 'border-slate-300 bg-white text-slate-500';
}

function getStepText(status: string): string {
    const textMap: Record<string, string> = {
        pending: '等待中',
        running: '爬取中',
        success: '已完成',
        failed: '爬取失败',
    };

    return textMap[status] ?? status;
}

function sendBackgroundMessage<T>(message: unknown): Promise<{ ok: boolean; data?: T; error?: string }> {
    if (typeof chrome === 'undefined' || !chrome.runtime?.sendMessage) {
        return Promise.resolve({ ok: true, data: null as T });
    }

    return chrome.runtime.sendMessage(message);
}

function getRuntimeManifest(): chrome.runtime.Manifest | null {
    if (typeof chrome === 'undefined' || !chrome.runtime?.getManifest) {
        return null;
    }

    return chrome.runtime.getManifest();
}
</script>

<template>
    <main class="w-80 bg-slate-50 text-slate-900">
        <section class="flex min-h-64 flex-col gap-5 p-5">
            <header class="space-y-2">
                <p class="text-lg font-semibold leading-6">{{ extensionName }}</p>
                <p class="text-sm leading-5 text-slate-600">{{ extensionDescription }}</p>
            </header>

            <div v-if="isLoading" class="rounded-md border border-slate-200 bg-white px-3 py-4 text-sm text-slate-500">
                正在读取登录状态...
            </div>

            <template v-else-if="!isLoggedIn">
                <button type="button"
                    class="rounded-md bg-slate-900 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-slate-700"
                    @click="handleLogin">
                    请登录
                </button>
            </template>

            <template v-else-if="isCrawling && crawlState">
                <section class="space-y-4">
                    <div class="flex items-center justify-between rounded-md bg-white px-3 py-2 shadow-sm">
                        <div>
                            <p class="text-sm font-medium text-slate-800">{{ crawlState.platformName }}</p>
                            <p class="text-xs text-slate-500">已运行 {{ formatElapsed(elapsedSeconds) }}</p>
                        </div>
                        <button type="button" class="text-xs text-red-600 transition hover:text-red-700"
                            @click="handleCancelCrawl">
                            取消
                        </button>
                    </div>

                    <ol class="space-y-3">
                        <li v-for="(step, index) in crawlState.steps" :key="step.uniqueKey"
                            class="relative border-l-2 border-slate-200 pl-4">
                            <span
                                class="absolute -left-[7px] top-1 h-3 w-3 rounded-full border-2 border-white bg-slate-300"
                                :class="{ 'bg-emerald-500': step.status === 'running' || step.status === 'success', 'bg-red-500': step.status === 'failed' }"></span>
                            <div class="rounded-md border px-3 py-2 text-sm" :class="getStepClass(step.status)">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="font-medium">{{ index + 1 }}. {{ step.name }}</span>
                                    <span class="text-xs">{{ getStepText(step.status) }}</span>
                                </div>
                                <p v-if="step.message" class="mt-1 text-xs">{{ step.message }}</p>
                            </div>
                        </li>
                    </ol>
                </section>
            </template>

            <template v-else>
                <label class="space-y-2">
                    <span class="text-sm font-medium text-slate-700">平台选择</span>
                    <select v-model="selectedPlatformId"
                        class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm outline-none transition focus:border-slate-800 focus:ring-2 focus:ring-slate-200">
                        <option v-for="platform in PLATFORM_CONFIGS" :key="platform.id" :value="platform.id">
                            {{ platform.name }}
                        </option>
                    </select>
                </label>

                <button type="button"
                    class="rounded-md bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-slate-300"
                    :disabled="isScanning" @click="handleScan">
                    {{ isScanning ? '正在打开...' : '立即爬取' }}
                </button>
            </template>

            <p v-if="errorMessage" class="rounded-md bg-red-50 px-3 py-2 text-sm text-red-700">
                {{ errorMessage }}
            </p>

            <footer
                class="mt-auto flex items-center justify-between border-t border-slate-200 pt-4 text-xs text-slate-500">
                <button v-if="isLoggedIn" type="button" class="text-slate-600 transition hover:text-slate-900"
                    @click="handleLogout">
                    退出
                </button>
                <span v-else></span>
                <span>v{{ extensionVersion }}</span>
            </footer>
        </section>
    </main>
</template>

<style>
@import "tailwindcss";
</style>
