{% extends "base.html" %}

{% block title %}项目列表 - LandPPT{% endblock %}

{% block extra_css %}
<style>
.projects-hero {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    padding: var(--spacing-2xl) var(--spacing-lg);
    margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-2xl) calc(-1 * var(--spacing-lg));
    text-align: center;
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
}

.projects-hero h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.projects-hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 500;
}

.status-filter-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.status-filter-label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.status-filter-select {
    min-width: 180px;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 44px;
}

.status-filter-select:hover {
    border-color: rgba(33, 33, 33, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
}

.status-filter-select:focus {
    border-color: rgba(17, 17, 17, 0.4);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08), 0 4px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 1);
}

.status-filter-select option {
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-primary);
    padding: var(--spacing-sm);
    font-weight: 500;
}

.status-filter-select.loading {
    opacity: 0.7;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 2v6m0 4v6m6-10h-6M4 10h6'/%3e%3c/svg%3e");
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.filter-actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-actions-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.filter-result-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(34, 34, 34, 0.08);
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: var(--spacing-sm);
    border: 1px solid rgba(34, 34, 34, 0.2);
}

.filter-result-hint:hover {
    background: rgba(34, 34, 34, 0.12);
    transform: translateY(-1px);
}

.project-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    text-align: center;
    min-height: 100%;
}

.status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid rgba(17, 17, 17, 0.18);
    background: var(--surface-subtle);
    color: var(--text-primary);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.6);
}

.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.status-badge--completed {
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.95), rgba(34, 34, 34, 0.8));
    border-color: rgba(17, 17, 17, 0.85);
    color: var(--surface);
}

.status-badge--completed::before {
    background: var(--surface);
}

.status-badge--progress {
    background: rgba(17, 17, 17, 0.08);
    border-color: rgba(17, 17, 17, 0.2);
}

.status-badge--draft {
    background: transparent;
    border-style: dashed;
    border-color: rgba(17, 17, 17, 0.2);
    color: var(--text-secondary);
}

.status-badge--draft::before {
    background: rgba(17, 17, 17, 0.3);
}

.status-badge--archived {
    background: transparent;
    border-style: dotted;
    border-color: rgba(17, 17, 17, 0.25);
    color: rgba(17, 17, 17, 0.45);
}

.status-badge--archived::before {
    background: rgba(17, 17, 17, 0.35);
}

.status-badge--error {
    border-color: rgba(17, 17, 17, 0.3);
}


.table-action-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background: var(--surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.action-btn:hover,
.action-btn:focus {
    background: var(--surface-subtle);
    color: var(--text-primary);
    border-color: var(--surface-contrast);
}

.action-btn--primary {
    font-weight: 600;
    border-color: var(--surface-contrast);
}

.action-btn--danger {
    border-style: dashed;
}

.action-btn--danger:hover,
.action-btn--danger:focus {
    border-style: solid;
}

.empty-state-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--spacing-xl);
    border-radius: 50%;
    border: 1px solid rgba(17, 17, 17, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(17, 17, 17, 0.45);
}

.projects-table-wrapper {
    margin-bottom: var(--spacing-2xl);
}

.projects-table {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--glass-shadow);
}

.projects-table-header {
    display: grid;
    grid-template-columns: 140px 1fr 160px 190px 150px 140px;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    justify-items: center;
    align-items: center;
}

.projects-table-body {
    display: flex;
    flex-direction: column;
    background: var(--surface);
}

.project-list-item {
    display: grid;
    grid-template-columns: 140px 1fr 160px 190px 150px 140px;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: var(--surface);
    color: var(--text-primary);
}

.project-list-item:hover {
    background: var(--surface-subtle);
    transform: translateY(-1px);
}

.project-list-item:last-child {
    border-bottom: none;
}

.project-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.project-topic,
.project-meta,
.project-progress-label,
.project-updated {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.project-progress {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.project-progress-track {
    background: var(--surface-subtle);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    height: 6px;
}

.project-progress-fill {
    background: var(--surface-contrast);
    height: 100%;
    transition: width 0.3s ease;
    border-radius: var(--border-radius-sm);
}

.project-progress-label {
    text-align: center;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .filter-actions-container {
        flex-direction: column;
        gap: var(--spacing-lg);
    }

    .status-filter-container {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .status-filter-select {
        min-width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="projects-hero">
    <h2>项目列表</h2>
    <p>管理您的所有 PPT 项目</p>
</div>

<div style="max-width: 1400px; margin: 0 auto; padding: var(--spacing-lg);">

    <!-- Filter and Actions -->
    <div class="filter-actions-container">
        <div class="status-filter-container">
            <label for="statusFilter" class="status-filter-label">状态筛选</label>
            <select id="statusFilter" onchange="filterProjects()" class="status-filter-select">
                <option value="">全部状态</option>
                <option value="draft" {% if status_filter == 'draft' %}selected{% endif %}>草稿</option>
                <option value="in_progress" {% if status_filter == 'in_progress' %}selected{% endif %}>进行中</option>
                <option value="completed" {% if status_filter == 'completed' %}selected{% endif %}>已完成</option>
                <option value="archived" {% if status_filter == 'archived' %}selected{% endif %}>已归档</option>
            </select>
            {% if status_filter %}
            <span class="filter-result-hint">
                <span>当前筛选:</span>
                <strong>
                    {% if status_filter == 'draft' %}草稿
                    {% elif status_filter == 'in_progress' %}进行中
                    {% elif status_filter == 'completed' %}已完成
                    {% elif status_filter == 'archived' %}已归档
                    {% endif %}
                </strong>
            </span>
            {% endif %}
        </div>

        <div class="table-action-group">
            <a href="/scenarios" class="action-btn action-btn--primary">创建新项目</a>
            <a href="/dashboard" class="action-btn">查看仪表板</a>
        </div>
    </div>

    <!-- Projects List -->
    {% if projects %}
    <div class="projects-table-wrapper">
        <div class="projects-table">
        <!-- List Header -->
        <div class="projects-table-header">
            <div>状态</div>
            <div>项目信息</div>
            <div>场景</div>
            <div>进度</div>
            <div>更新时间</div>
            <div>操作</div>
        </div>

        <!-- Projects List Items -->
        <div class="projects-table-body">
            {% for project in projects %}
            <div class="project-list-item" onclick="window.location.href='/projects/{{ project.project_id }}'">
                <!-- Status Icon -->
                <div class="project-status">
                    {% if project.status == 'completed' %}
                        <span class="status-badge status-badge--completed">已完成</span>
                    {% elif project.status == 'in_progress' %}
                        <span class="status-badge status-badge--progress">进行中</span>
                    {% elif project.status == 'draft' %}
                        <span class="status-badge status-badge--draft">草稿</span>
                    {% elif project.status == 'archived' %}
                        <span class="status-badge status-badge--archived">已归档</span>
                    {% else %}
                        <span class="status-badge status-badge--error">异常</span>
                    {% endif %}
                </div>

                <!-- Project Info -->
                <div style="display: flex; flex-direction: column; justify-content: center; min-width: 0;">
                    <h4 class="project-title">{{ project.title }}</h4>
                    <p class="project-topic" style="margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ project.topic }}</p>
                </div>

                <!-- Scenario -->
                <div class="project-meta" style="display: flex; align-items: center;">
                    {{ project.scenario }}
                </div>

                <!-- Progress -->
                <div style="display: flex; align-items: center;">
                    {% if project.status == 'in_progress' and project.todo_board %}
                        <div class="project-progress">
                            <div class="project-progress-track">
                                <div class="project-progress-fill" style="width: {{ project.todo_board.overall_progress }}%;"></div>
                            </div>
                            <span class="project-progress-label">{{ "%.0f" | format(project.todo_board.overall_progress) }}%</span>
                        </div>
                    {% elif project.status == 'completed' %}
                        <span class="project-progress-label" style="font-weight: 600;">已完成</span>
                    {% elif project.status == 'draft' %}
                        <span class="project-progress-label">草稿</span>
                    {% elif project.status == 'archived' %}
                        <span class="project-progress-label">已归档</span>
                    {% else %}
                        <span class="project-progress-label">错误</span>
                    {% endif %}
                </div>

                <!-- Update Time -->
                <div class="project-updated" style="display: flex; align-items: center;">
                    {{ project.updated_at | strftime('%m-%d %H:%M') }}
                </div>

                <!-- Actions -->
                <div class="table-action-group" onclick="event.stopPropagation();">
                    {% if project.status == 'completed' %}
                        <a href="/projects/{{ project.project_id }}/edit" class="action-btn" title="编辑PPT">
                            编辑
                        </a>
                        <a href="/projects/{{ project.project_id }}/fullscreen" class="action-btn" title="预览PPT" target="_blank">
                            预览
                        </a>
                    {% elif project.status == 'in_progress' %}
                        <a href="/projects/{{ project.project_id }}/todo" class="action-btn" title="查看看板">
                            查看进度
                        </a>
                    {% endif %}

                    <button onclick="event.stopPropagation(); confirmDeleteProject('{{ project.project_id }}', '{{ project.title }}')" class="action-btn action-btn--danger" title="删除项目">
                        删除
                    </button>
                </div>
            </div>
            {% endfor %}
        </div>
        </div>
    </div>

    <!-- Pagination -->
    {% if total > page_size %}
    <div style="text-align: center; margin-bottom: var(--spacing-2xl);">
        <div style="display: inline-flex; gap: var(--spacing-md); align-items: center; background: #2f2f2f; border: 1px solid #2f2f2f; padding: var(--spacing-lg); border-radius: var(--border-radius-lg); box-shadow: var(--glass-shadow);">
            {% if page > 1 %}
            <a href="?page={{ page - 1 }}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="btn btn-secondary">
                ← 上一页
            </a>
            {% endif %}

            <span style="color: #fff; margin: 0 var(--spacing-lg); font-weight: 500;">
                第 {{ page }} 页，共 {{ (total + page_size - 1) // page_size }} 页
            </span>

            {% if page * page_size < total %}
            <a href="?page={{ page + 1 }}{% if status_filter %}&status={{ status_filter }}{% endif %}" class="btn btn-secondary">
                下一页 →
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <!-- Empty State -->
    <div style="text-align: center; padding: var(--spacing-2xl); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--border-radius-xl); box-shadow: var(--glass-shadow);">
        <div class="empty-state-icon">P</div>
        <h3 style="color: var(--text-primary); margin-bottom: var(--spacing-lg); font-weight: 600;">
            {% if status_filter %}
                没有找到 "{{ status_filter }}" 状态的项目
            {% else %}
                暂无项目
            {% endif %}
        </h3>
        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl); font-size: 1.1rem;">
            {% if status_filter %}
                尝试切换其他状态筛选或创建新项目
            {% else %}
                开始创建您的第一个 PPT 项目
            {% endif %}
        </p>
        <div class="table-action-group" style="justify-content: center; flex-wrap: wrap;">
            <a href="/scenarios" class="action-btn action-btn--primary">创建项目</a>
            {% if status_filter %}
            <a href="/projects" class="action-btn">查看全部</a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); padding: var(--spacing-2xl); border-radius: var(--border-radius-xl); max-width: 500px; width: 90%; text-align: center; box-shadow: var(--glass-shadow);">
        <h3 style="color: var(--text-primary); margin-bottom: var(--spacing-lg); font-weight: 600;">确认删除项目</h3>
        <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg); line-height: 1.6;">
            您确定要删除项目 "<span id="deleteProjectTitle" style="font-weight: bold; color: var(--text-primary);"></span>" 吗？
        </p>
        <p style="color: #9c2424; font-size: 0.9em; margin-bottom: var(--spacing-2xl); line-height: 1.6;">
            此操作不可撤销，将永久删除项目及其所有相关数据。
        </p>
        <div style="display: flex; gap: var(--spacing-lg); justify-content: center;">
            <button onclick="closeDeleteModal()" class="action-btn" style="padding: var(--spacing-md) var(--spacing-xl);">
                取消
            </button>
            <button onclick="executeDeleteProject()" class="action-btn action-btn--danger" style="padding: var(--spacing-md) var(--spacing-xl);">
                确认删除
            </button>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 1001; align-items: center; justify-content: center;">
    <div style="background: var(--glass-bg); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); padding: var(--spacing-2xl); border-radius: var(--border-radius-xl); text-align: center; box-shadow: var(--glass-shadow);">
        <div class="spinner" style="margin-bottom: var(--spacing-xl);"></div>
        <p style="color: var(--text-primary); font-weight: 600; font-size: 1.1rem;">正在删除项目...</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let currentDeleteProjectId = null;

function filterProjects() {
    const selectElement = document.getElementById('statusFilter');
    const status = selectElement.value;

    // 添加加载状态
    selectElement.classList.add('loading');

    // 显示加载提示
    showFilterNotification('正在筛选项目...', 'info');

    const url = new URL(window.location);

    if (status) {
        url.searchParams.set('status', status);
    } else {
        url.searchParams.delete('status');
    }

    url.searchParams.delete('page'); // Reset to first page

    // 延迟跳转以显示加载效果
    setTimeout(() => {
        window.location.href = url.toString();
    }, 300);
}

function showFilterNotification(message, type = 'info') {
    // 移除现有的筛选通知
    const existingNotification = document.querySelector('.filter-notification');
    if (existingNotification) {
        existingNotification.remove();
    }

    // 创建新的通知元素
    const notification = document.createElement('div');
    notification.className = 'filter-notification';
    notification.style.cssText = `
        position: fixed;
        top: 80px;
        right: 20px;
        padding: 12px 20px;
        border-radius: var(--border-radius-md);
        color: white;
        font-weight: 500;
        font-size: 0.9rem;
        z-index: 1002;
        max-width: 300px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.2);
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        gap: 8px;
    `;

    // 设置背景颜色和图标
    if (type === 'success') {
        notification.style.background = '#1f2933';
    } else if (type === 'error') {
        notification.style.background = '#9c2424';
    } else {
        notification.style.background = '#2f2f2f';
    }
    notification.textContent = message;

    document.body.appendChild(notification);

    // 动画显示
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    // 自动移除
    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 2000);
}

function confirmDeleteProject(projectId, projectTitle) {
    currentDeleteProjectId = projectId;
    const titleElement = document.getElementById('deleteProjectTitle');
    if (titleElement) {
        titleElement.textContent = projectTitle;
    } else {
        console.error('Element with id "deleteProjectTitle" not found');
    }
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'flex';
    } else {
        console.error('Element with id "deleteModal" not found');
    }
}

function closeDeleteModal() {
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'none';
    }
    currentDeleteProjectId = null;
}

async function executeDeleteProject() {
    if (!currentDeleteProjectId) return;

    // Show loading overlay
    const modalElement = document.getElementById('deleteModal');
    if (modalElement) {
        modalElement.style.display = 'none';
    }
    const loadingElement = document.getElementById('loadingOverlay');
    if (loadingElement) {
        loadingElement.style.display = 'flex';
    }

    try {
        const response = await fetch(`/api/database/projects/${currentDeleteProjectId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        });

        const result = await response.json();

        if (response.ok) {
            // Show success message
            showNotification('项目删除成功！', 'success');

            // Refresh the page after a short delay
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } else {
            throw new Error(result.detail || '删除失败');
        }

    } catch (error) {
        console.error('Delete error:', error);
        showNotification('删除失败：' + error.message, 'error');
        const loadingElement = document.getElementById('loadingOverlay');
        if (loadingElement) {
            loadingElement.style.display = 'none';
        }
    }

    currentDeleteProjectId = null;
}

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: 8px;
        color: white;
        font-weight: bold;
        z-index: 1002;
        max-width: 400px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    `;

    if (type === 'success') {
        notification.style.background = '#1f2933';
    } else if (type === 'error') {
        notification.style.background = '#9c2424';
    } else {
        notification.style.background = '#2f2f2f';
    }

    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Close modal when clicking outside
    const deleteModal = document.getElementById('deleteModal');
    if (deleteModal) {
        deleteModal.addEventListener('click', function(e) {
            if (e.target === this) {
                closeDeleteModal();
            }
        });
    }

    // Close modal with Escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeDeleteModal();
        }

        // 键盘快捷键支持
        if (e.ctrlKey || e.metaKey) {
            switch(e.key) {
                case 'f': // Ctrl+F 聚焦到筛选框
                    e.preventDefault();
                    const statusFilter = document.getElementById('statusFilter');
                    if (statusFilter) {
                        statusFilter.focus();
                        showFilterNotification('使用方向键选择筛选状态', 'info');
                    }
                    break;
                case 'n': // Ctrl+N 创建新项目
                    e.preventDefault();
                    window.location.href = '/scenarios';
                    break;
                case 'd': // Ctrl+D 返回仪表板
                    e.preventDefault();
                    window.location.href = '/dashboard';
                    break;
            }
        }
    });

    // 增强筛选框的键盘导航
    const statusFilter = document.getElementById('statusFilter');
    if (statusFilter) {
        statusFilter.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                filterProjects();
            }
        });

        // 添加焦点样式
        statusFilter.addEventListener('focus', function() {
            this.parentElement.style.transform = 'scale(1.02)';
            this.parentElement.style.transition = 'transform 0.2s ease';
        });

        statusFilter.addEventListener('blur', function() {
            this.parentElement.style.transform = 'scale(1)';
        });
    }

    // Add loading animation for project cards
    const cards = document.querySelectorAll('.project-card');
    cards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        setTimeout(() => {
            card.style.transition = 'all 0.5s ease';
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, index * 100);
    });

    // 显示键盘快捷键提示
    setTimeout(() => {
        if (!localStorage.getItem('keyboardShortcutsShown')) {
            showFilterNotification('提示: Ctrl+F 快速筛选, Ctrl+N 创建项目', 'info');
            localStorage.setItem('keyboardShortcutsShown', 'true');
        }
    }, 2000);
});

// Auto-refresh for in-progress projects
const hasInProgressProjects = {{ projects | selectattr('status', 'equalto', 'in_progress') | list | length }} > 0;
if (hasInProgressProjects) {
    setInterval(() => {
        window.location.reload();
    }, 30000); // Refresh every 30 seconds
}
</script>
{% endblock %}