{% extends 'base.html' %}
{% load static %}

{% block title %}采集详情 - 深度分析报告{% endblock %}

{% block head %}
<style>
    .result-card {
        border-radius: 25px;
        overflow: hidden;
        border: none;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        background: #fff;
    }
    .status-panel {
        background: #f8f9fa;
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 30px;
    }
    .table thead th {
        background: #f1f3f5;
        border: none;
        padding: 18px;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 1px;
    }
    .table tbody td {
        padding: 18px;
        border-bottom: 1px solid #f8f9fa;
    }
    .needs-paste-box {
        background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
        border: 2px dashed #ffc1c1;
        border-radius: 20px;
        padding: 30px;
    }
    .btn-export {
        border-radius: 12px;
        padding: 10px 20px;
        font-weight: 600;
        transition: all 0.3s;
    }
    .btn-export:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row mb-5 align-items-center">
        <div class="col-md-7">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-xhs">系统首页</a></li>
                    <li class="breadcrumb-item active">数据采集终端</li>
                </ol>
            </nav>
            <h2 class="fw-bold"><i class="bi bi-shield-shaded me-2"></i> 数据分析实时视图</h2>
            <p class="text-muted">任务编码: <span class="text-dark fw-bold">{{ task.id }}</span> | 类型: {{ task.get_task_type_display }}</p>
        </div>
        <div class="col-md-5 text-md-end">
            <div class="d-inline-flex gap-2">
                <a href="{% url 'export_task' task.id 'excel' %}" class="btn btn-success btn-export shadow-sm">
                    <i class="bi bi-file-earmark-excel me-1"></i> EXCEL 导出
                </a>
                <a href="{% url 'export_task' task.id 'word' %}" class="btn btn-primary btn-export shadow-sm">
                    <i class="bi bi-file-earmark-word me-1"></i> WORD 导出
                </a>
            </div>
        </div>
    </div>

    {% if needs_paste %}
    <div class="needs-paste-box mb-5">
        <div class="row align-items-center">
            <div class="col-md-1 text-center d-none d-md-block">
                <i class="bi bi-activity text-xhs display-4"></i>
            </div>
            <div class="col-md-8">
                <h5 class="fw-bold text-danger"><i class="bi bi-shield-exclamation me-2"></i> 触发协议保护限制</h5>
                <p class="mb-0 text-muted">
                    由于小红书官方对 <strong>{{ task.raw_text|truncatechars:30 }}</strong> 启用了高级加密协议，当前自动引擎受限。
                    <br>
                    <strong>解决方案：</strong> 请进入该页面执行 <strong>全选(Ctrl+A)</strong> 并 <strong>复制(Ctrl+C)</strong>，然后返回首页粘贴全文。
                    系统将调用「高精度本地解密模块」完成 100% 数据还原。
                </p>
            </div>
            <div class="col-md-3 text-md-end mt-3 mt-md-0">
                <a href="{% url 'home' %}" class="btn btn-xhs rounded-pill px-4">
                    <i class="bi bi-arrow-repeat me-1"></i> 立即修复提取
                </a>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="card result-card p-4 p-md-5">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h4 class="fw-bold mb-0">解析结果 ({{ users.count }})</h4>
            <div class="badge bg-soft-success text-success p-2 px-3 rounded-pill">
                <i class="bi bi-cpu-fill me-1"></i> 引擎状态: 运行正常
            </div>
        </div>

        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th style="width: 30%">昵称 / 用户标识</th>
                        <th style="width: 25%">小红书 ID</th>
                        <th style="width: 45%">采集内容 / 备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="bg-soft-danger text-xhs rounded-circle p-2 me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                    <i class="bi bi-person-fill"></i>
                                </div>
                                <div class="fw-bold">{{ user.nickname }}</div>
                            </div>
                        </td>
                        <td>
                            {% if user.xhs_id %}
                                <span class="badge bg-light text-dark border p-2 font-monospace">{{ user.xhs_id }}</span>
                            {% else %}
                                <span class="text-muted small">自动分配中</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if user.profile_url %}
                                <a href="{{ user.profile_url }}" target="_blank" class="btn btn-link btn-sm text-decoration-none p-0">
                                    <i class="bi bi-link-45deg"></i> 访问加密主页
                                </a>
                            {% elif user.comment_text %}
                                <div class="small text-muted border-start ps-3" style="max-height: 60px; overflow-y: auto;">
                                    {{ user.comment_text }}
                                </div>
                            {% else %}
                                <span class="badge bg-soft-info text-info">已锁定特征</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="3" class="text-center py-5">
                            <div class="opacity-25 mb-3">
                                <i class="bi bi-search" style="font-size: 4rem;"></i>
                            </div>
                            <h5 class="text-muted">待进一步指令</h5>
                            <p class="text-muted small">系统已准备绪，请尝试输入数据源或粘贴网页全文</p>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="mt-5 p-4 bg-dark text-white rounded-4 shadow-sm">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h6 class="fw-bold mb-1">系统公告</h6>
                <p class="mb-0 small opacity-75">本系统仅供金融数据分析使用，严禁用于任何非法侵扰行为。所有采集任务均已进行本地脱敏处理。</p>
            </div>
            <div class="col-md-4 text-md-end mt-3 mt-md-0">
                <a href="/admin/" class="btn btn-outline-warning btn-sm rounded-pill px-4">
                    <i class="bi bi-gear-fill me-1"></i> 管理后台
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}