{% extends 'core/base.html' %}

{% block title %}Import {{ module_title }} - {{ org.name }} | Killian{% endblock %}

{% block content %}
<style>
    .import-diff-toggle {
        margin-bottom:20px;
    }

    .import-diff-toggle > summary {
        display:inline-flex;
        align-items:center;
        gap:8px;
        cursor:pointer;
        user-select:none;
        list-style:none;
        padding:9px 14px;
        border:1px solid var(--line);
        border-radius:8px;
        background:rgba(255,255,255,0.03);
        font-weight:700;
    }

    .import-diff-toggle > summary::-webkit-details-marker {
        display:none;
    }

    .import-diff-toggle > summary:hover {
        background:rgba(255,255,255,0.06);
    }

    .import-diff-toggle .hide-differences {
        display:none;
    }

    .import-diff-toggle[open] .show-differences {
        display:none;
    }

    .import-diff-toggle[open] .hide-differences {
        display:inline;
    }

    .import-diff-content {
        margin-top:14px;
    }

    .import-approval {
        display:grid;
        grid-template-columns:18px minmax(0,1fr);
        align-items:start;
        gap:12px;
        margin-bottom:18px;
        padding:14px 16px;
        border:1px solid #b78a2c;
        border-radius:10px;
        background:rgba(183,138,44,0.06);
        cursor:pointer;
    }

    .import-approval input[type="checkbox"] {
        width:18px !important;
        min-width:18px !important;
        height:18px !important;
        margin:2px 0 0 0 !important;
        padding:0 !important;
        flex:none !important;
        cursor:pointer;
    }

    .import-approval-text {
        min-width:0;
        line-height:1.5;
    }

    .import-approval-text strong {
        display:block;
        margin-bottom:3px;
        color:#e3b84f;
    }
</style>

<div class="breadcrumbs">
    <a href="{% url 'org_list' %}">Organizations</a>
    <span>/</span>
    <a href="{% url 'org_detail' org.pk %}">{{ org.name }}</a>
    <span>/</span>
    <a href="{% url 'org_module' org.pk current_module %}">{{ module_title }}</a>
    <span>/</span>
    <strong>Import</strong>
</div>

<div class="page-head">
    <div>
        <h1>Import {{ module_title }}</h1>
        <p>Scan a Killian JSON export, review every difference against {{ org.name }}, then explicitly approve the import.</p>
    </div>
    <a class="button secondary" href="{% url 'org_module' org.pk current_module %}">Back</a>
</div>

<section class="module-panel">
    <div class="module-panel-head">
        <div>
            <h2>Select JSON File</h2>
            <span>Only Killian {{ module_title }} JSON export files are supported.</span>
        </div>
    </div>

    <form method="post" enctype="multipart/form-data" style="padding:22px;">
        {% csrf_token %}
        <input id="json_file" type="file" name="json_file" accept="application/json,.json" required>
        <div style="margin-top:18px;">
            <button type="submit">Scan File</button>
        </div>
    </form>
</section>

{% if error %}
<section class="module-panel" style="margin-top:22px;border-color:var(--danger);">
    <div style="padding:22px;color:var(--danger);">
        <strong>Import could not continue.</strong>
        <div style="margin-top:8px;">{{ error }}</div>
    </div>
</section>
{% endif %}

{% if preview %}
<section class="module-panel" style="margin-top:22px;">
    <div class="module-panel-head">
        <div>
            <h2>Import Preview</h2>
            <span>Nothing has been imported yet.</span>
        </div>
    </div>

    <div style="padding:22px;">
        <div style="
            padding:16px 18px;
            margin-bottom:22px;
            border:1px solid #b78a2c;
            border-radius:10px;
            background:rgba(183,138,44,0.10);
        ">
            <strong style="color:#e3b84f;">Reviewed import into {{ org.name }} — {{ preview.module }}</strong>
            <div style="margin-top:8px;line-height:1.55;">
                Source organization: <strong>{{ preview.organization|default:"Unknown" }}</strong>.
                Killian compared the uploaded JSON with the current {{ preview.module }} records before making any changes.
                <strong>Existing Only</strong> records will be preserved, <strong>Added</strong> records will be created,
                and <strong>Changed</strong> records will be updated only after approval below.
            </div>
        </div>

        {% if preview.comparison.warnings %}
        <div style="
            padding:14px 16px;
            margin-bottom:20px;
            border:1px solid var(--danger);
            border-radius:10px;
            background:rgba(255,80,80,0.06);
        ">
            <strong style="color:var(--danger);">Review warning</strong>
            {% for warning in preview.comparison.warnings %}
                <div style="margin-top:6px;">{{ warning }}</div>
            {% endfor %}
        </div>
        {% endif %}

        <div style="
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:12px;
            margin-bottom:18px;
        ">
            <div style="padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);">
                <div class="muted">Added</div>
                <strong style="font-size:1.35rem;">{{ preview.comparison.added_count }}</strong>
            </div>
            <div style="padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);">
                <div class="muted">Changed</div>
                <strong style="font-size:1.35rem;">{{ preview.comparison.changed_count }}</strong>
            </div>
            <div style="padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);">
                <div class="muted">Existing Only</div>
                <strong style="font-size:1.35rem;">{{ preview.comparison.existing_only_count }}</strong>
            </div>
            <div style="padding:14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);">
                <div class="muted">Unchanged</div>
                <strong style="font-size:1.35rem;">{{ preview.comparison.unchanged_count }}</strong>
            </div>
        </div>

        <details class="import-diff-toggle">
            <summary>
                <span class="show-differences">Show differences</span>
                <span class="hide-differences">Hide differences</span>
            </summary>

            <div class="import-diff-content">
                {% if preview.comparison.changed %}
                <details open style="margin-bottom:18px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;">
                    <summary style="cursor:pointer;font-weight:700;">Changed records ({{ preview.comparison.changed_count }})</summary>
                    <div style="margin-top:14px;display:grid;gap:12px;">
                        {% for record in preview.comparison.changed %}
                        <div style="border:1px solid var(--line);border-radius:9px;padding:13px 14px;background:rgba(255,255,255,.015);">
                            <div style="font-weight:700;">{{ record.model_label }} — {{ record.title }}</div>
                            <div class="muted" style="margin-top:2px;">Source ID: {{ record.source_pk }}</div>
                            <div style="overflow:auto;margin-top:10px;">
                                <table style="width:100%;border-collapse:collapse;">
                                    <thead>
                                        <tr>
                                            <th style="text-align:left;padding:7px;border-bottom:1px solid var(--line);">Field</th>
                                            <th style="text-align:left;padding:7px;border-bottom:1px solid var(--line);">Current</th>
                                            <th style="text-align:left;padding:7px;border-bottom:1px solid var(--line);">Backup</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for change in record.changes %}
                                        <tr>
                                            <td style="padding:7px;border-bottom:1px solid var(--line);">{{ change.field }}</td>
                                            <td style="padding:7px;border-bottom:1px solid var(--line);white-space:pre-wrap;">{{ change.current }}</td>
                                            <td style="padding:7px;border-bottom:1px solid var(--line);white-space:pre-wrap;">{{ change.backup }}</td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </details>
                {% endif %}

                {% if preview.comparison.added %}
                <details open style="margin-bottom:18px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;">
                    <summary style="cursor:pointer;font-weight:700;">Added records ({{ preview.comparison.added_count }})</summary>
                    <div style="margin-top:12px;display:grid;gap:7px;">
                        {% for record in preview.comparison.added %}
                        <div style="padding:8px 10px;border-bottom:1px solid var(--line);">
                            <strong>{{ record.model_label }}</strong> — {{ record.title }}
                            <span class="muted"> (Source ID: {{ record.source_pk }})</span>
                        </div>
                        {% endfor %}
                    </div>
                </details>
                {% endif %}

                {% if preview.comparison.existing_only %}
                <details open style="margin-bottom:18px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;">
                    <summary style="cursor:pointer;font-weight:700;">Existing Only — preserved ({{ preview.comparison.existing_only_count }})</summary>
                    <div style="margin-top:8px" class="muted">
                        These records exist in Killian but are absent from the uploaded JSON. They will not be deleted or modified by their absence.
                    </div>
                    <div style="margin-top:12px;display:grid;gap:7px;">
                        {% for record in preview.comparison.existing_only %}
                        <div style="padding:8px 10px;border-bottom:1px solid var(--line);">
                            <strong>{{ record.model_label }}</strong> — {{ record.title }}
                            <span class="muted"> (Source ID: {{ record.source_pk }})</span>
                        </div>
                        {% endfor %}
                    </div>
                </details>
                {% endif %}

                {% if preview.comparison.added_count == 0 and preview.comparison.changed_count == 0 and preview.comparison.existing_only_count == 0 %}
                <div style="
                    padding:14px 16px;
                    border:1px solid var(--line);
                    border-radius:10px;
                    background:rgba(255,255,255,0.02);
                ">
                    No differences were detected. All {{ preview.comparison.unchanged_count }} matching record(s) are unchanged.
                </div>
                {% endif %}
            </div>
        </details>

        <form method="post">
            {% csrf_token %}
            <input type="hidden" name="confirm_import" value="1">
            <input type="hidden" name="token" value="{{ token }}">
            <input type="hidden" name="review_digest" value="{{ preview.review_digest }}">

            <label class="import-approval">
                <input type="checkbox" name="approve_import" value="1" required>
                <span class="import-approval-text">
                    <strong>Approve reviewed import</strong>
                    I reviewed the comparison and approve applying this JSON import to {{ org.name }}.
                    Added records will be created, changed records will be updated, and existing-only records will be preserved.
                </span>
            </label>

            <button
                type="submit"
                data-confirm="Apply this reviewed {{ module_title }} import to {{ org.name }}? A pre-import recovery snapshot will be saved first."
            >
                Apply Reviewed Import
            </button>
            <a class="button secondary" href="{% url 'module_import' org.pk current_module %}">Cancel</a>
        </form>
    </div>
</section>
{% endif %}
{% endblock %}