{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}

{% block title %}
Ft3 Data
{% endblock %}
{% block content %}

<div class="container">
  <div class="row">
    <div class="col-md-10 col-lg-8 mx-lg-auto mx-md-auto">

      <style>
        .compact-form-shell {
          background: #f8fbff;
          border: 1px solid #cfdbe8;
          border-radius: 0.65rem;
          padding: 1rem 1.15rem 0.85rem;
          box-shadow: 0 1px 2px rgba(34, 68, 102, 0.06);
        }
        .compact-form-shell .mb-3 {
          margin-bottom: 0.65rem !important;
        }
        .compact-form-shell .form-label {
          margin-bottom: 0.2rem;
          font-size: 0.95rem;
          font-weight: 600;
        }
        .compact-form-shell .form-control,
        .compact-form-shell .form-select {
          padding: 0.32rem 0.55rem;
          font-size: 0.95rem;
        }
        .compact-form-shell textarea.form-control {
          min-height: 5.5rem;
        }
        .compact-form-shell .form-text,
        .compact-form-shell .invalid-feedback {
          margin-top: 0.15rem;
          font-size: 0.82rem;
          line-height: 1.25;
        }
        .compact-form-shell .form-check {
          display: inline-block;
          margin-right: 0.9rem;
          margin-bottom: 0.2rem;
        }
        .compact-form-shell .form-check-label {
          font-size: 0.92rem;
        }
        .compact-form-shell .btn {
          padding: 0.3rem 0.65rem;
        }
        .compact-form-shell .btn-sm {
          padding: 0.15rem 0.45rem;
        }
      </style>

		<h3 class="pt-3 pb-2">Editing file '{{ message }}'</h3>

      <div class="compact-form-shell">
        {{ render_form(form, novalidate=True) }}
      </div>

      <datalist id="instrument-options">
        {% for instrument in instrument_choices %}
        <option value="{{ instrument }}"></option>
        {% endfor %}
      </datalist>

      <script>
        document.addEventListener('DOMContentLoaded', function () {
          const formElement = document.querySelector('form');
          const ensembleInput = document.getElementById('ensemble');
          const partInput = document.getElementById('part');
          const typeInput = document.getElementById('type');
          const sourceInput = document.getElementById('source');
          const allowNewSourceInput = document.getElementById('allow_new_source') || formElement.querySelector('[name="allow_new_source"]');
          let allowNewDocumentInput = document.getElementById('allow_new_document') || formElement.querySelector('[name="allow_new_document"]');
          const documentInput = document.getElementById('document');
          const composerInput = document.getElementById('composer');
          const composer0Input = document.getElementById('composer0');
          if (!formElement || !ensembleInput) {
            return;
          }

          const instrumentChoices = {{ instrument_choices|tojson }};
          const typeChoices = {{ type_choices|tojson }};
          const nameChoices = {{ name_choices|tojson }};
          const sourceChoices = {{ source_choices|tojson }};
          const initialEnsembleValue = ensembleInput.value;
          let partClearedForEnsembleChange = false;
          let suppressBlurValidationFor = null;
          const ensembleMatchBox = document.createElement('div');
          ensembleMatchBox.id = 'ensemble-match-list';
          ensembleMatchBox.className = 'mt-2';
          ensembleInput.parentNode.appendChild(ensembleMatchBox);

          let partMatchBox = null;
          if (partInput) {
            partMatchBox = document.createElement('div');
            partMatchBox.id = 'part-match-list';
            partMatchBox.className = 'mt-2';
            partInput.parentNode.appendChild(partMatchBox);
          }

          let typeMatchBox = null;
          if (typeInput) {
            typeMatchBox = document.createElement('div');
            typeMatchBox.id = 'type-match-list';
            typeMatchBox.className = 'mt-2';
            typeInput.parentNode.appendChild(typeMatchBox);
          }

          let sourceMatchBox = null;
          if (sourceInput) {
            sourceMatchBox = document.createElement('div');
            sourceMatchBox.id = 'source-match-list';
            sourceMatchBox.className = 'mt-2';
            sourceInput.parentNode.appendChild(sourceMatchBox);
          }

          let composerMatchBox = null;
          if (composerInput) {
            composerMatchBox = document.createElement('div');
            composerMatchBox.id = 'composer-match-list';
            composerMatchBox.className = 'mt-2';
            composerInput.parentNode.appendChild(composerMatchBox);
          }

          let composer0MatchBox = null;
          if (composer0Input) {
            composer0MatchBox = document.createElement('div');
            composer0MatchBox.id = 'composer0-match-list';
            composer0MatchBox.className = 'mt-2';
            composer0Input.parentNode.appendChild(composer0MatchBox);
          }

          let documentMatchBox = null;
          if (documentInput) {
            documentMatchBox = document.createElement('div');
            documentMatchBox.id = 'document-match-list';
            documentMatchBox.className = 'mt-2';
            documentInput.parentNode.appendChild(documentMatchBox);
          }

          function normalize(value) {
            return value.toLowerCase().trim().replace(/\s+/g, ' ');
          }

          function getFieldElements(name) {
            return Array.from(formElement.querySelectorAll(`[name="${name}"]`));
          }

          function getFieldContainer(field) {
            return field.closest('.mb-3') || field.parentElement;
          }

          function getOrCreateHiddenInput(name) {
            let input = formElement.querySelector(`[name="${name}"]`);
            if (input) {
              return input;
            }
            input = document.createElement('input');
            input.type = 'hidden';
            input.name = name;
            input.id = name;
            formElement.appendChild(input);
            return input;
          }

          function clearFieldError(name) {
            const fields = getFieldElements(name);
            if (fields.length === 0) {
              return;
            }
            const container = getFieldContainer(fields[0]);
            fields.forEach(function (item) {
              item.classList.remove('is-invalid');
            });
            container.querySelectorAll('.invalid-feedback').forEach(function (item) {
              item.remove();
            });
          }

          function showFieldError(name, message) {
            const fields = getFieldElements(name);
            if (fields.length === 0) {
              return;
            }
            clearFieldError(name);
            if (!message) {
              return;
            }
            const container = getFieldContainer(fields[0]);
            fields.forEach(function (item) {
              item.classList.add('is-invalid');
            });
            const error = document.createElement('div');
            error.className = 'invalid-feedback d-block live-field-error';
            error.textContent = message;
            container.appendChild(error);
          }

          async function validateField(name, options = {}) {
            const suppressDisplay = options.suppressDisplay === true;
            const formData = new FormData(formElement);
            formData.set('field', name);
            const response = await fetch('/validate-field', {
              method: 'POST',
              body: formData,
              headers: {
                'X-Requested-With': 'XMLHttpRequest'
              }
            });
            const data = await response.json();
            if (!suppressDisplay) {
              if (data.ok) {
                clearFieldError(name);
              } else {
                showFieldError(name, data.error || 'Invalid input.');
              }
            }
            return data;
          }

          function clearDocumentMatches() {
            if (documentMatchBox) {
              documentMatchBox.innerHTML = '';
            }
          }

          async function updateDocumentMatches() {
            if (!documentInput || !documentMatchBox || !sourceInput) {
              return;
            }
            clearDocumentMatches();
            if (!sourceInput.value.trim()) {
              return;
            }
            const formData = new FormData(formElement);
            formData.set('source', sourceInput.value);
            if (allowNewSourceInput) {
              formData.set('allow_new_source', allowNewSourceInput.value);
            }
            const response = await fetch('/source-documents', {
              method: 'POST',
              body: formData,
              headers: {
                'X-Requested-With': 'XMLHttpRequest'
              }
            });
            const data = await response.json();
            const documents = data.documents || [];
            if (documents.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = 'Documents for this source:';
            documentMatchBox.appendChild(label);

            documents.slice(0, 12).forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                documentInput.value = match;
                if (allowNewDocumentInput) {
                  allowNewDocumentInput.value = '';
                }
                clearFieldError('document');
                documentInput.focus();
              });
              documentMatchBox.appendChild(button);
            });
          }

          function maybeClearPartOnEnsembleChange() {
            if (!partInput || partClearedForEnsembleChange) {
              return;
            }
            if (normalize(ensembleInput.value) !== normalize(initialEnsembleValue)) {
              partInput.value = '';
              partClearedForEnsembleChange = true;
              clearFieldError('part');
            }
          }

          function getCurrentToken(value) {
            const parts = value.split(',');
            return parts[parts.length - 1].trim();
          }

          function replaceCurrentToken(value, replacement) {
            const parts = value.split(',');
            parts[parts.length - 1] = ' ' + replacement;
            return parts.join(',').replace(/^ /, '');
          }

          function createSuggestionButton(label, onClick) {
            const button = document.createElement('button');
            button.type = 'button';
            button.className = 'btn btn-sm btn-outline-secondary me-2 mb-2';
            button.textContent = label;
            button.addEventListener('mousedown', function () {
              suppressBlurValidationFor = document.activeElement ? document.activeElement.name : null;
            });
            button.addEventListener('click', onClick);
            return button;
          }

          function renderMatches() {
            const token = normalize(getCurrentToken(ensembleInput.value));
            ensembleMatchBox.innerHTML = '';
            if (!token) {
              return;
            }

            const startsWithMatches = instrumentChoices.filter(function (choice) {
              return normalize(choice).startsWith(token);
            });
            const containsMatches = instrumentChoices.filter(function (choice) {
              const normalized = normalize(choice);
              return !normalized.startsWith(token) && normalized.includes(token);
            });
            const matches = startsWithMatches.concat(containsMatches).slice(0, 8);

            if (matches.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = 'Matching instruments:';
            ensembleMatchBox.appendChild(label);

            matches.forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                ensembleInput.value = replaceCurrentToken(ensembleInput.value, match);
                clearFieldError('ensemble');
                ensembleInput.focus();
                renderMatches();
              });
              ensembleMatchBox.appendChild(button);
            });
          }

          function renderTypeMatches() {
            if (!typeMatchBox || !typeInput) {
              return;
            }
            const token = normalize(getCurrentToken(typeInput.value));
            typeMatchBox.innerHTML = '';
            if (!token) {
              return;
            }

            const startsWithMatches = typeChoices.filter(function (choice) {
              return normalize(choice).startsWith(token);
            });
            const containsMatches = typeChoices.filter(function (choice) {
              const normalized = normalize(choice);
              return !normalized.startsWith(token) && normalized.includes(token);
            });
            const matches = startsWithMatches.concat(containsMatches).slice(0, 8);

            if (matches.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = 'Matching music types:';
            typeMatchBox.appendChild(label);

            matches.forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                typeInput.value = replaceCurrentToken(typeInput.value, match);
                clearFieldError('type');
                typeInput.focus();
                renderTypeMatches();
              });
              typeMatchBox.appendChild(button);
            });
          }

          function renderSourceMatches() {
            if (!sourceMatchBox || !sourceInput) {
              return;
            }
            const token = normalize(sourceInput.value);
            sourceMatchBox.innerHTML = '';
            if (!token) {
              return;
            }

            const startsWithMatches = sourceChoices.filter(function (choice) {
              return normalize(choice).startsWith(token);
            });
            const containsMatches = sourceChoices.filter(function (choice) {
              const normalized = normalize(choice);
              return !normalized.startsWith(token) && normalized.includes(token);
            });
            const matches = startsWithMatches.concat(containsMatches).slice(0, 8);

            if (matches.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = 'Matching sources:';
            sourceMatchBox.appendChild(label);

            matches.forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                sourceInput.value = match;
                if (allowNewSourceInput) {
                  allowNewSourceInput.value = '';
                }
                clearFieldError('source');
                sourceInput.focus();
                renderSourceMatches();
                updateDocumentMatches();
              });
              sourceMatchBox.appendChild(button);
            });
          }

          function renderNameMatches(input, matchBox, labelText) {
            if (!input || !matchBox) {
              return;
            }
            const token = normalize(input.value);
            matchBox.innerHTML = '';
            if (!token) {
              return;
            }

            const startsWithMatches = nameChoices.filter(function (choice) {
              return normalize(choice).startsWith(token);
            });
            const containsMatches = nameChoices.filter(function (choice) {
              const normalized = normalize(choice);
              return !normalized.startsWith(token) && normalized.includes(token);
            });
            const matches = startsWithMatches.concat(containsMatches).slice(0, 8);

            if (matches.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = labelText;
            matchBox.appendChild(label);

            matches.forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                input.value = match;
                clearFieldError(input.name);
                input.focus();
                renderNameMatches(input, matchBox, labelText);
              });
              matchBox.appendChild(button);
            });
          }

          function getPartChoices() {
            const seen = new Set();
            const choices = [];
            ensembleInput.value.split(',').forEach(function (item) {
              const trimmed = item.trim();
              if (!trimmed) {
                return;
              }
              const choice = trimmed.includes(':')
                ? trimmed.split(':', 1)[0].trim()
                : trimmed;
              const normalized = normalize(choice);
              if (!normalized || seen.has(normalized)) {
                return;
              }
              seen.add(normalized);
              choices.push(choice);
            });
            if (choices.length > 1 && !seen.has('score')) {
              choices.unshift('score');
            }
            return choices;
          }

          function renderPartMatches() {
            if (!partMatchBox || !partInput) {
              return;
            }
            const token = normalize(getCurrentToken(partInput.value));
            const choices = getPartChoices();
            partMatchBox.innerHTML = '';
            if (choices.length === 0) {
              return;
            }

            const startsWithMatches = token
              ? choices.filter(function (choice) { return normalize(choice).startsWith(token); })
              : choices;
            const containsMatches = token
              ? choices.filter(function (choice) {
                  const normalized = normalize(choice);
                  return !normalized.startsWith(token) && normalized.includes(token);
                })
              : [];
            const matches = startsWithMatches.concat(containsMatches).slice(0, 8);

            if (matches.length === 0) {
              return;
            }

            const label = document.createElement('div');
            label.className = 'form-text mb-1';
            label.textContent = 'Ensemble parts:';
            partMatchBox.appendChild(label);

            matches.forEach(function (match) {
              const button = createSuggestionButton(match, function () {
                partInput.value = replaceCurrentToken(partInput.value, match);
                clearFieldError('part');
                partInput.focus();
                renderPartMatches();
              });
              partMatchBox.appendChild(button);
            });
          }

          ensembleInput.addEventListener('input', renderMatches);
          ensembleInput.addEventListener('focus', renderMatches);
          ensembleInput.addEventListener('input', function () {
            clearFieldError('ensemble');
            maybeClearPartOnEnsembleChange();
            renderPartMatches();
          });
          ensembleInput.addEventListener('blur', function () {
            if (suppressBlurValidationFor === 'ensemble') {
              suppressBlurValidationFor = null;
              return;
            }
            validateField('ensemble');
          });
          if (partInput) {
            partInput.addEventListener('input', function () {
              clearFieldError('part');
              renderPartMatches();
            });
            partInput.addEventListener('focus', renderPartMatches);
            partInput.addEventListener('click', renderPartMatches);
            partInput.addEventListener('blur', function () {
              if (suppressBlurValidationFor === 'part') {
                suppressBlurValidationFor = null;
                return;
              }
              validateField('part');
            });
          }
          if (typeInput) {
            typeInput.addEventListener('input', function () {
              clearFieldError('type');
              renderTypeMatches();
            });
            typeInput.addEventListener('focus', renderTypeMatches);
            typeInput.addEventListener('blur', function () {
              if (suppressBlurValidationFor === 'type') {
                  suppressBlurValidationFor = null;
                  return;
              }
              validateField('type');
            });
          }
          if (sourceInput) {
            sourceInput.addEventListener('input', function () {
              if (allowNewSourceInput) {
                allowNewSourceInput.value = '';
              }
              if (allowNewDocumentInput) {
                allowNewDocumentInput.value = '';
              }
              clearFieldError('source');
              clearFieldError('document');
              clearDocumentMatches();
              renderSourceMatches();
            });
            sourceInput.addEventListener('focus', renderSourceMatches);
            sourceInput.addEventListener('blur', async function () {
              if (suppressBlurValidationFor === 'source') {
                suppressBlurValidationFor = null;
                return;
              }
              const result = await validateField('source', { suppressDisplay: true });
              if (result && !result.ok && allowNewSourceInput) {
                if (window.confirm('New source (y/n)?')) {
                  allowNewSourceInput.value = 'yes';
                  if (allowNewDocumentInput) {
                    allowNewDocumentInput.value = '';
                  }
                  clearFieldError('source');
                  clearDocumentMatches();
                  return;
                }
                showFieldError('source', result.error || 'Invalid input.');
                clearDocumentMatches();
                return;
              }
              if (allowNewSourceInput) {
                allowNewSourceInput.value = '';
              }
              clearFieldError('source');
              updateDocumentMatches();
            });
          }
          if (composerInput) {
            composerInput.addEventListener('input', function () {
              clearFieldError('composer');
              renderNameMatches(composerInput, composerMatchBox, 'Matching composers:');
            });
            composerInput.addEventListener('focus', function () {
              renderNameMatches(composerInput, composerMatchBox, 'Matching composers:');
            });
            composerInput.addEventListener('blur', function () {
              if (suppressBlurValidationFor === 'composer') {
                suppressBlurValidationFor = null;
                return;
              }
              validateField('composer');
            });
          }
          if (composer0Input) {
            composer0Input.addEventListener('input', function () {
              clearFieldError('composer0');
              renderNameMatches(composer0Input, composer0MatchBox, 'Matching original composers:');
            });
            composer0Input.addEventListener('focus', function () {
              renderNameMatches(composer0Input, composer0MatchBox, 'Matching original composers:');
            });
            composer0Input.addEventListener('blur', function () {
              if (suppressBlurValidationFor === 'composer0') {
                suppressBlurValidationFor = null;
                return;
              }
              validateField('composer0');
            });
          }
          if (documentInput) {
            documentInput.addEventListener('input', function () {
              allowNewDocumentInput = getOrCreateHiddenInput('allow_new_document');
              allowNewDocumentInput.value = '';
              clearFieldError('document');
            });
            documentInput.addEventListener('blur', async function () {
              const result = await validateField('document', { suppressDisplay: true });
              if (result && !result.ok && result.error && result.error.indexOf('Document not found for this source.') === 0) {
                if (window.confirm('New document (y/n)?')) {
                  allowNewDocumentInput = getOrCreateHiddenInput('allow_new_document');
                  allowNewDocumentInput.value = 'yes';
                  clearFieldError('document');
                  return;
                }
              }
              if (result.ok) {
                clearFieldError('document');
              } else {
                showFieldError('document', result.error || 'Invalid input.');
              }
            });
          }

          const validatedNames = new Set(['ensemble', 'part', 'type', 'source', 'document', 'composer', 'composer0']);
          formElement.querySelectorAll('input, textarea, select').forEach(function (field) {
            if (!field.name || validatedNames.has(field.name)) {
              return;
            }
            if (['hidden', 'submit', 'button', 'file'].includes(field.type)) {
              return;
            }
            if (field.type === 'radio') {
              if (validatedNames.has(field.name)) {
                return;
              }
              validatedNames.add(field.name);
              getFieldElements(field.name).forEach(function (radio) {
                radio.addEventListener('change', function () {
                  clearFieldError(field.name);
                  validateField(field.name);
                });
              });
              return;
            }
            validatedNames.add(field.name);
            field.addEventListener('input', function () {
              clearFieldError(field.name);
            });
            field.addEventListener('blur', function () {
              validateField(field.name);
            });
          });

          if (sourceInput && sourceInput.value.trim()) {
            updateDocumentMatches();
          }
        });
      </script>

      <p class="pt-5"><strong></strong></p>

    </div>
  </div>
</div>

{% endblock %}