<form id="imageGeneratorForm" method="post"
      action="<?php echo esc_url(admin_url('admin-post.php')); ?>" 
      enctype="multipart/form-data"
      target="_self">

  <?php wp_nonce_field('generate_images_nonce'); ?>
  <input type="hidden" name="action" value="generate_images_html">

  <p>
    <label class="field-label">Text to add</label>
    <input class="input-field" type="text" name="text_to_add" required>
  </p>

  <p>
    <label class="field-label">Font size (px)</label>
    <input class="input-field" type="number" name="font_size" value="50" required>
  </p>

  <p>
    <label class="field-label">Total images (max 100)</label>
    <input class="input-field" type="number" name="total_images" value="20" max="100" required>
  </p>

  <p>
    <label class="field-label">Image Name Prefix</label>
    <input class="input-field" type="text" name="image_prefix" placeholder="White-chair_1.jpg" required>
  </p>

  <p>
    <label class="field-label">
      Upload image (JPG/PNG, max 750KB, max 1500x1500)
    </label>
    <input class="input-field" type="file" 
           name="base_image" 
           id="base_image"
           accept="image/jpeg,image/png" 
           required>

    <!-- Inline error message -->
    <span id="imageError" style="color:red; display:block; margin-top:5px;"></span>
  </p>

  <button class="submit-button" type="submit" id="submitBtn">
    Generate & Download
  </button>

</form>


  <?php /*if ( isset($_GET['zip']) ) : ?>
  <p style="margin-top:20px;">
    <a href="<?php echo esc_url($_GET['zip']); ?>" 
       class="bricks-button bricks-background-primary" 
       download>
       ⬇️ Download Generated Images
    </a>
  </p>
<?php endif; */?>

.field-label {
  font-size: 16px;
  text-transform: uppercase;
  color: #474747;
}

.input-field, .input-text {
  color: black;
  background-color: white;
  font-size: 18px;
  font-weight: 500;
  border: 1px solid #adadad;
  border-radius: 3px;
}

.input-field[type="file"] {
  color: #7a7a7a;
  font-size: 16px;
  padding-left: 0;
}

.input-field::file-selector-button {
  background: #d9d7d2;
  color: black;
  border: none;
  padding: 0px 16px;
  border-radius: 0px;
  cursor: pointer;
}

.input-field::placeholder {
  color: #bebebe;
}

.required {
  color: #bc4749;
}

/* 
Submit Button 
*/

.submit-button {
  font-size: 18px;
  font-weight: 500;
  color: white;
  background: #475bb2;
  margin-top: 3rem;
  padding: 1.5rem 3rem;
  border-radius: 3px;
  text-transform: uppercase;
}

document.addEventListener('DOMContentLoaded', function() {

    const form = document.getElementById('imageGeneratorForm');
    const fileInput = document.getElementById('base_image');
    const errorEl = document.getElementById('imageError');
    const submitBtn = document.getElementById('submitBtn');

    const MAX_SIZE = 750 * 1024; // 750KB
    const MAX_WIDTH = 1500;
    const MAX_HEIGHT = 1500;
    const ALLOWED_TYPES = ['image/jpeg', 'image/png'];

    function showError(message) {
        errorEl.textContent = message;
        fileInput.style.border = "2px solid red";
        submitBtn.disabled = true;
    }

    function clearError() {
        errorEl.textContent = "";
        fileInput.style.border = "";
        submitBtn.disabled = false;
    }

    fileInput.addEventListener('change', function() {
        const file = this.files[0];

        if (!file) {
            showError("Please select an image.");
            return;
        }

        // ✅ Check file type
        if (!ALLOWED_TYPES.includes(file.type)) {
            showError("Only JPG and PNG images are allowed.");
            return;
        }

        // ✅ Check file size
        if (file.size > MAX_SIZE) {
            showError("Image must be less than 750KB.");
            return;
        }

        // ✅ Check image resolution
        const img = new Image();
        const objectUrl = URL.createObjectURL(file);

        img.onload = function() {
            if (img.width > MAX_WIDTH || img.height > MAX_HEIGHT) {
                showError("Image dimensions must not exceed 1500x1500 pixels.");
            } else {
                clearError();
            }
            URL.revokeObjectURL(objectUrl);
        };

        img.onerror = function() {
            showError("Invalid image file.");
        };

        img.src = objectUrl;
    });

    // Final submit check
    form.addEventListener('submit', function(e) {
        if (submitBtn.disabled) {
            e.preventDefault();
        }
    });

});