---
import { Icon } from "astro-icon/components";
import { profileConfig, umamiConfig, siteConfig } from "../../config";

const config = profileConfig;
---
<div class="card-base p-3 border border-black/10 dark:border-white/10">
    <div class="relative mx-auto mt-1 lg:mx-0 lg:mt-0 mb-3 max-w-[12rem] lg:max-w-none rounded-xl overflow-hidden" style={`--theme-hue: ${siteConfig.themeColor.hue}`}>
        <div class="loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden">
            <div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>
        </div>
        <img src={config.avatar} alt="Profile Image of the Author" class="w-full h-full object-cover opacity-0 transition-opacity duration-500" onload="this.style.opacity='1'; this.parentElement.querySelector('.loading-bar').style.opacity='0';"/>
    </div>
    <div class="px-2">
        <div class="font-bold text-xl text-center mb-1 dark:text-neutral-50 transition">{config.name}</div>
        <div class="h-1 w-5 bg-[var(--primary)] mx-auto rounded-full mb-2 transition"></div>
        <div class="text-center text-neutral-400 mb-2.5 transition">{config.bio}</div>
        <div class="flex flex-wrap gap-2 justify-center mb-1">
            {config.links.length > 1 && config.links.map(item =>
                    <a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
                        <Icon name={item.icon} class="text-[1.5rem]"></Icon>
                    </a>
            )}
            {config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
                                            class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
                <Icon name={config.links[0].icon} class="text-[1.5rem]"></Icon>
                {config.links[0].name}
            </a>}
        </div>
        
        <!-- 全站访问量统计 -->
        <div class="grid grid-cols-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700">
            <div class="text-center">
                <div class="text-xs text-neutral-500 mb-1 flex items-center justify-center gap-1">
                    <Icon name="material-symbols:visibility-outline" class="text-base"></Icon>
                    <span class="text-xs">访问量</span>
                </div>
                <div id="site-views" class="font-bold text-lg text-neutral-700 dark:text-neutral-300">-</div>
            </div>
            <div class="text-center border-l border-neutral-200 dark:border-neutral-700">
                <div class="text-xs text-neutral-500 mb-1 flex items-center justify-center gap-1">
                    <Icon name="material-symbols:person" class="text-base"></Icon>
                    <span class="text-xs">访客数</span>
                </div>
                <div id="site-visitors" class="font-bold text-lg text-neutral-700 dark:text-neutral-300">-</div>
            </div>
        </div>
    </div>
</div>

<style>
    .loading-bar {
        transition: opacity 0.5s ease-out;
    }

    @keyframes loading-progress {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(400%);
        }
    }

    .animate-loading-progress {
        animation: loading-progress 1.5s ease-in-out infinite;
    }
</style>

<script define:vars={{ umamiConfig}}>
    // 获取全站访问量统计
    async function loadSiteStats() {
        if (!umamiConfig.enable) return;
        try {
            const statsData = await fetchUmamiStats(umamiConfig.baseUrl, umamiConfig.shareId, {
                timezone: umamiConfig.timezone
            });
            
            const pageviews = statsData.pageviews || 0;
            const visitors = statsData.visitors || 0;
            
            const viewsElement = document.getElementById('site-views');
            const visitorsElement = document.getElementById('site-visitors');
            if (viewsElement) viewsElement.textContent = pageviews;
            if (visitorsElement) visitorsElement.textContent = visitors;
        } catch (error) {
            console.error('获取全站统计失败:', error);
        }
    }

    // 页面加载完成后获取统计数据
    document.addEventListener('DOMContentLoaded', loadSiteStats);
</script>