'use strict';
'require baseclass';
'require form';
'require ui';
'require view';
'require fs';
'require tools.widgets as widgets';

/*

  Copyright 2025 Rafał Wabik - IceG - From eko.one.pl forum
  
  MIT License
  
*/

function popTimeout(a, message, timeout, severity) {
  ui.addTimeLimitedNotification(a, message, timeout, severity)
}

return view.extend({
  colors: {
    light: {
      minute: '#fdd2d6',
      hour:   '#cfead1',
      day:    '#ffd8ad',
      month:  '#bbdefb',
      weekday:'#e1bee7'
    },
    dark: {
      minute: '#5b2f35',
      hour:   '#2f4732',
      day:    '#4a3828',
      month:  '#30475e',
      weekday:'#3a2f41'
    }
  },

  getCurrentColors: function() {
    const isDarkMode = document.documentElement.getAttribute('data-darkmode') === 'true';
    return isDarkMode ? this.colors.dark : this.colors.light;
  },

  getBadgeTextColor: function() {
    const isDarkMode = document.documentElement.getAttribute('data-darkmode') === 'true';
    return isDarkMode ? '#ffffff' : '#111111';
  },

  _weekdayNames: function(){
    return [
      _('Sunday'), _('Monday'), _('Tuesday'), _('Wednesday'), _('Thursday'), _('Friday'), _('Saturday')
    ];
  },
  _monthNames: function(){
    return [
      '', _('January'), _('February'), _('March'), _('April'), _('May'), _('June'),
      _('July'), _('August'), _('September'), _('October'), _('November'), _('December')
    ];
  },

  _formatRange: function(a, b){
    return a + '-' + b;
  },

  _parseSegments: function(expr, base) {
    if (!expr || expr === '*') return { type: 'any' };
    if (/^\*\/\d+$/.test(expr)) return { type: 'step', step: parseInt(expr.slice(2), 10) };

    const segs = [];
    expr.split(',').forEach(function(part){
      const m = part.match(/^(\d+)-(\d+)$/);
      if (m) {
        const a = parseInt(m[1],10), b = parseInt(m[2],10);
        segs.push({ kind:'range', a:a, b:b });
      } else {
        const v = parseInt(part,10);
        if (!isNaN(v)) segs.push({ kind:'single', v:v });
      }
    });
    return { type:'list', segs:segs };
  },

  _expand: function(parsed, minVal, maxVal) {
    if (parsed.type === 'any') return null;
    const vals = new Set();
    if (parsed.type === 'step') {
      const n = parsed.step;
      for (let i=minVal; i<=maxVal; i+=n) vals.add(i);
      return Array.from(vals).sort(function(a,b){ return a-b; });
    }
    parsed.segs.forEach(function(s){
      if (s.kind==='single') { if (s.v>=minVal && s.v<=maxVal) vals.add(s.v); }
      else { for (let i=s.a; i<=s.b; i++) if (i>=minVal && i<=maxVal) vals.add(i); }
    });
    return Array.from(vals).sort(function(a,b){ return a-b; });
  },

  _humanList: function(parsed, labeller) {
    if (parsed.type === 'any')  return null;
    if (parsed.type === 'step') return null;
    const self = this;
    const items = parsed.segs.map(function(s){
      if (s.kind==='single') return labeller(s.v, false);
      return self._formatRange(labeller(s.a,false), labeller(s.b,true));
    });
    return items.join(', ');
  },

  _pluralMin:  function(n){ return (n===1) ? _('minute')  : _('minutes'); },
  _pluralHour: function(n){ return (n===1) ? _('hour')    : _('hours');   },
  _pluralDay:  function(n){ return (n===1) ? _('day')     : _('days');    },

  _pad2: function(n){ return (n<10 ? '0'+n : ''+n); },

  _enumerateTimes: function(minExpr, hourExpr) {
    const pm = this._parseSegments(minExpr,0), ph = this._parseSegments(hourExpr,0);
    const mins  = (pm.type==='any' || pm.type==='step') ? null : this._expand(pm,0,59);
    const hours = (ph.type==='any' || ph.type==='step') ? null : this._expand(ph,0,23);
    if (!mins || !hours) return null;

    const combos = [];
    for (let i=0;i<hours.length;i++){
      for (let j=0;j<mins.length;j++){
        combos.push(this._pad2(hours[i])+':'+this._pad2(mins[j]));
      }
    }
    if (combos.length===1) return { single: combos[0], list: null };
    if (combos.length>0 && combos.length<=12) return { single: null, list: combos.join(', ') };
    return null;
  },

  _timeOfDayPhrase: function(minExpr, hourExpr) {
    const pm = this._parseSegments(minExpr,0), ph = this._parseSegments(hourExpr,0);

    const times = this._enumerateTimes(minExpr, hourExpr);
    if (times) {
      if (times.single) return _('at time: %s').format(times.single);
      return _('at times: %s').format(times.list);
    }

    let parts = [];

    // Minutes
    if (pm.type==='step') {
      parts.push(_('runs every %d %s').format(pm.step, this._pluralMin(pm.step)));
    } else if (pm.type==='list') {
      const list = this._humanList(pm, function(n){ return String(n); });
      if (list) parts.push(_('in minutes: %s').format(list));
    }

    // Hours
    if (ph.type==='step') {
      parts.push(_('runs every %d %s').format(ph.step, this._pluralHour(ph.step)));
    } else if (ph.type==='list') {
      const listH = this._humanList(ph, function(n){ return String(n); });
      if (listH) parts.push(_('in hours: %s').format(listH));
    }

    return parts.length > 0 ? parts.join('; ') : null;
  },

  _descDayOfMonth: function(expr){
    if (expr === '*') return null;
    const p = this._parseSegments(expr,1);

    if (p.type==='step') {
      return _('runs every %d %s of the month').format(p.step, this._pluralDay(p.step));
    }

    const listStr = this._humanList(p, function(n){ return String(n); });
    if (!listStr) return null;
    return _('on day(s): %s').format(listStr);
  },

  _descMonth: function(expr){
    if (expr === '*') return null;
    const p = this._parseSegments(expr,1);
    if (p.type==='step') return _('runs every %d month(s)').format(p.step);
    const months = this._monthNames();
    const list = this._humanList(p, function(n){ return months[n]; });
    return list ? _('in month(s): %s').format(list) : null;
  },

  _descWeekday: function(expr){
    if (expr === '*') return null;
    const p = this._parseSegments(expr,0);
    if (p.type==='step') return _('runs every %d day of the week').format(p.step);
    const days = this._weekdayNames();
    const list = this._humanList(p, function(n){ return days[n===7?0:n]; });
    return list ? _('on weekday(s): %s').format(list) : null;
  },

  _describeCron: function(minute, hour, day, month, weekday, command){
    const parts = [];

    const isMinuteChanged = minute !== '*';
    const isHourChanged = hour !== '*';
    const isDayChanged = day !== '*';
    const isMonthChanged = month !== '*';
    const isWeekdayChanged = weekday !== '*';

    // Nothing changed
    if (!isMinuteChanged && !isHourChanged && !isDayChanged && !isMonthChanged && !isWeekdayChanged) {
      const prefix = command ? _('Command "%s" ').format(command) : _('Command');
      return prefix + ' ';
    }

    // Time (hour and minute)
    const timePart = this._timeOfDayPhrase(minute, hour);
    if (timePart) parts.push(timePart);

    // Month
    const monthPart = this._descMonth(month);
    if (monthPart) parts.push(monthPart);

    // Day of month
    const dayPart = this._descDayOfMonth(day);
    if (dayPart) parts.push(dayPart);

    // Day of week
    const weekdayPart = this._descWeekday(weekday);
    if (weekdayPart) parts.push(weekdayPart);

    const prefix = command ? _('Command "%s" will run').format(command) : _('Command will run');
    
    if (parts.length === 0) {
      return prefix + '.';
    }
    
    return prefix + ' ' + parts.join('; ') + '.';
  },

  addStyles: function() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `
    .ifacebox .span-40  { grid-column: span 2; }
    .ifacebox .span-80  { grid-column: span 4; }
    .ifacebox .span-160 { grid-column: span 8; }
    .ifacebox .span-320 { grid-column: span 8; }
    @media (max-width: 560px) {
      .ifacebox .span-320 { grid-column: span 8 !important; }
    }
    :root {
      --tile-free: #eceff1;
      --tile-active: #34c759;
      --tile-text: #263238;
      --tile-text-on-active: #ffffff;
      --iface-head-bg: #f8f8f8;
      --app-id-font-color: #454545;
      --border-color-soft: #eceff1;
      --border-color-medium: #cfd8dc;
      --border-color-strong: #90a4ae;
      --tile-border: #b0bec5;
      --cron-minute: #fdd2d6;
      --cron-hour: #cfead1;
      --cron-day: #ffd8ad;
      --cron-month: #bbdefb;
      --cron-weekday: #e1bee7;
      --badge-text: #111111;
      --badge-border: rgba(0,0,0,.15);
      --badge-shadow: rgba(0,0,0,.06);

      --multiselect-bg: var(--border-color-low);
      --multiselect-text: #263238;
      --multiselect-border: #cfd8dc;
      --multiselect-selected-bg: #e3f2fd;
      --multiselect-selected-text: #1565c0;
      --multiselect-hover-bg: #f5f5f5;
    }
    :root[data-darkmode="true"] {
      --tile-free: #2a2f34;
      --tile-active: #2ecc71;
      --tile-text: #e5e7eb;
      --tile-text-on-active: #ffffff;
      --iface-head-bg: #1f2327;
      --border-color-soft: #2a2f34;
      --border-color-medium: #3a4146;
      --border-color-strong: #6b737a;
      --app-id-font-color: #f6f6f6;
      --tile-border: #54616b;

      --cron-minute: #8b4f5a;
      --cron-hour:   #4f6b52;
      --cron-day:    #7a5838;
      --cron-month:  #4a6b8e;
      --cron-weekday:#5a4f71;

      --badge-text: #ffffff;
      --badge-border: rgba(255,255,255,.2);
      --badge-shadow: rgba(0,0,0,.35);

      --multiselect-bg: var(--border-color-low);
      --multiselect-text: #e5e7eb;
      --multiselect-border: #3a4146;
      --multiselect-hover-bg: #3a4146;
    }

    .cron-minute-head { background: var(--cron-minute) !important; }
    .cron-hour-head   { background: var(--cron-hour)   !important; }
    .cron-day-head    { background: var(--cron-day)    !important; }
    .cron-month-head  { background: var(--cron-month)  !important; }
    .cron-weekday-head{ background: var(--cron-weekday)!important; }

    :root .cron-minute-head { color: #263238 !important; }
    :root .cron-hour-head   { color: #263238 !important; }
    :root .cron-day-head    { color: #263238 !important; }
    :root .cron-month-head  { color: #263238 !important; }
    :root .cron-weekday-head{ color: #263238 !important; }

    :root[data-darkmode="true"] .cron-minute-head { color: #ffcdd2 !important; }
    :root[data-darkmode="true"] .cron-hour-head   { color: #c8e6c9 !important; }
    :root[data-darkmode="true"] .cron-day-head    { color: #ffe0b2 !important; }
    :root[data-darkmode="true"] .cron-month-head  { color: #bbdefb !important; }
    :root[data-darkmode="true"] .cron-weekday-head{ color: #e1bee7 !important; }

    .ifacebox .tile { font-weight: normal; }

    .cron-badge {
      display: inline-block;
      padding: 3px 6px;
      border-radius: 6px;
      border: 1px solid var(--badge-border);
      box-shadow: 0 1px 1px var(--badge-shadow), inset 0 1px 0 rgba(255,255,255,.08);
      font-weight: 600;
      letter-spacing: .2px;
    }

    .cbi-input-text { text-align: left !important; }
    #cron_preview_text { text-align: left !important; }

    #cron_preview {
      height: 40px !important;
      min-height: 40px !important;
      max-height: 40px !important;
      background-color: var(--multiselect-bg) !important;
      border: 1px solid var(--badge-border);
      line-height: 26px;
      display: flex;
      align-items: center;
    }

    .cron-actions {
      margin-top: 1em;
      display: flex;
      justify-content: flex-end;
      gap: .6em;
    }

    .cron-multiselect {
      width: 100%;
      min-height: 140px;
      background-color: var(--multiselect-bg) !important;
      color: var(--multiselect-text) !important;
      border: 1px solid var(--multiselect-border) !important;
      border-radius: 4px;
      padding: 4px;
      font-family: inherit;
      font-size: 13px;
      line-height: 1.4;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .cron-multiselect:focus {
      border-color: var(--tile-active) !important;
      box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.2) !important;
    }

    :root:not([data-darkmode="true"]) .cron-multiselect option {
      padding: 4px 8px; border: none; outline: none;
      background-color: revert !important; color: revert !important;
    }
    :root:not([data-darkmode="true"]) .cron-multiselect option:not(:checked):hover {
      background-color: var(--multiselect-hover-bg) !important;
    }

    /* Dark mode */
    :root[data-darkmode="true"] .cron-multiselect option {
      background-color: var(--multiselect-bg) !important;
      color: var(--multiselect-text) !important;
      padding: 4px 8px; border: none; outline: none;
    }
    :root[data-darkmode="true"] .cron-multiselect option:hover {
      background-color: var(--multiselect-hover-bg) !important;
    }
    :root[data-darkmode="true"] #minute_select  option:checked { background-color: var(--cron-minute)  !important; color: #ffffff !important; font-weight: 600; }
    :root[data-darkmode="true"] #hour_select    option:checked { background-color: var(--cron-hour)    !important; color: #ffffff !important; font-weight: 600; }
    :root[data-darkmode="true"] #day_select     option:checked { background-color: var(--cron-day)     !important; color: #ffffff !important; font-weight: 600; }
    :root[data-darkmode="true"] #month_select   option:checked { background-color: var(--cron-month)   !important; color: #ffffff !important; font-weight: 600; }
    :root[data-darkmode="true"] #weekday_select option:checked { background-color: var(--cron-weekday) !important; color: #ffffff !important; font-weight: 600; }

    :root[data-darkmode="true"] #minute_select  option:checked:hover { background-color: var(--cron-minute)  !important; color: #ffffff !important; }
    :root[data-darkmode="true"] #hour_select    option:checked:hover { background-color: var(--cron-hour)    !important; color: #ffffff !important; }
    :root[data-darkmode="true"] #day_select     option:checked:hover { background-color: var(--cron-day)     !important; color: #ffffff !important; }
    :root[data-darkmode="true"] #month_select   option:checked:hover { background-color: var(--cron-month)   !important; color: #ffffff !important; }
    :root[data-darkmode="true"] #weekday_select option:checked:hover { background-color: var(--cron-weekday) !important; color: #ffffff !important; }

    :root[data-darkmode="true"] .cron-multiselect::-webkit-scrollbar { width: 8px; }
    :root[data-darkmode="true"] .cron-multiselect::-webkit-scrollbar-track { background: #1a1e22; border-radius: 4px; }
    :root[data-darkmode="true"] .cron-multiselect::-webkit-scrollbar-thumb { background: #4a5158; border-radius: 4px; }
    :root[data-darkmode="true"] .cron-multiselect::-webkit-scrollbar-thumb:hover { background: #5a6168; }

    :root .cron-multiselect::-webkit-scrollbar { width: 8px; }
    :root .cron-multiselect::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
    :root .cron-multiselect::-webkit-scrollbar-thumb { background: #c1c1c1; }
    :root .cron-multiselect::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
    `;
    document.head.appendChild(style);
  },

  badge: function(bg, content){
    const color = this.getBadgeTextColor();
    return '<span class="cron-badge" style="background:' + bg + '; color:' + color + '">' + content + '</span>';
  },

  getSelectedValues: function(selectId) {
    const sel = document.getElementById(selectId);
    if (!sel) return [];
    const vals = Array.from(sel.selectedOptions || [])
      .map(function(o){ return o.value; })
      .filter(function(v){ return v !== undefined && v !== null; });
    return vals;
  },

  normalizeSelection: function(values) {
    if (!values || values.length === 0) return ['*'];
    if (values.includes('*')) return ['*'];
    const uniq = Array.from(new Set(values.map(function(v){ return parseInt(v, 10); })));
    return uniq.sort(function(a,b){ return a-b; }).map(function(x){ return String(x); });
  },

  compressValues: function(values) {
    if (!values || values.length === 0) return '*';
    if (values.length === 1) return values[0];

    const nums = values.map(function(v){ return parseInt(v,10); });
    let parts = [];
    let start = nums[0];
    let prev = nums[0];

    for (let i = 1; i < nums.length; i++) {
      const cur = nums[i];
      if (cur === prev + 1) { prev = cur; continue; }
      parts.push(start === prev ? String(start) : (start + '-' + prev));
      start = prev = cur;
    }
    parts.push(start === prev ? String(start) : (start + '-' + prev));
    return parts.join(',');
  },

  buildCronField: function(selectId, checkboxId /*, isPeriod*/) {
    const valuesRaw = this.getSelectedValues(selectId);
    const values = this.normalizeSelection(valuesRaw);

    if (checkboxId) {
      const cb = document.getElementById(checkboxId);
      if (cb && cb.checked) {
        const sel = values[0];
        if (sel === '*' || sel === undefined) return '*';
        return '*/' + sel;
      }
    }
    if (values.length === 0 || values[0] === '*') return '*';
    return this.compressValues(values);
  },

  updateCronPreview: function() {
    const minute  = this.buildCronField('minute_select',  'minute_checkbox',  true);
    const hour    = this.buildCronField('hour_select',    'hour_checkbox',    true);
    const day     = this.buildCronField('day_select',     'day_checkbox',     true);
    const month   = this.buildCronField('month_select');
    const weekday = this.buildCronField('weekday_select');

    const cmdInput = document.getElementById('cron_command_input');
    const command = cmdInput ? (cmdInput.value || '') : '';

    const isMinuteChanged  = minute  !== '*';
    const isHourChanged    = hour    !== '*';
    const isDayChanged     = day     !== '*';
    const isMonthChanged   = month   !== '*';
    const isWeekdayChanged = weekday !== '*';
    const isCommandChanged = command !== '';

    const colors = this.getCurrentColors();

    let cronHtml = '';
    cronHtml += isMinuteChanged  ? this.badge(colors.minute,  minute)  : minute;  cronHtml += ' ';
    cronHtml += isHourChanged    ? this.badge(colors.hour,    hour)    : hour;    cronHtml += ' ';
    cronHtml += isDayChanged     ? this.badge(colors.day,     day)     : day;     cronHtml += ' ';
    cronHtml += isMonthChanged   ? this.badge(colors.month,   month)   : month;   cronHtml += ' ';
    cronHtml += isWeekdayChanged ? this.badge(colors.weekday, weekday) : weekday; cronHtml += ' ';
    cronHtml += isCommandChanged ? '<span class="cron-badge" style="background: var(--border-color-medium, var(--border-color-strong)); color:var(--badge-text)">' + command + '</span>'
  : command

    document.getElementById('cron_preview').innerHTML = cronHtml;

    const plain = minute + ' ' + hour + ' ' + day + ' ' + month + ' ' + weekday + ' ' + command;
    document.getElementById('cron_preview_text').value = plain;

    const human = this._describeCron(minute, hour, day, month, weekday, command);
    const humanEl = document.getElementById('cron_human_text');
    if (humanEl) humanEl.value = human;
  },

  appendCronLine: function() {
    const input = document.getElementById('cron_preview_text');
    if (!input) {
      ui.addNotification(null, E('p', _('Please enter the command')), 'info');
      return;
    }

    const cronLine = (input.value || '').trim();
    const isDefault = cronLine === '* * * * *' || cronLine === '';
    const parts = cronLine.split(/\s+/);

    if (isDefault) {
      ui.addNotification(null, E('p', _('Check the cron entry, it must contain (time + command)')), 'info');
      return;
    }
    if (parts.length < 6) {
      ui.addNotification(null, E('p', _('Please enter the command')), 'info');
      return;
    }

    return fs.read('/etc/crontabs/root').then(function(content) {
      let current = (content || '').replace(/\r\n/g, '\n');

      const haystack = '\n' + current + (current.endsWith('\n') ? '' : '\n');
      const needle   = '\n' + cronLine + '\n';
      if (haystack.indexOf(needle) !== -1) {
        ui.addNotification(null, E('p', _('This entry already exists in cron') + ': ' + cronLine));
        return Promise.resolve('duplicate');
      }

      if (!current.endsWith('\n') && current.length > 0) current += '\n';
      current += cronLine + '\n';

      return fs.write('/etc/crontabs/root', current).then(function(){ return 'written'; });
    }).then(function(state) {
      if (state === 'duplicate') return;

      return fs.exec('/etc/init.d/cron', ['restart']).then(function() {
        popTimeout(null, E('p', _('Added entry to cron') + ': ' + cronLine), 5000, 'info');
      });
    }).catch(function(e) {
      ui.addNotification(null, E('p', _('Error: %s').format(e.message)));
    });
  },

  generateOptions: function(start, end, labels) {
    const opts = [];
    opts.push(E('option', { value: '*', selected: true }, '*'));

    if (labels) {
      for (let i = 0; i < labels.length; i++) {
        opts.push(E('option', { value: (start + i).toString() }, labels[i]));
      }
    } else {
      for (let i = start; i <= end; i++) {
        opts.push(E('option', { value: i.toString() }, i.toString()));
      }
    }
    return opts;
  },

  resetMulti: function(id) {
    const sel = document.getElementById(id);
    if (!sel) return;
    Array.from(sel.options).forEach(function(o){ o.selected = (o.value === '*'); });
  },

  render: function(){
    this.addStyles();

    const root = E('div', { class:'cbi-map' }, [
      E('h4', {}, [ _('Graphical Crontab Configurator') ]),
      E('div', { 'class': 'cbi-section-descr fade-in' }, [_('A super simple graphical configurator for crontab.') ]),

      E('div', { 'style': 'display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));margin-bottom:1em;gap:1em' }, [
        E('div', { 'class': 'ifacebox', 'style': 'margin:.25em;width:100%' }, [
          E('div', { 'class': 'ifacebox-head cron-minute-head', 'style': 'font-weight:bold;padding:8px;color:#ffffff;' }, [ _('Minute') ]),
          E('div', { 'class': 'ifacebox-body', 'style': 'padding:8px' }, [
            E('select', {
              'id': 'minute_select',
              'class': 'cbi-input-select cron-multiselect',
              'multiple': true,
              'size': 8,
              'change': ui.createHandlerFn(this, 'updateCronPreview')
            }, this.generateOptions(0, 59)),
            E('div', { 'style': 'display:flex; align-items:center; gap:5px; margin-top:6px' }, [
              E('input', {
                'type': 'checkbox',
                'id': 'minute_checkbox',
                'change': ui.createHandlerFn(this, 'updateCronPreview')
              }),
              E('label', { 'for': 'minute_checkbox', 'style': 'font-size:12px' }, _('every specified minute period'))
            ])
          ])
        ]),

        E('div', { 'class': 'ifacebox', 'style': 'margin:.25em;width:100%' }, [
          E('div', { 'class': 'ifacebox-head cron-hour-head', 'style': 'font-weight:bold;padding:8px;color:#ffffff;' }, [ _('Hour') ]),
          E('div', { 'class': 'ifacebox-body', 'style': 'padding:8px' }, [
            E('select', {
              'id': 'hour_select',
              'class': 'cbi-input-select cron-multiselect',
              'multiple': true,
              'size': 8,
              'change': ui.createHandlerFn(this, 'updateCronPreview')
            }, this.generateOptions(0, 23)),
            E('div', { 'style': 'display:flex; align-items:center; gap:5px; margin-top:6px' }, [
              E('input', {
                'type': 'checkbox',
                'id': 'hour_checkbox',
                'change': ui.createHandlerFn(this, 'updateCronPreview')
              }),
              E('label', { 'for': 'hour_checkbox', 'style': 'font-size:12px' }, _('every specified hour period'))
            ])
          ])
        ]),

        E('div', { 'class': 'ifacebox', 'style': 'margin:.25em;width:100%' }, [
          E('div', { 'class': 'ifacebox-head cron-day-head', 'style': 'font-weight:bold;padding:8px;color:#ffffff;' }, [ _('Day') ]),
          E('div', { 'class': 'ifacebox-body', 'style': 'padding:8px' }, [
            E('select', {
              'id': 'day_select',
              'class': 'cbi-input-select cron-multiselect',
              'multiple': true,
              'size': 8,
              'change': ui.createHandlerFn(this, 'updateCronPreview')
            }, this.generateOptions(1, 31)),
            E('div', { 'style': 'display:flex; align-items:center; gap:5px; margin-top:6px' }, [
              E('input', {
                'type': 'checkbox',
                'id': 'day_checkbox',
                'change': ui.createHandlerFn(this, 'updateCronPreview')
              }),
              E('label', { 'for': 'day_checkbox', 'style': 'font-size:12px' }, _('every specified day period'))
            ])
          ])
        ]),

        E('div', { 'class': 'ifacebox', 'style': 'margin:.25em;width:100%' }, [
          E('div', { 'class': 'ifacebox-head cron-month-head', 'style': 'font-weight:bold;padding:8px;color:#ffffff;' }, [ _('Month') ]),
          E('div', { 'class': 'ifacebox-body', 'style': 'padding:8px' }, [
            E('select', {
              'id': 'month_select',
              'class': 'cbi-input-select cron-multiselect',
              'multiple': true,
              'size': 8,
              'change': ui.createHandlerFn(this, 'updateCronPreview')
            }, this.generateOptions(1, 12, [
              _('January'), _('February'), _('March'), _('April'), _('May'), _('June'),
              _('July'), _('August'), _('September'), _('October'), _('November'), _('December')
            ]))
          ])
        ]),

        E('div', { 'class': 'ifacebox', 'style': 'margin:.25em;width:100%' }, [
          E('div', { 'class': 'ifacebox-head cron-weekday-head', 'style': 'font-weight:bold;padding:8px;color:#ffffff;' }, [ _('Weekday') ]),
          E('div', { 'class': 'ifacebox-body', 'style': 'padding:8px' }, [
            E('select', {
              'id': 'weekday_select',
              'class': 'cbi-input-select cron-multiselect',
              'multiple': true,
              'size': 8,
              'change': ui.createHandlerFn(this, 'updateCronPreview')
            }, this.generateOptions(0, 6, [
              _('Sunday'), _('Monday'), _('Tuesday'), _('Wednesday'), _('Thursday'), _('Friday'), _('Saturday')
            ]))
          ])
        ])
      ]),

      E('label', { 'style': 'font-weight:bold; display:block; margin-bottom:5px;' }, _('Command to execute:')),
      E('input', {
        'id': 'cron_command_input',
        'class': 'cbi-input-text',
        'style': 'width:100%; margin-bottom:10px; text-align:center;',
        'blur': ui.createHandlerFn(this, 'updateCronPreview')
      }),

      E('div', { 'style': 'margin-top:1em;' }, [
        E('label', { 'style': 'font-weight:bold; display:block; margin-bottom:5px;' }, _('Command preview:')),
        E('div', {
          'id': 'cron_preview',
          'style': 'width:100%; margin-bottom:10px; font-family:monospace; border:1px solid var(--border-color-medium); padding:8px; background:var(--tile-free); border-radius:6px; color:var(--tile-text);'
        }),
      ]),

      // Desc
      E('div', { 'style': 'margin-top:1em;' }, [
        E('label', { 'style': 'font-weight:bold; display:block; margin-bottom:5px;' }, _('Description:')),
        E('textarea', {
          'id': 'cron_human_text',
          'class': 'cbi-input-textarea',
          'style': 'width:100%; min-height:60px; resize:vertical;',
          'readonly': true
        })
      ]),

      E('div', { 'style': 'margin-top:1em;' }, [
        E('label', { 'style': 'font-weight:bold; display:block; margin-bottom:5px;' }, _('Generated cron command:')),
        E('input', {
          'id': 'cron_preview_text',
          'class': 'cbi-input-text',
          'style': 'width:100%; margin-bottom:10px; font-family:monospace;',
          'readonly': true,
          'data-tooltip': _('Cron command for copying'),
          'value': '* * * * * '
        })
      ]),

      E('div', { 'class': 'cron-actions' }, [
        E('button', {
          'class': 'cbi-button cbi-button-positive',
          'click': ui.createHandlerFn(this, 'appendCronLine')
        }, _('Add to cron')),
        E('button', {
          'class': 'cbi-button cbi-button-neutral',
          'click': ui.createHandlerFn(this, function(){
            this.resetMulti('minute_select');
            this.resetMulti('hour_select');
            this.resetMulti('day_select');
            this.resetMulti('month_select');
            this.resetMulti('weekday_select');
            document.getElementById('cron_command_input').value = '';

            const minuteCheckbox = document.getElementById('minute_checkbox');
            const hourCheckbox   = document.getElementById('hour_checkbox');
            const dayCheckbox    = document.getElementById('day_checkbox');
            if (minuteCheckbox) minuteCheckbox.checked = false;
            if (hourCheckbox) hourCheckbox.checked = false;
            if (dayCheckbox) dayCheckbox.checked = false;

            this.updateCronPreview();
          })
        }, _('Reset changes'))
      ])
    ]);

    setTimeout(() => this.updateCronPreview(), 0);
    return root;
  },

  handleSaveApply: null,
  handleSave: null,
  handleReset: null
});