export interface ValidationRule {
  quorum: number;
  fields: string[];
  min_sig_member: number;
}

/**
 * Loads and injects the modal HTML into the document if not already loaded.
 */
export async function loadValidationRuleModal(templatePath: string = '/src/components/validation-rule-modal/validation-rule-modal.html') {
  if (document.getElementById('validation-rule-modal')) return;

  const res = await fetch(templatePath);
  const html = await res.text();

  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;

  const modal = tempDiv.querySelector('#validation-rule-modal');
  if (!modal) {
    throw new Error('Modal HTML missing #validation-rule-modal');
  }

  document.body.appendChild(modal);
}

/**
 * Opens the modal and lets the user input a ValidationRule.
 * Calls the callback with the constructed rule on submit.
 */
export function showValidationRuleModal(onSubmit: (rule: ValidationRule) => void) {
  const modal = document.getElementById('validation-rule-modal')!;
  const quorumInput = document.getElementById('vr-quorum') as HTMLInputElement;
  const minsigInput = document.getElementById('vr-minsig') as HTMLInputElement;
  const fieldsInput = document.getElementById('vr-fields') as HTMLInputElement;

  const cancelBtn = document.getElementById('vr-cancel')!;
  const submitBtn = document.getElementById('vr-submit')!;

  // Reset values
  quorumInput.value = '';
  minsigInput.value = '';
  fieldsInput.value = '';

  modal.style.display = 'flex';

  cancelBtn.onclick = () => {
    modal.style.display = 'none';
  };

  submitBtn.onclick = () => {
    const rule: ValidationRule = {
      quorum: parseInt(quorumInput.value),
      min_sig_member: parseInt(minsigInput.value),
      fields: fieldsInput.value.split(',').map(f => f.trim()).filter(Boolean),
    };

    modal.style.display = 'none';
    onSubmit(rule);
  };
}