{% extends 'admin_panel/base.html' %}
{% load static %}
{% load summonote_filters %}

{% block page_title %}Detail Berita - {{ news.title }}{% endblock %}

{% block extra_css %}
<style>
    .detail-card {
        background: white;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    
    /* Summernote Content Styling */
    .content-preview h1, .content-preview h2, .content-preview h3,
    .content-preview h4, .content-preview h5, .content-preview h6 {
        margin: 20px 0 10px 0;
        font-weight: 600;
        color: #333;
    }
    
    .content-preview h1 { font-size: 28px; }
    .content-preview h2 { font-size: 24px; }
    .content-preview h3 { font-size: 20px; }
    .content-preview h4 { font-size: 18px; }
    .content-preview h5 { font-size: 16px; }
    .content-preview h6 { font-size: 14px; }
    
    .content-preview p {
        margin: 10px 0;
        line-height: 1.8;
    }
    
    .content-preview ul, .content-preview ol {
        margin: 10px 0;
        padding-left: 30px;
    }
    
    .content-preview li {
        margin: 5px 0;
    }
    
    .content-preview a {
        color: #007bff;
        text-decoration: none;
    }
    
    .content-preview a:hover {
        text-decoration: underline;
    }
    
    .content-preview blockquote {
        border-left: 4px solid #007bff;
        margin: 15px 0;
        padding: 10px 20px;
        background: #f8f9fa;
        font-style: italic;
    }
    
    .content-preview pre {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        padding: 15px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        overflow-x: auto;
    }
    
    .content-preview table {
        border-collapse: collapse;
        width: 100%;
        margin: 10px 0;
    }
    
    .content-preview table td, .content-preview table th {
        border: 1px solid #dee2e6;
        padding: 8px 12px;
        text-align: left;
    }
    
    .content-preview table th {
        background: #f8f9fa;
        font-weight: 600;
    }
    
    .content-preview hr {
        border: none;
        border-top: 2px solid #dee2e6;
        margin: 20px 0;
    }
    
    /* SumoNote Content Styling */
    .sumonote-content {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1.5rem;
        margin-top: 1rem;
        min-height: 100px;
    }
    
    .sumonote-content h1,
    .sumonote-content h2,
    .sumonote-content h3,
    .sumonote-content h4,
    .sumonote-content h5,
    .sumonote-content h6 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        color: #495057;
        font-weight: 600;
    }
    
    .sumonote-content p {
        margin-bottom: 0.5rem;
        line-height: 1.6;
        color: #6c757d;
    }
    
    .sumonote-content ul,
    .sumonote-content ol {
        margin-bottom: 0.5rem;
        padding-left: 1.5rem;
    }
    
    .sumonote-content li {
        margin-bottom: 0.25rem;
        color: #6c757d;
    }
    
    .sumonote-content strong,
    .sumonote-content b {
        font-weight: 600;
        color: #495057;
    }
    
    .sumonote-content em,
    .sumonote-content i {
        font-style: italic;
        color: #6c757d;
    }
    
    .sumonote-content blockquote {
        border-left: 4px solid #007bff;
        padding-left: 1rem;
        margin: 1rem 0;
        color: #6c757d;
        font-style: italic;
    }
    
    .sumonote-content code {
        background: #e9ecef;
        padding: 0.2rem 0.4rem;
        border-radius: 3px;
        font-family: 'Courier New', monospace;
        font-size: 0.9em;
        color: #e83e8c;
    }
    
    .sumonote-content pre {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 4px;
        padding: 1rem;
        overflow-x: auto;
        margin: 1rem 0;
    }
    
    .sumonote-content pre code {
        background: none;
        padding: 0;
        color: #495057;
    }
    
    .sumonote-content table {
        width: 100%;
        border-collapse: collapse;
        margin: 1rem 0;
    }
    
    .sumonote-content th,
    .sumonote-content td {
        border: 1px solid #dee2e6;
        padding: 0.5rem;
        text-align: left;
    }
    
    .sumonote-content th {
        background: #f8f9fa;
        font-weight: 600;
        color: #495057;
    }
    
    .sumonote-content img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
        margin: 0.5rem 0;
    }
    
    .sumonote-content a {
        color: #007bff;
        text-decoration: none;
    }
    
    .sumonote-content a:hover {
        color: #0056b3;
        text-decoration: underline;
    }
    .news-header {
        border-bottom: 2px solid #f8f9fa;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }
    .news-title {
        font-size: 2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 1rem;
        line-height: 1.3;
    }
    .news-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        color: #6c757d;
        font-size: 0.9rem;
    }
    .meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    .status-badge {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
        border-radius: 20px;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1.5rem;
        border-radius: 10px;
        text-align: center;
    }
    .stat-card .number {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 0.5rem;
    }
    .stat-card .label {
        font-size: 0.9rem;
        opacity: 0.9;
    }
    .chart-container {
        background: white;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .content-preview img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1rem 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .comment-item {
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        background: white;
    }
    .comment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }
    .comment-author {
        font-weight: 600;
        color: #333;
    }
    .comment-date {
        color: #6c757d;
        font-size: 0.8rem;
    }
    .comment-content {
        color: #555;
        line-height: 1.5;
    }
    .action-buttons {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .device-breakdown {
        display: flex;
        justify-content: space-around;
        margin-top: 1rem;
    }
    .device-item {
        text-align: center;
        padding: 1rem;
        background: #f8f9fa;
        border-radius: 8px;
        flex: 1;
        margin: 0 0.5rem;
    }
    .device-item .icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    .device-item .count {
        font-size: 1.5rem;
        font-weight: bold;
        color: #007bff;
    }
    .device-item .label {
        font-size: 0.8rem;
        color: #6c757d;
        text-transform: uppercase;
    }
    .tab-content {
        padding: 1.5rem 0;
    }
    .nav-tabs {
        border-bottom: 2px solid #dee2e6;
        margin-bottom: 0;
    }
    .nav-tabs .nav-link {
        border-radius: 8px 8px 0 0;
        border: none;
        color: #6c757d;
        font-weight: 500;
        padding: 0.75rem 1.5rem;
        transition: all 0.3s ease;
    }
    .nav-tabs .nav-link:hover {
        border: none;
        color: #007bff;
        background: #f8f9fa;
    }
    .nav-tabs .nav-link.active {
        background: #007bff;
        color: white;
        border: none;
    }
    .nav-tabs .nav-link.active:hover {
        background: #0056b3;
        color: white;
    }
    .tab-content {
        border: none;
        padding: 0;
    }
    .tab-pane {
        display: none;
    }
    .tab-pane.active {
        display: block;
    }
    .share-breakdown {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .share-item {
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
        text-align: center;
        flex: 1;
        min-width: 120px;
    }
    .share-item .platform {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.5rem;
    }
    .share-item .count {
        font-size: 1.2rem;
        color: #007bff;
    }
    
</style>
{% endblock %}

{% block content %}
{% csrf_token %}
<div class="container-fluid">

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-4 pb-3 mb-4">
        <div>
            <h1 class="h3 mb-1 font-weight-bold text-dark">Detail Berita</h1>
            <p class="text-muted mb-0">{{ news.title|truncatechars:80 }}</p>
        </div>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group" role="group">
                <a href="{% url 'admin_panel:news_list' %}" class="btn btn-outline-secondary btn-lg">
                    <i class="fas fa-arrow-left mr-2"></i>Kembali
                </a>
                <a href="{% url 'admin_panel:news_edit' news.pk %}" class="btn btn-outline-warning btn-lg">
                    <i class="fas fa-edit mr-2"></i>Edit
                </a>
                <a href="{{ news.get_absolute_url }}" class="btn btn-outline-primary btn-lg" target="_blank">
                    <i class="fas fa-external-link-alt mr-2"></i>Lihat Publik
                </a>
            </div>
        </div>
    </div>

    <div class="detail-card news-header">
        <h1 class="news-title">{{ news.title }}</h1>
        <div class="news-meta">
            <div class="meta-item">
                <i class="fas fa-user"></i>
                <span>{{ news.author.username }}</span>
            </div>
            <div class="meta-item">
                <i class="fas fa-calendar"></i>
                <span>{{ news.created_at|date:"d M Y H:i" }}</span>
            </div>
            <div class="meta-item">
                <i class="fas fa-tag"></i>
                <span>{{ news.category.name }}</span>
            </div>
            <div class="meta-item">
                <span class="badge status-badge badge-{% if news.status == 'published' %}success{% elif news.status == 'draft' %}warning{% else %}secondary{% endif %}">
                    {{ news.get_status_display }}
                </span>
            </div>
            {% if news.is_featured %}
            <div class="meta-item">
                <span class="badge badge-info">Featured</span>
            </div>
            {% endif %}
            {% if news.is_breaking %}
            <div class="meta-item">
                <span class="badge badge-danger">Breaking News</span>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="number">{{ total_views }}</div>
            <div class="label">Total Views</div>
        </div>
        <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
            <div class="number">{{ total_likes }}</div>
            <div class="label">Total Likes</div>
        </div>
        <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
            <div class="number">{{ total_shares }}</div>
            <div class="label">Total Shares</div>
        </div>
        <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
            <div class="number">{{ total_comments }}</div>
            <div class="label">Total Komentar</div>
        </div>
    </div>

    <ul class="nav nav-tabs" id="newsTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="content-tab" data-toggle="tab" href="#content" role="tab" aria-controls="content" aria-selected="true">
                <i class="fas fa-file-alt mr-2"></i>Konten
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="comments-tab" data-toggle="tab" href="#comments" role="tab" aria-controls="comments" aria-selected="false">
                <i class="fas fa-comments mr-2"></i>Komentar
            </a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="seo-tab" data-toggle="tab" href="#seo" role="tab" aria-controls="seo" aria-selected="false">
                <i class="fas fa-search mr-2"></i>SEO
            </a>
        </li>
    </ul>

    <div class="tab-content" id="newsTabContent">

        <div class="tab-pane fade show active" id="content" role="tabpanel" aria-labelledby="content-tab">
            <div class="detail-card">
                {% if news.featured_image %}
                <div class="text-center mb-4">
                    <img src="{{ news.featured_image.url }}" alt="{{ news.title }}" 
                         class="img-fluid rounded shadow-sm" style="max-height: 400px; width: auto;">
                </div>
                {% endif %}

                {% if news.excerpt %}
                <div class="alert alert-info">
                    <h6><i class="fas fa-quote-left"></i> Ringkasan</h6>
                    <div class="mb-0">{{ news.excerpt|safe }}</div>
                </div>
                {% endif %}

                <div class="content-preview">
                    <div class="sumonote-content">
                        {{ news.content|safe }}
                    </div>
                </div>

                {% if news.tags.exists %}
                <div class="mt-4">
                    <h6><i class="fas fa-tags"></i> Tags</h6>
                    {% for tag in news.tags.all %}
                    <span class="badge badge-primary me-1">{{ tag.name }}</span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
        </div>

        <div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">
            <div class="detail-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div>
                        <h5 class="mb-1 font-weight-bold text-dark">
                            <i class="fas fa-comments mr-2"></i>Komentar
                        </h5>
                        <p class="text-muted mb-0">Total {{ comments|length }} komentar</p>
                    </div>
                    <div class="btn-group" role="group">
                        <a href="{% url 'admin_panel:news_comments' %}?news={{ news.id }}" class="btn btn-primary">
                            <i class="fas fa-cog mr-2"></i>Kelola Komentar
                        </a>
                        <button class="btn btn-outline-secondary" id="refreshCommentsBtn">
                            <i class="fas fa-sync-alt mr-2"></i>Refresh
                        </button>
                    </div>
                </div>

                {% for comment in comments %}
                <div class="comment-item">
                    <div class="comment-header">
                        <div class="d-flex align-items-center">
                            <div class="bg-primary rounded-circle d-flex align-items-center justify-content-center mr-3"
                                 style="width: 40px; height: 40px;">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <div class="comment-author">{{ comment.author_name }}</div>
                                <small class="text-muted">{{ comment.author_email }}</small>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="comment-date mr-3">{{ comment.created_at|timesince }} yang lalu</span>
                            <span class="badge badge-{% if comment.status == 'approved' %}success{% elif comment.status == 'pending' %}warning{% else %}danger{% endif %}">
                                {{ comment.get_status_display }}
                            </span>
                        </div>
                    </div>
                    <div class="comment-content mt-3">{{ comment.content }}</div>
                    {% if comment.parent %}
                    <div class="mt-3 p-2 bg-light rounded">
                        <small class="text-muted">
                            <i class="fas fa-reply mr-1"></i>Balasan untuk: {{ comment.parent.author_name }}
                        </small>
                    </div>
                    {% endif %}
                    <div class="mt-3">
                        <div class="btn-group btn-group-sm" role="group">
                            {% if comment.status == 'pending' %}
                            <button class="btn btn-success btn-sm comment-action" data-action="approve" data-id="{{ comment.id }}">
                                <i class="fas fa-check mr-1"></i>Approve
                            </button>
                            {% endif %}
                            {% if comment.status == 'approved' %}
                            <button class="btn btn-warning btn-sm comment-action" data-action="reject" data-id="{{ comment.id }}">
                                <i class="fas fa-times mr-1"></i>Reject
                            </button>
                            {% endif %}
                            <button class="btn btn-danger btn-sm comment-action" data-action="delete" data-id="{{ comment.id }}">
                                <i class="fas fa-trash mr-1"></i>Hapus
                            </button>
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-5">
                    <i class="fas fa-comments fa-4x text-muted mb-3"></i>
                    <h5 class="text-muted">Belum ada komentar</h5>
                    <p class="text-muted">Komentar akan muncul di sini setelah ada yang berkomentar.</p>
                </div>
                {% endfor %}
            </div>
        </div>

        <div class="tab-pane fade" id="seo" role="tabpanel" aria-labelledby="seo-tab">
            <div class="detail-card">
                <h5><i class="fas fa-search"></i> SEO Information</h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label class="form-label">Meta Title</label>
                            <input type="text" class="form-control" value="{{ news.meta_title|default:news.title }}" readonly>
                            <div class="form-text">{{ news.meta_title|length|default:news.title|length }}/60 karakter</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-3">
                            <label class="form-label">Meta Keywords</label>
                            <input type="text" class="form-control" value="{{ news.meta_keywords }}" readonly>
                        </div>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">Meta Description</label>
                    <textarea class="form-control" rows="3" readonly>{{ news.meta_description|default:news.excerpt }}</textarea>
                    <div class="form-text">{{ news.meta_description|length|default:news.excerpt|length }}/160 karakter</div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">URL Slug</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{ request.scheme }}://{{ request.get_host }}/news/</span>
                        </div>
                        <input type="text" class="form-control" value="{{ news.slug }}" readonly>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label">Reading Time</label>
                    <input type="text" class="form-control" value="{{ news.reading_time }} menit" readonly>
                </div>
            </div>
        </div>
    </div>

    <div class="detail-card">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <h6 class="mb-2">Quick Actions</h6>
                <div class="action-buttons">
                    <a href="{% url 'admin_panel:news_edit' news.pk %}" class="btn btn-warning">
                        <i class="fas fa-edit"></i> Edit Berita
                    </a>
                    <a href="{{ news.get_absolute_url }}" class="btn btn-primary" target="_blank">
                        <i class="fas fa-external-link-alt"></i> Lihat Publik
                    </a>
                    <button class="btn btn-info" id="duplicateNewsBtn" data-id="{{ news.id }}">
                        <i class="fas fa-copy"></i> Duplikat
                    </button>
                    <button class="btn btn-danger" id="deleteNewsBtn" data-id="{{ news.id }}" data-title="{{ news.title }}">
                        <i class="fas fa-trash"></i> Hapus
                    </button>
                </div>
            </div>
            <div class="text-right">
                <div class="text-muted">
                    <small>Dibuat: {{ news.created_at|date:"d M Y H:i" }}</small><br>
                    <small>Diupdate: {{ news.updated_at|date:"d M Y H:i" }}</small>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Konfirmasi Hapus</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Apakah Anda yakin ingin menghapus berita <strong id="deleteNewsTitle"></strong>?</p>
                <p class="text-danger">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">Hapus</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>document.addEventListener('DOMContentLoaded', function() {

    $('#newsTabs a[data-toggle="tab"]').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    const refreshBtn = document.getElementById('refreshCommentsBtn');
    if (refreshBtn) {
        refreshBtn.addEventListener('click', function() {
            location.reload();
        });
    }

    const duplicateBtn = document.getElementById('duplicateNewsBtn');
    if (duplicateBtn) {
        duplicateBtn.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            duplicateNews(id);
        });
    }

    const deleteBtn = document.getElementById('deleteNewsBtn');
    if (deleteBtn) {
        deleteBtn.addEventListener('click', function() {
            const id = this.getAttribute('data-id');
            const title = this.getAttribute('data-title');
            deleteNews(id, title);
        });
    }

    document.querySelectorAll('.comment-action').forEach(button => {
        button.addEventListener('click', function() {
            const action = this.getAttribute('data-action');
            const commentId = this.getAttribute('data-id');

            switch(action) {
                case 'approve':
                    approveComment(commentId);
                    break;
                case 'reject':
                    rejectComment(commentId);
                    break;
                case 'delete':
                    deleteComment(commentId);
                    break;
            }
        });
    });
});

function deleteNews(id, title) {
    document.getElementById('deleteNewsTitle').textContent = title;
    document.getElementById('confirmDelete').onclick = function() {
        fetch(`{% url 'admin_panel:news_delete' 0 %}`.replace('0', id), {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                window.location.href = '{% url "admin_panel:news_list" %}';
            } else {
                showWarning('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showWarning('Terjadi kesalahan saat menghapus berita');
        });
    };
    $('#deleteModal').modal('show');
}

function duplicateNews(id) {
    if (confirm('Apakah Anda yakin ingin menduplikat berita ini?')) {

        window.location.href = `{% url 'admin_panel:news_duplicate' 0 %}`.replace('0', id);
    }
}

function refreshComments() {
    location.reload();
}

function approveComment(commentId) {
    if (confirm('Apakah Anda yakin ingin menyetujui komentar ini?')) {
        updateCommentStatus(commentId, 'approved');
    }
}

function rejectComment(commentId) {
    if (confirm('Apakah Anda yakin ingin menolak komentar ini?')) {
        updateCommentStatus(commentId, 'rejected');
    }
}

function deleteComment(commentId) {
    if (confirm('Apakah Anda yakin ingin menghapus komentar ini?')) {
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]');
        if (!csrfToken) {
            showWarning('CSRF token tidak ditemukan. Silakan refresh halaman.');
            return;
        }

        fetch(`{% url 'admin_panel:news_comment_delete' 0 %}`.replace('0', commentId), {
            method: 'DELETE',
            headers: {
                'X-CSRFToken': csrfToken.value
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                showWarning('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showWarning('Terjadi kesalahan saat menghapus komentar: ' + error.message);
        });
    }
}

function updateCommentStatus(commentId, status) {

    location.reload();
}
</script>
{% endblock %}