{% extends "dashboard/base.html" %}
{% load humanize %}
{% load static %}
{% load browse_extras %}
{% block title %}Component Library — {{ ui_nice_name }}{% endblock %}

{% block content %}

<style>
.browse-wrapper {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 1.75rem 2rem 2rem;
    margin-bottom: 2rem;
}
.browse-title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 400;
    color: #1a2332;
    margin: 0 0 0.2rem;
}
.browse-subtitle {
    font-family: 'Ubuntu', sans-serif;
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}
.browse-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f5f7fa;
    border: 1px solid #dde3ea;
    border-radius: 6px;
    padding: 0.45rem 0.75rem;
    margin-bottom: 1.75rem;
}
.browse-search-wrap i { color: #90a4ae; font-size: 1.1rem; }
.browse-search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Ubuntu', sans-serif;
    color: #37474f;
    width: 100%;
    box-shadow: none;
    height: auto;
    margin: 0;
}
.browse-search-wrap input::placeholder { color: #b0bec5; }
.scroll-hint-wrap { position: relative; }
#scroll-hint {
    display: none;
    position: absolute;
    top: -1.6em;
    right: 0;
    font-family: 'Ubuntu', sans-serif;
    color: #c07379;
    letter-spacing: 0.05em;
    pointer-events: none;
    user-select: none;
}
#table-scroll-wrap {
    overflow-x: auto;
    border-radius: 7px;
    border: 1px solid #dde3ea;
}
#record-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Azeret Mono', monospace;
    font-weight: 400;
    font-size: 0.8rem;
    color: #37474f;
}
#record-table thead tr { background: #0d4f58; color: #e8edf2; }
#record-table thead th {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    padding: 0.7rem 0.85rem;
    white-space: normal;
    border-right: 1px solid rgba(255,255,255,0.12);
}
#record-table thead th:last-child { border-right: none; }
#record-table tbody tr {
    border-bottom: 1px solid #eef1f4;
    transition: background 0.12s;
}
#record-table tbody tr:last-child { border-bottom: none; }
#record-table tbody tr:hover { background: #f0f7ff; }
#record-table tbody tr:nth-child(even) { background: #f8fafc; }
#record-table tbody tr:nth-child(even):hover { background: #f0f7ff; }
#record-table td {
    padding: 0.55rem 0.85rem;
    border-right: 1px solid #eef1f4;
    vertical-align: middle;
    min-width: 10vw;
    max-width: 20vw;
    word-break: break-all;
    overflow-wrap: anywhere;
}
#record-table td:last-child { border-right: none; }
#record-table th:not(:first-child),
#record-table td:not(:first-child) { text-align: center; }
/* Edit icon column + first data column stay narrow */
#record-table th:nth-child(1),
#record-table td:nth-child(1) {
    width: 2.2rem;
    min-width: unset;
    max-width: unset;
}
#record-table th:nth-child(2),
#record-table td:nth-child(2) {
    min-width: unset;
    max-width: 12rem;
    width: 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.array-badge {
    display: inline-block;
    font-size: 0.68em;
    font-family: 'Ubuntu', sans-serif;
    background: #eceff1;
    border: 1px solid #b0bec5;
    border-radius: 3px;
    padding: 1px 5px;
    white-space: nowrap;
    cursor: help;
}
.param-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    margin: 2px 3px 2px 0;
    border-radius: 4px;
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    border: 1px solid #b2dde4;
}
.param-badge-name {
    background: #d4eef1;
    color: #1a4f56;
    padding: 1px 5px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 500;
}
.param-badge-val {
    background: #f4fafb;
    color: #1a2e30;
    padding: 1px 6px;
    font-family: 'Azeret Mono', monospace;
    font-weight: 400;
}
#array-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 480px;
    padding: 7px 11px;
    background: #1a2332;
    color: #e8edf2;
    font-size: 0.76em;
    font-family: 'Azeret Mono', monospace;
    border-radius: 5px;
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.6;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    display: none;
}
</style>


<div style="position: absolute; top: 0.9rem; left: 19rem; z-index: 1000;">
    <h2 style="color: #ffffff; font-weight: 100;">
        <a href="{% url 'dashboard-home' %}" style="color: #ffffff; text-decoration: none;">Components</a>&ensp;>&ensp; {{ ui_nice_name }}
    </h2>
</div>


<div class="browse-wrapper">

    <h2 class="browse-title">{{ ui_nice_name }}</h2>
    <div style="display:flex; align-items:baseline; justify-content:space-between; margin-bottom:1.25rem;">
        <p class="browse-subtitle" id="record-count" style="margin:0;">{{ total_count|intcomma }} records</p>
        <button id="open-add-modal"
                style="display:inline-flex; align-items:center; gap:0.3rem; height: 2.5rem;
                       border: 1.5px solid #22a6b3; border-radius:6px;
                       background:transparent; color:#22a6b3;
                       font-family:'Ubuntu',sans-serif; font-size:0.82rem;
                       padding:0.3rem 0.85rem; cursor:pointer;
                       transition:background 0.15s, color 0.15s;"
                onmouseover="this.style.background='#22a6b3';this.style.color='#fff';"
                onmouseout="this.style.background='transparent';this.style.color='#22a6b3';">
            <span class="material-symbols-outlined" style="font-size:1rem; font-variation-settings:'wght' 300;">add</span>
            Add new
        </button>
    </div>

    <div class="browse-search-wrap">
        <i class="material-symbols-outlined">search</i>
        <input type="text" id="record-search" placeholder="Filter any text, any column...">
    </div>

    <div class="scroll-hint-wrap">
        <span id="scroll-hint">scroll &rarr;</span>
        <div id="table-scroll-wrap">
        <table id="record-table">
            <thead>
                <tr>
                    <th style="width:2.2rem; padding:0.7rem 0.5rem; text-align:center;"></th>
                    <th style="width:3.5rem; padding:0.7rem 0.4rem; text-align:center; color:#4a7a80; font-size:0.78rem;">Linked<br>Models</th>
                    {% for col, header in columns|zip:headers %}
                    {% if col in group_column_names %}
                    <th style="background:#0d4f58; letter-spacing:0.06em; text-transform:uppercase; font-size:0.72rem;">{{ header }}</th>
                    {% else %}
                    <th>{{ header|safe }}</th>
                    {% endif %}
                    {% endfor %}
                </tr>
            </thead>
            <tbody id="record-table-body">
                {% for row in rows %}
                <tr class="record-row">
                    <td style="width:4.2rem; padding:0.4rem 0.35rem; text-align:center; border-right:1px solid #eef1f4; white-space:nowrap;">
                        <button class="browse-edit-btn" data-pk="{{ row.row_pk }}"
                                title="Edit record"
                                style="background:none; border:none; cursor:pointer; padding:0 0.15rem; color:#4a7a80; display:inline-flex; align-items:center;">
                            <span class="material-symbols-outlined" style="font-size:1rem; font-variation-settings:'wght' 300;">edit</span>
                        </button>
                        <button class="browse-delete-btn" data-pk="{{ row.row_pk }}" data-name="{{ row|dict_get:'name' }}"
                                title="Delete record"
                                style="background:none; border:none; cursor:pointer; padding:0 0.15rem; color:#c07379; display:inline-flex; align-items:center;">
                            <span class="material-symbols-outlined" style="font-size:1rem; font-variation-settings:'wght' 300;">delete</span>
                        </button>
                    </td>
                    <td style="width:3.5rem; padding:0.4rem 0.4rem; text-align:center;">
                        {% if row.sim_count > 0 %}
                        <span style="display:inline-block; min-width:1.4rem; padding:0.1rem 0.3rem;
                                     border-radius:10px; font-size:0.72rem; font-weight:500; line-height:1.3;
                                     background:#e0f4f6; color:#136b75; cursor:default;"
                              title="{{ row.sim_names }}">{{ row.sim_count }}</span>
                        {% else %}
                        <span style="color:#ccc; font-size:0.72rem;">—</span>
                        {% endif %}
                    </td>
                    {% for col in columns %}
                    {% if col in group_column_names %}
                    <td style="vertical-align:top; padding:0.4rem 0.6rem; min-width:14rem; max-width:32rem; white-space:normal;">{{ row|dict_get:col|safe }}</td>
                    {% else %}
                    <td>{{ row|dict_get:col|safe }}</td>
                    {% endif %}
                    {% endfor %}
                </tr>
                {% empty %}
                <tr>
                    <td colspan="{{ columns|length|add:1 }}" class="center-align grey-text">No records found</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div><!-- /table-scroll-wrap -->
    </div><!-- /scroll-hint-wrap -->

</div><!-- /browse-wrapper -->

<!-- Add New modal -->
<div id="add-modal-overlay" style="display:none; position:fixed; inset:0; z-index:2000;
     background:rgba(0,0,0,0.45); align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:10px; width:min(600px,92vw); max-height:85vh;
                display:flex; flex-direction:column; overflow:hidden;
                box-shadow:0 8px 40px rgba(0,0,0,0.22);">

        <!-- Modal header -->
        <div style="display:flex; align-items:center; justify-content:space-between;
                    padding:0.9rem 1.25rem; border-bottom:1.5px solid #e0f4f6;
                    background:linear-gradient(135deg,#136b75,#22a6b3); border-radius:10px 10px 0 0;">
            <span style="font-family:'Ubuntu',sans-serif; font-size:1rem; font-weight:500; color:#fff;">
                New {{ ui_nice_name }}
            </span>
            <button id="close-add-modal"
                    style="background:none; border:none; cursor:pointer; color:#d0f0f3; line-height:1;">
                <span class="material-symbols-outlined" style="font-size:1.3rem;">close</span>
            </button>
        </div>

        <!-- Modal body -->
        <form id="add-new-form" method="post"
              action="{% url 'dashboard-add-component' table_name=table_name %}"
              style="display:flex; flex-direction:column; flex:1; min-height:0;">
            {% csrf_token %}
            <div style="overflow-y:auto; padding:1rem 1.25rem; flex:1; min-height:0;">
                <table style="width:100%; border-collapse:collapse; font-size:0.84rem;">
                    <tbody>
                    {% for group in modal_fields_grouped %}
                    {% if group.name %}
                    <tr>
                        <td colspan="2" style="padding:0.55rem 0 0.2rem; font-family:'Ubuntu',sans-serif;
                                               font-size:0.7rem; font-weight:600; letter-spacing:0.07em;
                                               text-transform:uppercase; color:#22a6b3;
                                               border-bottom:1.5px solid #e0f4f6;">
                            {{ group.name }}
                        </td>
                    </tr>
                    {% endif %}
                    {% for f in group.fields %}
                    <tr style="border-bottom:1px solid #f0f8f9;">
                        <td style="padding:0.45rem 0.5rem 0.45rem 0; width:44%;
                                   color:#4a7a80; font-weight:500; vertical-align:middle;">
                            {{ f.label }}
                            {% if f.help_text %}
                            <div style="font-size:0.7rem; color:#546e7a; font-weight:400;">{{ f.help_text }}</div>
                            {% endif %}
                        </td>
                        <td style="padding:0.45rem 0;">
                            {% if f.ftype == 'checkbox' %}
                                <input type="hidden" name="{{ f.name }}" value="false">
                                <input type="checkbox" name="{{ f.name }}" value="true"
                                       {% if f.default %}checked{% endif %}
                                       style="accent-color:#22a6b3; width:1rem; height:1rem;">
                            {% elif f.ftype == 'select' %}
                                <select name="{{ f.name }}"
                                        style="width:100%; border:1px solid #b2e0e4; border-radius:4px;
                                               padding:0.3rem 0.5rem; font-family:'Ubuntu Mono',monospace;
                                               font-size:0.82rem; color:#1a2e30; background:#f4fafb;
                                               box-shadow:none; height:auto;">
                                    {% for val, lbl in f.choices %}
                                    <option value="{{ val }}" {% if val == f.default %}selected{% endif %}>{{ lbl }}</option>
                                    {% endfor %}
                                </select>
                            {% elif f.ftype == 'textarea' %}
                                <textarea name="{{ f.name }}" rows="2"
                                          style="width:100%; border:1px solid #b2e0e4; border-radius:4px;
                                                 padding:0.3rem 0.5rem; font-family:'Ubuntu Mono',monospace;
                                                 font-size:0.82rem; color:#1a2e30; resize:vertical;
                                                 box-sizing:border-box;">{{ f.default|fmt_float }}</textarea>
                            {% else %}
                                <input type="{% if f.ftype == 'number' %}text{% else %}{{ f.ftype }}{% endif %}"
                                       name="{{ f.name }}"
                                       value="{{ f.default|fmt_float }}"
                                       {% if f.ftype == 'number' %}inputmode="decimal"{% endif %}
                                       style="width:100%; border:1px solid #b2e0e4; border-radius:4px;
                                              padding:0.3rem 0.5rem; font-family:'Ubuntu Mono',monospace;
                                              font-size:0.82rem; color:#1a2e30; background:#f4fafb;
                                              box-shadow:none; height:auto; box-sizing:border-box;">
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Modal footer -->
            <div style="padding:0.75rem 1.25rem; border-top:1.5px solid #e0f4f6;
                        display:flex; justify-content:flex-end; gap:0.6rem;">
                <button type="button" id="cancel-add-modal"
                        style="border:1.5px solid #b2e0e4; border-radius:6px; background:transparent;
                               color:#4a7a80; font-family:'Ubuntu',sans-serif; font-size:0.82rem;
                               padding:0.35rem 1rem; cursor:pointer;">
                    Cancel
                </button>
                <button type="submit"
                        style="border:none; border-radius:6px; background:#22a6b3;
                               color:#fff; font-family:'Ubuntu',sans-serif; font-size:0.82rem;
                               padding:0.35rem 1.1rem; cursor:pointer;">
                    Save
                </button>
            </div>
        </form>
    </div>
</div>

<div id="array-tooltip"></div>

<!-- Edit modal -->
<div id="edit-modal-overlay" style="display:none; position:fixed; inset:0; z-index:2000;
     background:rgba(0,0,0,0.45); align-items:center; justify-content:center;">
    <div style="background:#fff; border-radius:10px; width:min(620px,94vw); max-height:90vh;
                display:flex; flex-direction:column; overflow:hidden;
                box-shadow:0 8px 40px rgba(0,0,0,0.22);">
        <!-- Header -->
        <div style="display:flex; align-items:center; justify-content:space-between;
                    padding:0.9rem 1.25rem; border-bottom:1.5px solid #e0f4f6;
                    background:linear-gradient(135deg,#136b75,#22a6b3); border-radius:10px 10px 0 0;">
            <span id="edit-modal-title"
                  style="font-family:'Ubuntu',sans-serif; font-size:1rem; font-weight:500; color:#fff;">
                Edit {{ ui_nice_name }}
            </span>
            <button id="close-edit-modal"
                    style="background:none; border:none; cursor:pointer; color:#d0f0f3; line-height:1;">
                <span class="material-symbols-outlined" style="font-size:1.3rem;">close</span>
            </button>
        </div>
        <!-- Linked simulations banner -->
        <div id="edit-linked-sims-bar" style="display:none; padding:0.55rem 1.25rem;
             background:#f0fafb; border-bottom:1px solid #d4eef1; font-size:0.8rem; color:#2d7a83;">
            <span class="material-symbols-outlined"
                  style="font-size:0.95rem; vertical-align:-0.2rem; margin-right:0.3rem;">link</span>
            <span id="edit-linked-sims-text"></span>
        </div>
        <!-- Copy-vs-direct choice panel (shown when >1 sim linked) -->
        <div id="edit-copy-choice" style="display:none; padding:0.7rem 1.25rem;
             background:#fffbf0; border-bottom:1px solid #f0e4b4; font-size:0.83rem;
             flex-shrink:0;">
            <p style="margin:0 0 0.5rem; color:#7a5c10; font-weight:500;">
                <span class="material-symbols-outlined"
                      style="font-size:0.95rem; vertical-align:-0.2rem; margin-right:0.3rem;">warning</span>
                This component is shared across multiple simulations. How do you want to proceed?
            </p>
            <label style="display:flex; align-items:flex-start; gap:0.5rem; cursor:pointer; margin-bottom:0.3rem;">
                <input type="radio" name="edit_mode" value="direct" id="edit-mode-direct"
                       style="margin-top:0.2rem; accent-color:#22a6b3;">
                <span style="color:#1a2e30;">
                    <strong>Edit directly</strong> — changes apply to&emsp;<em><b><u>all</u></b></em>&emsp;&ensp;linked simulations.
                </span>
            </label>
            <label style="display:flex; align-items:flex-start; gap:0.5rem; cursor:pointer;">
                <input type="radio" name="edit_mode" value="copy" id="edit-mode-copy"
                       style="margin-top:0.2rem; accent-color:#22a6b3;">
                <span style="color:#1a2e30;">
                    <strong>Create a copy</strong> — link the edited copy to the selected simulations:
                </span>
            </label>
            <!-- Sim multi-select (only visible when copy is chosen) -->
            <div id="edit-copy-sim-select" style="display:none; margin-top:0.45rem; padding-left:1.6rem;">
                <p style="margin:0 0 0.3rem; font-size:0.77rem; color:#7a5c10;">Select which simulations should use the new copy:</p>
                <div id="edit-copy-sim-checkboxes"
                     style="border:1px solid #f0e4b4;
                            border-radius:5px; padding:0.4rem 0.6rem; background:#fff;">
                </div>
                <style>
                    #edit-copy-sim-checkboxes [type="checkbox"].filled-in + span::before,
                    #edit-copy-sim-checkboxes [type="checkbox"].filled-in + span::after {
                        width: 16px; height: 16px; top: 0px;
                    }
                    #edit-copy-sim-checkboxes [type="checkbox"].filled-in:checked + span::after {
                        width: 16px; height: 16px; top: 0px;
                        border-color: #22a6b3; background-color: #22a6b3;
                    }
                    #edit-copy-sim-checkboxes [type="checkbox"].filled-in:checked + span::before {
                        top: 1px; left: 2px;
                        width: 6px; height: 11px;
                        border-top: none; border-left: none;
                        border-right: 2px solid #fff;
                        border-bottom: 2px solid #fff;
                    }
                </style>
            </div>
        </div>
        <!-- Field form -->
        <div id="edit-modal-body"
             style="overflow-y:auto; padding:1rem 1.25rem; flex:1; min-height:0;">
            <p style="color:#4a7a80; font-size:0.85rem;">Loading&#x2026;</p>
        </div>
        <!-- Footer -->
        <div style="padding:0.4rem 1.25rem; border-top:1.5px solid #e0f4f6;
                    display:flex; justify-content:flex-end; gap:0.5rem; align-items:center;">
            <button type="button" id="cancel-edit-modal"
                    style="border:1.5px solid #b2e0e4; border-radius:5px; background:transparent;
                           color:#4a7a80; font-family:'Ubuntu',sans-serif; font-size:0.78rem;
                           padding:0.18rem 0.75rem; cursor:pointer; line-height:1.4;">Cancel</button>
            <button type="button" id="save-copy-edit-modal"
                    style="border:1.5px solid #22a6b3; border-radius:5px; background:transparent;
                           color:#22a6b3; font-family:'Ubuntu',sans-serif; font-size:0.78rem;
                           padding:0.18rem 0.75rem; cursor:pointer; line-height:1.4;">
                Save as Copy
            </button>
            <button type="button" id="save-edit-modal"
                    style="border:none; border-radius:5px; background:#22a6b3;
                           color:#fff; font-family:'Ubuntu',sans-serif; font-size:0.78rem;
                           padding:0.18rem 0.85rem; cursor:pointer; line-height:1.4;">Save</button>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('record-search');
    const tableBody   = document.getElementById('record-table-body');
    const scrollWrap  = document.getElementById('table-scroll-wrap');
    const scrollHint  = document.getElementById('scroll-hint');
    const tooltip     = document.getElementById('array-tooltip');

    const recordCount  = document.getElementById('record-count');
    const totalCount   = {{ total_count }};

    // Search filter
    searchInput.addEventListener('input', function() {
        const q = this.value.toLowerCase();
        let visible = 0;
        tableBody.querySelectorAll('.record-row').forEach(row => {
            const show = row.textContent.toLowerCase().includes(q);
            row.style.display = show ? '' : 'none';
            if (show) visible++;
        });
        if (q) {
            recordCount.textContent = visible.toLocaleString() + ' of ' + totalCount.toLocaleString() + ' records';
        } else {
            recordCount.textContent = totalCount.toLocaleString() + ' records';
        }
    });

    // Scroll hint
    function updateScrollHint() {
        scrollHint.style.display = scrollWrap.scrollWidth > scrollWrap.clientWidth ? 'block' : 'none';
    }
    updateScrollHint();
    window.addEventListener('resize', updateScrollHint);
    scrollWrap.addEventListener('scroll', () => scrollHint.style.display = 'none', { once: true });

    // Array badge floating tooltip
    document.addEventListener('mouseover', function(e) {
        const badge = e.target.closest('.array-badge');
        if (badge && badge.dataset.tooltip) {
            tooltip.textContent = badge.dataset.tooltip;
            tooltip.style.display = 'block';
        }
    });
    document.addEventListener('mousemove', function(e) {
        if (tooltip.style.display === 'block') {
            const off = 14;
            let l = e.clientX + off, t = e.clientY + off;
            if (l + tooltip.offsetWidth  > window.innerWidth  - 8) l = e.clientX - tooltip.offsetWidth  - off;
            if (t + tooltip.offsetHeight > window.innerHeight - 8) t = e.clientY - tooltip.offsetHeight - off;
            tooltip.style.left = l + 'px';
            tooltip.style.top  = t + 'px';
        }
    });
    document.addEventListener('mouseout', function(e) {
        if (e.target.closest('.array-badge')) tooltip.style.display = 'none';
    });

    // Add New modal
    const overlay = document.getElementById('add-modal-overlay');
    function openModal()  { overlay.style.display = 'flex'; }
    function closeModal() { overlay.style.display = 'none'; }

    document.getElementById('open-add-modal').addEventListener('click', openModal);
    document.getElementById('close-add-modal').addEventListener('click', closeModal);
    document.getElementById('cancel-add-modal').addEventListener('click', closeModal);
    overlay.addEventListener('click', function(e) { if (e.target === overlay) closeModal(); });
    document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });

    // ── Edit modal ────────────────────────────────────────────────────────
    const editOverlay        = document.getElementById('edit-modal-overlay');
    const editBody           = document.getElementById('edit-modal-body');
    const editTitle          = document.getElementById('edit-modal-title');
    const saveEditBtn        = document.getElementById('save-edit-modal');
    const saveCopyBtn        = document.getElementById('save-copy-edit-modal');
    const cancelEditBtn      = document.getElementById('cancel-edit-modal');
    const closeEditBtn       = document.getElementById('close-edit-modal');
    const linkedSimsBar      = document.getElementById('edit-linked-sims-bar');
    const linkedSimsText     = document.getElementById('edit-linked-sims-text');
    const copyChoicePanel    = document.getElementById('edit-copy-choice');
    const modeDirectRadio    = document.getElementById('edit-mode-direct');
    const modeCopyRadio      = document.getElementById('edit-mode-copy');
    const copySimSelect      = document.getElementById('edit-copy-sim-select');
    const copySimCheckboxes  = document.getElementById('edit-copy-sim-checkboxes');
    let _editPk = null;
    let _linkedSims = [];

    const MODAL_FIELDS  = {{ modal_fields_json|safe }};
    const MODAL_GROUPS  = {{ modal_fields_grouped_json|safe }};
    const TABLE_NAME    = '{{ table_name }}';
    const CSRF_TOKEN    = '{{ csrf_token }}';

    // Build and show/hide the copy sim checkboxes on radio change
    [modeDirectRadio, modeCopyRadio].forEach(function(r) {
        r.addEventListener('change', function() {
            const isCopy = modeCopyRadio.checked;
            saveEditBtn.disabled = isCopy;
            saveEditBtn.style.opacity = isCopy ? '0.4' : '1';
            saveEditBtn.style.cursor  = isCopy ? 'not-allowed' : 'pointer';
            saveCopyBtn.style.background = isCopy ? '#22a6b3' : 'transparent';
            saveCopyBtn.style.color      = isCopy ? '#fff' : '#22a6b3';
            if (isCopy) {
                // Build checkbox list fresh from _linkedSims
                copySimCheckboxes.innerHTML = '';
                _linkedSims.forEach(function(s) {
                    const lbl = document.createElement('label');
                    lbl.style.cssText = 'display:block;padding:0.1rem 0;font-size:0.78rem;color:#1a2e30;cursor:pointer;user-select:none;line-height:1.4;';
                    const cb = document.createElement('input');
                    cb.type = 'checkbox';
                    cb.className = 'filled-in';
                    cb.value = String(s.id);
                    cb.checked = false;
                    const span = document.createElement('span');
                    span.textContent = s.name;
                    // Scale down the Materialize filled-in checkbox via the span's before/after pseudo-elements
                    span.style.cssText = 'font-size:0.78rem;padding-left:1.6rem;line-height:1.4;';
                    lbl.appendChild(cb);
                    lbl.appendChild(span);
                    copySimCheckboxes.appendChild(lbl);
                });
                copySimSelect.style.display = 'block';
            } else {
                copySimSelect.style.display = 'none';
                copySimCheckboxes.innerHTML = '';
            }
        });
    });

    function fmtVal(val, ftype) {
        // Mirror Python ':,g': thousand commas for normal-range numbers,
        // scientific notation for very small/large, strip trailing zeros.
        if (ftype === 'number' && val !== '' && val !== null && val !== undefined) {
            const n = parseFloat(val);
            if (!isNaN(n)) {
                const abs = Math.abs(n);
                if (n === 0) return '0';
                // Scientific range: use toPrecision(6) which gives e.g. 4.14e-10
                if (abs !== 0 && (abs < 1e-4 || abs >= 1e7)) {
                    return parseFloat(n.toPrecision(6)).toString();
                }
                // Normal range: strip trailing zeros then add thousand commas
                const stripped = parseFloat(n.toPrecision(10)).toString();
                const parts = stripped.split('.');
                parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                return parts.join('.');
            }
        }
        return (val !== null && val !== undefined) ? String(val) : '';
    }

    function _buildFieldRow(f, val) {
        let input = '';
        val = (val !== undefined && val !== null) ? val : '';
            if (f.ftype === 'checkbox') {
                const chk = (String(val).toLowerCase() === 'true' || val === true) ? 'checked' : '';
                input = '<input type="hidden" name="' + f.name + '" value="false">'
                      + '<input type="checkbox" name="' + f.name + '" value="true" ' + chk
                      + ' style="accent-color:#22a6b3;width:1rem;height:1rem;">';
            } else if (f.ftype === 'select') {
                input = '<select name="' + f.name + '" style="width:100%;border:1px solid #b2e0e4;border-radius:4px;'
                      + 'padding:0.3rem 0.5rem;font-family:\'Ubuntu Mono\',monospace;font-size:0.82rem;'
                      + 'color:#1a2e30;background:#f4fafb;box-shadow:none;height:auto;">';
                f.choices.forEach(function(c) {
                    const sel = (String(c[0]) === String(val)) ? ' selected' : '';
                    input += '<option value="' + c[0] + '"' + sel + '>' + c[1] + '</option>';
                });
                input += '</select>';
            } else if (f.ftype === 'textarea') {
                input = '<textarea name="' + f.name + '" rows="2" style="width:100%;border:1px solid #b2e0e4;'
                      + 'border-radius:4px;padding:0.3rem 0.5rem;font-family:\'Ubuntu Mono\',monospace;'
                      + 'font-size:0.82rem;color:#1a2e30;resize:vertical;box-sizing:border-box;">'
                      + val + '</textarea>';
            } else {
                const itype = f.ftype === 'number' ? 'text' : f.ftype;
                const imode = f.ftype === 'number' ? ' inputmode="decimal"' : '';
                input = '<input type="' + itype + '" name="' + f.name + '" value="' + fmtVal(val, f.ftype) + '"' + imode
                      + ' style="width:100%;border:1px solid #b2e0e4;border-radius:4px;'
                      + 'padding:0.3rem 0.5rem;font-family:\'Ubuntu Mono\',monospace;'
                      + 'font-size:0.82rem;color:#1a2e30;background:#f4fafb;'
                      + 'box-shadow:none;height:auto;box-sizing:border-box;">';
            }
        const help = f.help_text
            ? '<div style="font-size:0.7rem;color:#546e7a;font-weight:400;">' + f.help_text + '</div>' : '';
        return '<tr style="border-bottom:1px solid #f0f8f9;">'
             + '<td style="padding:0.45rem 0.5rem 0.45rem 0;width:44%;color:#4a7a80;'
             + 'font-weight:500;vertical-align:middle;">' + f.label + help + '</td>'
             + '<td style="padding:0.45rem 0;">' + input + '</td></tr>';
    }

    function buildEditForm(values) {
        let html = '<table style="width:100%;border-collapse:collapse;font-size:0.84rem;"><tbody>';
        MODAL_GROUPS.forEach(function(group) {
            if (group.name) {
                html += '<tr><td colspan="2" style="padding:0.55rem 0 0.2rem;'
                      + 'font-family:\'Ubuntu\',sans-serif;font-size:0.7rem;font-weight:600;'
                      + 'letter-spacing:0.07em;text-transform:uppercase;color:#22a6b3;'
                      + 'border-bottom:1.5px solid #e0f4f6;">'
                      + group.name + '</td></tr>';
            }
            group.fields.forEach(function(f) {
                const val = values[f.name];
                html += _buildFieldRow(f, val);
            });
        });
        html += '</tbody></table>';
        editBody.innerHTML = html;
    }

    function buildLinkedSimsUI(sims) {
        _linkedSims = sims || [];
        // Reset panel to clean state
        copySimCheckboxes.innerHTML = '';
        copySimSelect.style.display = 'none';
        modeDirectRadio.checked = true;
        saveEditBtn.disabled = false;
        saveEditBtn.style.opacity = '1';
        saveEditBtn.style.cursor = 'pointer';
        saveCopyBtn.style.background = 'transparent';
        saveCopyBtn.style.color = '#22a6b3';
        if (!_linkedSims.length) {
            linkedSimsBar.style.display = 'none';
            copyChoicePanel.style.display = 'none';
            return;
        }
        // Banner
        const names = _linkedSims.map(function(s) { return '\u201c' + s.name + '\u201d'; }).join(', ');
        linkedSimsText.textContent = 'Linked to ' + _linkedSims.length + ' simulation' +
            (_linkedSims.length > 1 ? 's' : '') + ': ' + names;
        linkedSimsBar.style.display = 'block';
        // Show direct/copy radio choice only when >1 linked sims
        copyChoicePanel.style.display = _linkedSims.length > 1 ? 'block' : 'none';
    }

    function openEditModal(pk) {
        _editPk = pk;
        _linkedSims = [];
        editTitle.textContent = 'Edit {{ ui_verbose_name }} #' + pk;
        editBody.innerHTML = '<p style="color:#4a7a80;font-size:0.85rem;">Loading\u2026</p>';
        linkedSimsBar.style.display = 'none';
        copyChoicePanel.style.display = 'none';
        editOverlay.style.display = 'flex';
        fetch('/browse/' + TABLE_NAME + '/' + pk + '/get')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                buildLinkedSimsUI(data._linked_sims || []);
                buildEditForm(data);
            })
            .catch(function() { editBody.innerHTML = '<p style="color:#c07379;">Failed to load record.</p>'; });
    }

    function closeEditModal() { editOverlay.style.display = 'none'; _editPk = null; _linkedSims = []; }

    closeEditBtn.addEventListener('click', closeEditModal);
    cancelEditBtn.addEventListener('click', closeEditModal);
    editOverlay.addEventListener('click', function(e) { if (e.target === editOverlay) closeEditModal(); });
    document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeEditModal(); });

    function getCheckedSimIds() {
        const ids = [];
        copySimCheckboxes.querySelectorAll('input[type=checkbox]').forEach(function(cb) {
            if (cb.checked) ids.push(cb.value);
        });
        return ids;
    }

    function submitEdit(forcedMode) {
        if (!_editPk) return;
        const fd = new FormData();
        fd.append('csrfmiddlewaretoken', CSRF_TOKEN);

        const panelVisible  = copyChoicePanel.style.display !== 'none';
        const copyRadioOn   = panelVisible && modeCopyRadio.checked;
        const simSelectOpen = copySimSelect.style.display !== 'none';

        let mode;
        if (forcedMode === 'copy') {
            mode = 'copy';
            // Use the checkbox selection if the sim-select panel is open; else all linked sims
            const checkedIds = simSelectOpen ? getCheckedSimIds()
                             : _linkedSims.map(function(s) { return String(s.id); });
            if (!checkedIds.length) {
                alert('No simulations available to link the copy to.');
                return;
            }
            checkedIds.forEach(function(id) { fd.append('copy_sim_ids', id); });
        } else {
            if (copyRadioOn) {
                mode = 'copy';
                const checkedIds = getCheckedSimIds();
                if (!checkedIds.length) {
                    alert('Please select at least one simulation for the copy to be linked to.');
                    return;
                }
                checkedIds.forEach(function(id) { fd.append('copy_sim_ids', id); });
            } else {
                mode = 'direct';
            }
        }
        fd.append('_mode', mode);

        const seen = new Set();
        editBody.querySelectorAll('input,select,textarea').forEach(function(el) {
            if (el.type === 'checkbox') {
                seen.add(el.name);
                fd.set(el.name, el.checked ? 'true' : 'false');
            } else if (!seen.has(el.name)) {
                fd.append(el.name, el.value);
                seen.add(el.name);
            }
        });
        saveEditBtn.disabled = true;
        saveCopyBtn.disabled = true;
        fetch('/browse/' + TABLE_NAME + '/' + _editPk + '/edit', { method: 'POST', body: fd })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                saveEditBtn.disabled = false;
                saveCopyBtn.disabled = false;
                if (data.ok) { closeEditModal(); window.location.reload(); }
                else { alert('Save failed: ' + (data.error || 'unknown error')); }
            })
            .catch(function() {
                saveEditBtn.disabled = false;
                saveCopyBtn.disabled = false;
                alert('Network error \u2014 changes not saved.');
            });
    }

    saveEditBtn.addEventListener('click', function() { submitEdit(null); });
    saveCopyBtn.addEventListener('click', function() { submitEdit('copy'); });

    document.querySelectorAll('.browse-edit-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            openEditModal(btn.dataset.pk);
        });
    });

    document.querySelectorAll('.browse-delete-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            const pk   = btn.dataset.pk;
            const name = btn.dataset.name || ('#' + pk);
            if (!confirm('Delete \u201c' + name + '\u201d?\n\nThis cannot be undone.')) return;
            const fd = new FormData();
            fd.append('csrfmiddlewaretoken', CSRF_TOKEN);
            fetch('/browse/' + TABLE_NAME + '/' + pk + '/delete', { method: 'POST', body: fd })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (data.ok) { window.location.reload(); }
                    else { alert('Delete failed: ' + (data.error || 'unknown error')); }
                })
                .catch(function() { alert('Network error \u2014 record not deleted.'); });
        });
    });
});
</script>

{% endblock %}