{% extends "admin/base.html" %}

{% block title %}{% if is_new %}新建项目{% else %}编辑项目{% endif %} — {{ site_name }}{% endblock %}

{% block sidebar %}
{% include "admin/partials/sidebar.html" %}
{% endblock %}

{% block content %}
<div class="admin-header-bar">
    <h1 class="admin-page-title">{% if is_new %}新建项目{% else %}编辑项目{% endif %}</h1>
</div>

<form class="admin-form" method="POST"
      action="{% if is_new %}/admin/projects{% else %}/admin/projects/{{ project.id }}{% endif %}">

    <div class="form-group">
        <label class="form-label" for="title">项目名称</label>
        <input type="text" id="title" name="title" class="form-input"
               value="{% if project %}{{ project.title }}{% endif %}" required>
    </div>

    <div class="form-group">
        <label class="form-label" for="slug">URL 标识</label>
        <input type="text" id="slug" name="slug" class="form-input"
               value="{% if project %}{{ project.slug }}{% endif %}" required>
    </div>

    <div class="form-group">
        <label class="form-label" for="description">简要描述</label>
        <textarea id="description" name="description" class="form-input"
            style="min-height: 60px; font-family: inherit;">{% if project %}{{ project.description }}{% endif %}</textarea>
    </div>

    <div class="form-group">
        <label class="form-label" for="content_md">详细内容（Markdown，可选）</label>
        <textarea id="content_md" name="content_md" class="form-textarea"
            style="min-height: 150px;">{% if project %}{{ project.content_md }}{% endif %}</textarea>
    </div>

    <div class="form-group">
        <label class="form-label" for="url">项目链接</label>
        <input type="url" id="url" name="url" class="form-input"
               value="{% if project %}{{ project.url }}{% endif %}"
               placeholder="https://example.com">
    </div>

    <div class="form-group">
        <label class="form-label" for="github_url">GitHub 链接</label>
        <input type="url" id="github_url" name="github_url" class="form-input"
               value="{% if project %}{{ project.github_url }}{% endif %}"
               placeholder="https://github.com/username/repo">
    </div>

    <div class="form-group">
        <label class="form-label" for="tech_stack">技术栈</label>
        <input type="text" id="tech_stack" name="tech_stack" class="form-input"
               value="{% if project %}{{ project.tech_stack }}{% endif %}"
               placeholder="Rust, TypeScript, React（逗号分隔）">
    </div>

    <div class="form-group">
        <label class="form-label" for="cover_image">封面图 URL（可选）</label>
        <input type="text" id="cover_image" name="cover_image" class="form-input"
               value="{% if project %}{{ project.cover_image }}{% endif %}">
    </div>

    <div class="form-group">
        <label class="form-label" for="sort_order">排序权重</label>
        <input type="number" id="sort_order" name="sort_order" class="form-input"
               value="{% if project %}{{ project.sort_order }}{% else %}0{% endif %}"
               style="width: 120px;">
        <p class="form-hint">数值越大越靠前显示。</p>
    </div>

    <div class="form-group">
        <label class="form-checkbox">
            <input type="checkbox" name="published"
                {% if project and project.published %}checked{% endif %}>
            <span>展示</span>
        </label>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            {% if is_new %}创建项目{% else %}保存修改{% endif %}
        </button>
        <a href="/admin/projects" class="btn btn-secondary">取消</a>
    </div>
</form>

<!-- 项目文件管理（仅在编辑时显示） -->
{% if not is_new and project %}
<hr style="margin: 2rem 0; border: none; border-top: 1px solid var(--color-border);">

<h2 style="margin-bottom: 1rem;">项目文件</h2>

{% if files %}
<div class="version-list-admin" style="margin-bottom: 1rem;">
    {% for f in files %}
    <div class="version-item-admin">
        <div class="version-info">
            <strong>{{ f.file_name }}</strong>
            <span style="color: var(--color-text-secondary); font-size: 0.85rem;">
                {{ (f.file_size / 1024) | round(precision=1) }} KB &middot; {{ f.created_at }}
            </span>
        </div>
        <form method="POST" action="/admin/projects/{{ project.id }}/files/{{ f.id }}/delete"
              onsubmit="return confirm('确认删除「{{ f.file_name }}」？')"
              style="display: inline;">
            <button type="submit" class="btn btn-danger btn-sm">删除</button>
        </form>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state" style="padding: 1rem 0;">
    <p>还没有上传文件。</p>
</div>
{% endif %}

<form method="POST" action="/admin/projects/{{ project.id }}/files"
      enctype="multipart/form-data" class="admin-form" style="padding: 1.25rem;"
      id="project-file-form">
    <div style="display: flex; gap: 0.75rem; align-items: center;">
        <input type="file" id="project-file-input" name="file" class="form-input" required
               style="flex: 1; padding: 0.4rem;">
        <button type="submit" class="btn btn-primary btn-sm" id="project-file-btn">上传文件</button>
    </div>
    <div class="upload-progress" id="project-file-progress">
        <div class="upload-progress-bar">
            <div class="upload-progress-fill" id="project-file-progress-fill"></div>
        </div>
        <div class="upload-progress-text" id="project-file-progress-text"></div>
    </div>
    <p class="form-hint" style="margin-top: 0.5rem;">支持任意文件格式，上传后可用于项目下载。</p>
</form>

<script>
document.getElementById('project-file-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var fileInput = document.getElementById('project-file-input');
    var file = fileInput.files[0];
    if (!file) return;

    var btn = document.getElementById('project-file-btn');
    var progressDiv = document.getElementById('project-file-progress');
    var progressFill = document.getElementById('project-file-progress-fill');
    var progressText = document.getElementById('project-file-progress-text');

    btn.disabled = true;
    btn.textContent = '上传中…';
    progressDiv.classList.add('active');

    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/admin/projects/{{ project.id }}/files', true);

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var pct = Math.round((e.loaded / e.total) * 100);
            progressFill.style.width = pct + '%';
            progressText.textContent = pct + '%';
        }
    };

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 400) {
            progressFill.style.width = '100%';
            progressText.textContent = '✅ 上传完成';
            setTimeout(function() { window.location.reload(); }, 500);
        } else {
            progressText.textContent = '上传失败 (HTTP ' + xhr.status + ')';
            btn.disabled = false;
            btn.textContent = '重试';
        }
    };

    xhr.onerror = function() {
        progressText.textContent = '网络错误，上传中断';
        btn.disabled = false;
        btn.textContent = '重试';
    };

    xhr.send(formData);
});
</script>
{% endif %}
{% endblock %}