/**
 * TimeAccountingView — Storico consuntivazione
 * Shows a summary of notes/emails entered by the selected agent on the selected day,
 * with options on the right side to edit consumed time or backdate the article.
 * Includes interactive day pills strip, configurable WORK_DAYS, and show/hide non-working days toggle.
 */
const TimeAccountingView = {
  selectedAgentId: null,
  selectedDate: null,
  selectedArticleId: null,
  summaryData: null,
  showNonWorkingDays: localStorage.getItem('otrs_ta_show_non_working_days') !== 'false',

  formatLocalISO(d) {
    if (!d) return '';
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    return `${y}-${m}-${day}`;
  },

  async render() {
    const container = document.getElementById('view-container');
    container.innerHTML = '<div class="loading-screen"><div class="spinner"></div><p>Caricamento consuntivazione...</p></div>';

    try {
      await App.ensureLookups();

      if (!this.selectedAgentId) {
        this.selectedAgentId = App.currentAgentId;
      }
      if (!this.selectedDate) {
        this.selectedDate = this.formatLocalISO(new Date());
      }

      await this.loadData();
    } catch (err) {
      container.innerHTML = `<div class="empty-state"><p style="color:var(--danger)">Errore caricamento: ${App.escapeHtml(err.message)}</p></div>`;
    }
  },

  async loadData() {
    const container = document.getElementById('view-container');
    const params = new URLSearchParams({
      agent_id: this.selectedAgentId,
      date: this.selectedDate,
    });

    let data = await App.api(`/api/tickets/time-accounting/summary?${params}`);

    // If non-working days are hidden, ensure selectedDate is a valid working day
    if (!this.showNonWorkingDays) {
      const workDays = (data && data.work_days) || [1, 2, 3, 4, 5];
      const parts = this.selectedDate.split('-').map(Number);
      const d = new Date(parts[0], parts[1] - 1, parts[2]);
      let shifted = false;
      while (workDays.length > 0 && !workDays.includes(d.getDay())) {
        d.setDate(d.getDate() - 1);
        shifted = true;
      }
      if (shifted) {
        this.selectedDate = this.formatLocalISO(d);
        params.set('date', this.selectedDate);
        data = await App.api(`/api/tickets/time-accounting/summary?${params}`);
      }
    }

    this.summaryData = data;

    // Auto-select first article if current selection is invalid
    const articles = data.articles || [];
    if (!articles.find(a => String(a.article_id) === String(this.selectedArticleId))) {
      this.selectedArticleId = articles.length > 0 ? articles[0].article_id : null;
    }

    container.innerHTML = this.buildHtml(data);
    this.bindEvents();

    // Smooth scroll active day pill into center view
    setTimeout(() => {
      const activePill = container.querySelector('.ta-day-pill.active');
      if (activePill) {
        activePill.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
      }
    }, 50);
  },

  formatPillTime(mins) {
    if (!mins || mins <= 0) return '0m';
    const h = Math.floor(mins / 60);
    const m = Math.round(mins % 60);
    if (h > 0 && m > 0) return `${h}h ${m}m`;
    if (h > 0) return `${h}h`;
    return `${m}m`;
  },

  buildHtml(data) {
    const articles = data.articles || [];
    const totalMins = Math.round(data.total_minutes || 0);
    const targetMins = data.target_minutes || 480;
    const workDays = data.work_days || [1, 2, 3, 4, 5];
    const hours = Math.floor(totalMins / 60);
    const mins = totalMins % 60;
    const formattedTotal = hours > 0 ? `${hours}h ${mins}m (${totalMins} min)` : `${totalMins} min`;

    const selectedParts = this.selectedDate.split('-').map(Number);
    const selectedDateObj = new Date(selectedParts[0], selectedParts[1] - 1, selectedParts[2]);
    const dayOfWeek = selectedDateObj.getDay();
    const isWorkDay = workDays.includes(dayOfWeek);
    const isTargetReached = totalMins >= targetMins;

    let headerBadgeBg = 'var(--accent-primary)';
    let headerBadgeText = `Totale: ${formattedTotal}`;

    if (isWorkDay) {
      if (isTargetReached) {
        headerBadgeBg = '#15803d';
        headerBadgeText = `Totale: ${formattedTotal} — ✓ Soglia raggiunta`;
      } else {
        const diff = targetMins - totalMins;
        const diffH = Math.floor(diff / 60);
        const diffM = Math.round(diff % 60);
        const diffStr = diffH > 0 ? `${diffH}h ${diffM}m` : `${diffM}m`;
        headerBadgeBg = '#b91c1c';
        headerBadgeText = `Totale: ${formattedTotal} — Mancano ${diffStr}`;
      }
    }

    const users = App.lookups.users || [];
    const selectedArticle = articles.find(a => String(a.article_id) === String(this.selectedArticleId));

    return `
      <div class="view-header" style="padding:var(--space-md) var(--space-xl); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-sm); border-bottom:1px solid var(--border-subtle);">
        <div style="display:flex; align-items:center; gap:var(--space-sm);">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:20px; height:20px; color:var(--accent-primary);">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" />
          </svg>
          <span style="font-weight:600; font-size:1rem;">Storico consuntivazione</span>
          <span class="badge" style="background:${headerBadgeBg}; color:#fff; font-size:0.78rem; padding:3px 10px; border-radius:12px;">
            ${headerBadgeText}
          </span>
        </div>
      </div>

      <!-- Filters Bar -->
      <div style="display:flex; flex-wrap:wrap; gap:var(--space-md); padding:var(--space-md) var(--space-xl); border-bottom:1px solid var(--border-subtle); background:var(--bg-secondary); align-items:flex-end;">
        <div style="display:flex; flex-direction:column; gap:4px;">
          <label style="font-size:0.75rem; color:var(--text-muted); font-weight:500;">Agente</label>
          <select id="ta-agent-select" class="form-select" style="min-width:180px; height:36px; font-size:0.85rem; padding:6px 28px 6px 10px;">
            ${users.map(u => `<option value="${u.id}" ${String(u.id) === String(this.selectedAgentId) ? 'selected' : ''}>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</option>`).join('')}
          </select>
        </div>

        <div style="display:flex; flex-direction:column; gap:4px;">
          <label style="font-size:0.75rem; color:var(--text-muted); font-weight:500;">Data (Calendario)</label>
          <input type="date" id="ta-date-input" class="form-input" value="${this.selectedDate}" style="height:36px; font-size:0.85rem; padding:6px 10px;" />
        </div>

        <div style="display:flex; gap:var(--space-xs); align-self:flex-end;">
          <button id="ta-btn-today" class="btn btn-ghost btn-sm" style="height:36px;">Oggi</button>
          <button id="ta-btn-toggle-nonwork" class="btn btn-ghost btn-sm" style="height:36px; display:flex; align-items:center; gap:6px;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:15px; height:15px;">
              ${this.showNonWorkingDays 
                ? '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/>' 
                : '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>'}
            </svg>
            <span>${this.showNonWorkingDays ? 'Nascondi non lavorativi' : 'Mostra non lavorativi'}</span>
          </button>
        </div>
      </div>

      <!-- Interactive Day Pills Strip with Target-based Color Coding -->
      ${this.buildDayStrip(data)}

      <!-- Two-column Master/Detail Layout -->
      <div style="display:flex; gap:var(--space-md); padding:var(--space-md) var(--space-xl); align-items:flex-start; min-height:calc(100vh - 280px);">
        
        <!-- Left Side: List of Articles -->
        <div style="flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--space-sm);">
          ${articles.length === 0 ? `
            <div class="empty-state" style="padding:var(--space-2xl); text-align:center; color:var(--text-muted); background:var(--bg-card); border-radius:var(--radius-md); border:1px solid var(--border-subtle);">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:48px; height:48px; margin:0 auto var(--space-md); display:block; opacity:0.4;">
                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
              </svg>
              <p style="font-size:0.9rem; font-weight:500;">Nessuna nota o email trovata in questa data per l'agente selezionato.</p>
            </div>
          ` : articles.map(a => this.buildArticleCard(a)).join('')}
        </div>

        <!-- Right Side: Details & Actions Panel -->
        <div style="width:380px; flex-shrink:0; position:sticky; top:20px;">
          ${selectedArticle ? this.buildDetailPanel(selectedArticle) : `
            <div class="card" style="padding:var(--space-lg); text-align:center; color:var(--text-muted); font-size:0.85rem;">
              Seleziona una nota o email a sinistra per gestirne il tempo o retrodatare.
            </div>
          `}
        </div>
      </div>
    `;
  },

  buildDayStrip(data) {
    const selectedParts = this.selectedDate.split('-').map(Number);
    const selected = new Date(selectedParts[0], selectedParts[1] - 1, selectedParts[2]);
    const todayStr = this.formatLocalISO(new Date());
    const weekdays = ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'];
    const months = ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'];
    const dailyTotals = (data && data.daily_totals) || {};
    const targetMins = (data && data.target_minutes) || 480;
    const workDays = (data && data.work_days) || [1, 2, 3, 4, 5];

    // Generate 2 full weeks of days (15 calendar days if showing all, or 10-11 working days if hiding non-working days)
    const dateList = [];
    if (this.showNonWorkingDays) {
      for (let offset = -7; offset <= 7; offset++) {
        const d = new Date(selected);
        d.setDate(d.getDate() + offset);
        dateList.push(d);
      }
    } else {
      const before = [];
      let dPrev = new Date(selected);
      while (before.length < 5) {
        dPrev.setDate(dPrev.getDate() - 1);
        if (workDays.includes(dPrev.getDay())) {
          before.unshift(new Date(dPrev));
        }
      }
      const current = new Date(selected);
      const after = [];
      let dNext = new Date(selected);
      while (after.length < 5) {
        dNext.setDate(dNext.getDate() + 1);
        if (workDays.includes(dNext.getDay())) {
          after.push(new Date(dNext));
        }
      }
      dateList.push(...before, current, ...after);
    }

    const days = [];
    for (const d of dateList) {
      const isoStr = this.formatLocalISO(d);
      const dayOfWeek = d.getDay(); // 0 = Sun, 1 = Mon ... 6 = Sat
      const isWorkDay = workDays.includes(dayOfWeek);
      const isSelected = isoStr === this.selectedDate;
      const isToday = isoStr === todayStr;

      const dayNum = d.getDate();
      const weekdayName = weekdays[dayOfWeek];
      const monthName = months[d.getMonth()];

      const dayMins = Math.round(dailyTotals[isoStr] || 0);
      const formattedTime = this.formatPillTime(dayMins);
      const isTargetReached = dayMins >= targetMins;

      // Color coding computation
      let bgStyle = 'var(--bg-card)';
      let borderStyle = '1px solid var(--border-subtle)';
      let textColor = 'var(--text-primary)';
      let badgeBg = 'var(--bg-tertiary)';
      let badgeColor = 'var(--text-muted)';

      if (!isWorkDay) {
        // Non-working days (e.g., weekends)
        if (isSelected) {
          bgStyle = 'var(--accent-primary)';
          borderStyle = '1px solid var(--accent-primary)';
          textColor = '#ffffff';
          badgeBg = 'rgba(255,255,255,0.25)';
          badgeColor = '#ffffff';
        } else if (isToday) {
          bgStyle = 'rgba(79, 70, 229, 0.12)';
          borderStyle = '1px solid var(--border-subtle)';
          textColor = 'var(--accent-primary)';
        }
      } else {
        // Working days (configured in WORK_DAYS)
        if (isTargetReached) {
          // Verdino (green)
          if (isSelected) {
            bgStyle = '#15803d';
            borderStyle = '1px solid #166534';
            textColor = '#ffffff';
            badgeBg = 'rgba(255,255,255,0.28)';
            badgeColor = '#ffffff';
          } else {
            bgStyle = 'rgba(34, 197, 94, 0.16)';
            borderStyle = '1px solid rgba(34, 197, 94, 0.5)';
            textColor = '#15803d';
            badgeBg = 'rgba(34, 197, 94, 0.25)';
            badgeColor = '#15803d';
          }
        } else {
          // Rosso (red)
          if (isSelected) {
            bgStyle = '#b91c1c';
            borderStyle = '1px solid #991b1b';
            textColor = '#ffffff';
            badgeBg = 'rgba(255,255,255,0.28)';
            badgeColor = '#ffffff';
          } else {
            bgStyle = 'rgba(239, 68, 68, 0.14)';
            borderStyle = '1px solid rgba(239, 68, 68, 0.4)';
            textColor = '#b91c1c';
            badgeBg = 'rgba(239, 68, 68, 0.22)';
            badgeColor = '#b91c1c';
          }
        }
      }

      days.push(`
        <button type="button" class="ta-day-pill ${isSelected ? 'active' : ''}" data-date="${isoStr}"
          style="display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5px 10px; min-width:64px; height:64px; border-radius:var(--radius-md); border:${borderStyle}; background:${bgStyle}; color:${textColor}; cursor:pointer; transition:all 0.15s ease; flex-shrink:0; font-family:inherit;">
          
          <span style="font-size:0.65rem; font-weight:700; text-transform:uppercase; opacity:${isSelected ? '0.95' : '0.75'};">${weekdayName} ${dayNum}</span>
          
          <span class="badge" style="font-size:0.68rem; font-weight:800; padding:2px 6px; border-radius:8px; margin:2px 0; background:${badgeBg}; color:${badgeColor};">
            ⏱️ ${formattedTime}
          </span>

          <span style="font-size:0.60rem; opacity:${isSelected ? '0.85' : '0.65'};">${monthName}${isToday ? ' (Oggi)' : ''}</span>
        </button>
      `);
    }

    return `
      <div style="display:flex; align-items:center; gap:8px; padding:var(--space-xs) var(--space-xl); border-bottom:1px solid var(--border-subtle); background:var(--bg-secondary);">
        <button id="ta-day-prev" class="btn btn-ghost btn-sm" style="padding:6px 10px; font-weight:bold; font-size:1rem; height:64px;" title="Giorno precedente">‹</button>
        <div id="ta-days-container" style="display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto; padding:2px 0; scrollbar-width:thin;">
          ${days.join('')}
        </div>
        <button id="ta-day-next" class="btn btn-ghost btn-sm" style="padding:6px 10px; font-weight:bold; font-size:1rem; height:64px;" title="Giorno successivo">›</button>
      </div>
    `;
  },

  buildArticleCard(a) {
    const isSelected = String(a.article_id) === String(this.selectedArticleId);
    const dt = a.create_time ? new Date(a.create_time).toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' }) : '—';
    const bodyPreview = App.escapeHtml((a.a_body || '').replace(/<[^>]*>/g, ' ').substring(0, 150)) + ((a.a_body || '').length > 150 ? '...' : '');
    const timeMins = parseFloat(a.time_unit || 0);

    return `
      <div class="card ta-article-card ${isSelected ? 'selected' : ''}" data-article-id="${a.article_id}" style="cursor:pointer; padding:var(--space-md); border:1px solid ${isSelected ? 'var(--accent-primary)' : 'var(--border-subtle)'}; background:${isSelected ? 'var(--bg-secondary)' : 'var(--bg-card)'}; transition:all 0.15s ease;">
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
          <div style="display:flex; align-items:center; gap:6px;">
            <a href="#/tickets/${a.ticket_id}" class="ticket-tn-link" onclick="event.stopPropagation();" style="font-weight:700;">#${App.escapeHtml(a.ticket_tn || a.ticket_id)}</a>
            <span style="font-size:0.82rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:250px;">${App.escapeHtml(a.ticket_title || '')}</span>
          </div>
          <span style="font-size:0.75rem; color:var(--text-muted);">${dt}</span>
        </div>

        <div style="font-size:0.82rem; font-weight:600; color:var(--accent-primary); margin-bottom:4px;">
          ${App.escapeHtml(a.a_subject || '(senza oggetto)')}
        </div>

        <div style="font-size:0.78rem; color:var(--text-secondary); line-height:1.4; margin-bottom:8px;">
          ${bodyPreview || '<em>Nessun testo</em>'}
        </div>

        <div style="display:flex; justify-content:space-between; align-items:center; font-size:0.75rem;">
          <span class="badge" style="background:var(--bg-tertiary); color:var(--text-secondary);">${App.escapeHtml(a.channel || a.sender_type || 'Nota')}</span>
          <span class="badge" style="background:${timeMins > 0 ? 'rgba(34,197,94,0.15)' : 'var(--bg-tertiary)'}; color:${timeMins > 0 ? '#16a34a' : 'var(--text-muted)'}; font-weight:600;">
            ⏱️ ${timeMins} min
          </span>
        </div>
      </div>
    `;
  },

  buildDetailPanel(a) {
    const timeMins = parseFloat(a.time_unit || 0);

    const localISO = (dateStr) => {
      if (!dateStr) return '';
      const d = new Date(dateStr);
      return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
    };

    return `
      <div class="card" style="padding:var(--space-md); border:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:var(--space-md);">
        <div style="border-bottom:1px solid var(--border-subtle); padding-bottom:var(--space-xs);">
          <div style="font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; font-weight:700;">Ticket Collegato</div>
          <a href="#/tickets/${a.ticket_id}" class="ticket-tn-link" style="font-size:0.95rem; font-weight:700; display:block; margin-top:2px;">
            #${App.escapeHtml(a.ticket_tn || a.ticket_id)} — ${App.escapeHtml(a.ticket_title || '')}
          </a>
        </div>

        <div>
          <div style="font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; font-weight:700;">Oggetto Nota/Mail</div>
          <div style="font-size:0.88rem; font-weight:600; color:var(--text-primary); margin-top:2px;">
            ${App.escapeHtml(a.a_subject || '(senza oggetto)')}
          </div>
        </div>

        <div>
          <div style="font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; margin-bottom:4px;">Contenuto</div>
          <div style="max-height:180px; overflow-y:auto; padding:var(--space-xs) var(--space-sm); background:var(--bg-tertiary); border-radius:var(--radius-sm); border:1px solid var(--border-subtle); font-size:0.78rem; color:var(--text-primary); line-height:1.4;">
            ${App.escapeHtml(a.a_body || '')}
          </div>
        </div>

        <hr style="border:0; border-top:1px solid var(--border-subtle); margin:0;" />

        <!-- Form Modifica Tempo -->
        <div style="background:var(--bg-secondary); padding:var(--space-sm); border-radius:var(--radius-sm); border:1px solid var(--border-subtle);">
          <label style="font-size:0.78rem; font-weight:700; color:var(--text-primary); display:block; margin-bottom:6px;">
            ⏱️ Modifica Tempo Consuntivato (minuti)
          </label>
          <div style="display:flex; gap:var(--space-xs);">
            <input type="number" step="any" min="0" id="ta-input-time" class="form-input" value="${timeMins}" style="flex:1; height:32px; font-size:0.85rem;" />
            <button id="ta-btn-save-time" class="btn btn-primary btn-sm" style="height:32px;">Salva Tempo</button>
          </div>
        </div>

        <!-- Form Retrodatazione -->
        <div style="background:var(--bg-secondary); padding:var(--space-sm); border-radius:var(--radius-sm); border:1px solid var(--border-subtle);">
          <label style="font-size:0.78rem; font-weight:700; color:var(--text-primary); display:block; margin-bottom:6px;">
            📅 Retrodata data/ora articolo
          </label>
          <div style="display:flex; flex-direction:column; gap:6px;">
            <input type="datetime-local" id="ta-input-date" class="form-input" value="${localISO(a.create_time)}" style="height:32px; font-size:0.82rem;" />
            <button id="ta-btn-save-date" class="btn btn-primary btn-sm" style="height:32px; align-self:flex-end;">Salva Data</button>
          </div>
        </div>
      </div>
    `;
  },

  bindEvents() {
    // Agent change
    document.getElementById('ta-agent-select')?.addEventListener('change', (e) => {
      this.selectedAgentId = e.target.value;
      this.loadData();
    });

    // Date change (Calendar picker)
    document.getElementById('ta-date-input')?.addEventListener('change', (e) => {
      this.selectedDate = e.target.value;
      this.loadData();
    });

    // Today button
    document.getElementById('ta-btn-today')?.addEventListener('click', () => {
      this.selectedDate = this.formatLocalISO(new Date());
      this.loadData();
    });

    // Toggle non-working days button
    document.getElementById('ta-btn-toggle-nonwork')?.addEventListener('click', () => {
      this.showNonWorkingDays = !this.showNonWorkingDays;
      localStorage.setItem('otrs_ta_show_non_working_days', this.showNonWorkingDays);
      this.loadData();
    });

    // Day pill clicks
    document.querySelectorAll('.ta-day-pill[data-date]').forEach(pill => {
      pill.addEventListener('click', () => {
        this.selectedDate = pill.dataset.date;
        this.loadData();
      });
    });

    // Previous day button
    document.getElementById('ta-day-prev')?.addEventListener('click', () => {
      const workDays = (this.summaryData && this.summaryData.work_days) || [1, 2, 3, 4, 5];
      const parts = this.selectedDate.split('-').map(Number);
      const d = new Date(parts[0], parts[1] - 1, parts[2]);
      do {
        d.setDate(d.getDate() - 1);
      } while (!this.showNonWorkingDays && workDays.length > 0 && !workDays.includes(d.getDay()));
      this.selectedDate = this.formatLocalISO(d);
      this.loadData();
    });

    // Next day button
    document.getElementById('ta-day-next')?.addEventListener('click', () => {
      const workDays = (this.summaryData && this.summaryData.work_days) || [1, 2, 3, 4, 5];
      const parts = this.selectedDate.split('-').map(Number);
      const d = new Date(parts[0], parts[1] - 1, parts[2]);
      do {
        d.setDate(d.getDate() + 1);
      } while (!this.showNonWorkingDays && workDays.length > 0 && !workDays.includes(d.getDay()));
      this.selectedDate = this.formatLocalISO(d);
      this.loadData();
    });

    // Card selection click
    document.querySelectorAll('.ta-article-card').forEach(card => {
      card.addEventListener('click', () => {
        this.selectedArticleId = card.dataset.articleId;
        const container = document.getElementById('view-container');
        container.innerHTML = this.buildHtml(this.summaryData);
        this.bindEvents();
      });
    });

    // Save time action
    const saveTimeBtn = document.getElementById('ta-btn-save-time');
    if (saveTimeBtn) {
      saveTimeBtn.addEventListener('click', async () => {
        const timeInput = document.getElementById('ta-input-time');
        const timeVal = parseFloat(timeInput.value);
        if (isNaN(timeVal) || timeVal < 0) {
          Toast.warning('Inserisci un tempo valido in minuti');
          return;
        }

        try {
          saveTimeBtn.disabled = true;
          await App.api(`/api/tickets/articles/${this.selectedArticleId}/time`, {
            method: 'PUT',
            body: JSON.stringify({ time_unit: timeVal }),
          });
          Toast.success('Tempo consuntivato aggiornato!');
          this.loadData();
        } catch (err) {
          Toast.error('Errore aggiornamento tempo: ' + err.message);
          saveTimeBtn.disabled = false;
        }
      });
    }

    // Save retrodate action
    const saveDateBtn = document.getElementById('ta-btn-save-date');
    if (saveDateBtn) {
      saveDateBtn.addEventListener('click', async () => {
        const dateInput = document.getElementById('ta-input-date');
        const dateVal = dateInput.value;
        if (!dateVal) {
          Toast.warning('Scegli una data/ora valida');
          return;
        }

        try {
          saveDateBtn.disabled = true;
          await App.api(`/api/tickets/articles/${this.selectedArticleId}/retrodata-article`, {
            method: 'POST',
            body: JSON.stringify({ create_time: dateVal }),
          });
          Toast.success('Articolo retrodatato con successo!');
          this.loadData();
        } catch (err) {
          Toast.error('Errore retrodatazione: ' + err.message);
          saveDateBtn.disabled = false;
        }
      });
    }
  }
};