<div class="demo">
  <label class="field-label" for="nlDate">Due date</label>
  <div class="nl-date-field">
    <input type="text" id="nlDate" class="nl-input" placeholder="e.g. tomorrow, next friday, in 3 days, aug 30" autocomplete="off" />
    <div class="nl-result" id="nlResult">
      <span class="nl-result-dot" id="nlDot"></span>
      <span class="nl-result-text" id="nlResultText">Start typing a date in plain English</span>
    </div>
  </div>

  <div class="nl-chips">
    <button type="button" class="nl-chip" data-value="today">today</button>
    <button type="button" class="nl-chip" data-value="tomorrow">tomorrow</button>
    <button type="button" class="nl-chip" data-value="next monday">next monday</button>
    <button type="button" class="nl-chip" data-value="in 2 weeks">in 2 weeks</button>
    <button type="button" class="nl-chip" data-value="end of month">end of month</button>
  </div>

  <input type="hidden" id="nlHiddenIso" name="dueDate" />
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }

.field-label { font-size: 12.5px; font-weight: 700; color: #334155; }

.nl-date-field { display: flex; flex-direction: column; gap: 8px; }
.nl-input { width: 100%; padding: 12px 14px; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: 14px; font-family: inherit; color: #0f172a; background: #fff; }
.nl-input:focus-visible { outline: none; border-color: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.13); }

.nl-result { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; font-size: 12.5px; color: #64748b; transition: background 0.2s, color 0.2s; }
.nl-result.ok { background: #ecfdf5; color: #047857; }
.nl-result.err { background: #fef2f2; color: #b91c1c; }
.nl-result-dot { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; flex-shrink: 0; transition: background 0.2s; }
.nl-result.ok .nl-result-dot { background: #10b981; }
.nl-result.err .nl-result-dot { background: #ef4444; }
.nl-result-text { font-weight: 600; }

.nl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nl-chip { border: 1.5px solid #e2e8f0; background: #fff; color: #475569; font-size: 11.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: border-color 0.15s, color 0.15s; }
.nl-chip:hover { border-color: #6366f1; color: #4338ca; }
.nl-chip:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

const input = document.getElementById('nlDate');
const resultBox = document.getElementById('nlResult');
const resultText = document.getElementById('nlResultText');
const dot = document.getElementById('nlDot');
const hiddenIso = document.getElementById('nlHiddenIso');
const chips = document.querySelectorAll('.nl-chip');

const WEEKDAYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
const MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

function startOfDay(d) {
  const copy = new Date(d);
  copy.setHours(0, 0, 0, 0);
  return copy;
}

// The core parser: takes free-text input and returns either a Date or null.
// Each branch handles one recognizable phrase shape; order matters because
// more specific patterns (e.g. "in 3 days") must be checked before generic
// weekday matching would otherwise misfire on a stray number.
function parseNaturalDate(raw) {
  const text = raw.trim().toLowerCase();
  if (!text) return null;

  const now = startOfDay(new Date());

  if (text === 'today') return now;
  if (text === 'tomorrow') { const d = new Date(now); d.setDate(d.getDate() + 1); return d; }
  if (text === 'yesterday') { const d = new Date(now); d.setDate(d.getDate() - 1); return d; }

  if (text === 'end of month') {
    const d = new Date(now.getFullYear(), now.getMonth() + 1, 0);
    return d;
  }

  // "in N day(s)/week(s)/month(s)"
  const inMatch = text.match(/^in\s+(\d+)\s+(day|days|week|weeks|month|months)$/);
  if (inMatch) {
    const n = parseInt(inMatch[1], 10);
    const unit = inMatch[2];
    const d = new Date(now);
    if (unit.startsWith('day')) d.setDate(d.getDate() + n);
    else if (unit.startsWith('week')) d.setDate(d.getDate() + n * 7);
    else d.setMonth(d.getMonth() + n);
    return d;
  }

  // "N day(s)/week(s) from now" / "N day(s) ago"
  const relMatch = text.match(/^(\d+)\s+(day|days|week|weeks)\s+(from now|ago)$/);
  if (relMatch) {
    const n = parseInt(relMatch[1], 10);
    const isWeeks = relMatch[2].startsWith('week');
    const sign = relMatch[3] === 'ago' ? -1 : 1;
    const d = new Date(now);
    d.setDate(d.getDate() + sign * n * (isWeeks ? 7 : 1));
    return d;
  }

  // "next <weekday>" / "this <weekday>" / bare "<weekday>" (assumes the next occurrence)
  const weekdayMatch = text.match(/^(next\s+|this\s+)?(sunday|monday|tuesday|wednesday|thursday|friday|saturday)$/);
  if (weekdayMatch) {
    const targetDow = WEEKDAYS.indexOf(weekdayMatch[2]);
    const isNext = !!weekdayMatch[1] && weekdayMatch[1].trim() === 'next';
    const d = new Date(now);
    let diff = (targetDow - d.getDay() + 7) % 7;
    if (diff === 0) diff = 7; // "friday" said on a friday means the upcoming one, not today
    if (isNext) diff += 7; // "next friday" skips an extra week ahead of the nearest one
    d.setDate(d.getDate() + diff);
    return d;
  }

  // "<month> <day>" e.g. "aug 30" or "august 30"
  const monthDayMatch = text.match(/^([a-z]{3,9})\s+(\d{1,2})(?:st|nd|rd|th)?$/);
  if (monthDayMatch) {
    const monthIdx = MONTHS.indexOf(monthDayMatch[1].slice(0, 3));
    if (monthIdx !== -1) {
      const day = parseInt(monthDayMatch[2], 10);
      let year = now.getFullYear();
      let d = new Date(year, monthIdx, day);
      if (d < now) d = new Date(year + 1, monthIdx, day); // roll to next year if the date already passed
      return d;
    }
  }

  // Fallback: let the browser's own Date parser have a try (handles ISO, "08/30/2026", etc.)
  const native = new Date(raw);
  if (!isNaN(native.getTime())) return startOfDay(native);

  return null;
}

function formatDate(d) {
  return d.toLocaleDateString(undefined, { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' });
}

function toIso(d) {
  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}`;
}

function updateResult() {
  const value = input.value;
  if (!value.trim()) {
    resultBox.className = 'nl-result';
    resultText.textContent = 'Start typing a date in plain English';
    hiddenIso.value = '';
    return;
  }

  const parsed = parseNaturalDate(value);
  if (parsed) {
    resultBox.className = 'nl-result ok';
    resultText.textContent = 'Resolves to ' + formatDate(parsed);
    hiddenIso.value = toIso(parsed);
  } else {
    resultBox.className = 'nl-result err';
    resultText.textContent = "Couldn't parse that — try \"tomorrow\", \"next friday\", or \"aug 30\"";
    hiddenIso.value = '';
  }
}

input.addEventListener('input', updateResult);

chips.forEach((chip) => {
  chip.addEventListener('click', () => {
    input.value = chip.dataset.value;
    input.focus();
    updateResult();
  });
});