---
import { Icon } from "astro-icon/components";

import { getDir, url } from "../utils/url-utils";
import { formatDateToYYYYMMDD } from "../utils/date-utils";
import { umamiConfig } from "../config";
import { getPostCategories, getCategoryUrl, parseCategoryPath } from "../utils/category-utils";

interface Props {
	class: string;
	published: Date;
	updated?: Date;
	hideUpdateDate?: boolean;
	hidePublishedDate?: boolean;
	slug?: string;
	category?: string | string[];
}
const {
	published,
	updated,
	hideUpdateDate = false,
	hidePublishedDate = false,
	slug,
	category,
} = Astro.props;
const className = Astro.props.class;

// Process category data
const categories = typeof category === "string"
	? [category]
	: category || [];
---

<div class:list={["flex flex-wrap text-neutral-500 dark:text-neutral-400 items-center gap-4 gap-x-4 gap-y-2", className]}>
    <!-- publish date -->
    {!hidePublishedDate && (
        <div class="flex items-center">
            <div class="meta-icon">
                <Icon name="material-symbols:calendar-today-outline-rounded" class="text-xl"></Icon>
            </div>
            <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(published)}</span>
        </div>
    )}

    <!-- update date -->
    {!hideUpdateDate && updated && updated.getTime() !== published.getTime() && (
        <div class="flex items-center">
            <div class="meta-icon"
            >
                <Icon name="material-symbols:edit-calendar-outline-rounded" class="text-xl"></Icon>
            </div>
            <span class="text-50 text-sm font-medium">{formatDateToYYYYMMDD(updated)}</span>
        </div>
    )}

    <!-- page views & visitors -->
    {slug && (
        <>
            <div class="flex items-center">
                <div class="meta-icon">
                    <Icon name="material-symbols:visibility-outline-rounded" class="text-xl"></Icon>
                </div>
                <span class="text-50 text-sm font-medium" id={`page-views-${slug}`}>-</span>
            </div>
            <div class="flex items-center">
                <div class="meta-icon">
                    <Icon name="material-symbols:person" class="text-xl"></Icon>
                </div>
                <span class="text-50 text-sm font-medium" id={`page-visitors-${slug}`}>-</span>
            </div>
        </>
    )}

    <!-- categories -->
    {categories.length > 0 && (
        <div class="flex items-center flex-wrap gap-2">
            <div class="meta-icon">
                <Icon name="material-symbols:folder-outline-rounded" class="text-xl"></Icon>
            </div>
            {categories.map((cat, index) => {
                const catPath = parseCategoryPath(cat);
                const catUrl = getCategoryUrl(catPath);
                const catName = catPath[catPath.length - 1]; // Show last level only

                return (
                    <>
                        {index > 0 && <span class="text-30">,</span>}
                        <a
                            href={catUrl}
                            class="text-50 text-sm font-medium hover:text-[var(--primary)] transition"
                        >
                            {catName}
                        </a>
                    </>
                );
            })}
        </div>
    )}
</div>

{slug && (
    <script define:vars={{ slug, umamiConfig }}>
        
        // 获取访问量统计
        async function fetchPageViews() {
            if (!umamiConfig.enable) return;
            try {
                const statsData = await fetchUmamiStats(umamiConfig.baseUrl, umamiConfig.shareId, {
                    timezone: umamiConfig.timezone,
                    path: `eq./posts/${slug}/`
                });
                
                const pageViews = statsData.pageviews || 0;
                const visits = statsData.visitors || 0;
                
                const viewsElement = document.getElementById(`page-views-${slug}`);
                const visitorsElement = document.getElementById(`page-visitors-${slug}`);
                if (viewsElement) viewsElement.textContent = `${pageViews} 次`;
                if (visitorsElement) visitorsElement.textContent = `${visits} 人`;
            } catch (error) {
                console.error('Error fetching page views:', error);
                const viewsElement = document.getElementById(`page-views-${slug}`);
                const visitorsElement = document.getElementById(`page-visitors-${slug}`);
                if (viewsElement) viewsElement.textContent = '-';
                if (visitorsElement) visitorsElement.textContent = '-';
            }
        }

        // 页面加载完成后获取统计数据
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', fetchPageViews);
        } else {
            fetchPageViews();
        }
    </script>
)}
