/*
 * Check List PoC — Main entry point (orchestrator).
 *
 * This file wires together the split ES modules, binds DOM events, and manages
 * the application lifecycle (init, sync, autosave, etc.). Business logic for
 * rendering, validation, database, image optimization, and exports lives in
 * dedicated modules under /js/.
 *
 * Architecture improvements implemented here:
 * - A1: monolithic app.js split into focused ES modules
 * - A2: single-request batch template fetch via ?include=definitions
 * - A3: all API calls go through /api/v1/ (versioned endpoints)
 * - A4: per-resource resilient sync (each resource saved independently)
 * - A5: multi-store IndexedDB transactions for atomic deletes
 * - A6: stale template cleanup after sync
 * - A7: validation extracted to shared module (js/validation.js)
 * - P2: debounced form re-render after field changes
 * - P6: dirty-flag autosave — skips write when no changes occurred
 * - F1: report submission to server
 * - F4: report search & status filter
 */

import { state, elements, getCurrentReport, getTemplateRecord } from './js/state.js';
import {
  STORE_TEMPLATES, STORE_LOOKUPS, STORE_CONFIG,
  STORE_REPORTS, STORE_ATTACHMENTS, STORE_SETTINGS,
  DEFAULT_AUTOSAVE_SECONDS, RENDER_DEBOUNCE_MS
} from './js/constants.js';
import {
  openDatabase, dbGetAll, dbGet, dbPut, dbDelete,
  dbGetAllByIndex, dbTransaction, saveSetting, loadSetting
} from './js/db.js';
import { fetchJson, registerServiceWorker } from './js/api.js';
import { optimizeImage } from './js/images.js';
import { validateImageRulesPayload } from './js/validation.js';
import { exportReportCSV, exportReportAttachments } from './js/export.js';
import {
  render, renderReportList, renderCurrentReport, renderMeta,
  renderValidation, renderImagePolicy, renderAdminImageRules,
  renderTemplateSummary, populateAdminImageRulesForm,
  updateConnectionBadge, updateSaveBadge
} from './js/renderer.js';
import {
  makeTemplateKey, deriveTemplateCatalog, generateReportNumber,
  buildGeneratedFilename, formatTime, debounce
} from './js/utils.js';
import { t } from './js/i18n.js';

/* ── Initialization ─────────────────────────────────────────────────────── */

document.addEventListener('DOMContentLoaded', () => {
  void init();
});

async function init() {
  /*
   * Initialization restores local state first so the app remains useful offline.
   * Only after the cache is available do we try to refresh from the server. That
   * ordering is intentional because a blank UI during a failed sync would defeat
   * the main offline-first goal of the PoC.
   */
  cacheElements();
  bindEvents();
  state.db = await openDatabase();
  await hydrateFromLocalCache();
  registerServiceWorker();
  startAutosaveLoop();
  updateConnectionBadge();

  if (navigator.onLine) {
    await syncTemplatesAndConfig();
  }

  render(fieldCallbacks);
}

/* ── DOM caching ────────────────────────────────────────────────────────── */

function cacheElements() {
  elements.connectionBadge = document.querySelector('#connectionBadge');
  elements.saveBadge = document.querySelector('#saveBadge');
  elements.syncTemplatesButton = document.querySelector('#syncTemplatesButton');
  elements.templateSelect = document.querySelector('#templateSelect');
  elements.createReportButton = document.querySelector('#createReportButton');
  elements.userAreaLink = document.querySelector('#userAreaLink');
  elements.adminAreaLink = document.querySelector('#adminAreaLink');
  elements.reportList = document.querySelector('#reportList');
  elements.reportListItemTemplate = document.querySelector('#reportListItemTemplate');
  elements.reportCount = document.querySelector('#reportCount');
  /* User workspace elements — null on the admin page. */
  elements.heroTitle = document.querySelector('#heroTitle');
  elements.heroSubtitle = document.querySelector('#heroSubtitle');
  elements.reportStatusSelect = document.querySelector('#reportStatusSelect');
  elements.deleteReportButton = document.querySelector('#deleteReportButton');
  elements.submitReportButton = document.querySelector('#submitReportButton');
  elements.exportReportButton = document.querySelector('#exportReportButton');
  elements.summaryTemplate = document.querySelector('#summaryTemplate');
  elements.summaryVersion = document.querySelector('#summaryVersion');
  elements.validationHeadline = document.querySelector('#validationHeadline');
  elements.validationDetail = document.querySelector('#validationDetail');
  elements.syncHeadline = document.querySelector('#syncHeadline');
  elements.syncDetail = document.querySelector('#syncDetail');
  elements.reportForm = document.querySelector('#reportForm');
  elements.editorHint = document.querySelector('#editorHint');
  elements.reportMeta = document.querySelector('#reportMeta');
  elements.validationList = document.querySelector('#validationList');
  elements.imagePolicyText = document.querySelector('#imagePolicyText');
  /* Admin workspace elements — null on the user page. */
  elements.adminSyncState = document.querySelector('#adminSyncState');
  elements.adminImageRulesForm = document.querySelector('#adminImageRulesForm');
  elements.saveImageRulesButton = document.querySelector('#saveImageRulesButton');
  elements.resetImageRulesButton = document.querySelector('#resetImageRulesButton');
  elements.adminPolicyName = document.querySelector('#adminPolicyName');
  elements.adminAllowedMimeTypes = document.querySelector('#adminAllowedMimeTypes');
  elements.adminMaxFileSizeMb = document.querySelector('#adminMaxFileSizeMb');
  elements.adminMaxAttachmentsPerField = document.querySelector('#adminMaxAttachmentsPerField');
  elements.adminMaxWidthPx = document.querySelector('#adminMaxWidthPx');
  elements.adminMaxHeightPx = document.querySelector('#adminMaxHeightPx');
  elements.adminJpegQuality = document.querySelector('#adminJpegQuality');
  elements.adminOversizeBehavior = document.querySelector('#adminOversizeBehavior');
  elements.adminPolicyCode = document.querySelector('#adminPolicyCode');
  elements.adminPolicyMimeTypes = document.querySelector('#adminPolicyMimeTypes');
  elements.adminPolicyOptimization = document.querySelector('#adminPolicyOptimization');
  elements.adminPolicyLimits = document.querySelector('#adminPolicyLimits');
  /* F4 — search and filter controls (user page only). */
  elements.reportSearchInput = document.querySelector('#reportSearchInput');
  elements.reportFilterSelect = document.querySelector('#reportFilterSelect');
}

/* ── Event binding ──────────────────────────────────────────────────────── */

function bindEvents() {
  elements.syncTemplatesButton.addEventListener('click', () => {
    void syncTemplatesAndConfig();
  });

  elements.templateSelect.addEventListener('change', (event) => {
    state.selectedTemplateCode = event.target.value || null;
    void saveSetting('selectedTemplateCode', state.selectedTemplateCode);
    if (elements.reportForm) {
      renderTemplateSummary();
    }
  });

  if (elements.createReportButton) {
    elements.createReportButton.addEventListener('click', () => {
      void createReport();
    });
  }

  /* User workspace events — only bound when the report editor exists. */
  if (elements.reportStatusSelect) {
    elements.reportStatusSelect.addEventListener('change', (event) => {
      const report = getCurrentReport();

      if (!report) {
        return;
      }

      report.status = event.target.value;
      markDirty(t('statusChanged'));
      renderReportList();
      renderValidation();
    });
  }

  if (elements.deleteReportButton) {
    elements.deleteReportButton.addEventListener('click', () => {
      void deleteCurrentReport();
    });
  }

  /* F1 — submit report to server */
  if (elements.submitReportButton) {
    elements.submitReportButton.addEventListener('click', () => {
      void submitCurrentReport();
    });
  }

  /* F2 — CSV export */
  if (elements.exportReportButton) {
    elements.exportReportButton.addEventListener('click', () => {
      void handleExport();
    });
  }

  /* F4 — report search */
  if (elements.reportSearchInput) {
    elements.reportSearchInput.addEventListener('input', debounce((event) => {
      state.reportSearchQuery = event.target.value.trim();
      renderReportList();
    }, 250));
  }

  /* F4 — report status filter */
  if (elements.reportFilterSelect) {
    elements.reportFilterSelect.addEventListener('change', (event) => {
      state.reportFilterStatus = event.target.value;
      renderReportList();
    });
  }

  /* Admin workspace events — only bound when the admin form exists. */
  if (elements.adminImageRulesForm) {
    elements.adminImageRulesForm.addEventListener('submit', (event) => {
      event.preventDefault();
      void saveImageRules();
    });
  }

  if (elements.resetImageRulesButton) {
    elements.resetImageRulesButton.addEventListener('click', () => {
      populateAdminImageRulesForm(state.imageRules);
    });
  }

  /* Use event delegation on the report list to avoid per-item listeners. */
  if (elements.reportList) {
    elements.reportList.addEventListener('click', (event) => {
      const button = event.target.closest('.report-list-item');

      if (button?.dataset.reportId) {
        void openReport(button.dataset.reportId);
      }
    });
  }

  window.addEventListener('online', () => {
    updateConnectionBadge();
    void syncTemplatesAndConfig();
  });

  window.addEventListener('offline', () => {
    updateConnectionBadge();
  });
}

/* ── Local cache hydration ──────────────────────────────────────────────── */

async function hydrateFromLocalCache() {
  const [templateRows, lookupRows, configRows, reports, selectedTemplateCode, lastReportId, lastSyncAt] =
    await Promise.all([
      dbGetAll(STORE_TEMPLATES),
      dbGetAll(STORE_LOOKUPS),
      dbGetAll(STORE_CONFIG),
      dbGetAll(STORE_REPORTS),
      loadSetting('selectedTemplateCode'),
      loadSetting('currentReportId'),
      loadSetting('lastSyncAt')
    ]);

  state.templateDefinitions = new Map(
    templateRows.map((item) => [makeTemplateKey(item.code, item.version), item])
  );
  state.templatesCatalog = deriveTemplateCatalog(templateRows);
  state.lookups = new Map(lookupRows.map((item) => [item.code, item]));
  state.appConfig = new Map(configRows.map((item) => [item.key, item.value]));
  state.imageRules = state.appConfig.get('imageRules') || null;
  state.reports = reports.sort((left, right) => {
    return new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime();
  });
  state.selectedTemplateCode = selectedTemplateCode || state.templatesCatalog[0]?.code || null;
  state.lastSyncAt = lastSyncAt || null;

  if (lastReportId && state.reports.some((report) => report.id === lastReportId)) {
    await openReport(lastReportId);
  }
}

/* ── Sync (A2 batch, A4 resilient, A6 stale cleanup) ───────────────────── */

async function syncTemplatesAndConfig() {
  if (!navigator.onLine) {
    updateSaveBadge(t('offlineMode'), 'warning');
    return;
  }

  updateSaveBadge(t('syncingTemplates'), 'neutral');

  /*
   * A4 — Each resource type is fetched and persisted independently. If one
   * resource fails (e.g. lookups), the others still save successfully so the
   * local cache stays as fresh as possible.
   */
  const errors = [];

  /* A2 — Batch template fetch: single request returns all active definitions. */
  try {
    const templatesResponse = await fetchJson('/templates?include=definitions');
    const templateRecords = templatesResponse.items.map((item) => ({
      cacheKey: makeTemplateKey(item.code, item.version),
      code: item.code,
      name: item.name,
      description: item.description,
      version: item.version,
      publishedAt: item.publishedAt,
      definition: item.definition,
      isActive: true
    }));

    await Promise.all(templateRecords.map((item) => dbPut(STORE_TEMPLATES, item)));

    /* A6 — Remove stale templates no longer in the server's active set. */
    const activeKeys = new Set(templateRecords.map((r) => r.cacheKey));
    const cachedTemplates = await dbGetAll(STORE_TEMPLATES);

    for (const cached of cachedTemplates) {
      if (cached.isActive && !activeKeys.has(cached.cacheKey)) {
        await dbDelete(STORE_TEMPLATES, cached.cacheKey);
      }
    }

    const freshTemplateRows = await dbGetAll(STORE_TEMPLATES);
    state.templateDefinitions = new Map(
      freshTemplateRows.map((item) => [makeTemplateKey(item.code, item.version), item])
    );
    state.templatesCatalog = templatesResponse.items.map((item) => ({
      code: item.code,
      name: item.name,
      description: item.description,
      activeVersion: item.version,
      publishedAt: item.publishedAt
    }));
  } catch (error) {
    console.error('Template sync failed', error);
    errors.push('templates');
  }

  try {
    const lookupsResponse = await fetchJson('/lookups');
    await Promise.all(lookupsResponse.items.map((item) => dbPut(STORE_LOOKUPS, item)));
    state.lookups = new Map(lookupsResponse.items.map((item) => [item.code, item]));
  } catch (error) {
    console.error('Lookup sync failed', error);
    errors.push('lookups');
  }

  try {
    const [imageRules, exportProfile, appConfigResponse] = await Promise.all([
      fetchJson('/config/image-rules'),
      fetchJson('/config/export'),
      fetchJson('/config/app-config')
    ]);

    await Promise.all([
      dbPut(STORE_CONFIG, { key: 'imageRules', value: imageRules }),
      dbPut(STORE_CONFIG, { key: 'exportProfile', value: exportProfile }),
      ...appConfigResponse.items.map((item) => dbPut(STORE_CONFIG, { key: item.key, value: item.value }))
    ]);

    state.imageRules = imageRules;
    state.appConfig = new Map([
      ...appConfigResponse.items.map((item) => [item.key, item.value]),
      ['imageRules', imageRules],
      ['exportProfile', exportProfile]
    ]);
  } catch (error) {
    console.error('Config sync failed', error);
    errors.push('config');
  }

  state.lastSyncAt = new Date().toISOString();
  await saveSetting('lastSyncAt', state.lastSyncAt);

  if (!state.selectedTemplateCode && state.templatesCatalog.length) {
    state.selectedTemplateCode = state.templatesCatalog[0].code;
    await saveSetting('selectedTemplateCode', state.selectedTemplateCode);
  }

  startAutosaveLoop();

  if (errors.length) {
    updateSaveBadge(`Partial sync (${errors.join(', ')} failed)`, 'warning');
  } else {
    updateSaveBadge(t('templatesSynced'), 'success');
  }

  render(fieldCallbacks);
}

/* ── Report CRUD ────────────────────────────────────────────────────────── */

async function createReport() {
  const templateCode = state.selectedTemplateCode || elements.templateSelect.value;

  if (!templateCode) {
    updateSaveBadge(t('selectTemplate'), 'warning');
    return;
  }

  const catalogEntry = state.templatesCatalog.find((item) => item.code === templateCode);
  const versionNumber = catalogEntry?.activeVersion;
  const template = getTemplateRecord(templateCode, versionNumber);

  if (!template) {
    updateSaveBadge(t('templateNotAvailable'), 'error');
    return;
  }

  const report = buildNewReport(template);
  state.reports.unshift(report);
  state.currentReportId = report.id;
  state.currentAttachments = [];

  await Promise.all([
    dbPut(STORE_REPORTS, report),
    saveSetting('currentReportId', report.id)
  ]);

  updateSaveBadge(t('newReportCreated'), 'success');
  render(fieldCallbacks);
}

function buildNewReport(template) {
  const now = new Date().toISOString();
  const reportNumber = generateReportNumber();
  const answers = {};

  for (const section of template.definition.sections || []) {
    for (const field of section.fields || []) {
      if (field.defaultValue !== undefined) {
        answers[field.id] = field.defaultValue;
      } else if (field.id === 'reportNumber') {
        answers[field.id] = reportNumber;
      } else if (field.type === 'date') {
        answers[field.id] = now.slice(0, 10);
      } else if (field.type === 'checkbox') {
        answers[field.id] = false;
      } else {
        answers[field.id] = '';
      }
    }
  }

  return {
    id: crypto.randomUUID(),
    reportNumber,
    title: `${template.name} ${new Date().toLocaleDateString()}`,
    templateCode: template.code,
    templateVersion: template.version,
    status: 'draft',
    answers,
    createdAt: now,
    updatedAt: now
  };
}

async function openReport(reportId) {
  const report = state.reports.find((item) => item.id === reportId);

  if (!report) {
    return;
  }

  await flushDirtyReport();
  state.currentReportId = reportId;
  state.currentAttachments = await dbGetAllByIndex(STORE_ATTACHMENTS, 'byReportId', reportId);
  state.selectedTemplateCode = report.templateCode;

  await Promise.all([
    saveSetting('currentReportId', reportId),
    saveSetting('selectedTemplateCode', report.templateCode)
  ]);

  render(fieldCallbacks);
}

async function deleteCurrentReport() {
  const report = getCurrentReport();

  if (!report) {
    return;
  }

  const confirmed = window.confirm(t('deleteReportConfirm', report.reportNumber));

  if (!confirmed) {
    return;
  }

  /* A5 — Atomic multi-store delete: report + all its attachments in one tx. */
  const attachments = await dbGetAllByIndex(STORE_ATTACHMENTS, 'byReportId', report.id);

  await dbTransaction([STORE_REPORTS, STORE_ATTACHMENTS], 'readwrite', (getStore) => {
    getStore(STORE_REPORTS).delete(report.id);

    for (const attachment of attachments) {
      getStore(STORE_ATTACHMENTS).delete(attachment.id);
    }
  });

  state.reports = state.reports.filter((item) => item.id !== report.id);
  state.currentReportId = state.reports[0]?.id || null;
  state.currentAttachments = state.currentReportId
    ? await dbGetAllByIndex(STORE_ATTACHMENTS, 'byReportId', state.currentReportId)
    : [];

  await saveSetting('currentReportId', state.currentReportId);
  updateSaveBadge(t('reportDeleted'), 'success');
  render(fieldCallbacks);
}

/* ── Report submission to server (F1) ───────────────────────────────────── */

async function submitCurrentReport() {
  const report = getCurrentReport();

  if (!report) {
    return;
  }

  if (!navigator.onLine) {
    updateSaveBadge(t('goOnlineToSubmit'), 'warning');
    return;
  }

  await flushDirtyReport();
  updateSaveBadge(t('submitting'), 'neutral');

  try {
    await fetchJson('/reports', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: report.id,
        reportNumber: report.reportNumber,
        templateCode: report.templateCode,
        templateVersion: report.templateVersion,
        status: report.status,
        answers: report.answers
      })
    });

    report.status = 'exported';
    report.updatedAt = new Date().toISOString();
    await dbPut(STORE_REPORTS, report);
    updateSaveBadge(t('submitted'), 'success');
    renderReportList();
    renderCurrentReport(fieldCallbacks);
  } catch (error) {
    console.error(error);
    updateSaveBadge(t('submitFailed'), 'error');
  }
}

/* ── Export (F2) ────────────────────────────────────────────────────────── */

async function handleExport() {
  const report = getCurrentReport();

  if (!report) {
    updateSaveBadge(t('noReportToExport'), 'warning');
    return;
  }

  updateSaveBadge(t('exportStarted'), 'neutral');

  try {
    await exportReportCSV();
    await exportReportAttachments();
    updateSaveBadge(t('exportComplete'), 'success');
  } catch (error) {
    console.error(error);
    updateSaveBadge(t('exportFailed'), 'error');
  }
}

/* ── Attachment operations ──────────────────────────────────────────────── */

async function attachFiles(field, report, files) {
  if (!files.length) {
    return;
  }

  const currentFieldAttachments = state.currentAttachments.filter((item) => item.fieldId === field.id);
  const maxAttachments = field.maxAttachments || state.imageRules?.maxAttachmentsPerField || 5;

  if (currentFieldAttachments.length + files.length > maxAttachments) {
    updateSaveBadge(t('maxAttachments', maxAttachments), 'warning');
    return;
  }

  let addedCount = 0;

  for (let index = 0; index < files.length; index += 1) {
    const file = files[index];

    try {
      const optimized = await optimizeImage(file, state.imageRules);
      const sequence = currentFieldAttachments.length + addedCount + 1;
      const generatedFilename = buildGeneratedFilename(report, field, sequence, optimized.extension);

      const attachment = {
        id: crypto.randomUUID(),
        reportId: report.id,
        fieldId: field.id,
        originalFilename: file.name,
        generatedFilename,
        mimeType: optimized.blob.type,
        sizeBytes: optimized.blob.size,
        width: optimized.width,
        height: optimized.height,
        blob: optimized.blob,
        createdAt: new Date().toISOString()
      };

      state.currentAttachments.push(attachment);
      await dbPut(STORE_ATTACHMENTS, attachment);
      addedCount += 1;
    } catch (error) {
      console.error(error);
      updateSaveBadge(t('imageSkipped', file.name), 'error');
    }
  }

  if (addedCount === 0) {
    return;
  }

  report.updatedAt = new Date().toISOString();
  markDirty(t('imagesUpdated'));
  renderCurrentReport(fieldCallbacks);
}

async function removeAttachment(attachmentId) {
  const report = getCurrentReport();

  if (!report) {
    return;
  }

  await dbDelete(STORE_ATTACHMENTS, attachmentId);
  state.currentAttachments = state.currentAttachments.filter((item) => item.id !== attachmentId);
  report.updatedAt = new Date().toISOString();
  markDirty(t('attachmentRemoved'));
  renderCurrentReport(fieldCallbacks);
}

/* ── Field change handler (P2 debounced) ────────────────────────────────── */

const debouncedRenderAfterFieldChange = debounce(() => {
  renderMeta(getCurrentReport());
  renderValidation();
  renderReportList();
}, RENDER_DEBOUNCE_MS);

function updateFieldValue(field, nextValue) {
  const report = getCurrentReport();

  if (!report) {
    return;
  }

  report.answers[field.id] = field.type === 'number' && nextValue !== '' ? Number(nextValue) : nextValue;
  report.updatedAt = new Date().toISOString();

  if (report.status === 'draft') {
    report.status = 'in_progress';
    if (elements.reportStatusSelect) {
      elements.reportStatusSelect.value = report.status;
    }
  }

  markDirty(t('draftUpdated'));

  /* P2 — Debounce DOM updates so rapid typing does not trigger full re-renders. */
  debouncedRenderAfterFieldChange();
}

/*
 * Callback bundle passed into the renderer so form nodes can trigger state
 * mutations without circular imports.
 */
const fieldCallbacks = {
  onFieldChange: updateFieldValue,
  onAttachFiles: attachFiles,
  onRemoveAttachment: removeAttachment
};

/* ── Dirty-state tracking & autosave (P6) ───────────────────────────────── */

function markDirty(label) {
  state.dirty = true;
  state.saveState = 'dirty';
  updateSaveBadge(label, 'warning');
  clearTimeout(state.saveTimer);
  state.saveTimer = window.setTimeout(() => {
    void flushDirtyReport();
  }, 700);
}

async function flushDirtyReport() {
  /* P6 — Skip write when no changes have been made since the last save. */
  if (!state.dirty && state.saveState !== 'dirty') {
    return;
  }

  const report = getCurrentReport();

  if (!report) {
    return;
  }

  report.updatedAt = new Date().toISOString();
  await dbPut(STORE_REPORTS, report);
  state.reports = state.reports
    .map((item) => (item.id === report.id ? structuredClone(report) : item))
    .sort((left, right) => new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime());
  state.dirty = false;
  state.saveState = 'idle';
  updateSaveBadge(t('saved', formatTime(report.updatedAt)), 'success');
  renderReportList();
  renderMeta(report);
}

function startAutosaveLoop() {
  clearInterval(state.autosaveIntervalId);
  const autosaveConfig = state.appConfig.get('autosave') || { intervalSeconds: DEFAULT_AUTOSAVE_SECONDS };
  const intervalSeconds = Number(autosaveConfig.intervalSeconds || DEFAULT_AUTOSAVE_SECONDS);

  state.autosaveIntervalId = window.setInterval(() => {
    void flushDirtyReport();
  }, intervalSeconds * 1000);
}

/* ── Admin: image rules ─────────────────────────────────────────────────── */

async function saveImageRules() {
  if (!navigator.onLine) {
    updateSaveBadge(t('goOnlineToSave'), 'warning');
    return;
  }

  const payload = collectImageRulesPayload();
  const validationMessage = validateImageRulesPayload(payload);

  if (validationMessage) {
    updateSaveBadge(validationMessage, 'error');
    return;
  }

  elements.saveImageRulesButton.disabled = true;
  updateSaveBadge(t('savingImagePolicy'), 'neutral');

  try {
    const nextImageRules = await fetchJson('/config/image-rules', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
      body: JSON.stringify(payload)
    });

    state.imageRules = nextImageRules;
    state.appConfig.set('imageRules', nextImageRules);
    await dbPut(STORE_CONFIG, { key: 'imageRules', value: nextImageRules });
    renderImagePolicy();
    renderAdminImageRules();
    updateSaveBadge(t('imagePolicySaved'), 'success');
  } catch (error) {
    console.error(error);
    updateSaveBadge(error.message || t('submitFailed'), 'error');
  } finally {
    elements.saveImageRulesButton.disabled = false;
  }
}

function collectImageRulesPayload() {
  return {
    name: elements.adminPolicyName.value.trim(),
    allowedMimeTypes: elements.adminAllowedMimeTypes.value
      .split(',')
      .map((value) => value.trim())
      .filter(Boolean),
    maxFileSizeBytes: Math.round(Number(elements.adminMaxFileSizeMb.value) * 1024 * 1024),
    maxWidthPx: Number(elements.adminMaxWidthPx.value),
    maxHeightPx: Number(elements.adminMaxHeightPx.value),
    jpegQuality: Number(elements.adminJpegQuality.value),
    oversizeBehavior: elements.adminOversizeBehavior.value,
    maxAttachmentsPerField: Number(elements.adminMaxAttachmentsPerField.value)
  };
}