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

{% block title %}Delete Creative - {{ object.name }} - Adtlas{% endblock %}

{% block meta_description %}Confirm deletion of creative: {{ object.name }}{% endblock %}

{% block extra_css %}
<style>
.delete-preview {
    max-width: 200px;
    max-height: 150px;
    border-radius: 0.35rem;
}
.warning-card {
    border-left: 4px solid #e74a3b;
    background-color: #fdf2f2;
}
.danger-zone {
    background-color: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: 0.35rem;
    padding: 1.5rem;
}
</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"><a href="{% url 'creatives:detail' object.pk %}">{{ object.name }}</a></li>
                    <li class="breadcrumb-item active">Delete</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 text-gray-800">Delete Creative</h1>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Warning Card -->
            <div class="card shadow mb-4 warning-card">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="me-3">
                            <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                        </div>
                        <div>
                            <h5 class="text-danger mb-1">Warning: This action cannot be undone</h5>
                            <p class="mb-0">You are about to permanently delete this creative and all associated data.</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Creative Details -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Creative to be Deleted</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            {% if object.primary_file %}
                                {% if object.creative_format.format_type == 'video' %}
                                <video class="delete-preview mb-3">
                                    <source src="{{ object.primary_file.url }}" type="{{ object.mime_type }}">
                                </video>
                                {% elif object.creative_format.format_type == 'audio' %}
                                <div class="delete-preview bg-light d-flex align-items-center justify-content-center mb-3">
                                    <i class="fas fa-music fa-3x text-muted"></i>
                                </div>
                                {% else %}
                                <img src="{{ object.primary_file.url }}" class="delete-preview mb-3" alt="{{ object.name }}">
                                {% endif %}
                            {% else %}
                            <div class="delete-preview bg-light d-flex align-items-center justify-content-center mb-3">
                                <i class="fas fa-file fa-3x text-muted"></i>
                            </div>
                            {% endif %}
                        </div>
                        <div class="col-md-8">
                            <h5 class="mb-3">{{ object.name }}</h5>
                            
                            {% if object.description %}
                            <div class="mb-2">
                                <strong>Description:</strong>
                                <p class="mt-1">{{ object.description }}</p>
                            </div>
                            {% endif %}
                            
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-2">
                                        <strong>Status:</strong>
                                        <span class="badge ms-1
                                            {% if object.creative_status == 'approved' %}bg-success
                                            {% elif object.creative_status == 'pending' %}bg-warning
                                            {% elif object.creative_status == 'rejected' %}bg-danger
                                            {% else %}bg-secondary{% endif %}">
                                            {{ object.get_creative_status_display }}
                                        </span>
                                    </div>
                                    
                                    {% if object.campaign %}
                                    <div class="mb-2">
                                        <strong>Campaign:</strong>
                                        {{ object.campaign.name }}
                                    </div>
                                    {% endif %}
                                    
                                    {% if object.creative_format %}
                                    <div class="mb-2">
                                        <strong>Format:</strong>
                                        {{ object.creative_format.name }}
                                    </div>
                                    {% endif %}
                                </div>
                                <div class="col-sm-6">
                                    <div class="mb-2">
                                        <strong>Created:</strong>
                                        {{ object.created_at|date:"M d, Y" }}
                                    </div>
                                    
                                    <div class="mb-2">
                                        <strong>Created By:</strong>
                                        {{ object.created_by.get_full_name|default:object.created_by.username }}
                                    </div>
                                    
                                    {% if object.file_size %}
                                    <div class="mb-2">
                                        <strong>File Size:</strong>
                                        {{ object.file_size|filesizeformat }}
                                    </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Impact Assessment -->
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-warning">Impact Assessment</h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-warning">What will be deleted:</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-times text-danger me-2"></i>Creative file and metadata</li>
                                <li><i class="fas fa-times text-danger me-2"></i>All versions and variants</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Approval history</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Performance data</li>
                                <li><i class="fas fa-times text-danger me-2"></i>Associated assets</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-info">Related data:</h6>
                            <ul class="list-unstyled">
                                {% if object.campaign %}
                                <li><i class="fas fa-info-circle text-info me-2"></i>Campaign "{{ object.campaign.name }}" will remain</li>
                                {% endif %}
                                <li><i class="fas fa-info-circle text-info me-2"></i>User accounts will remain</li>
                                <li><i class="fas fa-info-circle text-info me-2"></i>System logs will be preserved</li>
                            </ul>
                        </div>
                    </div>
                    
                    {% if object.creative_status == 'approved' and object.campaign %}
                    <div class="alert alert-warning mt-3" role="alert">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Warning:</strong> This creative is currently approved and associated with an active campaign. 
                        Deleting it may affect campaign performance and reporting.
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Confirmation Form -->
            <div class="danger-zone">
                <h5 class="text-danger mb-3">
                    <i class="fas fa-skull-crossbones me-2"></i>Danger Zone
                </h5>
                <p class="mb-3">
                    To confirm deletion, please type the creative name <strong>"{{ object.name }}"</strong> in the field below:
                </p>
                
                <form method="post" id="deleteForm">
                    {% csrf_token %}
                    <div class="mb-3">
                        <input type="text" class="form-control" id="confirmName" placeholder="Type creative name to confirm" autocomplete="off">
                    </div>
                    
                    <div class="mb-3">
                        <label for="deleteReason" class="form-label">Reason for deletion (optional):</label>
                        <textarea class="form-control" id="deleteReason" name="delete_reason" rows="2" placeholder="Why are you deleting this creative?"></textarea>
                    </div>
                    
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="{% url 'creatives:detail' object.pk %}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>Cancel
                        </a>
                        <button type="submit" class="btn btn-danger" id="deleteButton" disabled>
                            <i class="fas fa-trash me-1"></i>Delete Creative Permanently
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
const confirmNameInput = document.getElementById('confirmName');
const deleteButton = document.getElementById('deleteButton');
const deleteForm = document.getElementById('deleteForm');
const expectedName = "{{ object.name|escapejs }}";

// Enable delete button only when name matches
confirmNameInput.addEventListener('input', function() {
    if (this.value.trim() === expectedName) {
        deleteButton.disabled = false;
        deleteButton.classList.remove('btn-danger');
        deleteButton.classList.add('btn-outline-danger');
    } else {
        deleteButton.disabled = true;
        deleteButton.classList.remove('btn-outline-danger');
        deleteButton.classList.add('btn-danger');
    }
});

// Confirm before submission
deleteForm.addEventListener('submit', function(e) {
    if (confirmNameInput.value.trim() !== expectedName) {
        e.preventDefault();
        alert('Please type the exact creative name to confirm deletion.');
        confirmNameInput.focus();
        return false;
    }
    
    if (!confirm('Are you absolutely sure you want to delete this creative? This action cannot be undone.')) {
        e.preventDefault();
        return false;
    }
    
    // Show loading state
    deleteButton.disabled = true;
    deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Deleting...';
});

// Focus on name input
confirmNameInput.focus();
</script>
{% endblock %}