{# ─────────────────────────────────────────────────────────────────
   Shared "Create Target" modal — used by the three Intel launcher
   cards (Import, Probe, Sweep). Included once on /intel; the three
   cards drive it via the `__new__` sentinel option on their target
   <select>. Originating card id is recorded on the modal via a
   data attribute so the submit handler can route the new <option>
   back to the correct selector.

   Phase 5 — see RFC Decision 3 (required target binding + inline
   creation) and `Plans/Plan-Intel-Target-Centric-Workspace.md`.
   ───────────────────────────────────────────────────────────────── #}
<div id="target-create-modal" class="target-modal-backdrop hidden"
     role="dialog" aria-modal="true" aria-labelledby="target-modal-title"
     data-source-card="">
    <div class="target-modal-dialog">
        <div class="target-modal-header">
            <h2 id="target-modal-title" class="target-modal-title">Create Target</h2>
            <button type="button" class="target-modal-close"
                    aria-label="Close" onclick="closeTargetModal()">×</button>
        </div>
        <form id="target-create-form" class="target-modal-form"
              onsubmit="return submitTargetCreate(event)">
            <div class="form-control">
                <label class="label" for="tm-name">
                    <span class="label-text">Name <span style="color:#f87171;">*</span></span>
                </label>
                <input id="tm-name" type="text" name="name" required
                       class="input input-bordered input-sm w-full"
                       autocomplete="off"
                       oninput="debouncedTargetNameCheck()" />
                <div id="tm-name-warning" class="target-modal-warning hidden"></div>
                <div id="tm-name-error" class="target-modal-field-error hidden"></div>
            </div>

            <div class="form-control">
                <label class="label" for="tm-type">
                    <span class="label-text">Type <span style="color:#f87171;">*</span></span>
                </label>
                <input id="tm-type" type="text" name="type" required
                       list="tm-type-options" value="server"
                       class="input input-bordered input-sm w-full"
                       autocomplete="off" />
                <datalist id="tm-type-options">
                    <option value="server">
                    <option value="endpoint">
                </datalist>
                <div id="tm-type-error" class="target-modal-field-error hidden"></div>
            </div>

            <div class="form-control">
                <label class="label" for="tm-uri">
                    <span class="label-text">URI (optional)</span>
                </label>
                <input id="tm-uri" type="text" name="uri"
                       class="input input-bordered input-sm w-full"
                       autocomplete="off" />
                <div id="tm-uri-error" class="target-modal-field-error hidden"></div>
            </div>

            <div class="form-control">
                <label class="label"><span class="label-text">Metadata (optional)</span></label>
                <div id="tm-metadata-rows" class="target-modal-metadata-rows"></div>
                <button type="button" class="btn btn-xs target-modal-add-pair"
                        onclick="addMetadataRow()">+ Add pair</button>
                <div id="tm-metadata-error" class="target-modal-field-error hidden"></div>
            </div>

            <div id="tm-form-error" class="target-modal-field-error hidden"
                 style="margin-top: 0.5rem;"></div>

            <div class="target-modal-actions">
                <button type="button" class="btn btn-sm" onclick="closeTargetModal()">
                    Cancel
                </button>
                <button type="submit" class="btn btn-sm btn-launch"
                        id="tm-submit-btn">Create &amp; Continue</button>
            </div>
        </form>
    </div>
</div>

<style>
.target-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 20, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}
.target-modal-backdrop.hidden { display: none; }
.target-modal-dialog {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    background: #111827;
    border: 1px solid rgba(139, 92, 246, 0.35);
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.target-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.target-modal-title {
    font-family: 'Fira Code', monospace;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #a78bfa;
    margin: 0;
}
.target-modal-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.target-modal-close:hover { color: #e2e8f0; }
.target-modal-form .form-control { margin-bottom: 0.75rem; }
.target-modal-metadata-rows {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
}
.target-modal-metadata-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.375rem;
    align-items: center;
}
.target-modal-add-pair {
    background: transparent;
    color: #94a3b8;
    border: 1px dashed rgba(139, 92, 246, 0.35);
    font-size: 0.8rem;
}
.target-modal-add-pair:hover {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.6);
}
.target-modal-remove-pair {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
}
.target-modal-remove-pair:hover { color: #f87171; border-color: rgba(248, 113, 113, 0.5); }
.target-modal-warning {
    color: #fbbf24;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.target-modal-field-error {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}
.target-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}
</style>

<script>
/* ── Modal open/close and state ──────────────────────────────── */
var _targetModalKeydownBound = false;
var _targetNameCheckTimer = null;

function openTargetModal(sourceCardId) {
    /* sourceCardId: one of 'card-import', 'card-probe', 'card-sweep'.
       Stored as data attribute — single shared DOM instance, so
       concurrent opens from multiple cards are not possible in
       single-user localhost context. */
    var modal = document.getElementById('target-create-modal');
    modal.dataset.sourceCard = sourceCardId || '';
    resetTargetModalForm();
    modal.classList.remove('hidden');
    var nameInput = document.getElementById('tm-name');
    if (nameInput) nameInput.focus();
    if (!_targetModalKeydownBound) {
        document.addEventListener('keydown', onTargetModalKeydown);
        _targetModalKeydownBound = true;
    }
    modal.addEventListener('click', onTargetModalBackdropClick);
}

function closeTargetModal() {
    var modal = document.getElementById('target-create-modal');
    modal.classList.add('hidden');
    modal.removeEventListener('click', onTargetModalBackdropClick);
    if (_targetModalKeydownBound) {
        document.removeEventListener('keydown', onTargetModalKeydown);
        _targetModalKeydownBound = false;
    }
    /* Reset the originating card's selector if it was left on __new__.
       If the create succeeded, submitTargetCreate() has already
       restored the selector to the new target_id before calling this. */
    var sourceCardId = modal.dataset.sourceCard;
    if (sourceCardId) {
        var select = document.querySelector('#' + sourceCardId + ' select[name="target_id"]');
        if (select && select.value === '__new__') {
            select.value = select.dataset.previousValue || '';
        }
    }
    modal.dataset.sourceCard = '';
}

function onTargetModalKeydown(e) {
    if (e.key === 'Escape') closeTargetModal();
}

function onTargetModalBackdropClick(e) {
    if (e.target && e.target.id === 'target-create-modal') closeTargetModal();
}

function resetTargetModalForm() {
    var form = document.getElementById('target-create-form');
    form.reset();
    document.getElementById('tm-type').value = 'server';
    document.getElementById('tm-metadata-rows').innerHTML = '';
    hideAllTargetModalErrors();
    var warn = document.getElementById('tm-name-warning');
    warn.classList.add('hidden');
    warn.textContent = '';
    var btn = document.getElementById('tm-submit-btn');
    if (btn) btn.disabled = false;
}

function hideAllTargetModalErrors() {
    ['tm-name-error','tm-type-error','tm-uri-error','tm-metadata-error','tm-form-error']
        .forEach(function(id) {
            var el = document.getElementById(id);
            if (el) { el.classList.add('hidden'); el.textContent = ''; }
        });
}

/* ── Metadata key-value rows ─────────────────────────────────── */
function addMetadataRow() {
    var container = document.getElementById('tm-metadata-rows');
    var row = document.createElement('div');
    row.className = 'target-modal-metadata-row';
    row.innerHTML =
        '<input type="text" class="input input-bordered input-sm tm-meta-key" ' +
        'placeholder="key" autocomplete="off" />' +
        '<input type="text" class="input input-bordered input-sm tm-meta-value" ' +
        'placeholder="value" autocomplete="off" />' +
        '<button type="button" class="target-modal-remove-pair" ' +
        'onclick="this.parentElement.remove()">Remove</button>';
    container.appendChild(row);
}

function collectMetadata() {
    var rows = document.querySelectorAll('#tm-metadata-rows .target-modal-metadata-row');
    var meta = {};
    var hasAny = false;
    rows.forEach(function(row) {
        var k = row.querySelector('.tm-meta-key').value.trim();
        var v = row.querySelector('.tm-meta-value').value.trim();
        if (k) { meta[k] = v; hasAny = true; }
    });
    return hasAny ? meta : null;
}

/* ── Debounced name-collision check ──────────────────────────── */
function debouncedTargetNameCheck() {
    if (_targetNameCheckTimer) clearTimeout(_targetNameCheckTimer);
    _targetNameCheckTimer = setTimeout(runTargetNameCheck, 300);
}

async function runTargetNameCheck() {
    var nameInput = document.getElementById('tm-name');
    var warn = document.getElementById('tm-name-warning');
    var name = (nameInput.value || '').trim();
    if (!name) {
        warn.classList.add('hidden');
        warn.textContent = '';
        return;
    }
    try {
        var url = '/api/targets/check-name?name=' + encodeURIComponent(name);
        var resp = await fetch(url);
        if (!resp.ok) return;
        var data = await resp.json();
        if (data.exists) {
            warn.textContent = 'A target named "' + name +
                '" already exists. Submit will create a second target with the same name.';
            warn.classList.remove('hidden');
        } else {
            warn.classList.add('hidden');
            warn.textContent = '';
        }
    } catch (_err) {
        /* Network failure is non-fatal — warning is advisory. */
    }
}

/* ── Submit ──────────────────────────────────────────────────── */
async function submitTargetCreate(e) {
    e.preventDefault();
    hideAllTargetModalErrors();
    var btn = document.getElementById('tm-submit-btn');
    btn.disabled = true;

    var modal = document.getElementById('target-create-modal');
    var sourceCardId = modal.dataset.sourceCard;

    var name = document.getElementById('tm-name').value.trim();
    var type_ = document.getElementById('tm-type').value.trim();
    var uri = document.getElementById('tm-uri').value.trim();
    var metadata = collectMetadata();

    var payload = { name: name, type: type_ };
    if (uri) payload.uri = uri;
    if (metadata) payload.metadata = metadata;

    try {
        var resp = await fetch('/api/intel/targets/create', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(payload),
        });
        var data = await resp.json();
        if (!resp.ok) {
            var formErr = document.getElementById('tm-form-error');
            formErr.textContent = data.detail || 'Create target failed';
            formErr.classList.remove('hidden');
            btn.disabled = false;
            return false;
        }

        /* Insert new option into the originating card's selector, sorted
           alphabetically by display name among the existing non-sentinel
           options. Then select it, restore selector state, close modal,
           and resume the card's launch flow. */
        insertNewTargetOption(sourceCardId, data.target_id, data.name);
        var select = document.querySelector('#' + sourceCardId + ' select[name="target_id"]');
        if (select) {
            select.value = data.target_id;
            select.dataset.previousValue = data.target_id;
        }
        /* Clear source card before close() runs its reset-selector logic. */
        modal.dataset.sourceCard = '';
        closeTargetModal();
        resumeCardLaunch(sourceCardId);
    } catch (err) {
        var formErr = document.getElementById('tm-form-error');
        formErr.textContent = err.message || 'Network error';
        formErr.classList.remove('hidden');
        btn.disabled = false;
    }
    return false;
}

function insertNewTargetOption(sourceCardId, targetId, targetName) {
    /* Insert the new option into ALL three cards' selectors so the
       option is available if the researcher switches cards without a
       page reload. Sorted in alphabetically by display text after the
       __new__ sentinel. */
    var cardIds = ['card-import', 'card-probe', 'card-sweep'];
    cardIds.forEach(function(cid) {
        var select = document.querySelector('#' + cid + ' select[name="target_id"]');
        if (!select) return;
        var newOpt = document.createElement('option');
        newOpt.value = targetId;
        newOpt.textContent = targetName;
        var options = Array.prototype.slice.call(select.options);
        var insertBefore = null;
        for (var i = 0; i < options.length; i++) {
            var o = options[i];
            if (o.value === '__new__' || o.value === '') continue;
            if (o.textContent.localeCompare(targetName) > 0) { insertBefore = o; break; }
        }
        select.insertBefore(newOpt, insertBefore);
    });
}

function resumeCardLaunch(sourceCardId) {
    /* After a successful create-and-select, continue the originating
       card's flow. Import card uses importCommit() only after the
       researcher clicks "Import", so selection alone is sufficient —
       no auto-submit. Probe/Sweep submit via their own form buttons;
       the researcher clicks "Launch Probes"/"Launch Sweep" next. */
    /* No-op for now: all three cards have an explicit submit button
       that the researcher presses. The new target is selected; the
       next click will send it. Deliberate — avoids surprising
       background submits. */
}

/* ── Target select change-handler ────────────────────────────── */
function onTargetSelectChange(event) {
    var select = event.target;
    if (select.value === '__new__') {
        var card = select.closest('.intel-card');
        var cardId = card ? card.id : '';
        openTargetModal(cardId);
    } else {
        select.dataset.previousValue = select.value;
    }
}
</script>