{{define "prompts"}}
<div class="sg-container">
  <h1 style="font-size: 2.5rem; font-weight: 700;">{{if .TargetDossier}}{{.TargetDossier.Name}}'s {{end}}Daily Check-in</h1>
  <p class="intro" style="font-size: 1.15rem; font-weight: 300; line-height: 1.8; margin-bottom: 8px;">Track daily measurements and observations</p>

  <p style="color: #64748b; margin-bottom: 32px; line-height: 1.6;">
    Enter what you want to track (e.g., "I take vitamin D every morning" or "walked 30 minutes today").
    The system will learn patterns and create tracking prompts.
  </p>

  {{if .Error}}<div class="msg msg-error">{{.Error}}</div>{{end}}
  {{if .Success}}<div class="msg msg-success">{{.Success}}</div>{{end}}

  {{if or .AllPrompts .Entries .FreeformPrompts}}
  <div class="data-card">
    <!-- Section header -->
    <div class="prompt-section-header">
      <div class="prompt-section-info">
        <div class="prompt-section-title">TODAY</div>
        <div class="prompt-section-subtitle">{{.DueCount}} items due</div>
      </div>
    </div>

    <div class="prompt-list">
      {{/* 1. FILLED CARDS - Entries from today (SHOW FIRST) */}}
      {{range .Entries}}
      <div class="prompt-item prompt-filled" data-entry-id="{{.ID}}">
        <a href="#" class="prompt-dismiss" onclick="deleteEntry('{{.ID}}'); return false;" title="Delete">✕</a>
        <div class="prompt-header">
          <div style="display: flex; justify-content: space-between; align-items: baseline;">
            <span class="prompt-question">{{.Question}}</span>
            <span class="prompt-saved-time">{{.TimeFormatted}}</span>
          </div>
          <div style="margin-top: 4px;">
            <span class="prompt-category">{{.Category}}</span>
          </div>
        </div>
        <div class="prompt-body entry-readonly">
          {{range .Fields}}
          <div class="prompt-field-row">
            {{if eq .Type "number"}}
            <span class="entry-value">{{.Value}}</span>
            {{if .Unit}}<span class="prompt-unit">{{.Unit}}</span>{{end}}
            {{else if eq .Type "checkbox"}}
            <span class="entry-check">{{if .Value}}✓{{else}}—{{end}}</span>
            {{if .Label}}<span class="prompt-checkbox-label">{{.Label}}</span>{{end}}
            {{else}}
            <span class="entry-value">{{.Value}}</span>
            {{end}}
          </div>
          {{end}}
        </div>
        <div class="prompt-saved-footer">
          <a href="#" class="prompt-edit" onclick="editEntry(this); return false;">edit</a>
        </div>
        {{if .SourceInput}}<div class="prompt-source">Created from: "{{.SourceInput}}"</div>{{end}}
      </div>
      {{end}}

      {{/* 2. ALL PROMPTS - Unfilled prompts (due + upcoming) */}}
      {{range .AllPrompts}}
      {{if not .HasResponse}}
      <div class="prompt-item prompt-pending" data-prompt-id="{{.ID}}">
        <a href="#" class="prompt-dismiss" onclick="showDismissConfirm(this, '{{.ID}}'); return false;" title="Don't ask again">✕</a>
        <div class="dismiss-confirm">
          <span>Stop tracking?</span>
          <a href="#" onclick="confirmDismiss('{{.ID}}'); return false;">Yes</a>
          <a href="#" onclick="hideDismissConfirm(this); return false;">No</a>
        </div>
        <form class="prompt-form" data-prompt-id="{{.ID}}">
          <div class="prompt-header">
            <div style="display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;">
              <span class="prompt-question">{{.Question}}</span>
              <div style="display: flex; gap: 12px; align-items: center;">
                <span class="prompt-category">{{.Category}}</span>
                <span class="prompt-due">{{.NextAskFormatted}}</span>
              </div>
            </div>
          </div>
          <div class="prompt-body">
          {{if .Fields}}
            {{if eq (len .Fields) 1}}
              {{with index .Fields 0}}
                {{if eq .Type "number"}}
                <div class="prompt-input-row" style="justify-content: flex-start;">
                  <input type="number" name="field_{{.Key}}"
                         {{if .Min}}min="{{.Min}}"{{end}}
                         {{if .Max}}max="{{.Max}}"{{end}}
                         {{if .Step}}step="{{.Step}}"{{end}}
                         {{if .Value}}value="{{.Value}}"{{end}}
                         class="prompt-input-number"
                         style="max-width: 120px;"
                         onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
                  {{if .Unit}}<span class="prompt-unit">{{.Unit}}</span>{{end}}
                  <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))" style="margin-left: auto;">Save</button>
                </div>
                {{else if eq .Type "checkbox"}}
                <div class="prompt-buttons">
                  <button type="button" class="prompt-btn" data-field="{{.Key}}" data-value="yes" onclick="selectYesNo(this)">Yes</button>
                  <button type="button" class="prompt-btn" data-field="{{.Key}}" data-value="no" onclick="selectYesNo(this)">No</button>
                  <input type="hidden" name="field_{{.Key}}" value="">
                </div>
                {{end}}
              {{end}}
            {{end}}
          {{end}}
          </div>
        </form>
      </div>
      {{end}}
      {{end}}

      {{/* 3. FREEFORM CARD - Always last */}}
      {{range .FreeformPrompts}}
      <div class="prompt-item prompt-freeform" data-prompt-id="{{.ID}}">
        <form class="prompt-form" data-prompt-id="{{.ID}}">
          <div class="prompt-header">
            <span class="prompt-question">{{.Question}}</span>
            <span class="prompt-due">optional</span>
          </div>
          <div class="prompt-body">
            <div style="display: flex; gap: 12px; align-items: flex-end;">
              <textarea name="response_raw" class="prompt-textarea" rows="3" style="flex: 1;"
                        placeholder="Type what you want to track... (e.g., 'I take vitamin D every morning' or 'walked 30 minutes today')"
                        onkeydown="if(event.key==='Enter' && (event.metaKey || event.ctrlKey)){event.preventDefault();saveItem(this.closest('.prompt-item'));}"></textarea>
              <button type="button" class="btn btn-primary" onclick="saveItem(this.closest('.prompt-item'))" style="align-self: flex-end;">Save</button>
            </div>
            <div class="prompt-hint" style="margin-top: 8px; text-align: right;">
              <span id="kbd-hint">or press Ctrl+Enter</span>
            </div>
          </div>
        </form>
      </div>
      {{end}}
    </div>
  </div>
  {{else}}
  <div class="empty-state" style="padding: 48px 24px; text-align: center;">
    <p style="font-size: 1.1rem; margin-bottom: 12px;">✨ No tracking prompts yet</p>
    <p style="color: var(--text-muted); margin-bottom: 24px;">Start by logging something below, and the system will learn your patterns.</p>
    <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 16px;">Examples:</p>
    <ul style="list-style: none; padding: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 2;">
      <li>"I take vitamin D 5000 IU every morning"</li>
      <li>"Blood pressure 120/80"</li>
      <li>"Walked 30 minutes today"</li>
    </ul>
  </div>
  {{end}}

  <div style="margin-top: 24px;">
    <a href="/dossier/{{.TargetHex}}" class="btn btn-secondary">← Back to dossier</a>
  </div>

  {{template "footer"}}
</div>

<style>
.page-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.prompt-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.prompt-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text);
}
.prompt-section-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.prompt-list {
  padding: 0;
}
.prompt-item {
  position: relative;
  padding: 20px;
  border-bottom: 1px solid var(--border);
  transition: opacity 0.3s ease;
}
.prompt-item:last-child {
  border-bottom: none;
}
.prompt-item-future {
  opacity: 0.5;
  background: #fafafa;
}
.prompt-item-future .prompt-question::after {
  content: ' (scheduled)';
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
}
.prompt-dismiss {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 0.9rem;
  color: #ccc;
  text-decoration: none;
}
.prompt-dismiss:hover {
  color: #999;
}
.dismiss-confirm {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 10;
  font-size: 0.85rem;
}
.dismiss-confirm span {
  color: var(--text-muted);
}
.dismiss-confirm a {
  margin-left: 8px;
  color: var(--accent);
  text-decoration: none;
}
.dismiss-confirm a:last-child {
  color: var(--text-muted);
}
.prompt-header {
  margin-bottom: 8px;
}
.prompt-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-right: 8px;
  padding: 2px 8px;
  background: rgba(198, 93, 7, 0.1);
  border-radius: 4px;
}
.prompt-question {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}
.prompt-due {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.prompt-overdue {
  color: var(--accent);
}
.prompt-body {
  margin-top: 8px;
}
.prompt-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.prompt-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prompt-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.prompt-field-row:last-child {
  margin-bottom: 0;
}
.prompt-field-row .prompt-field-label {
  min-width: 120px;
}
.prompt-field-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prompt-input-number {
  width: 80px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: right;
}
.prompt-input-number:focus {
  outline: none;
  border-color: var(--accent);
}
.prompt-input-text {
  width: 100%;
  max-width: 300px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.prompt-textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  font-family: inherit;
}
.prompt-textarea:focus,
.prompt-input-text:focus {
  outline: none;
  border-color: var(--accent);
}
.prompt-unit {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.prompt-separator {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.prompt-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.prompt-checkbox input {
  display: none;
}
.prompt-checkbox-box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-radius: 4px;
  position: relative;
  transition: all 0.15s;
}
.prompt-checkbox input:checked + .prompt-checkbox-box {
  background: var(--accent);
  border-color: var(--accent);
}
.prompt-checkbox input:checked + .prompt-checkbox-box::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
}
.prompt-checkbox-label {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.prompt-buttons {
  display: flex;
  gap: 8px;
}
.prompt-btn {
  padding: 10px 24px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 80px;
}
.prompt-btn:hover {
  border-color: var(--accent);
  background: #fff8f6;
}
.prompt-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.prompt-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(198, 93, 7, 0.2);
}
.prompt-scale {
  display: flex;
  gap: 8px;
  align-items: center;
}
.prompt-scale-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-right: 8px;
}
.prompt-scale-buttons {
  display: flex;
  gap: 4px;
}
.prompt-scale-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.prompt-scale-btn:hover {
  border-color: var(--accent);
  background: #fff8f6;
}
.prompt-scale-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.prompt-scale-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(198, 93, 7, 0.2);
}
.prompt-select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.95rem;
  background: white;
  min-width: 150px;
}
.prompt-select:focus {
  outline: none;
  border-color: var(--accent);
}
.prompt-saved {
  display: none;
}
.prompt-saved-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-right: 40px; /* space for dismiss X */
  gap: 20px;
}
.prompt-saved-value {
  font-size: 1.1rem;
  font-weight: 600;
  text-align: right;
  max-width: 50%;
  word-break: break-word;
}
.prompt-saved-footer {
  margin-top: 8px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.prompt-saved-time {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.prompt-edit {
  font-size: 0.875rem;
  color: var(--accent);
  text-decoration: none;
}
.prompt-source {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.prompt-freeform {
  background: #fff;
  border-left: 3px solid #94a3b8;
}
.prompt-pending {
  background: #fff;
  border-left: 3px solid var(--accent);
}
.prompt-filled {
  background: #fafafa;
  border-left: 3px solid #64748b;
}
.prompt-preview input[disabled] {
  cursor: not-allowed;
  background: #f9fafb;
}
.prompt-question {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}
.prompt-category {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-right: 12px;
}
.prompt-due {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}
.entry-readonly .prompt-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.entry-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
.entry-check {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
}
.btn-save {
  padding: 6px 16px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn-save:hover {
  background: #B45309;
  transform: translateY(-1px);
}
.btn-save:active {
  transform: translateY(0);
}
.btn-save.saving {
  opacity: 0.6;
  cursor: wait;
}
.prompt-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}
.prompt-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.notification {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 0.95rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}
.notification.show {
  opacity: 1;
  transform: translateY(0);
}
.notification-success {
  border-left: 4px solid #16a34a;
}
.notification-error {
  border-left: 4px solid #dc2626;
  color: #dc2626;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<script>
const targetHex = '{{.TargetHex}}';
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;

// Update keyboard hint based on platform
document.addEventListener('DOMContentLoaded', () => {
  const hint = document.getElementById('kbd-hint');
  if (hint && isMac) {
    hint.textContent = 'or press ⌘+Enter';
  }
});

document.querySelectorAll('.prompt-item').forEach(item => {
  // Only auto-save on blur for number inputs (quick entry)
  item.querySelectorAll('input[type=number]').forEach(input => {
    input.addEventListener('blur', () => {
      setTimeout(() => {
        if (!item.contains(document.activeElement)) {
          saveItem(item);
        }
      }, 100);
    });
  });

  item.querySelectorAll('input[type=checkbox]').forEach(cb => {
    cb.addEventListener('change', () => saveItem(item));
  });

  item.querySelectorAll('.prompt-btn').forEach(btn => {
    btn.addEventListener('click', () => selectYesNo(btn));
  });

  item.querySelectorAll('.prompt-scale-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const field = btn.dataset.field;
      const value = btn.dataset.value;
      // Deselect siblings
      btn.parentElement.querySelectorAll('.prompt-scale-btn').forEach(b => b.classList.remove('selected'));
      // Select this one
      btn.classList.add('selected');
      // Update hidden input
      const hidden = item.querySelector('input[name="field_' + field + '"]');
      if (hidden) hidden.value = value;
      // Auto-save
      saveItem(item);
    });
  });
  
  item.querySelectorAll('.prompt-select').forEach(sel => {
    sel.addEventListener('change', () => saveItem(item));
  });
});

function showDismissConfirm(btn, promptId) {
  const item = btn.closest('.prompt-item');
  btn.style.display = 'none';
  item.querySelector('.dismiss-confirm').style.display = 'block';
}

function hideDismissConfirm(link) {
  const item = link.closest('.prompt-item');
  item.querySelector('.dismiss-confirm').style.display = 'none';
  item.querySelector('.prompt-dismiss').style.display = 'block';
}

async function confirmDismiss(promptId) {
  try {
    await fetch('/dossier/' + targetHex + '/prompts/respond', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: new URLSearchParams({ prompt_id: promptId, action: 'dismiss' })
    });
    document.querySelector('.prompt-item[data-prompt-id="' + promptId + '"]').style.display = 'none';
  } catch (err) {
    console.error('Dismiss failed:', err);
  }
}

async function deleteEntry(entryId) {
  if (!confirm('Delete this entry and stop future tracking?')) return;
  try {
    await fetch('/dossier/' + targetHex + '/entries/' + entryId, {
      method: 'DELETE'
    });
    document.querySelector('.entry-item[data-entry-id="' + entryId + '"]').style.display = 'none';
  } catch (err) {
    console.error('Delete failed:', err);
  }
}

function editEntry(btn) {
  // TODO: implement entry editing
  alert('Entry editing coming soon');
}

function editPrompt(btn) {
  const item = btn.closest('.prompt-item');
  item.querySelector('.prompt-saved').style.display = 'none';
  item.querySelector('.prompt-form').style.display = 'block';
  item.querySelector('.prompt-form input:not([type=hidden]), .prompt-form textarea')?.focus();
}

function selectYesNo(btn) {
  const item = btn.closest('.prompt-item');
  const field = btn.dataset.field;
  const value = btn.dataset.value;

  // Deselect siblings
  btn.parentElement.querySelectorAll('.prompt-btn').forEach(b => b.classList.remove('selected'));

  // Select this one
  btn.classList.add('selected');

  // Update hidden input
  const hidden = item.querySelector('input[name="field_' + field + '"]');
  if (hidden) hidden.value = value;

  // Auto-save
  saveItem(item);
}

function addNewPromptCard(prompt) {
  const container = document.querySelector('.prompts-section');
  if (!container) return;
  
  const hasResponse = prompt.last_response_raw || prompt.last_response;
  const isDue = prompt.is_due !== false;
  const futureClass = isDue ? '' : ' prompt-item-future';
  
  // Build input fields HTML based on input_config
  let fieldsHtml = '';
  if (prompt.input_config && prompt.input_config.fields) {
    prompt.input_config.fields.forEach(field => {
      if (field.type === 'checkbox') {
        fieldsHtml += `
          <div class="prompt-buttons">
            <button type="button" class="prompt-btn" data-field="${field.key}" data-value="yes" onclick="selectYesNo(this)">Yes</button>
            <button type="button" class="prompt-btn" data-field="${field.key}" data-value="no" onclick="selectYesNo(this)">No</button>
            <input type="hidden" name="field_${field.key}" value="">
          </div>`;
      } else if (field.type === 'number') {
        const step = field.step || (field.datatype === 'float' ? '0.1' : '1');
        const min = field.min !== undefined ? `min="${field.min}"` : '';
        const max = field.max !== undefined ? `max="${field.max}"` : '';
        const unit = field.unit ? `<span class="prompt-unit">${field.unit}</span>` : '';
        fieldsHtml += `
          <input type="number" name="field_${field.key}" 
                 placeholder="${field.label || ''}" 
                 step="${step}" ${min} ${max}
                 class="prompt-input prompt-input-number">
          ${unit}`;
      } else {
        fieldsHtml += `
          <input type="text" name="field_${field.key}" 
                 placeholder="${field.label || ''}" 
                 class="prompt-input">`;
      }
    });
  } else if (prompt.input_type === 'freeform') {
    fieldsHtml = `<textarea name="response_raw" class="prompt-textarea" placeholder="Type here..."></textarea>`;
  }
  
  const savedValue = prompt.last_response_raw || '';
  const formDisplay = hasResponse ? 'none' : 'block';
  const savedDisplay = hasResponse ? 'block' : 'none';
  
  const cardHtml = `
    <div class="prompt-item prompt-item-new${futureClass}" style="animation: slideIn 0.3s ease-out;">
      <a href="#" class="prompt-dismiss" onclick="showDismissConfirm(this, '${prompt.id}'); return false;" title="Don't ask again">✕</a>
      <div class="dismiss-confirm">
        <span>Stop tracking?</span>
        <a href="#" onclick="confirmDismiss('${prompt.id}'); return false;">Yes</a>
        <a href="#" onclick="hideDismissConfirm(this); return false;">No</a>
      </div>
      <div class="prompt-saved" style="display: ${savedDisplay};">
        <div class="prompt-saved-header">
          <span class="prompt-question">${prompt.question}</span>
          <span class="prompt-saved-value">${savedValue}</span>
        </div>
        <div class="prompt-saved-footer">
          <span class="prompt-saved-time">just now</span>
          <a href="#" class="prompt-edit" onclick="editPrompt(this); return false;">edit</a>
        </div>
      </div>
      <form class="prompt-form" data-prompt-id="${prompt.id}" style="display: ${formDisplay};">
        <div class="prompt-header">
          <span class="prompt-question">${prompt.question}</span>
          <span class="prompt-due">${isDue ? 'now' : 'tomorrow'}</span>
        </div>
        <div class="prompt-fields">
          ${fieldsHtml}
        </div>
      </form>
    </div>`;
  
  // Insert after the header
  const header = container.querySelector('.section-header');
  if (header) {
    header.insertAdjacentHTML('afterend', cardHtml);
  } else {
    container.insertAdjacentHTML('afterbegin', cardHtml);
  }
  
  // Attach blur handler to new inputs
  const newCard = container.querySelector('.prompt-item-new');
  if (newCard) {
    newCard.classList.remove('prompt-item-new');
    if (!hasResponse) {
      newCard.querySelectorAll('input, textarea').forEach(input => {
        input.addEventListener('blur', () => setTimeout(() => saveItem(newCard), 100));
      });
      newCard.querySelector('input, textarea')?.focus();
    }
  }
}

async function saveItem(item) {
  const form = item.querySelector('.prompt-form');
  const promptId = form.dataset.promptId;
  const inputs = form.querySelectorAll('input, textarea');

  const response = {};
  let hasValue = false;
  let displayValue = '';
  let responseRaw = '';

  inputs.forEach(input => {
    if (!input.name) return; // Skip inputs without names

    const key = input.name.replace('field_', '').replace('response_raw', 'raw');
    if (input.type === 'checkbox') {
      if (input.checked) {
        response[key] = true;
        hasValue = true;
        displayValue = '✓';
        responseRaw = 'yes';
      }
    } else if (input.type === 'hidden' && input.value && input.name.startsWith('field_')) {
      // Handle hidden inputs from Yes/No buttons
      response[key] = input.value;
      hasValue = true;
      displayValue = input.value === 'yes' ? '✓' : '✗';
      responseRaw = input.value;
    } else if (input.value && input.type !== 'hidden') {
      response[key] = input.value;
      hasValue = true;
      displayValue += (displayValue ? ' / ' : '') + input.value;
      responseRaw += (responseRaw ? ' / ' : '') + input.value;
    }
  });

  if (!hasValue) return;

  // Show saving state
  const saveBtn = item.querySelector('.btn-save, .btn-primary');
  const originalText = saveBtn ? saveBtn.textContent : '';
  if (saveBtn) {
    saveBtn.classList.add('saving');
    saveBtn.textContent = 'Saving...';
    saveBtn.disabled = true;
  }

  try {
    const res = await fetch('/dossier/' + targetHex + '/prompts/respond', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      body: new URLSearchParams({
        prompt_id: promptId,
        action: 'respond',
        response: JSON.stringify(response),
        response_raw: responseRaw
      })
    });
    
    if (res.ok) {
      const data = await res.json();

      // For freeform prompts, just clear and show notification
      if (item.classList.contains('prompt-freeform')) {
        form.querySelector('textarea').value = '';
        if (saveBtn) {
          saveBtn.classList.remove('saving');
          saveBtn.textContent = originalText;
          saveBtn.disabled = false;
        }
        showNotification('✓ Saved', 'success');

        // If LLM generated a new prompt, add it as a pending card
        if (data.new_prompt) {
          addPendingCard(data.new_prompt);
          showNotification('✓ Saved! Added new tracking prompt.', 'success');
        }
        return;
      }

      // For pending prompts, convert to filled card
      if (item.classList.contains('prompt-pending')) {
        // Get the question from the prompt
        const question = item.querySelector('.prompt-question').textContent;
        const category = item.querySelector('.prompt-category')?.textContent || '';

        // Create filled card
        const filledCard = createFilledCard({
          question: question,
          category: category,
          value: displayValue,
          time: new Date().toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }),
          promptId: promptId
        });

        // Insert filled card before upcoming section (or at end of today section)
        const promptList = document.querySelector('.prompt-list');
        const freeformCard = promptList.querySelector('.prompt-freeform');
        if (freeformCard && freeformCard.nextElementSibling) {
          freeformCard.nextElementSibling.insertAdjacentHTML('beforebegin', filledCard);
        } else {
          promptList.insertAdjacentHTML('beforeend', filledCard);
        }

        // Remove the pending card
        item.style.opacity = '0';
        setTimeout(() => item.remove(), 300);

        showNotification('✓ Saved', 'success');
      }
    } else {
      showNotification('Failed to save. Please try again.', 'error');
      if (saveBtn) {
        saveBtn.classList.remove('saving');
        saveBtn.textContent = originalText;
        saveBtn.disabled = false;
      }
    }
  } catch (err) {
    console.error('Save failed:', err);
    showNotification('Failed to save. Please try again.', 'error');
    if (saveBtn) {
      saveBtn.classList.remove('saving');
      saveBtn.textContent = originalText;
      saveBtn.disabled = false;
    }
  }
}

function createFilledCard(data) {
  const now = new Date();
  return `
    <div class="prompt-item prompt-filled" style="animation: slideIn 0.3s ease-out;">
      <a href="#" class="prompt-dismiss" onclick="deleteEntry('${data.promptId}'); return false;" title="Delete">✕</a>
      <div class="prompt-header">
        ${data.category ? `<span class="prompt-category">${data.category}</span>` : ''}
        <span class="prompt-question">${data.question}</span>
        <span class="prompt-saved-time">${data.time}</span>
      </div>
      <div class="prompt-body entry-readonly">
        <div class="prompt-field-row">
          <span class="entry-value">${data.value}</span>
        </div>
      </div>
      <div class="prompt-saved-footer">
        <a href="#" class="prompt-edit" onclick="editEntry(this); return false;">edit</a>
      </div>
    </div>`;
}

function addPendingCard(prompt) {
  // Add a new pending card (from AI prompt generation)
  const promptList = document.querySelector('.prompt-list');
  const freeformCard = promptList.querySelector('.prompt-freeform');

  let fieldsHtml = '';
  if (prompt.input_config && prompt.input_config.fields) {
    const field = prompt.input_config.fields[0];
    if (field.type === 'number') {
      fieldsHtml = `
        <div class="prompt-input-row">
          <input type="number" name="field_${field.key}" class="prompt-input-number"
                 onkeydown="if(event.key==='Enter'){event.preventDefault();saveItem(this.closest('.prompt-item'));}">
          ${field.unit ? `<span class="prompt-unit">${field.unit}</span>` : ''}
          <button type="button" class="btn-save" onclick="saveItem(this.closest('.prompt-item'))">Save</button>
        </div>`;
    } else if (field.type === 'checkbox') {
      fieldsHtml = `
        <div class="prompt-buttons">
          <button type="button" class="prompt-btn" data-field="${field.key}" data-value="yes" onclick="selectYesNo(this)">Yes</button>
          <button type="button" class="prompt-btn" data-field="${field.key}" data-value="no" onclick="selectYesNo(this)">No</button>
          <input type="hidden" name="field_${field.key}" value="">
        </div>`;
    }
  }

  const cardHtml = `
    <div class="prompt-item prompt-pending" data-prompt-id="${prompt.id}" style="animation: slideIn 0.3s ease-out;">
      <a href="#" class="prompt-dismiss" onclick="showDismissConfirm(this, '${prompt.id}'); return false;" title="Don't ask again">✕</a>
      <div class="dismiss-confirm">
        <span>Stop tracking?</span>
        <a href="#" onclick="confirmDismiss('${prompt.id}'); return false;">Yes</a>
        <a href="#" onclick="hideDismissConfirm(this); return false;">No</a>
      </div>
      <form class="prompt-form" data-prompt-id="${prompt.id}">
        <div class="prompt-header">
          <span class="prompt-category">${prompt.category}</span>
          <span class="prompt-question">${prompt.question}</span>
          <span class="prompt-due">now</span>
        </div>
        <div class="prompt-body">
          ${fieldsHtml}
        </div>
      </form>
    </div>`;

  // Insert after freeform card
  if (freeformCard) {
    freeformCard.insertAdjacentHTML('afterend', cardHtml);
  }
}

function showNotification(message, type = 'success') {
  const notif = document.createElement('div');
  notif.className = `notification notification-${type}`;
  notif.textContent = message;
  document.body.appendChild(notif);

  setTimeout(() => notif.classList.add('show'), 10);
  setTimeout(() => {
    notif.classList.remove('show');
    setTimeout(() => notif.remove(), 300);
  }, 3000);
}
</script>
{{end}}