<div class="as-wrap">
  <div class="as-header">
    <h2 class="as-heading">New Comment</h2>
    <span class="as-status" id="asStatus"></span>
  </div>
  <form class="as-form" id="asForm">
    <input type="text" id="asSubject" class="as-input" placeholder="Subject" />
    <textarea id="asBody" class="as-textarea" rows="5" placeholder="Write your comment..."></textarea>
    <div class="as-actions">
      <button type="button" id="asClear" class="as-clear-btn">Clear draft</button>
    </div>
  </form>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.as-wrap { width: 100%; max-width: 440px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; box-shadow: 0 4px 16px rgba(15,23,42,0.05); }

.as-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.as-heading { font-size: 15px; font-weight: 800; color: #1e293b; }
.as-status {
  font-size: 11px; font-weight: 700; color: #16a34a; opacity: 0; transition: opacity 0.25s;
  display: flex; align-items: center; gap: 4px;
}
.as-status.as-visible { opacity: 1; }

.as-form { display: flex; flex-direction: column; gap: 10px; }
.as-input, .as-textarea {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; font-family: inherit;
  font-size: 13.5px; color: #1e293b; resize: vertical;
}
.as-input:focus, .as-textarea:focus { outline: none; border-color: #6366f1; }

.as-actions { display: flex; justify-content: flex-end; margin-top: 2px; }
.as-clear-btn {
  background: none; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 14px;
  font-size: 12px; font-weight: 700; color: #64748b; cursor: pointer;
}
.as-clear-btn:hover { background: #fef2f2; border-color: #fecaca; color: #ef4444; }

const subjectEl = document.getElementById('asSubject');
const bodyEl = document.getElementById('asBody');
const statusEl = document.getElementById('asStatus');
const clearBtn = document.getElementById('asClear');

const STORAGE_KEY = 'draft-autosave-comment';
const DEBOUNCE_MS = 500;

let debounceTimer = null;
let hideStatusTimer = null;

function restoreDraft() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;
    const draft = JSON.parse(raw);
    if (draft && typeof draft === 'object') {
      subjectEl.value = draft.subject || '';
      bodyEl.value = draft.body || '';
    }
  } catch (e) {
    // ignore corrupted draft
  }
}

function saveDraft() {
  const draft = { subject: subjectEl.value, body: bodyEl.value };
  localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
  showSavedStatus();
}

function showSavedStatus() {
  statusEl.textContent = '\u2713 Draft saved';
  statusEl.classList.add('as-visible');
  clearTimeout(hideStatusTimer);
  hideStatusTimer = setTimeout(() => {
    statusEl.classList.remove('as-visible');
  }, 2000);
}

function scheduleAutosave() {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(saveDraft, DEBOUNCE_MS);
}

subjectEl.addEventListener('input', scheduleAutosave);
bodyEl.addEventListener('input', scheduleAutosave);

clearBtn.addEventListener('click', () => {
  clearTimeout(debounceTimer);
  subjectEl.value = '';
  bodyEl.value = '';
  localStorage.removeItem(STORAGE_KEY);
  statusEl.textContent = 'Draft cleared';
  statusEl.classList.add('as-visible');
  clearTimeout(hideStatusTimer);
  hideStatusTimer = setTimeout(() => {
    statusEl.classList.remove('as-visible');
  }, 2000);
});

restoreDraft();