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

{% block title %}Import Organization | 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 'organization_import_export' %}">Import / Export</a>
    <span>/</span>
    <strong>Import Organization</strong>
</div>

<div class="page-head">
    <div>
        <h1>Import Organization</h1>
        <p>Upload a Killian JSON organization export, review its contents, then confirm the import.</p>
    </div>

    <a class="button secondary" href="{% url 'organization_import_export' %}">Back</a>
</div>

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

    <form method="post" enctype="multipart/form-data" style="padding:22px;">
        {% csrf_token %}

        <input
            type="file"
            name="json_file"
            accept=".json,application/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>
            {% if preview.existing %}
                <span>Existing organization detected. No changes have been made yet.</span>
            {% else %}
                <span>Review the new organization before importing.</span>
            {% endif %}
        </div>
    </div>

    <div style="padding:22px;">
        <div style="
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px 28px;
            margin-bottom:24px;
        ">
            <div>
                <div class="muted">Organization</div>
                <strong>{{ preview.name }}</strong>
            </div>

            <div>
                <div class="muted">Short Name</div>
                <strong>{{ preview.short_name|default:'—' }}</strong>
            </div>

            <div>
                <div class="muted">Status</div>
                <strong>{{ preview.status|default:'Active' }}</strong>
            </div>

            <div>
                <div class="muted">Modules</div>
                <strong>{{ preview.modules }}</strong>
            </div>

            <div>
                <div class="muted">Records in Backup</div>
                <strong>{{ preview.record_count }}</strong>
            </div>

            {% if preview.existing %}
            <div>
                <div class="muted">Import Mode</div>
                <strong>Reviewed merge / restore</strong>
            </div>
            {% endif %}
        </div>

        {% if preview.existing %}
            <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;">Existing organization detected: {{ preview.existing_name }}</strong>
                <div style="margin-top:8px;line-height:1.55;">
                    Killian compared the uploaded backup with the current organization before making any changes.
                    Records shown as <strong>Existing Only</strong> will be preserved and will not be deleted.
                    Records shown as <strong>Added</strong> 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.organization_changes %}
                    <details open style="margin-bottom:18px;border:1px solid var(--line);border-radius:10px;padding:14px 16px;">
                        <summary style="cursor:pointer;font-weight:700;">Organization-level changes ({{ preview.comparison.organization_change_count }})</summary>
                        <div style="overflow:auto;margin-top:14px;">
                            <table style="width:100%;border-collapse:collapse;">
                                <thead>
                                    <tr>
                                        <th style="text-align:left;padding:8px;border-bottom:1px solid var(--line);">Field</th>
                                        <th style="text-align:left;padding:8px;border-bottom:1px solid var(--line);">Current</th>
                                        <th style="text-align:left;padding:8px;border-bottom:1px solid var(--line);">Backup</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for change in preview.comparison.organization_changes %}
                                    <tr>
                                        <td style="padding:8px;border-bottom:1px solid var(--line);">{{ change.field }}</td>
                                        <td style="padding:8px;border-bottom:1px solid var(--line);white-space:pre-wrap;">{{ change.current }}</td>
                                        <td style="padding:8px;border-bottom:1px solid var(--line);white-space:pre-wrap;">{{ change.backup }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </details>
                    {% endif %}

                    {% 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 backup. 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 not preview.comparison.has_changes %}
                    <div style="
                        padding:14px 16px;
                        border:1px solid var(--line);
                        border-radius:10px;
                        background:rgba(255,255,255,0.02);
                    ">
                        No differences were detected between the backup and the live organization. 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_existing" value="1" required>
                    <span class="import-approval-text">
                        <strong>Approve reviewed import</strong>
                        I reviewed the comparison and approve applying this backup to the existing organization.
                        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 backup to the existing organization? A pre-import recovery snapshot will be saved first."
                >
                    Apply Reviewed Import
                </button>

                <a class="button secondary" href="{% url 'organization_import_export' %}">Cancel</a>
            </form>

        {% else %}
            <div style="
                padding:14px 16px;
                margin-bottom:20px;
                border:1px solid var(--line);
                border-radius:10px;
                background:rgba(255,255,255,0.02);
            ">
                No existing organization with this name was found. Confirming will create a new organization and import its records.
            </div>

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

                <button
                    type="submit"
                    data-confirm="Import this new organization and its records?"
                >
                    Import Organization
                </button>

                <a class="button secondary" href="{% url 'organization_import_export' %}">Cancel</a>
            </form>
        {% endif %}
    </div>
</section>
{% endif %}
{% endblock %}