<script setup>
import { postService } from '@/api/postService'; // Assuming you have a postService for API calls
import { InputText } from 'primevue';
import Badge from 'primevue/badge';

import Button from 'primevue/button';
import Column from 'primevue/column';
import ConfirmDialog from 'primevue/confirmdialog';
import DataTable from 'primevue/datatable';
import Dropdown from 'primevue/dropdown';
import ProgressSpinner from 'primevue/progressspinner';
import Toast from 'primevue/toast';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

// Import useRouter for navigation
const router = useRouter();
const confirm = useConfirm();
const toast = useToast();

// Post statuses for filtering
const statusOptions = ref([
    { name: '所有状态', value: null },
    { name: '已发布', value: '已发布' },
    { name: '草稿', value: '草稿' },
    { name: '已下架', value: '已下架' }
]);

// Media types for filtering
const mediaTypeOptions = ref([
    { name: '所有类型', value: null },
    { name: '文章', value: '文章' },
    { name: '视频', value: '视频' },
    { name: '音频', value: '音频' }
]);

const globalFilterValue = ref('');
const loading = ref(false);
const searchTimeout = ref(null);

// Sample data - in a real app, this would come from an API
const posts = ref([]);

// Pagination state
const first = ref(0);  // 当前页起始索引
const rows = ref(10);  // 每页显示数量
const total = ref(0);  // 总记录数

// Status mapping
const statusMap = {
    1: '已发布',
    2: '草稿',
    3: '已下架'
};

// Transform assets to media types
const getMediaTypes = (assets) => {
    return [...new Set(assets.map(asset => {
        switch (asset.type) {
            case 'audio': return '音频';
            case 'video': return '视频';
            default: return '文章';
        }
    }))];
};

// Navigate to post creation page
const navigateToCreatePost = () => {
    router.push('/posts/create');
};

// Navigate to post edit page
const navigateToEditPost = (post) => {
    router.push(`/posts/edit/${post.id}`);
};

// View post details
const viewPost = (post) => {
    // In a real app, this would navigate to a post detail page
    toast.add({ severity: 'info', summary: '查看', detail: `查看文章: ${post.title}`, life: 3000 });
};

// Delete post
const confirmDelete = (post) => {
    confirm.require({
        message: `确定要删除 "${post.title}" 吗?`,
        header: '确认删除',
        icon: 'pi pi-exclamation-triangle',
        acceptClass: 'p-button-danger',
        accept: () => {
            // In a real app, you would call an API to delete the post
            posts.value = posts.value.filter(p => p.id !== post.id);
            toast.add({ severity: 'success', summary: '成功', detail: '文章已删除', life: 3000 });
        }
    });
};

// Format datetime to YY/MM/DD HH:mm:ss
const formatDateTime = (dateStr) => {
    const date = new Date(dateStr);
    return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    }).replace(/\//g, '-');
};

// Calculate price after discount
const calculateDiscountPrice = (price, discount) => {
    if (!discount) return price;
    return price * (1 - discount / 100);
};

// Fetch posts data with pagination and search
const fetchPosts = async () => {
    loading.value = true;
    try {
        // Calculate current page (1-based) from first and rows
        const currentPage = (first.value / rows.value) + 1;
        console.log('Fetching page:', currentPage); // Debug log

        const response = await postService.getPosts({
            page: currentPage,
            limit: rows.value,
            keyword: globalFilterValue.value
        });

        posts.value = response.data.items.map(post => ({
            ...post,
            status: statusMap[post.status] || '未知',
            mediaTypes: getMediaTypes(post.assets),
            price: post.price / 100,
            publishedAt: formatDateTime(post.created_at),
            viewCount: post.views,
            likes: post.likes
        }));
        total.value = response.data.total;
    } catch (error) {
        console.error('Fetch error:', error); // Debug log
        toast.add({ severity: 'error', summary: '错误', detail: '加载文章失败', life: 3000 });
    } finally {
        loading.value = false;
    }
};

// Handle page change
const onPage = (event) => {
    console.log('Page event:', event); // Debug log
    first.value = event.first;
    rows.value = event.rows;
    fetchPosts();
};

// Handle search with debounce
const onSearch = (event) => {
    if (searchTimeout.value) {
        clearTimeout(searchTimeout.value);
    }

    searchTimeout.value = setTimeout(() => {
        first.value = 0; // Reset to first page when searching
        fetchPosts();
    }, 300);
};

onMounted(() => {
    fetchPosts();
});

// Status badge severity mapping
const getBadgeSeverity = (status) => {
    const map = {
        '已发布': 'success',
        '草稿': 'warning',
        '已下架': 'danger'
    };
    return map[status] || 'info';
};

// Format price to display ¥ symbol
const formatPrice = (price) => {
    return `¥${price.toFixed(2)}`;
};

// Format media types to display as comma-separated string
const formatMediaTypes = (mediaTypes) => {
    return mediaTypes.join(', ');
};
</script>

<template>
    <Toast />
    <ConfirmDialog />

    <div class="w-full">
        <div class="flex justify-between items-center mb-6 gap-4">
            <h1 class="text-2xl font-semibold text-gray-800 text-nowrap">文章列表</h1>

            <Button class="text-nowrap !px-8" icon="pi pi-plus" label="创建文章" severity="primary"
                @click="navigateToCreatePost" />
        </div>

        <!-- Posts Table -->
        <div class="card mt-10">
            <div class="pb-10 flex">
                <InputText v-model="globalFilterValue" placeholder="搜索文章..." class="flex-1" @input="onSearch" />
            </div>

            <DataTable v-model:filters="filters" :value="posts" :paginator="true" :rows="rows" :totalRecords="total"
                :loading="loading" :lazy="true" :first="first" @page="onPage"
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                :rowsPerPageOptions="[10, 20, 50]"
                currentPageReportTemplate="显示第 {first} 到 {last} 条，共 {totalRecords} 条结果" dataKey="id"
                :globalFilterFields="['title', 'description', 'status']"
                :filters="{ global: { value: globalFilterValue, matchMode: 'contains' } }" stripedRows removableSort
                class="p-datatable-sm" responsiveLayout="scroll">

                <template #empty>
                    <div class="text-center p-4">未找到文章。</div>
                </template>

                <template #loading>
                    <div class="flex flex-col items-center justify-center p-4">
                        <ProgressSpinner style="width:50px;height:50px" />
                        <span class="mt-2">加载文章数据...</span>
                    </div>
                </template>

                <Column field="title" header="标题" sortable>
                    <template #body="{ data }">
                        <div class="text-sm font-medium text-gray-900">
                            {{ data.title }}
                        </div>
                    </template>
                </Column>

                <Column field="price" header="价格" sortable>
                    <template #body="{ data }">
                        <div class="text-sm text-gray-900">
                            <span class="line-through text-gray-500" v-if="data.discount">
                                {{ formatPrice(data.price) }}
                            </span>
                            <span :class="{ 'ml-2': data.discount }">
                                {{ formatPrice(calculateDiscountPrice(data.price, data.discount)) }}
                            </span>
                            <span v-if="data.discount" class="ml-2 text-red-500">
                                (-{{ data.discount }}%)
                            </span>
                        </div>
                    </template>
                </Column>

                <Column field="publishedAt" header="发布时间" sortable>
                    <template #body="{ data }">
                        <div class="text-sm text-gray-900">{{ data.publishedAt }}</div>
                    </template>
                </Column>

                <Column field="status" header="发布状态" sortable>
                    <template #body="{ data }">
                        <Badge :value="data.status" :severity="getBadgeSeverity(data.status)" />
                    </template>
                    <template #filter="{ filterModel, filterCallback }">
                        <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="statusOptions"
                            optionLabel="name" optionValue="value" placeholder="所有状态" class="p-column-filter"
                            showClear />
                    </template>
                </Column>

                <Column field="mediaTypes" header="媒体类型" sortable>
                    <template #body="{ data }">
                        <div class="text-sm text-gray-900">{{ formatMediaTypes(data.mediaTypes) }}</div>
                    </template>
                    <template #filter="{ filterModel, filterCallback }">
                        <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="mediaTypeOptions"
                            optionLabel="name" optionValue="value" placeholder="所有类型" class="p-column-filter"
                            showClear />
                    </template>
                </Column>

                <Column field="viewCount" header="观看次数" sortable>
                    <template #body="{ data }">
                        <div class="text-sm text-gray-500">{{ data.viewCount }}</div>
                    </template>
                </Column>

                <Column field="likes" header="点赞数" sortable>
                    <template #body="{ data }">
                        <div class="text-sm text-gray-500">{{ data.likes }}</div>
                    </template>
                </Column>

                <Column header="操作" :exportable="false" style="min-width:8rem">
                    <template #body="{ data }">
                        <div class="flex justify-center space-x-2">
                            <Button icon="pi pi-pencil" rounded text severity="info" @click="navigateToEditPost(data)"
                                aria-label="编辑" />
                            <Button icon="pi pi-eye" rounded text severity="secondary" @click="viewPost(data)"
                                aria-label="查看" />
                            <Button icon="pi pi-trash" rounded text severity="danger" @click="confirmDelete(data)"
                                aria-label="删除" />
                        </div>
                    </template>
                </Column>
            </DataTable>
        </div>
    </div>
</template>

<style scoped>
/* Additional styling if needed */
</style>
