{% block title %}Unexpected Expense - Hard day{% endblock %}

{% block content %}
<style>
  /* Copied from PaySchedule.html to keep layout, margins and sizing identical */
  .ps-container { max-width: 1100px; margin: 8px auto; font-family: Arial, sans-serif; }
  .ps-instructions { background:#f8fafc; padding:10px 12px; border:1px solid #e6eef6; border-radius:6px; margin-bottom:12px; color:#111827; }
  .ps-main { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
  /* make calendar larger and panel a bit less wide */
  .ps-calendar { flex: 0 0 320px }        /* increased width for a larger calendar */
  .ps-panel {min-width:320px; } /* reduced panel width so calendar has room */
  .ps-card { background:#fff; border:1px solid #eef2f7; padding:10px; border-radius:8px; }
  .ps-inline-legend { margin:8px 0; font-size:0.95rem; }
  .ps-inline-legend .key { display:inline-flex; gap:6px; align-items:center; margin-right:12px; }
  .ps-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
  .ps-controls { display:flex; gap:8px; margin-top:8px; align-items:center; }
  .ps-controls select, .ps-controls input[type="number"] { padding:6px; border:1px solid #d1d5db; border-radius:6px; }
  .ps-controls button { padding:7px 12px; border-radius:6px; border:0; background:#198754; color:#fff; cursor:pointer; }
  .ps-error { color:#b91c1c; font-size:0.9rem; margin-top:6px; }
  .ps-global-list { margin-top:10px; }
  .ps-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px; border-bottom:1px dashed #eee; }
  .ps-item .left { display:flex; gap:8px; align-items:center; }
  .ps-item .date { color:#374151; }
  .ps-item .category { font-size:0.95rem; }
  .ps-item .amount { font-weight:700; min-width:90px; text-align:right; }
  .ps-item button { background: #872919; color:#fff; border:0; padding:6px 8px; border-radius:6px; cursor:pointer; }
  .ps-empty { color:#6b7280; padding:8px 4px; }

  /* net amount under each calendar day (small font) */
  .day-net {
    display:block;
    width:100%;
    text-align:center;
    font-size:0.75rem;     /* keep small but slightly larger due to larger day size */
    margin-top:-9px;
    font-weight:600;
    line-height:1;
    pointer-events:none;
    color: #0a0a0a; /* default visible color when day is not colored */
  }

  /* colored date backgrounds for days that have data; ensure contrast */
  .day-has-income { background-color: #25eb5d !important; color:#000 !important; }
  .day-has-expense { background-color: #ef4444 !important; color:#fff !important; }
  .day-has-both { background-color: #d3cc39 !important; color:#000 !important; }

  /* In case some themes set different day text, force visible net when colored */
  .day-has-income .day-net,
  .day-has-expense .day-net,
  .day-has-both .day-net {
    color: #0a0a0a !important;
    opacity: 0.95;
  }

  /* keep flatpickr basic spacing intact and allow appended elements to show */
  .flatpickr-day { position: relative; overflow: visible; }

  /*
    Increased day size for a larger calendar:
    - width/height/line-height set to create bigger squares
    - adjust weekday cell widths to match
    - use grid adjustments so the visible month grows in height
  */
  .ps-calendar .flatpickr-weekday,
  .ps-calendar .flatpickr-weekdays .flatpickr-weekday {
    width:44px;
    padding:6px 0;
    text-align:center;
    font-weight:600;
  }

  .ps-calendar .flatpickr-day {
    width:56px;
    height:47px;
    line-height:56px;
    margin:11px 2px;
    border-radius:6px;
    font-size:1rem;
    box-sizing: border-box;
    background-clip: padding-box;
  }

  /* ensure the day-net sits nicely inside the larger cell */
  .ps-calendar .flatpickr-day .day-net { position:relative; top:0; font-size:0.75rem; }

  /* make the month container expand to fit larger days */
  .ps-calendar .flatpickr-calendar.inline {
    width: auto;
    max-width: 100%;
  }

  /* responsive fallback for small screens: shrink day size so calendar still fits */
  @media (max-width: 720px) {
    .ps-calendar { flex:1 1 100%; order:1; }
    .ps-panel { flex:1 1 100%; order:2; }
    .ps-calendar .flatpickr-weekday,
    .ps-calendar .flatpickr-day {
      width:40px;
      height:40px;
      line-height:40px;
      font-size:0.92rem;
    }
    .ps-calendar .flatpickr-day { margin:3px 1px; }
    .ps-container { padding: 8px; }
  }

  /* Best date marker: bright blue outer square */
  .ps-calendar .flatpickr-day.day-best {
    box-shadow: 0 0 0 3px rgba(37,99,235,1) !important; /* bright blue outer square */
    border-radius: 4px !important;
    z-index: 2 !important;
  }

  /* small visual marker for the second day of the pair; minimal and non-disruptive so layout stays identical */
  .day-pair { box-shadow: 0 0 0 3px rgba(0,123,255,0.18) inset; border: 2px solid #007bff; border-radius:8px; }

  /*
    Selection behavior:
    - Remove the default blue range fill between the two selected days.
    - Draw two distinct outer black squares (one for each selected day).
    - Preserve painted background color on selected days, but when a best-day (blue) is selected it should be overwritten by the black selection square.
    - Keep layout stable by using box-shadow (does not affect element size).
  */

  /* Remove flatpickr's inRange fill entirely so there's no blue "bridge" */
  .ps-calendar .flatpickr-day.inRange,
  .ps-calendar .flatpickr-day.inRange::before,
  .ps-calendar .flatpickr-day.inRange::after {
    background: transparent !important;
    box-shadow: none !important;
    content: none !important;
  }

  /* Outer black square for selected / start / end days (two distinct squares) */
  .ps-calendar .flatpickr-day.startRange,
  .ps-calendar .flatpickr-day.endRange,
  .ps-calendar .flatpickr-day.selected {
    /* outer box-shadow creates the square "frame" outside the element */
    box-shadow: 0 0 0 3px rgba(0,0,0,1) !important;
    border-radius: 4px !important; /* slightly squared corners for a "square" look */
    z-index: 3 !important; /* place framed cells above best-day blue frame */
  }

  /* If a best-day is selected, the black selection frame should override the blue frame */
  .ps-calendar .flatpickr-day.day-best.startRange,
  .ps-calendar .flatpickr-day.day-best.endRange,
  .ps-calendar .flatpickr-day.day-best.selected {
    box-shadow: 0 0 0 3px rgba(0,0,0,1) !important;
    z-index: 4 !important;
  }

  /* Re-assert painted backgrounds when those days are selected (so painted color remains visible) */
  .ps-calendar .flatpickr-day.day-has-income.startRange,
  .ps-calendar .flatpickr-day.day-has-income.endRange,
  .ps-calendar .flatpickr-day.day-has-income.selected {
    background-color: #25eb5d !important;
    color: #000 !important;
  }
  .ps-calendar .flatpickr-day.day-has-expense.startRange,
  .ps-calendar .flatpickr-day.day-has-expense.endRange,
  .ps-calendar .flatpickr-day.day-has-expense.selected {
    background-color: #ef4444 !important;
    color: #fff !important;
  }
  .ps-calendar .flatpickr-day.day-has-both.startRange,
  .ps-calendar .flatpickr-day.day-has-both.endRange,
  .ps-calendar .flatpickr-day.day-has-both.selected {
    background-color: #d3cc39 !important;
    color: #000 !important;
  }

  /* For selected days that are NOT painted, keep a neutral white background so numbers remain readable */
  .ps-calendar .flatpickr-day.startRange:not(.day-has-income):not(.day-has-expense):not(.day-has-both),
  .ps-calendar .flatpickr-day.endRange:not(.day-has-income):not(.day-has-expense):not(.day-has-both),
  .ps-calendar .flatpickr-day.selected:not(.day-has-income):not(.day-has-expense):not(.day-has-both) {
    background-color: #ffffff !important;
    color: #0a0a0a !important;
  }
    .next{ text-align:center; margin-top:14px; }
  .btn{
    appearance:none; border:1px solid #05516042; background: #f10135; color:#fff;
    border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer; text-decoration:none; line-height:1;
  }


</style>

<div class="ps-container">
  <div class="ps-instructions" role="region" aria-label="instructions">

   <p style="margin:0 0 6px 0;">
      Below is the calendar with the income and expenses you entered for the period
      <span id="allowedRangeText"></span>. Now imagine an unexpected $2,000 expense that must be
      paid during this same period.
    </p>

    <p style="margin:0 0 6px 0;">
      Considering your income and expense schedule, select the two <strong>consecutive</strong> dates on which
      paying this amount would feel <strong> hardest, when you feel most financially constrained.</strong>
    </p>

    <p style="margin:0 0 6px 0;">
      If several pairs of dates would be equally hard, choose the latest pair.
      The selected dates will be highlighted with black squares on the calendar.
      Click “Next” to continue after selecting the dates.
    </p>



  </div>
</div>

  <form id="prefillForm" method="post">
    <div class="ps-main">
      <div class="ps-calendar ps-card">
        <div style="font-weight:600; margin-bottom:8px;">Calendar</div>
        <div id="calendar" aria-label="pre-filled pay schedule calendar"></div>
        <div class="ps-inline-legend" style="margin-top:8px;">
           <span class="key"><span class="ps-dot" style="background:#25eb5d;"></span> Income</span>
           <span class="key"><span class="ps-dot" style="background:#ef4444;"></span> Expense</span>
           <span class="key"><span class="ps-dot" style="background:#d3cc39;"></span> Both</span>
          <!-- best date legend (appended by JS if rich_date is present) -->
        </div>
      </div>

      <div class="ps-panel ps-card">

        <div style="font-weight:600; margin-top:12px;">Previously selected dates</div>
        <div id="globalList" style="margin-top:8px;">
          <!-- list of prefilled items will render here (read-only) -->
        </div>

        <!-- hidden field to store the selected start and end dates (always saved as start,end) -->
        <input type="hidden" id="Poor_date" name="Poor_date" value="">
        <!-- also include pay_items (read-only) so server has access if needed -->
        <input type="hidden" id="id_pay_items" name="pay_items" value='{{ pay_items_json|safe }}'>
      </div>
    </div>

    <div class="ps-instructions" role="region" aria-label="instructions" style="display: flex; justify-content: space-between; align-items: center;" id="nextButtonContainer">
      <span>The hardest two consecutive days for me to pay $2,000 are <span class="selectedDate">None</span>.</span>
      <span>{{ next_button }}</span>
    </div>

  </form>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
(function(){
  // ---- Configuration & cached constants ----
  const initial = {{ pay_items_json|safe }};
  const categories = {{ categories|safe }};
  const richDateVar = {{ rich_date_json|safe }}; // injected from vars_for_template - could be string, array, or null

  const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
  const incomeCats = new Set(["My income", "Partner’s income"]);
  const expenseCats = new Set(["My expense", "Common expense"]);

  // ---- Utility helpers (fast, no repeated allocations) ----
  function toInt(v){ const n = parseInt(v, 10); return isNaN(n) ? 0 : n; }
  function pad(n){ return String(n).padStart(2,'0'); }
  function keyFromDate(d){ return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate()); }
  function displayMonthDay(d){ return months[d.getMonth()] + ' ' + (d.getDate()); }
  function parseKeyDate(ks){
    const p = String(ks).split('-');
    if (p.length !== 3) return new Date(ks);
    return new Date(+p[0], +p[1]-1, +p[2]);
  }

  // ---- Build simple fast map: dateKey -> array of items ----
  const dataMap = Object.create(null);
  for (let i = 0; i < initial.length; ++i){
    const it = initial[i];
    if (!it || !it.date) continue;
    if (!dataMap[it.date]) dataMap[it.date] = [];
    dataMap[it.date].push({ category: it.category, amount: toInt(it.amount) });
  }

  // ---- allowed range calculation (same logic) ----
  const _today = new Date();
  function stripTime(d){ return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
  const minDate = stripTime(new Date(_today));
  minDate.setDate(minDate.getDate() + 1);
  const maxDate = stripTime(new Date(_today));
  maxDate.setDate(maxDate.getDate() + 21);

  function isWithinAllowed(d){ const t = stripTime(d).getTime(); return t >= stripTime(minDate).getTime() && t <= stripTime(maxDate).getTime(); }

  // ---- cached DOM elements ----
  const allowedSpan = document.getElementById('allowedRangeText');
  const selectedDateEls = Array.from(document.querySelectorAll('.selectedDate'));
  function setSelectedDate(text){ selectedDateEls.forEach(el => { if (el) el.textContent = text; }); }
  const poorDateInput = document.getElementById('Poor_date');
  const globalList = document.getElementById('globalList');
  const legend = document.querySelector('.ps-inline-legend');
  const calendarEl = document.getElementById('calendar');

  if (allowedSpan) allowedSpan.textContent = displayMonthDay(minDate) + ' and ' + displayMonthDay(maxDate);

  // ---- "best date" handling: support string or array from server
  // Acceptable forms: null, '', "YYYY-M-D", ["YYYY-M-D","YYYY-M-D"]
  let bestKeys = [];
  if (Array.isArray(richDateVar)) {
    bestKeys = richDateVar.filter(Boolean).map(String);
  } else if (typeof richDateVar === 'string') {
    const s = richDateVar.trim();
    if (s) {
      // allow comma-separated or single string
      if (s.indexOf(',') !== -1) {
        bestKeys = s.split(',').map(x => x.trim()).filter(Boolean);
      } else {
        bestKeys = [s];
      }
    }
  } else if (richDateVar && typeof richDateVar === 'object') {
    try {
      if (Array.isArray(richDateVar.keys)) bestKeys = richDateVar.keys.map(String);
    } catch(e){}
  }
  // Append legend dot if we have any best day(s)
  if (bestKeys.length && legend){
    const span = document.createElement('span');
    span.className = 'key';
    span.innerHTML = '<span class="ps-dot" style="background:#2563eb;"></span> Best date';
    legend.appendChild(span);
  }

  // ---- efficient day updater: reuse created net element on the day node ----
  function updateDayElement(fpDayElem){
    const date = fpDayElem.dateObj;
    if (!date) return;
    const allowed = isWithinAllowed(date);
    // remove custom classes fast
    fpDayElem.classList.remove('day-has-income','day-has-expense','day-has-both','day-best');
    // fast key
    const ds = keyFromDate(date);
    // handle nets
    const items = dataMap[ds];
    if (allowed && items && items.length){
      // compute net using local variables (fast)
      let net = 0;
      let hasIncome = false;
      let hasExpense = false;
      for (let i=0; i<items.length; ++i){
        const it = items[i];
        if (incomeCats.has(it.category)) { hasIncome = true; net += it.amount; }
        if (expenseCats.has(it.category)) { hasExpense = true; net -= it.amount; }
      }
      if (hasIncome && !hasExpense) fpDayElem.classList.add('day-has-income');
      else if (hasExpense && !hasIncome) fpDayElem.classList.add('day-has-expense');
      else if (hasIncome && hasExpense) fpDayElem.classList.add('day-has-both');

      // reuse or create the net element once per day element
      let netEl = fpDayElem.__netEl;
      const sign = net > 0 ? '+' : (net < 0 ? '-' : '');
      const text = sign + Math.round(Math.abs(net));
      if (!netEl){
        netEl = document.createElement('span');
        netEl.className = 'day-net';
        fpDayElem.appendChild(netEl);
        fpDayElem.__netEl = netEl;
      }
      // update text only if changed (avoid textContent writes)
      if (netEl.textContent !== text) netEl.textContent = text;
    } else {
      // remove net element if exists
      const existing = fpDayElem.__netEl;
      if (existing){
        // detach but leave property cleared
        existing.remove();
        fpDayElem.__netEl = null;
      }
    }

    // mark best date(s) (if provided)
    if (allowed && bestKeys && bestKeys.length && bestKeys.indexOf(ds) !== -1) {
      fpDayElem.classList.add('day-best');
    }
  }

  // ---- debounce repainting so we don't run many repaints per frame ----
  let repaintPending = false;
  function scheduleRepaint(){
    if (repaintPending) return;
    repaintPending = true;
    requestAnimationFrame(function(){
      repaintPending = false;
      repaintCalendar();
    });
  }

  function repaintCalendar(){
    // try to use flatpickr's container if available, otherwise the #calendar element
    const container = (window.fp && window.fp.calendarContainer) || calendarEl;
    if (!container) return;
    const days = container.querySelectorAll('.flatpickr-day');
    for (let i=0; i<days.length; ++i) updateDayElement(days[i]);
  }

  // ---- render the read-only prefilled list (use DocumentFragment) ----
  function renderGlobalList(){
    globalList.innerHTML = '';
    const dates = Object.keys(dataMap).sort();
    if (!dates.length){
      globalList.innerHTML = '<div class="ps-empty">No pre-filled entries.</div>';
      return;
    }
    const frag = document.createDocumentFragment();
    for (let i=0; i<dates.length; ++i){
      const d = dates[i];
      const arr = dataMap[d];
      for (let j=0; j<arr.length; ++j){
        const it = arr[j];
        const row = document.createElement('div');
        row.className = 'ps-item';

        const left = document.createElement('div');
        left.style.display = 'flex';
        left.style.gap = '8px';
        left.style.alignItems = 'center';

        const dateDiv = document.createElement('div');
        dateDiv.className = 'date';
        dateDiv.textContent = displayMonthDay(parseKeyDate(d));
        left.appendChild(dateDiv);

        const catDiv = document.createElement('div');
        catDiv.className = 'category';
        catDiv.textContent = it.category;
        left.appendChild(catDiv);

        row.appendChild(left);

        const right = document.createElement('div');
        right.style.display = 'flex';
        right.style.alignItems = 'center';
        right.style.gap = '8px';

        const amtDiv = document.createElement('div');
        amtDiv.className = 'amount';
        const sign = incomeCats.has(it.category) ? '+' : '-';
        amtDiv.textContent = sign + Math.round(it.amount);
        amtDiv.style.fontWeight = '700';
        right.appendChild(amtDiv);

        row.appendChild(right);
        frag.appendChild(row);
      }
    }
    globalList.appendChild(frag);
  }

  renderGlobalList();

  // ---- initialize flatpickr with mode 'range' but enforce two-day consecutive selection ----
  window.fp = flatpickr("#calendar", {
    inline: true,
    showMonths: 1,
    mode: "range",
    defaultDate: (function(){
      const d1 = new Date(minDate);
      const d2 = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()+1);
      if (d2.getTime() > maxDate.getTime()) return [d1];
      return [d1, d2];
    })(),
    minDate: minDate,
    maxDate: maxDate,
    onDayCreate: function(dObj, dStr, fpDayElem){
      updateDayElement(fpDayElem);
    },
    onChange: function(selectedDates, dateStr, instance){
      if (!selectedDates || !selectedDates.length) return;
      let start = selectedDates[0];
      if (!isWithinAllowed(start)) return;

      // compute desired end (start + 1)
      let end = new Date(start.getFullYear(), start.getMonth(), start.getDate()+1);

      // if the computed end is beyond max, try previous day as pair, else keep single
      if (end.getTime() > maxDate.getTime()) {
        const prev = new Date(start.getFullYear(), start.getMonth(), start.getDate()-1);
        if (isWithinAllowed(prev)){
          start = prev;
          end = new Date(start.getFullYear(), start.getMonth(), start.getDate()+1);
        } else {
          end = start;
        }
      }

      // Only call setDate if the visible selection differs from desired; avoid unnecessary reflows
      const sel = instance.selectedDates || [];
      const selStart = sel[0] ? keyFromDate(sel[0]) : null;
      const selEnd = sel[1] ? keyFromDate(sel[1]) : null;
      const desiredStartKey = keyFromDate(start);
      const desiredEndKey = keyFromDate(end);
      if (selStart !== desiredStartKey || selEnd !== desiredEndKey){
        instance.setDate([start, end], true);
      }

      // update displayed label (store both start and end for backend in single Poor_date as "start,end")
      if (start.getTime() === end.getTime()){
        setSelectedDate(displayMonthDay(start));
      } else {
        setSelectedDate(displayMonthDay(start) + ' - ' + displayMonthDay(end));
      }
      poorDateInput.value = keyFromDate(start) + ',' + keyFromDate(end);

      // schedule a repaint (debounced)
      scheduleRepaint();
    },
    onMonthChange: scheduleRepaint,
    onYearChange: scheduleRepaint,
    onOpen: scheduleRepaint
  });

  // reflect initial selection fast and set hidden input (Poor_date stores "start,end")
  (function setInitialDisplay(){
    const sel = window.fp.selectedDates || [];
    if (sel.length >= 2){
      setSelectedDate(displayMonthDay(sel[0]) + ' - ' + displayMonthDay(sel[1]));
      poorDateInput.value = keyFromDate(sel[0]) + ',' + keyFromDate(sel[1]);
    } else if (sel.length === 1){
      const s = sel[0];
      const e = new Date(s.getFullYear(), s.getMonth(), s.getDate()+1);
      if (e.getTime() <= maxDate.getTime()){
        try { window.fp.setDate([s, e], true); } catch(e){}
        setSelectedDate(displayMonthDay(s) + ' - ' + displayMonthDay(e));
        poorDateInput.value = keyFromDate(s) + ',' + keyFromDate(e);
      } else {
        setSelectedDate(displayMonthDay(s));
        poorDateInput.value = keyFromDate(s) + ',' + keyFromDate(s);
      }
    } else {
      setSelectedDate(displayMonthDay(minDate));
      const d2 = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()+1);
      if (d2.getTime() <= maxDate.getTime()){
        try { window.fp.setDate([minDate, d2], true); } catch(e){}
        poorDateInput.value = keyFromDate(minDate) + ',' + keyFromDate(d2);
      } else {
        poorDateInput.value = keyFromDate(minDate) + ',' + keyFromDate(minDate);
      }
    }
    scheduleRepaint();
  })();

  // ensure hidden selected_pay_date is present before submit (redundant but safe)
  const form = document.getElementById('prefillForm');
  if (form){
    form.addEventListener('submit', function(){ /* Poor_date already contains "start,end" */ });
  }

  // Wire next buttons (server-rendered html) to submit the prefill form if they aren't already
  function wireNextButtons(){
    const container = document.getElementById('nextButtonContainer');
    if (!container) return;
    const candidates = container.querySelectorAll('button, input[type="button"], input[type="submit"], a');
    candidates.forEach(btn => {
      btn.addEventListener('click', function(evt){
        // If the button is already inside the form and is a submit, let native behavior occur.
        // Otherwise, submit the form programmatically.
        if (!form) return;
        const tag = btn.tagName.toLowerCase();
        const type = btn.getAttribute('type');
        const isNativeSubmit = (tag === 'button' && type === 'submit') || (tag === 'input' && type === 'submit');
        if (isNativeSubmit && form.contains(btn)) {
          return; // let default submit
        }
        // Otherwise intercept and submit the form
        evt.preventDefault();
        if (typeof form.requestSubmit === 'function') {
          form.requestSubmit();
        } else {
          form.submit();
        }
      }, { passive: false });
    });
  }
  wireNextButtons();

  // expose for debugging if needed
  window.__prefill = {
    dataMap: dataMap,
    scheduleRepaint: scheduleRepaint,
    allowedRange: { min: minDate, max: maxDate },
    bestKeys: bestKeys
  };

})();
</script>

{% endblock %}