{% extends "blog/base.html" %}
{% load static %}

{% block extra_head %}
{# Open Graph 社交分享标签 #}
<meta property="og:type" content="article">
<meta property="og:title" content="{{ post.title }}">
<meta property="og:description" content="{{ post.get_summary|truncatechars:200 }}">
<meta property="og:url" content="{{ request.build_absolute_uri }}">
{% if post.cover_image %}
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}">
{% endif %}
<meta property="article:published_time" content="{{ post.published_at|date:'c' }}">
<meta property="article:author" content="{{ post.author.get_full_name|default:post.author.username }}">
{% if post.category %}
<meta property="article:section" content="{{ post.category.name }}">
{% endif %}
{% for tag in post.tags.all %}
<meta property="article:tag" content="{{ tag.name }}">
{% endfor %}
{# Twitter Card #}
<meta name="twitter:card" content="{% if post.cover_image %}summary_large_image{% else %}summary{% endif %}">
<meta name="twitter:title" content="{{ post.title }}">
<meta name="twitter:description" content="{{ post.get_summary|truncatechars:200 }}">
{% if post.cover_image %}
<meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.cover_image.url }}">
{% endif %}
{# RSS 自动发现 #}
<link rel="alternate" type="application/rss+xml" title="{{ blog_name }}" href="{% url 'blog:feed' %}">
{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb">
    <a href="{% url 'blog:post_list' %}">首页</a>
    <span class="sep">&rsaquo;</span>
    {% if post.category %}
    <a href="{% url 'blog:category_posts' post.category.slug %}">{{ post.category.name }}</a>
    <span class="sep">&rsaquo;</span>
    {% endif %}
    <span class="current">{{ post.title|truncatechars:30 }}</span>
</nav>
{% endblock %}

{% block content %}
<article class="post-detail">
    <header class="post-header">
        <h1 class="post-title">{{ post.title }}</h1>
        <div class="post-meta">
            <span class="author">{{ post.author.get_full_name|default:post.author.username }}</span>
            <span class="date">{{ post.published_at|date:"Y-m-d H:i" }}</span>
            {% if post.category %}
            <a href="{% url 'blog:category_posts' post.category.slug %}" class="category">{{ post.category.name }}</a>
            {% endif %}
            <span class="views">阅读 {{ post.views }}</span>
            <span class="reading-time">约 {{ post.get_reading_time }} 分钟</span>
        </div>
        <div class="post-tags">
            {% for tag in post.tags.all %}
            <a href="{% url 'blog:tag_posts' tag.slug %}" class="tag">{{ tag.name }}</a>
            {% endfor %}
        </div>
    </header>

    {% if post.cover_image %}
    <div class="post-cover-detail">
        <img src="{{ post.cover_image.url }}" alt="{{ post.title }}" loading="lazy">
    </div>
    {% endif %}

    <div class="post-body-wrapper">
        {% if toc %}
        <nav class="post-toc">
            <h4>目录</h4>
            <ul>
                {% for item in toc %}
                <li class="toc-level-{{ item.level }}">
                    <a href="#{{ item.id }}">{{ item.text }}</a>
                </li>
                {% endfor %}
            </ul>
        </nav>
        {% endif %}

        <div class="post-content">
            {{ post.content|safe }}
        </div>
    </div>

    {% if attachments %}
    <section class="post-attachments">
        <h3 class="attachments-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -3px; margin-right: 4px;"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
            附件下载
        </h3>
        <div class="attachments-list">
            {% for file in attachments %}
            <div class="attachment-item">
                <div class="attachment-info">
                    <span class="attachment-name">{{ file.original_name }}</span>
                    {% if file.description %}<span class="attachment-desc">{{ file.description }}</span>{% endif %}
                </div>
                <div class="attachment-meta">
                    <span class="attachment-size">{{ file.get_file_size_display }}</span>
                    <span class="attachment-count">{{ file.download_count }} 次下载</span>
                    <a href="{% url 'blog:download' file.pk %}" class="attachment-download-btn" target="_blank">下载</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <nav class="post-nav">
        {% if prev_post %}
        <a href="{% url 'blog:post_detail' prev_post.slug %}" class="prev">&larr; {{ prev_post.title }}</a>
        {% endif %}
        {% if next_post %}
        <a href="{% url 'blog:post_detail' next_post.slug %}" class="next">{{ next_post.title }} &rarr;</a>
        {% endif %}
    </nav>

    <div class="share-buttons">
        <span class="share-label">分享到：</span>
        <a href="https://service.weibo.com/share/share.php?url={{ request.build_absolute_uri }}&title={{ post.title|urlencode }}" target="_blank" rel="noopener" class="share-btn weibo" title="微博">微博</a>
        <a href="https://connect.qq.com/widget/shareqq/index.html?url={{ request.build_absolute_uri }}&title={{ post.title|urlencode }}" target="_blank" rel="noopener" class="share-btn qq" title="QQ">QQ</a>
        <a href="javascript:void(0)" onclick="navigator.clipboard.writeText('{{ request.build_absolute_uri }}').then(function(){alert('链接已复制')})" class="share-btn copy" title="复制链接">复制链接</a>
    </div>
</article>

<section class="comments-section">
    <h3>评论 ({{ comments.count }})</h3>

    {% for comment in comments %}
    <div class="comment" id="comment-{{ comment.pk }}">
        <div class="comment-header">
            <strong>{{ comment.name }}</strong>
            <span class="date">{{ comment.created_at|date:"Y-m-d H:i" }}</span>
        </div>
        <p>{{ comment.content }}</p>
        <button class="reply-btn" onclick="toggleReply({{ comment.pk }})">回复</button>

        {# 回复列表 #}
        {% for reply in comment.get_replies %}
        <div class="comment reply" id="comment-{{ reply.pk }}">
            <div class="comment-header">
                <strong>{{ reply.name }}</strong>
                <span class="date">{{ reply.created_at|date:"Y-m-d H:i" }}</span>
                <span class="reply-to">回复 {{ comment.name }}</span>
            </div>
            <p>{{ reply.content }}</p>
        </div>
        {% endfor %}

        {# 回复表单 #}
        <form method="post" class="comment-form reply-form" id="reply-form-{{ comment.pk }}" style="display:none">
            {% csrf_token %}
            <input type="hidden" name="parent_id" value="{{ comment.pk }}">
            <h4>回复 {{ comment.name }}</h4>
            <div class="form-row">
                <input type="text" name="name" placeholder="昵称 *" required>
                <input type="email" name="email" placeholder="邮箱（选填）">
            </div>
            <textarea name="content" rows="3" placeholder="写下你的回复..." required></textarea>
            <button type="submit" class="btn btn-sm">提交回复</button>
        </form>
    </div>
    {% empty %}
    <p class="no-comments">暂无评论，来说点什么吧！</p>
    {% endfor %}

    <form method="post" class="comment-form">
        {% csrf_token %}
        <h4>发表评论</h4>
        <div class="form-row">
            <input type="text" name="name" placeholder="昵称 *" required>
            <input type="email" name="email" placeholder="邮箱（选填）">
        </div>
        <textarea name="content" rows="4" placeholder="写下你的评论..." required></textarea>
        <button type="submit" class="btn">提交评论</button>
    </form>
</section>

<script>
function toggleReply(id) {
    var form = document.getElementById('reply-form-' + id);
    if (form) {
        form.style.display = form.style.display === 'none' ? 'block' : 'none';
    }
}
</script>
{% endblock %}