Stimulus controller for autosaving form drafts

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,
    interval: { type: Number, default: 5000 }
  }

  connect() {
    this.restoreDraft()
    this.setupAutosave()
  }

  disconnect() {
    if (this.saveTimeout) clearTimeout(this.saveTimeout)
  }

  setupAutosave() {
    this.fieldTargets.forEach(field => {
      field.addEventListener('input', () => this.scheduleSave())
    })
  }

  scheduleSave() {
    if (this.saveTimeout) clearTimeout(this.saveTimeout)

    this.saveTimeout = setTimeout(() => {
      this.saveDraft()
    }, this.intervalValue)
  }

  saveDraft() {
    const formData = {}

    this.fieldTargets.forEach(field => {
      formData[field.name] = field.value
    })

    localStorage.setItem(this.keyValue, JSON.stringify({
      data: formData,
      savedAt: new Date().toISOString()
    }))

    this.updateStatus('Draft saved')
  }

  restoreDraft() {
    const draft = localStorage.getItem(this.keyValue)
    if (!draft) return

    const { data, savedAt } = JSON.parse(draft)

    // Only restore if draft is less than 24 hours old
    const savedDate = new Date(savedAt)
    const hoursSince = (Date.now() - savedDate.getTime()) / 1000 / 60 / 60

    if (hoursSince > 24) {
      localStorage.removeItem(this.keyValue)
      return
    }

    // Restore form data
    this.fieldTargets.forEach(field => {
      if (data[field.name]) {
        field.value = data[field.name]
      }
    })

    this.updateStatus(`Draft restored from ${new Date(savedAt).toLocaleTimeString()}`)
  }

  clearDraft() {
    localStorage.removeItem(this.keyValue)
    this.updateStatus('')
  }

  updateStatus(message) {
    if (this.hasStatusTarget) {
      this.statusTarget.textContent = message
    }
  }
}