{% extends 'layouts/dashboard.html' %}
{% load static %}

{% block title %}{{ creative.name }} - Creative Detail - Adtlas{% endblock %}

{% block meta_description %}View details for creative: {{ creative.name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/campaigns.css' %}">
<style>
.creative-preview {
    max-width: 100%;
    max-height: 400px;
    border-radius: 0.35rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}
.status-badge {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}
.approval-timeline {
    position: relative;
}
.approval-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e3e6f0;
}
.timeline-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 1.5rem;
}
.timeline-icon {
    position: absolute;
    left: 10px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.performance-metric {
    text-align: center;
    padding: 1rem;
    border-radius: 0.35rem;
    background: #f8f9fc;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'creatives:list' %}">Creatives</a></li>
                    <li class="breadcrumb-item active">{{ creative.name }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">{{ creative.name }}</h1>
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'creatives:update' creative.pk %}" class="btn btn-warning btn-sm">
                <i class="fas fa-edit fa-sm"></i> Edit
            </a>
            <a href="{% url 'creatives:delete' creative.pk %}" class="btn btn-danger btn-sm">
                <i class="fas fa-trash fa-sm"></i> Delete
            </a>
            {% if creative.creative_status == 'pending' %}
            <button class="btn btn-success btn-sm" onclick="approveCreative({{ creative.pk }})">
                <i class="fas fa-check fa-sm"></i> Approve
            </button>
            <button class="btn btn-danger btn-sm" onclick="rejectCreative({{ creative.pk }})">
                <i class="fas fa-times fa-sm"></i> Reject
            </button>
            {% endif %}
        </div>
    </div>

    <div class="row">
        <!-- Creative Preview -->
        <div class="col-lg-8">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Creative Preview</h6>
                </div>
                <div class="card-body text-center">
                    {% if creative.primary_file %}
                        {% if creative.creative_format.format_type == 'video' %}
                        <video controls class="creative-preview">
                            <source src="{{ creative.primary_file.url }}" type="{{ creative.mime_type }}">
                            Your browser does not support the video tag.
                        </video>
                        {% elif creative.creative_format.format_type == 'audio' %}
                        <div class="mb-3">
                            <i class="fas fa-music fa-5x text-muted mb-3"></i>
                        </div>
                        <audio controls class="w-100">
                            <source src="{{ creative.primary_file.url }}" type="{{ creative.mime_type }}">
                            Your browser does not support the audio tag.
                        </audio>
                        {% else %}
                        <img src="{{ creative.primary_file.url }}" class="creative-preview" alt="{{ creative.name }}">
                        {% endif %}
                    {% else %}
                    <div class="py-5">
                        <i class="fas fa-file fa-5x text-muted mb-3"></i>
                        <p class="text-muted">No file uploaded</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Performance Metrics -->
            {% if creative.creative_status == 'approved' %}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Performance Metrics</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="performance-metric">
                                <div class="h4 mb-0 text-primary">{{ creative.total_impressions|default:0 }}</div>
                                <div class="small text-muted">Impressions</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="performance-metric">
                                <div class="h4 mb-0 text-success">${{ creative.total_spend|default:0 }}</div>
                                <div class="small text-muted">Spend</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="performance-metric">
                                <div class="h4 mb-0 text-info">{{ creative.click_through_rate|default:0 }}%</div>
                                <div class="small text-muted">CTR</div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="performance-metric">
                                <div class="h4 mb-0 text-warning">${{ creative.cost_per_mille|default:0 }}</div>
                                <div class="small text-muted">CPM</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Creative Details -->
        <div class="col-lg-4">
            <!-- Basic Information -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Details</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <strong>Status:</strong>
                        <span class="badge status-badge ms-2
                            {% if creative.creative_status == 'approved' %}bg-success
                            {% elif creative.creative_status == 'pending' %}bg-warning
                            {% elif creative.creative_status == 'rejected' %}bg-danger
                            {% else %}bg-secondary{% endif %}">
                            {{ creative.get_creative_status_display }}
                        </span>
                    </div>
                    
                    {% if creative.description %}
                    <div class="mb-3">
                        <strong>Description:</strong>
                        <p class="mt-1">{{ creative.description }}</p>
                    </div>
                    {% endif %}
                    
                    {% if creative.campaign %}
                    <div class="mb-3">
                        <strong>Campaign:</strong>
                        <a href="{% url 'campaigns:detail' creative.campaign.pk %}" class="text-decoration-none">
                            {{ creative.campaign.name }}
                        </a>
                    </div>
                    {% endif %}
                    
                    {% if creative.creative_format %}
                    <div class="mb-3">
                        <strong>Format:</strong>
                        {{ creative.creative_format.name }}
                    </div>
                    {% endif %}
                    
                    {% if creative.duration %}
                    <div class="mb-3">
                        <strong>Duration:</strong>
                        {{ creative.duration }} seconds
                    </div>
                    {% endif %}
                    
                    {% if creative.file_size %}
                    <div class="mb-3">
                        <strong>File Size:</strong>
                        {{ creative.file_size|filesizeformat }}
                    </div>
                    {% endif %}
                    
                    <div class="mb-3">
                        <strong>Created:</strong>
                        {{ creative.created_at|date:"M d, Y H:i" }}
                    </div>
                    
                    <div class="mb-3">
                        <strong>Created By:</strong>
                        {{ creative.created_by.get_full_name|default:creative.created_by.username }}
                    </div>
                    
                    {% if creative.updated_at != creative.created_at %}
                    <div class="mb-3">
                        <strong>Last Updated:</strong>
                        {{ creative.updated_at|date:"M d, Y H:i" }}
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Tags -->
            {% if creative.tags.exists %}
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Tags</h6>
                </div>
                <div class="card-body">
                    {% for tag in creative.tags.all %}
                    <span class="badge bg-secondary me-1 mb-1">{{ tag.name }}</span>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Approval Timeline -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Approval History</h6>
                </div>
                <div class="card-body">
                    <div class="approval-timeline">
                        {% for approval in creative.approvals.all %}
                        <div class="timeline-item">
                            <div class="timeline-icon 
                                {% if approval.approval_status == 'approved' %}bg-success text-white
                                {% elif approval.approval_status == 'rejected' %}bg-danger text-white
                                {% else %}bg-warning text-dark{% endif %}">
                                {% if approval.approval_status == 'approved' %}
                                <i class="fas fa-check"></i>
                                {% elif approval.approval_status == 'rejected' %}
                                <i class="fas fa-times"></i>
                                {% else %}
                                <i class="fas fa-clock"></i>
                                {% endif %}
                            </div>
                            <div>
                                <strong>{{ approval.get_approval_status_display }}</strong>
                                <div class="small text-muted">
                                    by {{ approval.reviewer.get_full_name|default:approval.reviewer.username }}
                                    on {{ approval.reviewed_at|date:"M d, Y H:i" }}
                                </div>
                                {% if approval.comments %}
                                <div class="mt-1 small">{{ approval.comments }}</div>
                                {% endif %}
                            </div>
                        </div>
                        {% empty %}
                        <p class="text-muted">No approval history yet.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Approval Modal -->
<div class="modal fade" id="approvalModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="approvalModalTitle">Approve Creative</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="approvalForm">
                    {% csrf_token %}
                    <input type="hidden" id="approvalAction" name="action">
                    <div class="mb-3">
                        <label for="approvalComments" class="form-label">Comments</label>
                        <textarea class="form-control" id="approvalComments" name="comments" rows="3" placeholder="Add your comments..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="submitApproval">Submit</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function approveCreative(creativeId) {
    document.getElementById('approvalModalTitle').textContent = 'Approve Creative';
    document.getElementById('approvalAction').value = 'approve';
    document.getElementById('submitApproval').className = 'btn btn-success';
    document.getElementById('submitApproval').textContent = 'Approve';
    new bootstrap.Modal(document.getElementById('approvalModal')).show();
}

function rejectCreative(creativeId) {
    document.getElementById('approvalModalTitle').textContent = 'Reject Creative';
    document.getElementById('approvalAction').value = 'reject';
    document.getElementById('submitApproval').className = 'btn btn-danger';
    document.getElementById('submitApproval').textContent = 'Reject';
    new bootstrap.Modal(document.getElementById('approvalModal')).show();
}

document.getElementById('submitApproval').addEventListener('click', function() {
    const form = document.getElementById('approvalForm');
    const formData = new FormData(form);
    const action = document.getElementById('approvalAction').value;
    
    fetch(`/creatives/{{ creative.pk }}/${action}/`, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Action failed: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Action failed. Please try again.');
    });
});
</script>
{% endblock %}