{% extends 'base.html' %}

{% block content %}
<style>
    .diff-container {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .diff-header {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .diff-header h5 {
        margin: 0;
        color: #334155;
        font-weight: 600;
    }

    .diff-toggle {
        display: flex;
        gap: 0.5rem;
    }

    .diff-toggle .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }

    .diff-toggle .btn.active {
        background: #3b82f6;
        color: white;
    }

    .diff-toggle .btn:not(.active) {
        background: #e2e8f0;
        color: #64748b;
    }

    /* Unified diff view */
    .diff-unified {
        font-family: 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
        font-size: 0.85rem;
        line-height: 1.5;
        overflow-x: auto;
    }

    .diff-unified .diff-line {
        padding: 2px 1rem;
        white-space: pre;
        border-left: 3px solid transparent;
    }

    .diff-unified .diff-line.addition {
        background: #dcfce7;
        border-left-color: #22c55e;
        color: #166534;
    }

    .diff-unified .diff-line.deletion {
        background: #fee2e2;
        border-left-color: #ef4444;
        color: #991b1b;
    }

    .diff-unified .diff-line.header {
        background: #f1f5f9;
        color: #475569;
        font-weight: 500;
        border-left-color: #94a3b8;
    }

    .diff-unified .diff-line.context {
        background: #ffffff;
        color: #334155;
    }

    /* Side-by-side diff view */
    .diff-split {
        display: none;
        font-family: 'Monaco', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
        font-size: 0.85rem;
    }

    .diff-split.active {
        display: flex;
    }

    .diff-split-pane {
        flex: 1;
        overflow-x: auto;
    }

    .diff-split-pane.left {
        border-right: 1px solid #e2e8f0;
    }

    .diff-split-pane .pane-header {
        background: #f8fafc;
        padding: 0.5rem 1rem;
        font-weight: 600;
        color: #64748b;
        border-bottom: 1px solid #e2e8f0;
        text-align: center;
    }

    .diff-split-pane .pane-header.old {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        color: #991b1b;
    }

    .diff-split-pane .pane-header.new {
        background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
        color: #166534;
    }

    .diff-split .diff-line {
        padding: 2px 1rem;
        white-space: pre;
        min-height: 1.6em;
        line-height: 1.6;
    }

    .diff-split .left .diff-line.deletion {
        background: #fee2e2;
        color: #991b1b;
    }

    .diff-split .right .diff-line.addition {
        background: #dcfce7;
        color: #166534;
    }

    .diff-split .diff-line.empty {
        background: #f8fafc;
    }

    /* No changes message */
    .no-changes {
        padding: 3rem;
        text-align: center;
        color: #64748b;
    }

    .no-changes i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #10b981;
    }

    /* Button styling */
    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: flex-end;
    }

    .btn-confirm {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }

    .btn-confirm:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    }

    .btn-cancel {
        background: #f1f5f9;
        color: #475569;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.2s;
    }

    .btn-cancel:hover {
        background: #e2e8f0;
    }

    .file-path {
        font-family: monospace;
        font-size: 0.875rem;
        color: #64748b;
        background: #f8fafc;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
    }
</style>

<div class="hero" style="padding: 1.5rem 0;">
    <h1><i class="bi bi-file-diff me-2"></i>Review Changes</h1>
    <p class="subtitle">Module: <strong>{{ module_name }}</strong></p>
</div>

{% if file_path %}
<div class="mb-3">
    <span class="file-path"><i class="bi bi-file-code me-1"></i>{{ file_path }}</span>
</div>
{% endif %}

{% if diff %}
<div class="diff-container">
    <div class="diff-header">
        <h5><i class="bi bi-git me-2"></i>Changes Preview</h5>
        <div class="diff-toggle">
            <button class="btn active" onclick="showUnified()" id="btn-unified">
                <i class="bi bi-list"></i> Unified
            </button>
            <button class="btn" onclick="showSplit()" id="btn-split">
                <i class="bi bi-layout-split"></i> Side by Side
            </button>
        </div>
    </div>

    <!-- Unified diff view -->
    <div class="diff-unified" id="diff-unified">
        {% for line in diff.split('\n') %}
        {% if line.startswith('+++') or line.startswith('---') or line.startswith('@@') %}
        <div class="diff-line header">{{ line }}</div>
        {% elif line.startswith('+') %}
        <div class="diff-line addition">{{ line }}</div>
        {% elif line.startswith('-') %}
        <div class="diff-line deletion">{{ line }}</div>
        {% else %}
        <div class="diff-line context">{{ line }}</div>
        {% endif %}
        {% endfor %}
    </div>

    <!-- Side-by-side diff view -->
    <div class="diff-split" id="diff-split">
        <div class="diff-split-pane left">
            <div class="pane-header old"><i class="bi bi-file-minus me-1"></i>Original</div>
            <div class="pane-content">
                {% for line in diff.split('\n') %}
                {% if line.startswith('---') or line.startswith('@@') %}
                <div class="diff-line header">{{ line }}</div>
                {% elif line.startswith('-') and not line.startswith('---') %}
                <div class="diff-line deletion">{{ line[1:] }}</div>
                {% elif line.startswith('+') and not line.startswith('+++') %}
                <div class="diff-line empty">&nbsp;</div>
                {% elif not line.startswith('+++') %}
                <div class="diff-line context">{{ line[1:] if line.startswith(' ') else line }}</div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="diff-split-pane right">
            <div class="pane-header new"><i class="bi bi-file-plus me-1"></i>Modified</div>
            <div class="pane-content">
                {% for line in diff.split('\n') %}
                {% if line.startswith('+++') or line.startswith('@@') %}
                <div class="diff-line header">{{ line }}</div>
                {% elif line.startswith('+') and not line.startswith('+++') %}
                <div class="diff-line addition">{{ line[1:] }}</div>
                {% elif line.startswith('-') and not line.startswith('---') %}
                <div class="diff-line empty">&nbsp;</div>
                {% elif not line.startswith('---') %}
                <div class="diff-line context">{{ line[1:] if line.startswith(' ') else line }}</div>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="action-buttons">
    <a href="/module/{{ module_name }}{% if file_path %}?file={{ file_path | urlencode }}{% endif %}"
        class="btn-cancel">
        <i class="bi bi-x-lg"></i> Cancel
    </a>
    <form action="/api/confirm_save" method="post" style="margin: 0;">
        <input type="hidden" name="change_key" value="{{ change_key }}">
        <button type="submit" class="btn-confirm">
            <i class="bi bi-check-lg"></i> Confirm & Save
        </button>
    </form>
</div>

{% else %}
<div class="diff-container">
    <div class="no-changes">
        <i class="bi bi-check-circle-fill"></i>
        <h4>No Changes Detected</h4>
        <p>The source file content is identical to your edits.</p>
    </div>
</div>

<div class="action-buttons">
    <a href="/module/{{ module_name }}{% if file_path %}?file={{ file_path | urlencode }}{% endif %}"
        class="btn-cancel">
        <i class="bi bi-arrow-left"></i> Back to Editor
    </a>
</div>
{% endif %}

<script>
    function showUnified() {
        document.getElementById('diff-unified').style.display = 'block';
        document.getElementById('diff-split').classList.remove('active');
        document.getElementById('btn-unified').classList.add('active');
        document.getElementById('btn-split').classList.remove('active');
    }
    
    function showSplit() {
        document.getElementById('diff-unified').style.display = 'none';
        document.getElementById('diff-split').classList.add('active');
        document.getElementById('btn-unified').classList.remove('active');
        document.getElementById('btn-split').classList.add('active');
    }
</script>
{% endblock %}