{% 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; alignItems: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;">
  Again, imagine an unexpected $2,000 expense that must be paid during the same period as before
  (<span id="allowedRangeText"></span>). On the calendar, you can also see the days you previously selected
  as easiest to pay this amount (marked with blue squares).
</p>

<p style="margin:0 0 6px 0;">
  Now select the two <strong>consecutive</strong> days in this period when it would be
  <strong>hardest</strong> for you to pay this amount—when you feel <strong>most</strong> financially constrained,
  given your income and expense schedule.
</p>


  </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>


</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> Easiest days to pay';
    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 (!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
        }
        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 %}