{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
    .compare-container {
        max-width: 1200px;
        margin: 20px auto;
    }

    .summary-box {
        background: #e7f3ff;
        border: 1px solid #007bff;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .summary-box h3 {
        margin-top: 0;
        color: #004085;
    }

    .change-list {
        list-style: none;
        padding-left: 0;
    }

    .change-list li {
        padding: 5px 0;
    }

    .change-list li.changed {
        color: #856404;
    }

    .change-list li.changed:before {
        content: "✏️ ";
    }

    .change-list li.unchanged {
        color: #155724;
    }

    .change-list li.unchanged:before {
        content: "✓ ";
    }

    .comparison-section {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .comparison-section h3 {
        margin-top: 0;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
    }

    .compare-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 15px;
    }

    .compare-item {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
    }

    .compare-item h4 {
        margin-top: 0;
        color: #495057;
        font-size: 14px;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 8px;
    }

    .compare-item .value {
        margin-top: 10px;
        color: #212529;
    }

    .diff-highlight {
        background: #fff3cd;
        padding: 2px 4px;
        border-radius: 3px;
    }

    .action-buttons {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #dee2e6;
    }

    .btn-restore {
        background: #28a745;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        margin-right: 10px;
        text-decoration: none;
        display: inline-block;
    }

    .btn-restore:hover {
        background: #218838;
        color: white;
    }

    .btn-back {
        background: #6c757d;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
    }

    .btn-back:hover {
        background: #5a6268;
        color: white;
    }

    /* 差异表格样式 */
    .diff-section {
        margin-top: 20px;
        overflow-x: auto;
    }

    .diff-section table {
        font-size: 12px;
        border-collapse: collapse;
        width: 100%;
    }

    .diff-section table td {
        padding: 2px 5px;
        vertical-align: top;
    }

    .diff-section .diff_header {
        background: #007bff;
        color: white;
        font-weight: bold;
        text-align: center;
    }

    .diff-section .diff_next {
        background: #f8f9fa;
    }

    .diff-section .diff_add {
        background: #d4edda;
    }

    .diff-section .diff_chg {
        background: #fff3cd;
    }

    .diff-section .diff_sub {
        background: #f8d7da;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
    &rsaquo; <a href="{% url 'admin:blog_articleversion_changelist' %}">文章版本</a>
    &rsaquo; 对比版本 v{{ version.version_number }}
</div>
{% endblock %}

{% block content %}
<div class="compare-container">
    <h1>版本对比</h1>

    <div class="summary-box">
        <h3>📊 变更摘要</h3>
        <ul class="change-list">
            <li class="{% if diff.title_changed %}changed{% else %}unchanged{% endif %}">
                标题{% if diff.title_changed %} 已修改{% else %} 未变更{% endif %}
            </li>
            <li class="{% if diff.body_changed %}changed{% else %}unchanged{% endif %}">
                正文{% if diff.body_changed %} 已修改{% else %} 未变更{% endif %}
            </li>
            <li class="{% if diff.status_changed %}changed{% else %}unchanged{% endif %}">
                发布状态{% if diff.status_changed %} 已修改{% else %} 未变更{% endif %}
            </li>
            <li class="{% if diff.category_changed %}changed{% else %}unchanged{% endif %}">
                分类{% if diff.category_changed %} 已修改{% else %} 未变更{% endif %}
            </li>
        </ul>
    </div>

    <div class="comparison-section">
        <h3>基本信息对比</h3>
        <div class="compare-grid">
            <div class="compare-item">
                <h4>版本 v{{ version.version_number }}</h4>
                <div class="value">
                    <strong>标题:</strong><br>
                    {% if diff.title_changed %}<span class="diff-highlight">{{ version.title }}</span>
                    {% else %}{{ version.title }}{% endif %}
                </div>
                <div class="value">
                    <strong>创建时间:</strong><br>
                    {{ version.creation_time|date:"Y-m-d H:i:s" }}
                </div>
                <div class="value">
                    <strong>创建者:</strong><br>
                    {{ version.created_by|default:"系统" }}
                </div>
                {% if version.change_summary %}
                <div class="value">
                    <strong>变更说明:</strong><br>
                    {{ version.change_summary }}
                </div>
                {% endif %}
            </div>

            <div class="compare-item">
                <h4>当前版本</h4>
                <div class="value">
                    <strong>标题:</strong><br>
                    {% if diff.title_changed %}<span class="diff-highlight">{{ current.title }}</span>
                    {% else %}{{ current.title }}{% endif %}
                </div>
                <div class="value">
                    <strong>最后修改:</strong><br>
                    {{ current.last_mod_time|date:"Y-m-d H:i:s" }}
                </div>
                <div class="value">
                    <strong>作者:</strong><br>
                    {{ current.author }}
                </div>
            </div>
        </div>
    </div>

    <div class="comparison-section">
        <h3>状态信息对比</h3>
        <div class="compare-grid">
            <div class="compare-item">
                <h4>版本 v{{ version.version_number }}</h4>
                <div class="value">
                    <strong>发布状态:</strong><br>
                    {% if diff.status_changed %}<span class="diff-highlight">
                    {% endif %}
                    {% if version.status == 'p' %}已发布
                    {% elif version.status == 'd' %}草稿
                    {% else %}{{ version.status }}
                    {% endif %}
                    {% if diff.status_changed %}</span>{% endif %}
                </div>
                <div class="value">
                    <strong>评论状态:</strong><br>
                    {% if version.comment_status == 'o' %}开放
                    {% elif version.comment_status == 'c' %}关闭
                    {% else %}{{ version.comment_status }}
                    {% endif %}
                </div>
            </div>

            <div class="compare-item">
                <h4>当前版本</h4>
                <div class="value">
                    <strong>发布状态:</strong><br>
                    {% if diff.status_changed %}<span class="diff-highlight">
                    {% endif %}
                    {% if current.status == 'p' %}已发布
                    {% elif current.status == 'd' %}草稿
                    {% else %}{{ current.status }}
                    {% endif %}
                    {% if diff.status_changed %}</span>{% endif %}
                </div>
                <div class="value">
                    <strong>评论状态:</strong><br>
                    {% if current.comment_status == 'o' %}开放
                    {% elif current.comment_status == 'c' %}关闭
                    {% else %}{{ current.comment_status }}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="comparison-section">
        <h3>分类对比</h3>
        <div class="compare-grid">
            <div class="compare-item">
                <h4>版本 v{{ version.version_number }}</h4>
                <div class="value">
                    {% if diff.category_changed %}<span class="diff-highlight">{{ version.category_name }}</span>
                    {% else %}{{ version.category_name }}{% endif %}
                </div>
            </div>

            <div class="compare-item">
                <h4>当前版本</h4>
                <div class="value">
                    {% if diff.category_changed %}<span class="diff-highlight">{{ current.category.name }}</span>
                    {% else %}{{ current.category.name }}{% endif %}
                </div>
            </div>
        </div>
    </div>

    {% if diff.body_changed and body_diff_html %}
    <div class="comparison-section">
        <h3>正文内容详细对比</h3>
        <p style="color: #666; font-size: 13px; margin-bottom: 10px;">
            🟨 黄色背景 = 修改的行 | 🟩 绿色背景 = 新增的行 | 🟥 红色背景 = 删除的行
        </p>
        <div class="diff-section">
            {{ body_diff_html|safe }}
        </div>
    </div>
    {% endif %}

    <div class="action-buttons">
        <a href="{% url 'admin:restore_article_version' version.id %}" class="btn-restore">🔄 恢复此版本</a>
        <a href="{% url 'admin:blog_articleversion_changelist' %}" class="btn-back">返回列表</a>
    </div>
</div>
{% endblock %}
