import { html } from "hono/html";

export const AdminView = html`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CWD 评论后台管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }
        .fade-enter-from, .fade-leave-to { opacity: 0; }
        .loader { border-top-color: #3498db; animation: spinner 1.5s linear infinite; }
        @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">

<div id="app" class="min-h-screen flex flex-col">
    <!-- Toast -->
    <transition name="fade">
        <div v-if="toast.show" :class="toast.type === 'error' ? 'bg-red-500' : 'bg-green-500'"
             class="fixed top-4 right-4 text-white px-6 py-3 rounded shadow-lg z-50 flex items-center">
            <i :class="toast.type === 'error' ? 'fa-circle-exclamation' : 'fa-check-circle'" class="fa-solid mr-2"></i>
            {{ toast.message }}
        </div>
    </transition>

    <!-- 设置弹窗 -->
    <transition name="fade">
        <div v-if="showSettings" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-40" @click.self="showSettings = false">
            <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold text-gray-700">设置</h3>
                    <button @click="showSettings = false" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark text-xl"></i>
                    </button>
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">博客域名前缀</label>
                    <input v-model="config.blogDomain" type="text" placeholder="例如: https://example.com"
                           class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <p class="text-xs text-gray-500 mt-1">设置后，文章链接将自动拼接此前缀</p>
                </div>
                <div class="flex justify-end">
                    <button @click="saveSettings" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        保存
                    </button>
                </div>
            </div>
        </div>
    </transition>

    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <span class="text-xl font-bold text-blue-600">CWD 评论管理系统</span>
                    <span class="ml-4 text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">{{ config.baseUrl }}</span>
                </div>
                <div class="flex items-center">
                    <button @click="fetchComments(pagination.page)" class="mr-4 text-gray-600 hover:text-blue-600">
                        <i class="fa-solid fa-rotate-right"></i> 刷新
                    </button>
                    <button @click="showSettings = true" class="mr-4 text-gray-600 hover:text-blue-600">
                        <i class="fa-solid fa-gear"></i> 设置
                    </button>
                    <button @click="logout" class="text-red-500 hover:text-red-700 font-medium">
                        <i class="fa-solid fa-sign-out-alt"></i> 退出
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div v-if="loading && comments.length === 0" class="flex justify-center items-center h-64">
            <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div>
        </div>

        <div v-else class="bg-white shadow overflow-hidden sm:rounded-lg">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">信息</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/2">内容</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr v-if="comments.length === 0">
                            <td colspan="4" class="px-6 py-10 text-center text-gray-500">暂无评论数据</td>
                        </tr>
                        <tr v-for="comment in comments" :key="comment.id" class="hover:bg-gray-50 transition">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div>
                                        <div>
                                            <span class="text-sm font-medium text-gray-900" v-text="comment.author"></span>
                                            <span class="text-sm text-gray-500"> (<em class="text-xs" v-text="comment.email"></em>)</span>
                                        </div>
                                        <a class="text-xs text-blue-500 hover:underline" :href="comment.url">{{ comment.url }}</a>
                                        <div class="text-xs text-gray-400 mt-1">IP: <em v-text="comment.ipAddress"></em></div>
                                        <div class="text-xs text-gray-400">{{ formatDate(comment.pubDate) }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm text-gray-900 break-words whitespace-pre-wrap max-h-32 overflow-y-auto" v-text="comment.contentText"></div>
                                <a v-if="comment.postSlug" :href="config.blogDomain + comment.postSlug" target="_blank" class="text-xs text-blue-500 hover:underline mt-1 inline-block">
                                    {{ config.blogDomain + comment.postSlug }}
                                </a>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                                      :class="{
                                          'bg-green-100 text-green-800': comment.status === 'approved',
                                          'bg-yellow-100 text-yellow-800': comment.status === 'pending',
                                          'bg-red-100 text-red-800': ['spam', 'rejected', 'deleted'].includes(comment.status)
                                      }">
                                    {{ comment.status }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                <button v-if="comment.status !== 'approved'" @click="updateStatus(comment.id, 'approved')" class="text-green-600 hover:text-green-900 mr-3">
                                    <i class="fa-solid fa-check mr-1"></i>显示
                                </button>
                                <button v-if="comment.status === 'approved'" @click="updateStatus(comment.id, 'pending')" class="text-yellow-600 hover:text-yellow-900 mr-3">
                                    <i class="fa-solid fa-ban mr-1"></i>隐藏
                                </button>
                                <button @click="confirmDelete(comment.id)" class="text-red-600 hover:text-red-900">
                                    <i class="fa-solid fa-trash mr-1"></i>删除
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                    <div>
                        <p class="text-sm text-gray-700">
                            第 <span class="font-medium">{{ pagination.page }}</span> 页，
                            共 <span class="font-medium">{{ pagination.total }}</span> 页
                        </p>
                    </div>
                    <div>
                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
                            <button @click="changePage(pagination.page - 1)" :disabled="pagination.page === 1"
                                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                上一页
                            </button>
                            <button @click="changePage(pagination.page + 1)" :disabled="pagination.page >= pagination.total"
                                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
                                下一页
                            </button>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    const { createApp, reactive, toRefs, onMounted } = Vue;

    createApp({
        setup() {
            const state = reactive({
                loading: false,
                apiKey: '',
                config: {
                    baseUrl: localStorage.getItem('apiBaseUrl') || location.origin,
                    blogDomain: localStorage.getItem('blogDomain') || ''
                },
                comments: [],
                pagination: { page: 1, limit: 20, total: 1 },
                toast: { show: false, message: '', type: 'success' },
                showSettings: false
            });

            const showToast = (msg, type = 'success') => {
                state.toast.message = msg;
                state.toast.type = type;
                state.toast.show = true;
                setTimeout(() => state.toast.show = false, 3000);
            };

            const formatDate = (dateString) => {
                if (!dateString) return '';
                return new Date(dateString).toLocaleString('zh-CN', { hour12: false });
            };

            const fetchComments = async (page = 1) => {
                state.loading = true;
                try {
                    const url = \`\${state.config.baseUrl}/admin/comments/list?page=\${page}\`;
                    const response = await fetch(url, {
                        headers: { 'Authorization': state.apiKey }
                    });
                    const result = await response.json();

                    if (result.message === "Invalid key" || result.status === 401) {
                        logout();
                        return;
                    }

                    state.comments = result.data || [];
                    state.pagination = result.pagination || { page, limit: 10, total: 1 };
                    showToast('刷新成功');
                } catch (error) {
                    console.error(error);
                    showToast('获取数据失败', 'error');
                } finally {
                    state.loading = false;
                }
            };

            const updateStatus = async (id, newStatus) => {
                state.loading = true;
                try {
                    const url = \`\${state.config.baseUrl}/admin/comments/status?id=\${id}&status=\${newStatus}\`;
                    const response = await fetch(url, {
                        method: 'PUT',
                        headers: { 'Authorization': state.apiKey }
                    });
                    if (response.ok) {
                        const comment = state.comments.find(c => c.id === id);
                        if (comment) comment.status = newStatus;
                        showToast('状态更新成功');
                    } else {
                        showToast('更新失败', 'error');
                    }
                } catch (error) {
                    showToast('请求失败', 'error');
                } finally {
                    state.loading = false;
                }
            };

            const confirmDelete = async (id) => {
                if (!confirm('确定删除？')) return;
                state.loading = true;
                try {
                    const url = \`\${state.config.baseUrl}/admin/comments/delete?id=\${id}\`;
                    const response = await fetch(url, {
                        method: 'DELETE',
                        headers: { 'Authorization': state.apiKey }
                    });
                    if (response.ok) {
                        showToast('删除成功');
                        fetchComments(state.pagination.page);
                    } else {
                        showToast('删除失败', 'error');
                    }
                } catch (error) {
                    showToast('请求失败', 'error');
                } finally {
                    state.loading = false;
                }
            };

            const changePage = (page) => {
                if (page > 0) fetchComments(page);
            };

            const logout = () => {
                localStorage.removeItem('adminKey');
                window.location.href = '/login';
            };

            const saveSettings = () => {
                localStorage.setItem('blogDomain', state.config.blogDomain);
                state.showSettings = false;
                showToast('设置已保存');
            };

            onMounted(() => {
                const storedKey = localStorage.getItem('adminKey');
                if (!storedKey) {
                    window.location.href = '/login';
                    return;
                }
                state.apiKey = storedKey;
                fetchComments();
            });

            return {
                ...toRefs(state),
                fetchComments,
                updateStatus,
                confirmDelete,
                changePage,
                logout,
                saveSettings,
                formatDate
            };
        }
    }).mount('#app');
</script>
</body>
</html>
`;
