@push('styles')
<style>
/* Layout & form wrapper */
#dashboard-form {
  border: 2px solid #198754;
  border-radius: 6px;
  padding: 1rem;
  background: #fff;
}
#dashboard-form.test-mode { border-color: #198754; }
#dashboard-form.prod-mode { border-color: #dc3545; }

/* Fieldsets */
fieldset {
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: .75rem;
}
legend {
  font-size: 1rem;
  font-weight: 600;
  width: auto;
  padding: 0 .5rem;
}

/* Placeholder list */
#placeholders-list .placeholder-item {
  display: flex;
  align-items: start;
  gap: .5rem;
  margin-bottom: .5rem;
}
#placeholders-list input.placeholder-key  { width: 100px; font-weight: bold; }
#placeholders-list input.placeholder-value { flex-grow: 1; }

/* Special sections & helpers */
#smtx-fieldset { background: #f8f9fa; }

.form-text   { font-size: .875rem; color: #6c757d; }
.file-warning { color: #dc3545; font-size: .875rem; display: none; }
</style>
@endpush

<div id="dashboard-form" class="test-mode">
  <form id="send-form" method="POST" enctype="multipart/form-data">
    @csrf
    <fieldset>
      <legend>Environment</legend>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="mode" id="mode-test" value="test" checked>
        <label class="form-check-label" for="mode-test">Test</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="mode" id="mode-prod" value="prod">
        <label class="form-check-label" for="mode-prod">Prod</label>
      </div>
    </fieldset>

    <fieldset>
      <legend>Email Content</legend>
      <div class="mb-3">
        <label for="header" class="form-label">Header</label>
        <textarea class="form-control" id="header" name="header" rows="6"></textarea>
      </div>
      <div class="mb-3">
        <label for="body" class="form-label">Body</label>
        <textarea class="form-control" id="body" name="body" rows="8"></textarea>
      </div>
    </fieldset>

	<fieldset>
		<legend>Placeholders</legend>
		<div id="placeholders-list"></div>

        <hr />

		<div class="mb-3" style="display: flex; flex-direction: column;">
			<input type="text" class="form-control mb-2" id="placeholder-key" placeholder="Key (e.g., var1)">
			<textarea class="form-control mb-2" id="placeholder-value" rows="3" placeholder="Placeholder value (one per line)"></textarea>
			<button class="btn btn-info btn-sm" type="button" id="add-placeholder" disabled>ADD</button>
		</div>
	</fieldset>

    <fieldset>
      <legend>Accounts & Recipients</legend>
      <div class="mb-3">
        <label for="account-ids" class="form-label">Account IDs</label>
        <textarea class="form-control" id="account-ids" name="account_ids" rows="3"></textarea>
      </div>
      <div class="mb-3">
        <label for="emails-file" class="form-label">Upload Email List</label>
        <input class="form-control" type="file" id="emails-file" name="emails_file">
        <div class="file-warning" id="file-warning">Please re-upload the email list file after page refresh.</div>
      </div>
    </fieldset>

    <fieldset id="smtx-fieldset">
      <legend>SMTX Configuration</legend>
      <div class="mb-3">
        <label for="smtx-batch" class="form-label">Batch Size</label>
        <input type="number" class="form-control" id="smtx-batch" name="smtx_batch" value="512">
        <div class="form-text">Number of emails to process in a single batch.</div>
      </div>
      <div class="mb-3">
        <label for="smtx-flush" class="form-label">Flush Interval</label>
        <input type="number" class="form-control" id="smtx-flush" name="smtx_flush" value="500">
        <div class="form-text">Frequency of storing data during processing.</div>
      </div>
      <div class="mb-3">
        <label for="smtx-concurrency" class="form-label">Concurrency</label>
        <input type="number" class="form-control" id="smtx-concurrency" name="smtx_concurrency" value="256">
        <div class="form-text">Number of concurrent workers for processing.</div>
      </div>
      <div class="mb-3">
        <label for="smtx-rpm" class="form-label">Per Account RPM</label>
        <input type="number" class="form-control" id="smtx-rpm" name="smtx_rpm" value="120">
        <div class="form-text">Requests per minute per Gmail account.</div>
      </div>
      <div class="mb-3">
        <label for="smtx-max-attempts" class="form-label">Max Attempts</label>
        <input type="number" class="form-control" id="smtx-max-attempts" name="smtx_max_attempts" value="3">
        <div class="form-text">Maximum retry attempts per email send.</div>
      </div>
      <div class="mb-3">
        <label for="smtx-backoff" class="form-label">Base Backoff (ms)</label>
        <input type="number" class="form-control" id="smtx-backoff" name="smtx_backoff" value="100">
        <div class="form-text">Initial delay before retrying a failed send (milliseconds).</div>
      </div>
    </fieldset>

    <div class="d-flex gap-2">
      <button type="submit" class="btn btn-primary w-100" id="send-button">Send</button>
      <button type="button" class="btn btn-secondary w-100" id="reset-form">Reset</button>
    </div>
  </form>
</div>

@push('scripts')
<script>
$(function(){
  let counter = 1;
  const initialState = {
    mode: 'test',
    header: '',
    body: '',
    account_ids: '',
    emails_file: null,
    placeholders: {},
    smtx_batch: 512,
    smtx_flush: 500,
    smtx_concurrency: 256,
    smtx_rpm: 120,
    smtx_max_attempts: 3,
    smtx_backoff: 100,
  };
  let formState = { ...initialState };
  let hasFile = false;

  function saveState() {
    const stateToSave = {
      mode: formState.mode,
      header: formState.header,
      body: formState.body,
      account_ids: formState.account_ids,
      emails_file: formState.emails_file ? formState.emails_file.name : null,
      placeholders: { ...formState.placeholders },
      smtx_batch: Number(formState.smtx_batch),
      smtx_flush: Number(formState.smtx_flush),
      smtx_concurrency: Number(formState.smtx_concurrency),
      smtx_rpm: Number(formState.smtx_rpm),
      smtx_max_attempts: Number(formState.smtx_max_attempts),
      smtx_backoff: Number(formState.smtx_backoff)
    };
    localStorage.setItem('dashboardFormState', JSON.stringify(stateToSave));
  }

  function loadState() {
    const saved = localStorage.getItem('dashboardFormState');
    if (saved) {
      const state = JSON.parse(saved);
      formState.mode = state.mode || initialState.mode;
      formState.header = state.header || initialState.header;
      formState.body = state.body || initialState.body;
      formState.account_ids = state.account_ids || initialState.account_ids;
      formState.emails_file = state.emails_file ? { name: state.emails_file } : null;
      formState.placeholders = state.placeholders || initialState.placeholders;
      formState.smtx_batch = Number(state.smtx_batch) || initialState.smtx_batch;
      formState.smtx_flush = Number(state.smtx_flush) || initialState.smtx_flush;
      formState.smtx_concurrency = Number(state.smtx_concurrency) || initialState.smtx_concurrency;
      formState.smtx_rpm = Number(state.smtx_rpm) || initialState.smtx_rpm;
      formState.smtx_max_attempts = Number(state.smtx_max_attempts) || initialState.smtx_max_attempts;
      formState.smtx_backoff = Number(state.smtx_backoff) || initialState.smtx_backoff;

      $('#mode-test').prop('checked', formState.mode === 'test');
      $('#mode-prod').prop('checked', formState.mode === 'prod');
      $('#dashboard-form').toggleClass('test-mode', formState.mode === 'test').toggleClass('prod-mode', formState.mode === 'prod');
      $('#header').val(formState.header);
      $('#body').val(formState.body);
      $('#account-ids').val(formState.account_ids);
      $('#smtx-batch').val(formState.smtx_batch);
      $('#smtx-flush').val(formState.smtx_flush);
      $('#smtx-concurrency').val(formState.smtx_concurrency);
      $('#smtx-rpm').val(formState.smtx_rpm);
      $('#smtx-max-attempts').val(formState.smtx_max_attempts);
      $('#smtx-backoff').val(formState.smtx_backoff);
      if (formState.emails_file) {
        $('#emails-file').val('');
        $('#emails-file').siblings('.form-label').text(`Uploaded: ${formState.emails_file.name}`);
        $('#file-warning').show();
        $('#send-button').prop('disabled', true);
      }

      Object.entries(formState.placeholders).forEach(([key, value]) => {
        counter = Math.max(counter, parseInt(key.match(/\d+/)?.[0] || 0) + 1);
        addPlaceholderToList(key, value);
      });
    }
    updatePlaceholderKey();
  }

  function resetState() {
    formState = { ...initialState };
    hasFile = false;
    counter = 1;
    localStorage.removeItem('dashboardFormState');
    $('#mode-test').prop('checked', true);
    $('#mode-prod').prop('checked', false);
    $('#dashboard-form').addClass('test-mode').removeClass('prod-mode');
    $('#header').val('');
    $('#body').val('');
    $('#account-ids').val('');
    $('#emails-file').val('');
    $('#emails-file').siblings('.form-label').text('Upload Email List');
    $('#file-warning').hide();
    $('#smtx-batch').val(initialState.smtx_batch);
    $('#smtx-flush').val(initialState.smtx_flush);
    $('#smtx-concurrency').val(initialState.smtx_concurrency);
    $('#smtx-rpm').val(initialState.smtx_rpm);
    $('#smtx-max-attempts').val(initialState.smtx_max_attempts);
    $('#smtx-backoff').val(initialState.smtx_backoff);
    $('#placeholders-list').empty();
    $('#placeholder-key').val('');
    $('#placeholder-value').val('');
    $('#send-button').prop('disabled', false);
    updatePlaceholderKey();
  }

  function validatePlaceholderFields() {
    const key = $('#placeholder-key').val().trim();
    const value = $('#placeholder-value').val().trim();
    $('#add-placeholder').prop('disabled', !key || !value);
  }

  function generateDefaultKey() {
    return `var${counter}`;
  }

  function updatePlaceholderKey() {
    $('#placeholder-key').val(generateDefaultKey());
    validatePlaceholderFields();
  }

    function addPlaceholderToList(key, value) {
        $('#placeholders-list').append(
            `<div class='placeholder-item d-flex gap-1 mb-2' data-key='${key}'>
                <input type='text' class='form-control form-control-sm placeholder-key' value='${key}' style='width:150px'>
                <textarea class='form-control form-control-sm placeholder-value' rows='2' style='flex:1'>${value}</textarea>
                <button type='button' class='btn btn-sm btn-danger remove-placeholder'>X</button>
            </div>`
        );
    }

  loadState();

  $('input[name="mode"]').on('change', function() {
    formState.mode = this.value;
    $('#dashboard-form').toggleClass('test-mode', this.value === 'test').toggleClass('prod-mode', this.value === 'prod');
    saveState();
  });

  $('#header, #body, #account-ids').on('input', function() {
    formState[this.id.replace('-', '_')] = $(this).val();
    saveState();
  });

  $('#smtx-batch, #smtx-flush, #smtx-concurrency, #smtx-rpm, #smtx-max-attempts, #smtx-backoff').on('input', function() {
    formState[this.id.replace('smtx-', 'smtx_')] = Number($(this).val()) || initialState[this.id.replace('smtx-', 'smtx_')];
    saveState();
  });

  $('#emails-file').on('change', function() {
    formState.emails_file = this.files[0] || null;
    hasFile = !!this.files[0];
    $('#file-warning').hide();
    $('#send-button').prop('disabled', false);
    if (hasFile) {
      $('#emails-file').siblings('.form-label').text(`Uploaded: ${this.files[0].name}`);
    } else {
      $('#emails-file').siblings('.form-label').text('Upload Email List');
    }
    saveState();
  });

  $('#placeholder-key, #placeholder-value').on('input', validatePlaceholderFields);

  $('#add-placeholder').on('click', function() {
    let key = $('#placeholder-key').val().trim();
    const value = $('#placeholder-value').val().trim();
    if (!key || !value) return;

    formState.placeholders[key] = value;
    addPlaceholderToList(key, value);
    counter++;

    $('#placeholder-key').val('');
    $('#placeholder-value').val('');
    updatePlaceholderKey();
    saveState();
  });

  $(document).on('input', '.placeholder-key, .placeholder-value', function() {
    const $item = $(this).closest('.placeholder-item');
    const oldKey = $item.data('key');
    const newKey = $item.find('.placeholder-key').val().trim();
    const value = $item.find('.placeholder-value').val().trim();

    if (newKey && value) {
      delete formState.placeholders[oldKey];
      formState.placeholders[newKey] = value;
      $item.data('key', newKey);
      saveState();
    }
  });

  $(document).on('click', '.remove-placeholder', function() {
    const $item = $(this).closest('.placeholder-item');
    const key = $item.data('key');
    delete formState.placeholders[key];
    $item.remove();
    saveState();
  });

  $('#reset-form').on('click', resetState);

  $('#send-form').on('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    Object.entries(formState.placeholders).forEach(([key, value]) => {
      formData.append(`placeholders[${key}]`, value);
    });

    if (!hasFile && formState.emails_file) {
      alert('Please re-upload the email list file.');
      return;
    }

    $.ajax({
      url: '/send-api/send',
      method: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      headers: {
        'X-CSRF-TOKEN': $('input[name="_token"]').val()
      },
      success: function(res) {
        window.scrollTo({ top: 0, behavior: 'smooth' });
      },
      error: function(err) {
        alert('Error sending emails: ' + (err.responseJSON?.message || 'Unknown error'));
      }
    });
  });
});
</script>
@endpush