// GH #272: ?ticket_form=N fills a form on a TICKET - the same page and the same rules
// (TicketForms is TaskForms with the ticket as host); only the endpoint differs.
const HOST_PARAMS = new URLSearchParams(window.location.search);
const TASK_FORM_ID = HOST_PARAMS.get('task_form') || HOST_PARAMS.get('ticket_form');
const FILL_API = HOST_PARAMS.get('ticket_form') ? '../api/tickets/forms.php' : '../api/tasks/forms.php';
const taskClientRef = 'tf-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);

let state = { ticketId: null, enabled: false, forms: [], available: [], canWrite: false };

async function loadTicketForms(ticketId) {
    state = { ticketId, enabled: false, forms: [], available: [], canWrite: false };
    try {
        const d = await getJson('?ticket_id=' + encodeURIComponent(ticketId));
        if (state.ticketId !== ticketId) return;   // another ticket opened meanwhile
        if (d.success) state = { ticketId, enabled: !!d.enabled, forms: d.forms || [], available: d.available || [], canWrite: !!d.can_write };
    } catch (e) { /* no button */ }
    renderButton();
    drawInline();      // the workspace Work tab (§4)
}

/** The cards and the add row - the same in the modal and in the workspace's Work tab. */
function formsHtml() {
    const rows = state.forms.map(f => {
        const mode = f.is_required ? f.requirement_mode : 'optional';
        const badge = '<span class="tf-badge ' + mode + '">' + esc(/* Required (blocks) | Required (warns) | Optional */) + '</span>';
        const fill = f.may_fill && state.canWrite && f.form_exists
            ? '<button type="button" class="btn ' + (f.submission_id ? 'btn-secondary' : 'btn-primary') + '" data-fill="' + f.id + '">'
              + esc(f.submission_id ? T('correct') : T('fill')) + '</button>' : '';
        const ans = f.submission_id && f.may_read ? '<button type="button" class="btn btn-secondary" data-answers="' + f.id + '">' + esc(T('answers')) + '</button>' : '';
        // … requirement <select data-req>, <button class="tf-remove" data-remove>, the state line
    }).join('') || '<p class="tf-empty">' + esc(T('none')) + '</p>';
    // … the add row: <select data-add-select> of state.available minus forms already on it, <button data-add-btn disabled>
    return rows + add;
}

function wire(container) {
    container.querySelectorAll('[data-fill]').forEach(b => { b.onclick = () => openFill(Number(b.dataset.fill)); });
    container.querySelectorAll('[data-answers]').forEach(b => { b.onclick = () => showAnswers(container, Number(b.dataset.answers)); });
    container.querySelectorAll('[data-remove]').forEach(b => { b.onclick = () => removeForm(container, Number(b.dataset.remove)); });
    container.querySelectorAll('[data-req]').forEach(s => { s.onchange = () => setRequirement(container, Number(s.dataset.req), s.value); });
    // the add select enables its button; the button posts {action: 'add'}
}

/** Both places at once, from the one state. */
function redrawAll() {
    const panel = document.querySelector('#ticketFormsModal.active > .modal-content');
    if (panel) drawPanel(panel);
    drawInline();
}

function openFill(id) {
    const f = state.forms.find(x => x.id === id);
    const box = modal('ticketFormFill', 820);
    const base = (window.API_BASE || '../api/tickets/').replace(/api\/tickets\/$/, '');
    box.innerHTML = '<div class="modal-header">' + esc(f ? f.title : T('fill')) + '</div>'
        + '<div class="modal-body" style="padding:8px 16px;">'
        + '<iframe id="ticketFormFrame" title="…" src="' + base + 'forms/fill.php?ticket_form=' + encodeURIComponent(id) + '&embed=1" …></iframe></div>'
        + '<div class="modal-footer"><button type="button" class="btn btn-secondary" id="ticketFormFillClose">' + esc(T('close')) + '</button></div>';
}

// The fill page says when it saved or submitted, and how tall it is.
window.addEventListener('message', (e) => {
    if (e.origin !== location.origin || !e.data || typeof e.data !== 'object') return;
    const frame = document.getElementById('ticketFormFrame');
    if (!frame || e.source !== frame.contentWindow) return;
    if (e.data.type === 'tf-height' && e.data.height) frame.style.height = Math.min(Math.max(e.data.height + 24, 240), window.innerHeight * 0.8) + 'px';
    if (e.data.type === 'tf-saved') {
        refresh();
        if (e.data.submitted) { closeModal('ticketFormFill'); showToast(T('submitted'), 'success'); return; }
    }
});

work: checklistHtml + '<div id="twTicketForms" hidden></div><div class="tw-task-list" id="twTaskList"></div><div class="tw-tasks" id="twTaskArea"></div>',

/**
 * The workspace's Work tab (#twTicketForms, inbox.js): the same cards, beside the
 * checklists and tasks. Only while the ticket has forms - adding the first one is
 * the toolbar button's job, so an empty Work tab keeps its "nothing here yet" note.
 */
function drawInline() {
    const host = document.getElementById('twTicketForms');
    if (!host) return;
    if (!state.enabled || !state.forms.length) { host.innerHTML = ''; host.hidden = true; return; }
    injectStyle();
    host.hidden = false;
    host.innerHTML = '<h3 class="tf-inline-title">' + esc(T('title')) + '</h3>' + formsHtml();
    wire(host);
}

const forms = panel.querySelector('#twTicketForms');   // GH #272: forms on the ticket (ticket-forms.js)
const hasForms = !!forms && !forms.hidden && forms.childElementCount > 0;
const hide = !!(hasChecklist || hasForms || hasTasks);

if (typeof populateContextFormsSubmenu === 'function') populateContextFormsSubmenu(ctxActsOnSelection ? selectedTicketIds() : [ctxTargetTicketId]);   // GH #272

async function populateContextFormsSubmenu(ids) {
    // … loading row; GET ?ticket_id=<first>; stale-guard on sub.dataset.for
    if (!d.enabled || !d.can_write) { item.style.display = 'none'; return; }
    item.style.display = '';
    const on = new Set(ctxIds.length === 1 ? (d.forms || []).map(f => f.form_id) : []);   // ticks: one ticket only
    sub.innerHTML = list.slice(0, CTX_FORMS_SHOWN).map(a => on.has(a.id)
        ? ctxRow('<span class="ctx-status-name">' + esc(a.title) + '</span><span class="ctx-status-check">&#10003;</span>', ' style="cursor:default;opacity:.6;" …')
        : ctxRow('<span class="ctx-status-name">' + esc(a.title) + '</span>', ' onclick="addFormFromContext(' + Number(a.id) + ')"')).join('')
        + /* "All forms…" when there are more than 12, for one ticket */ '';
}

async function addFormFromContext(formId) {
    closeTicketContextMenu();
    let done = 0, already = 0, failed = 0;
    for (const id of ctxIds) {
        const d = await post({ action: 'add', ticket_id: id, form_id: formId });
        if (d.success) done++;
        else if (d.code === 'conflict') already++;   // TicketForms::add(): "That form is already on this ticket."
        else failed++;
    }
    // toast: "Form added." / "Added to 3 ticket(s). 1 already had it."
}