{% extends 'core/base.html' %}
{% load humanize %}

{% block content %}

<style>
.api-float-panel {
    position: fixed;
    top: 80px;
    right: 16px;
    width: 280px;
    z-index: 1050;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.api-float-panel.collapsed {
    transform: translateX(260px);
}
.api-float-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: #fff;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    cursor: default;
}
.api-float-panel .panel-body {
    padding: 10px 12px;
    font-size: 12px;
    max-height: 400px;
    overflow-y: auto;
}
.api-float-panel .panel-body code {
    font-size: 11px;
    background: #f8f9fa;
    padding: 1px 4px;
    border-radius: 3px;
    color: #d63384;
}
.api-float-panel .panel-body pre {
    font-size: 11px;
    margin: 4px 0 0;
    padding: 6px 8px;
    border-radius: 4px;
    line-height: 1.4;
}
.api-float-panel .btn-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.api-float-panel .btn-toggle:hover {
    opacity: 1;
}
.api-float-panel .panel-tab {
    display: none;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: #fff;
    padding: 10px 6px;
    border-radius: 6px 0 0 6px;
    font-size: 12px;
    cursor: pointer;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    z-index: 1049;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: opacity 0.3s;
}
.api-float-panel.collapsed .panel-tab {
    display: block;
}
.api-float-panel.collapsed .panel-header,
.api-float-panel.collapsed .panel-body {
    display: none;
}
@media (max-width: 768px) {
    .api-float-panel {
        width: 240px;
        right: 4px;
        top: 70px;
    }
    .api-float-panel.collapsed {
        transform: translateX(225px);
    }
}
</style>

<!-- 浮动API说明面板 -->
<div class="api-float-panel" id="apiFloatPanel">
    <div class="panel-tab" onclick="toggleApiPanel()" title="展开API说明">API 说明</div>
    <div class="panel-header">
        <span><i class="bi bi-terminal me-1"></i>API 说明</span>
        <button class="btn-toggle" onclick="toggleApiPanel()" title="最小化">−</button>
    </div>
    <div class="panel-body">
        <p class="mb-1"><strong>端点:</strong></p>
        <code class="d-block mb-2">POST /api/v1/temp-upload/</code>
        <p class="mb-1"><strong>参数:</strong></p>
        <ul class="small mb-2 ps-3">
            <li><code>title</code> 文件标题</li>
            <li><code>file</code> 文件(≤500MB)</li>
            <li><code>expire_type</code> expire_1h / 1d / 7d</li>
        </ul>
        <p class="mb-1"><strong>cURL:</strong></p>
        <pre class="bg-dark text-white"><code>curl -X POST \
  -F "file=@f.pdf" \
  -F "title=文件" \
  -F "expire_type=expire_1d" \
  /api/v1/temp-upload/</code></pre>
    </div>
</div>

<script>
function toggleApiPanel() {
    var panel = document.getElementById('apiFloatPanel');
    panel.classList.toggle('collapsed');
}
</script>

<!-- 页面标题 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0">
        <i class="bi bi-globe me-2 text-info"></i>公开内容
    </h2>
    <div class="d-flex align-items-center gap-3">
        <div class="dropdown">
            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="bi bi-cloud-arrow-up me-1"></i>API上传
            </button>
            <ul class="dropdown-menu dropdown-menu-end p-3" style="min-width: 350px;">
                <li>
                    <h6 class="dropdown-header">临时文件上传 API</h6>
                    <p class="small text-muted mb-2">端点: <code>POST /api/v1/temp-upload/</code></p>
                    <hr>
                    <p class="small mb-1"><strong>参数:</strong></p>
                    <ul class="small mb-2">
                        <li><code>title</code> - 文件标题</li>
                        <li><code>file</code> - 文件(最大500MB)</li>
                        <li><code>expire_type</code> - expire_1h / expire_1d / expire_7d</li>
                    </ul>
                    <p class="small mb-1"><strong>cURL示例:</strong></p>
                    <pre class="small bg-dark text-white p-2 rounded"><code>curl -X POST -F "file=@f.pdf" -F "title=文件" -F "expire_type=expire_1d" /api/v1/temp-upload/</code></pre>
                </li>
            </ul>
        </div>
        {% if user.is_authenticated %}
        <a href="{% url 'add_public_content' %}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>添加内容
        </a>
        {% endif %}
    </div>
</div>

<!-- 临时发言区域 -->
<div class="card mb-4">
    <div class="card-header bg-secondary text-white">
        <h5 class="card-title mb-0">
            <i class="bi bi-chat-left-text me-2"></i>临时发言
            <span class="badge bg-light text-dark ms-2">留言仅保留10分钟</span>
        </h5>
    </div>
    <div class="card-body">
        <form method="post" action="{% url 'public_content' %}" class="mb-3">
            {% csrf_token %}
            <div class="row g-2">
                <div class="col-md-3">
                    <input type="text" name="username" class="form-control" maxlength="20" placeholder="用户名（可选）">
                </div>
                <div class="col-md-7">
                    <input type="text" name="content" class="form-control" maxlength="1000" placeholder="说点什么...（最多1000字节）" required>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-send me-1"></i>发送
                    </button>
                </div>
            </div>
        </form>

        {% if temp_messages %}
        <div class="list-group mt-3">
            {% for message in temp_messages %}
            <div class="list-group-item">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        <h6 class="mb-1">
                            <i class="bi bi-person me-1"></i>{{ message.username|default:"匿名" }}
                            <small class="text-muted ms-2">
                                <i class="bi bi-clock me-1"></i>{{ message.created_at|naturaltime }}
                            </small>
                        </h6>
                        <p class="mb-1">{{ message.content }}</p>
                        <small class="text-muted">
                            <i class="bi bi-geo-alt me-1"></i>IP: {{ message.ip_address|default:"未知" }}
                        </small>
                    </div>
                    <span class="badge bg-secondary">
                        {{ message.created_at|naturaltime }}
                    </span>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-muted text-center mb-0">
            <i class="bi bi-chat-left me-1"></i>暂无留言
        </p>
        {% endif %}
    </div>
</div>

{% if content_by_type %}
    {% for type_name, contents in content_by_type.items %}
    <div class="card mb-4">
        <div class="card-header bg-info text-dark d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">
                <i class="bi bi-folder me-2"></i>{{ type_name }}
            </h5>
            <span class="badge bg-light text-info">{{ contents|length }} 项</span>
        </div>
        <div class="card-body">
            <div class="list-group">
                {% for content in contents %}
                <div class="list-group-item">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6 class="mb-2">
                                {% if content.url %}
                                <a href="{{ content.url }}" target="_blank" class="text-decoration-none">
                                    <i class="bi bi-link-45deg me-1"></i>{{ content.title }}
                                </a>
                                {% else %}
                                <i class="bi bi-file-earmark-text me-1"></i>{{ content.title }}
                                {% endif %}
                                {% if content.is_temp_file %}
                                <span class="badge bg-warning text-dark ms-2">临时文件</span>
                                {% endif %}
                            </h6>
                            {% if content.content %}
                            <p class="text-muted small mb-2">{{ content.content|truncatechars:200 }}</p>
                            {% endif %}
                            {% if content.file %}
                            <a href="{{ content.file.url }}" class="btn btn-sm btn-outline-primary me-2" target="_blank">
                                <i class="bi bi-download me-1"></i>下载文件
                            </a>
                            {% endif %}
                            {% if content.is_temp_file and content.expire_at %}
                            <span class="badge bg-secondary">
                                <i class="bi bi-clock me-1"></i>{{ content.expire_at|naturaltime }}过期
                            </span>
                            {% endif %}
                        </div>
                        {% if user.is_authenticated %}
                        <div class="btn-group ms-3">
                            <a href="{% url 'edit_public_content' content.id %}" class="btn btn-sm btn-warning" title="编辑">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <a href="{% url 'delete_public_content' content.id %}" class="btn btn-sm btn-danger" title="删除">
                                <i class="bi bi-trash"></i>
                            </a>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}
{% else %}
<div class="text-center py-5">
    <i class="bi bi-inbox text-muted" style="font-size: 5rem;"></i>
    <h5 class="text-muted mt-3">暂无公开内容</h5>
    <p class="text-muted">请稍后再来查看</p>
    {% if user.is_authenticated %}
    <a href="{% url 'add_public_content' %}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i>添加内容
    </a>
    {% endif %}
</div>
{% endif %}

<!-- 临时文件上传表单 - 对人类用户视觉隐藏，agent可访问 -->
<div style="width: 1px; height: 1px; overflow: hidden; position: absolute; left: -9999px;">
    <form method="post" enctype="multipart/form-data" action="{% url 'api_temp_upload' %}">
        {% csrf_token %}
        <input type="text" name="title" placeholder="文件标题">
        <select name="expire_type">
            <option value="expire_1h">1小时</option>
            <option value="expire_1d">1天</option>
            <option value="expire_7d">7天</option>
        </select>
        <input type="file" name="file">
        <button type="submit">上传</button>
    </form>
</div>

<!-- API文档 -->
<div class="card mt-4">
    <div class="card-header bg-dark text-white">
        <h5 class="card-title mb-0">
            <i class="bi bi-terminal me-2"></i>临时文件上传 API
        </h5>
    </div>
    <div class="card-body">
        <h6 class="text-muted">上传文件</h6>
        <p><strong>端点:</strong> <code>POST /api/v1/temp-upload/</code></p>

        <h6 class="text-muted mt-3">参数</h6>
        <table class="table table-sm table-bordered">
            <thead class="table-light">
                <tr>
                    <th>参数名</th>
                    <th>类型</th>
                    <th>必填</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>title</td>
                    <td>string</td>
                    <td>是</td>
                    <td>文件标题</td>
                </tr>
                <tr>
                    <td>file</td>
                    <td>file</td>
                    <td>是</td>
                    <td>文件 (最大500MB)</td>
                </tr>
                <tr>
                    <td>expire_type</td>
                    <td>string</td>
                    <td>是</td>
                    <td>过期时间: expire_1h (1小时) / expire_1d (1天) / expire_7d (7天)</td>
                </tr>
            </tbody>
        </table>

        <h6 class="text-muted mt-3">响应示例</h6>
        <pre class="bg-dark text-white p-3 rounded"><code>{
  "success": true,
  "message": "上传成功",
  "id": 1,
  "file_url": "/media/public_files/xxx.pdf",
  "file_name": "document.pdf",
  "file_size": 1048576,
  "expire_at": "2026-05-25T18:30:00Z",
  "expire_type": "expire_1d"
}</code></pre>

        <h6 class="text-muted mt-3">cURL 示例</h6>
        <pre class="bg-dark text-white p-3 rounded"><code>curl -X POST -F "file=@document.pdf" -F "title=测试文件" -F "expire_type=expire_1d" http://localhost:8000/api/v1/temp-upload/</code></pre>
    </div>
</div>
{% endblock %}