{% extends "base.html" %}

{% block content %}
{% include 'admin_nav.html' %}

<div class="admin-container">
    <div class="admin-content">
        <div class="admin-card">
            <div class="card-header">
                <div class="header-left">
                    <i class="fas fa-edit"></i>
                    <h3>应用详情 (Top50热门应用)</h3>
                </div>
            </div>
            
            <!-- 应用选择部分 -->
            <div class="app-selector">
                <form class="search-form" method="GET" action="/admin/app/edit">
                    <div class="search-wrapper">
                        <i class="fas fa-search"></i>
                        <input type="text" name="search" placeholder="搜索应用..." value="{{ search }}">
                    </div>
                </form>
                
                <div class="apps-list">
                    {% for app in apps %}
                    <div class="app-item {% if selected_app and selected_app.id == app.id %}selected{% endif %}" 
                         onclick="window.location.href='/admin/app/edit/{{ app.id }}'">
                        <div class="app-icon">
                            {% if 'http' in app.icon_path %}
                                <img src="{{ app.icon_path }}" alt="{{ app.name }}">
                            {% else %}
                                <img src="{{ url_for('static', filename='uploads/' + app.icon_path) }}" alt="{{ app.name }}">
                            {% endif %}
                        </div>
                        <div class="app-info">
                            <div class="app-name-category">
                                <h4>{{ app.name }}</h4>
                                <div class="app-meta">
                                    <span class="category">{{ app.category_name }}</span>
                                </div>
                            </div>
                            <span class="search-count">搜索 {{ app.search_count }} 次</span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            {% if selected_app %}
            <form method="POST" class="app-edit-form" action="/admin/app/edit/{{ selected_app.id }}">
                <div class="basic-info">
                    <div class="current-icon">
                        {% if 'http' in selected_app.icon_path %}
                            <img src="{{ selected_app.icon_path }}" alt="{{ selected_app.name }}">
                        {% else %}
                            <img src="{{ url_for('static', filename='uploads/' + selected_app.icon_path) }}" alt="{{ selected_app.name }}">
                        {% endif %}
                    </div>
                    <div class="basic-fields">
                        <div class="form-group">
                            <label for="name">应用名称</label>
                            <input type="text" id="name" name="name" value="{{ selected_app.name }}" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="category">分类</label>
                            <select id="category" name="category_id" required>
                                {% for category in categories %}
                                <option value="{{ category.id }}" {% if selected_app.category_id == category.id %}selected{% endif %}>
                                    {{ category.name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="description">应用描述</label>
                    <textarea id="description" name="description">{{ selected_app.description or '' }}</textarea>
                </div>
                
                <div class="form-group">
                    <label for="version">版本号</label>
                    <input type="text" id="version" name="version" value="{{ selected_app.version or '' }}">
                </div>
                
                <div class="form-group">
                    <label for="update_date">更新日期</label>
                    <input type="date" id="update_date" name="update_date" value="{{ selected_app.update_date or '' }}">
                </div>
                
                <div class="form-group">
                    <label for="developer">开发者</label>
                    <input type="text" id="developer" name="developer" value="{{ selected_app.developer or '' }}">
                </div>
                
                <div class="form-group">
                    <label for="visit_url">访问链接 (选填)</label>
                    <input type="url" 
                           id="visit_url" 
                           name="visit_url" 
                           value="{{ selected_app.visit_url or '' }}" 
                           placeholder="http://example.com">
                </div>
                
                <div class="form-group">
                    <label for="download_url">下载链接 (选填)</label>
                    <input type="url" 
                           id="download_url" 
                           name="download_url" 
                           value="{{ selected_app.download_url or '' }}" 
                           placeholder="http://example.com/download">
                </div>
                
                <button type="submit" class="btn-primary">
                    <i class="fas fa-save"></i> 保存更改
                </button>
            </form>
            {% endif %}
        </div>
    </div>
</div>

<style>
.app-selector {
    margin-bottom: 20px;
}

.apps-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: #eee;
}

.app-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    min-width: 0;
    background-color: white;
}

.app-item:hover {
    background-color: #f5f5f5;
}

.app-item.selected {
    background-color: #e3f2fd;
}

.app-item .app-icon {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    flex-shrink: 0;
}

.app-item .app-icon img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.app-item .app-info {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.app-item .app-info .app-name-category {
    min-width: 0;
}

.app-item .app-info h4 {
    margin: 0;
    font-size: 12px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-item .app-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.search-count {
    font-size: 10px;
    color: #007AFF;
    background-color: #E3F2FD;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
}

.category {
    font-size: 10px;
    color: #666;
    white-space: nowrap;
}

.current-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.current-icon img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.basic-info {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.basic-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.basic-fields .form-group {
    margin: 0;  /* 移除默认的外边距 */
}

.basic-fields input,
.basic-fields select {
    margin-top: 4px;  /* 减小标签和输入框的间距 */
}

.app-edit-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.form-group textarea {
    resize: vertical;
}

.apps-list::-webkit-scrollbar {
    width: 4px;
}

.apps-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.apps-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

.apps-list::-webkit-scrollbar-thumb:hover {
    background: #999;
}

@media (max-width: 768px) {
    .apps-list {
        grid-template-columns: 1fr;
    }
}

.filter-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.category-select {
    padding: 8px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 6px;
    font-size: 14px;
    color: #1d1d1f;
    background-color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.category-select:hover {
    border-color: #0066cc;
}

.category-select:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 2px rgba(0,102,204,0.1);
}

.search-form {
    flex: 1;
}
</style>

<script>
// 添加通知显示函数
function showNotification(message, type = 'success') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.textContent = message;
    
    notification.style.position = 'fixed';
    notification.style.bottom = '20px';
    notification.style.right = '20px';
    notification.style.padding = '10px 20px';
    notification.style.borderRadius = '4px';
    notification.style.backgroundColor = type === 'success' ? '#4CAF50' : '#f44336';
    notification.style.color = 'white';
    notification.style.zIndex = '1000';
    notification.style.opacity = '0';
    notification.style.transform = 'translateY(20px)';
    notification.style.transition = 'all 0.3s ease';
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.style.opacity = '1';
        notification.style.transform = 'translateY(0)';
    }, 10);
    
    setTimeout(() => {
        notification.style.opacity = '0';
        notification.style.transform = 'translateY(20px)';
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

// 修改表单提交处理函数
document.querySelector('.app-edit-form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    
    fetch(this.action, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showNotification('保存成功', 'success');
        } else {
            showNotification(data.error || '保存失败', 'error');
        }
    })
    .catch(error => {
        showNotification('保存失败，请重试', 'error');
        console.error('Error:', error);
    });
});

// 添加动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeInOut {
        0% { opacity: 0; transform: translateY(20px); }
        10% { opacity: 1; transform: translateY(0); }
        90% { opacity: 1; transform: translateY(0); }
        100% { opacity: 0; transform: translateY(-20px); }
    }
`;
document.head.appendChild(style);

// 添加分类筛选函数
function filterByCategory(categoryId) {
    const searchParams = new URLSearchParams(window.location.search);
    if (categoryId) {
        searchParams.set('category', categoryId);
    } else {
        searchParams.delete('category');
    }
    window.location.href = `${window.location.pathname}?${searchParams.toString()}`;
}
</script>
{% endblock %}