{% extends "_base.html" %}
{% block title %}This Week · Cauldron{% endblock %}
{% block content %}

<style>
  /* Day-card grid + slot styling — kept here so plan-only CSS doesn't bloat _base. */
  .day-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
  }
  @media (min-width: 720px) {
    .day-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  }
  .day-card {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--green-dim);
    border-radius: 6px;
    padding: 14px 16px;
    min-height: 88px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .15s, background .15s;
  }
  .day-card.from-pick {
    border-left-color: var(--purple-bright);
    background: rgba(45, 29, 74, .25);
  }
  .day-card .dlabel {
    color: var(--purple); font-family: var(--mono);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  }
  .day-card .rname {
    color: var(--bone); font-family: var(--serif);
    font-size: 1.1em; line-height: 1.25; letter-spacing: .02em;
    text-decoration: none;
  }
  .day-card .rname:hover { color: var(--purple-bright); }
  .day-card .pickers { display: flex; gap: 6px; flex-wrap: wrap; }
  .day-card .pchip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--purple-deep); color: var(--purple-bright);
    border: 1px solid var(--purple-dim);
    padding: 2px 8px; border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase;
  }
  .day-card .reason {
    color: var(--bone-dim); font-size: .9em; font-style: italic;
    line-height: 1.4;
  }

  .gen-row {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-top: 12px;
  }
  .gen-cta {
    display: block; width: 100%; padding: 1.1em 1.4em;
    background: var(--purple-deep); color: var(--bone);
    border: 1px solid var(--purple-dim);
    border-radius: 8px;
    font-family: var(--serif); font-weight: 600;
    font-size: 1.15em; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; transition: all .2s ease;
    box-shadow: 0 0 24px -8px var(--purple-glow);
    min-height: 56px;
  }
  .gen-cta:hover {
    background: var(--purple-dim); border-color: var(--purple-bright);
    box-shadow: 0 0 32px -4px var(--purple-glow);
  }
  .gen-cta[disabled] { opacity: .55; cursor: wait; }

  .gen-meta {
    color: var(--muted); font-family: var(--mono);
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    margin-top: 4px;
  }

  .pref-block {
    margin: 14px 0;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .pref-label {
    display: block;
    color: var(--purple); font-family: var(--mono);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    margin-bottom: 6px;
  }
  .pref-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--surface);
    color: var(--bone);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--sans); font-size: .95em;
    line-height: 1.4;
    resize: vertical;
    min-height: 56px;
  }
  .pref-input:focus { outline: none; border-color: var(--purple-bright); }
  .pref-presets {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
  }
  .pref-chip {
    padding: 6px 12px;
    background: var(--bg);
    color: var(--bone-dim);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--sans); font-size: .85em;
    cursor: pointer;
    min-height: 32px;
    transition: all .12s ease;
  }
  .pref-chip:hover {
    background: var(--purple-deep);
    border-color: var(--purple-dim);
    color: var(--bone);
  }
  .pref-chip:active { transform: scale(.97); }

  .week-nav {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 10px 0 4px;
  }
  .week-btn {
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--bone-dim);
    font-family: var(--mono); font-size: .85em;
    text-decoration: none;
    min-height: 32px;
    display: inline-flex; align-items: center;
  }
  .week-btn:hover {
    background: var(--purple-deep); border-color: var(--purple-dim); color: var(--bone);
  }
  .week-btn.week-now {
    border-color: var(--purple-dim);
    color: var(--purple-bright);
  }
  .week-label {
    color: var(--muted); font-family: var(--mono);
    font-size: .8em; letter-spacing: .1em;
    margin-left: auto;
  }

  .btn-danger {
    background: rgba(232,96,106,.1); color: var(--crit);
    border-color: rgba(232,96,106,.4);
  }
  .btn-danger:hover {
    background: rgba(232,96,106,.2); border-color: var(--crit);
  }

  .pref-readout {
    color: var(--bone-dim);
    font-family: var(--serif);
    font-size: .95em;
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 2px solid var(--purple-dim);
    background: rgba(45, 29, 74, .15);
  }
  .pref-readout em {
    color: var(--bone);
    font-style: italic;
  }

  .pref-advanced {
    margin-top: 14px;
    border-top: 1px solid var(--line);
    padding-top: 10px;
  }
  .pref-advanced summary {
    cursor: pointer; user-select: none;
    color: var(--purple); font-family: var(--mono);
    font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
    padding: 4px 0;
  }
  .pref-advanced summary:hover { color: var(--purple-bright); }
  .pref-advanced-body { margin-top: 10px; }

  .target-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
  }
  @media (min-width: 600px) {
    .target-row { grid-template-columns: 1fr 1fr 1fr 1fr; }
  }
  .target-cell {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .target-input {
    width: 70px;
    padding: 6px 8px;
    background: var(--surface);
    color: var(--bone);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: var(--mono); font-size: .9em;
    text-align: right;
  }
  .target-input:focus { outline: none; border-color: var(--purple-bright); }
  .target-unit {
    color: var(--muted); font-family: var(--mono);
    font-size: 11px; letter-spacing: .1em;
  }
  .target-presets, .excl-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
  }

  .pref-exclusions { margin-top: 14px; }
  .excl-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--sans); font-size: .85em;
    color: var(--bone-dim);
    cursor: pointer; user-select: none;
    min-height: 30px;
  }
  .excl-chip input { margin: 0; cursor: pointer; }
  .excl-chip:has(input:checked) {
    background: rgba(232, 96, 106, .12);
    border-color: rgba(232, 96, 106, .3);
    color: var(--crit);
  }

  .meals-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .meal-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--bone-dim);
    font-family: var(--sans); font-size: .9em;
    cursor: pointer; user-select: none;
    min-height: 32px;
  }
  .meal-chip input { margin: 0; cursor: pointer; }
  .meal-chip:has(input:checked) {
    background: var(--purple-deep);
    border-color: var(--purple-dim);
    color: var(--purple-bright);
  }

  .meal-row {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
  }
  .meal-row:first-child { border-top: 0; }
  .meal-tag {
    display: inline-block;
    color: var(--purple); font-family: var(--mono);
    font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
    margin-bottom: 2px;
  }

  .hecate-reading {
    color: var(--bone);
    font-family: var(--serif);
    font-size: 1.05em; line-height: 1.6;
    padding: 14px 18px;
    background: linear-gradient(135deg,
      rgba(45, 29, 74, .35) 0%,
      rgba(45, 29, 74, .15) 100%);
    border-left: 3px solid var(--purple-bright);
    border-radius: 6px;
    font-style: italic;
    letter-spacing: .01em;
  }
  .hecate-reading::before {
    content: "✶ ";
    color: var(--purple-bright);
    font-style: normal;
    font-size: 1.2em;
  }
</style>

<div class="page-head">
  <div class="crumb">// plan · week of {{ week_start.strftime('%b %-d, %Y') }}</div>
  <h1>
    {% if is_current_week %}this <span class="accent">week</span>
    {% elif is_past_week %}<span class="accent">past</span> week
    {% else %}<span class="accent">future</span> week
    {% endif %}
  </h1>

  <nav class="week-nav">
    <a class="week-btn" href="/plan?week={{ prev_week }}">← prev week</a>
    {% if not is_current_week %}
      <a class="week-btn week-now" href="/plan?week={{ current_week }}">⊕ this week</a>
    {% endif %}
    <a class="week-btn" href="/plan?week={{ next_week }}">next week →</a>
    <span class="week-label">{{ week_start.strftime('%a %b %-d') }} – {{ week_end.strftime('%a %b %-d') }}</span>
  </nav>

  <div class="lede">
    {% if plan.locked_at %}
      locked
      {% if plan.locked_reason == 'user' and locked_by_display %}
        by <span style="color: var(--green-bright);">{{ locked_by_display }}</span>
      {% else %}
        automatically
      {% endif %}
      · {{ plan.locked_at.strftime('%a %-I:%M %p') }}
    {% elif plan.slots %}
      generated{% if generated_by_display %} by <span style="color: var(--green-bright);">{{ generated_by_display }}</span>{% endif %}.
      lock it in when the household has agreed.
    {% else %}
      {{ pick_count }} pinned in the pool. summon the planner to build a 7-day plan.
    {% endif %}
  </div>
</div>

<section class="panel {% if plan.locked_at %}purple{% else %}green{% endif %}">
  <div class="panel-head">
    <h2>state</h2>
    {% if plan.locked_at %}
      <span class="pill pill-mute">{{ 'auto-locked' if plan.locked_reason == 'auto' else 'locked' }}</span>
    {% elif plan.slots %}
      <span class="pill pill-ok">generated</span>
    {% else %}
      <span class="pill pill-ok">open</span>
    {% endif %}
    <span class="ctx">week of {{ week_start.strftime('%b %-d, %Y') }}</span>
  </div>

  {% if plan.locked_at %}
    <p>this week's plan is locked. it'll archive Sunday night and a fresh week opens Monday.</p>
    {% if plan.preference_prompt %}
      <div class="pref-readout">vibe this week: <em>"{{ plan.preference_prompt }}"</em></div>
    {% endif %}
    {% if plan.targets_label %}
      <div class="pref-readout">macros: <em>{{ plan.targets_label }}</em></div>
    {% endif %}
    {% if plan.exclusions_label %}
      <div class="pref-readout">excluding: <em>{{ plan.exclusions_label }}</em></div>
    {% endif %}
  {% elif not plan.slots %}
    <p>no plan yet. summon hecate to build one from the {{ pick_count }} pinned pick{{ '' if pick_count == 1 else 's' }} + the rest of the grimoire.</p>

    <div class="pref-block">
      <label class="pref-label">meals to plan</label>
      <div class="meals-row">
        <label class="meal-chip"><input type="checkbox" class="meal-check" value="breakfast" {% if 'breakfast' in plan.meal_types_list %}checked{% endif %}> 🍳 breakfast</label>
        <label class="meal-chip"><input type="checkbox" class="meal-check" value="lunch" {% if 'lunch' in plan.meal_types_list %}checked{% endif %}> 🥪 lunch</label>
        <label class="meal-chip"><input type="checkbox" class="meal-check" value="dinner" {% if 'dinner' in plan.meal_types_list %}checked{% endif %}> 🍽️ dinner</label>
      </div>

      <label class="pref-label" for="pref-input" style="margin-top:14px;">this week's vibe (optional)</label>
      <textarea id="pref-input" class="pref-input" rows="2" maxlength="1000" placeholder="e.g. high protein low carb · carb load · light recovery week · no fish · vegetarian-leaning · spicy comfort food">{{ plan.preference_prompt or '' }}</textarea>
      <div class="pref-presets">
        <button type="button" class="pref-chip" onclick="setPref('high protein, low carb — lean and gym-friendly')">🥩 high protein</button>
        <button type="button" class="pref-chip" onclick="setPref('carb load this week, training hard')">🍞 carb load</button>
        <button type="button" class="pref-chip" onclick="setPref('light and lean, simple weeknight meals')">🥗 light &amp; lean</button>
        <button type="button" class="pref-chip" onclick="setPref('vegetarian-leaning, more produce-forward')">🌱 vegetarian</button>
        <button type="button" class="pref-chip" onclick="setPref('comfort food week, hearty and warming')">🍲 comfort food</button>
        <button type="button" class="pref-chip" onclick="setPref('quick and easy — 30 minutes or less per meal')">⚡ quick</button>
        <button type="button" class="pref-chip" onclick="setPref('recovery week — gentle, easily digestible meals')">💧 recovery</button>
        <button type="button" class="pref-chip" onclick="setPref('global flavors — bias toward varied cuisines this week')">🌍 global</button>
      </div>

      <details class="pref-advanced">
        <summary>numeric targets + allergen exclusions (optional)</summary>
        <div class="pref-advanced-body">
          <div class="pref-targets">
            <label class="pref-label">daily macro targets</label>
            <div class="target-row">
              <span class="target-cell">
                <input type="number" id="target-cal" class="target-input" placeholder="2200" min="0" max="10000" step="50" value="{{ plan.targets_dict.calories or '' }}">
                <span class="target-unit">cal/day</span>
              </span>
              <span class="target-cell">
                <input type="number" id="target-pro" class="target-input" placeholder="150" min="0" max="500" step="5" value="{{ plan.targets_dict.protein_g or '' }}">
                <span class="target-unit">g protein/day</span>
              </span>
              <span class="target-cell">
                <input type="number" id="target-carb" class="target-input" placeholder="250" min="0" max="800" step="5" value="{{ plan.targets_dict.carbs_g or '' }}">
                <span class="target-unit">g carbs/day</span>
              </span>
              <span class="target-cell">
                <input type="number" id="target-fat" class="target-input" placeholder="80" min="0" max="300" step="5" value="{{ plan.targets_dict.fat_g or '' }}">
                <span class="target-unit">g fat/day</span>
              </span>
            </div>
            <div class="target-presets">
              <button type="button" class="pref-chip" onclick="setTargets(2200,150,250,80)">balanced 2200</button>
              <button type="button" class="pref-chip" onclick="setTargets(2400,200,200,80)">protein lean 2400</button>
              <button type="button" class="pref-chip" onclick="setTargets(2600,140,350,70)">carb load 2600</button>
              <button type="button" class="pref-chip" onclick="setTargets(1800,140,140,80)">cut 1800</button>
              <button type="button" class="pref-chip" onclick="setTargets(0,0,0,0)">clear</button>
            </div>
          </div>

          <div class="pref-exclusions">
            <label class="pref-label">strict exclusions (allergen / dietary)</label>
            <div class="excl-row">
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="dairy"> dairy</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="gluten"> gluten</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="nuts"> tree nuts</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="peanuts"> peanuts</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="eggs"> eggs</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="shellfish"> shellfish</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="fish"> fish</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="soy"> soy</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="sesame"> sesame</label>
              <label class="excl-chip"><input type="checkbox" class="excl-check" value="pork"> pork</label>
            </div>
          </div>
        </div>
      </details>
    </div>

    <button class="gen-cta" type="button" id="gen-btn" onclick="generatePlan(this)">🪄 generate this week's plan</button>
    <div class="gen-meta" id="gen-meta">hecate · ~30s</div>
  {% else %}
    <p>plan's set.</p>
    {% if plan.preference_prompt %}
      <div class="pref-readout">vibe this week: <em>"{{ plan.preference_prompt }}"</em></div>
    {% endif %}
    {% if plan.targets_label %}
      <div class="pref-readout">macros: <em>{{ plan.targets_label }}</em></div>
    {% endif %}
    {% if plan.exclusions_label %}
      <div class="pref-readout">excluding: <em>{{ plan.exclusions_label }}</em></div>
    {% endif %}
    <div class="btn-row">
      <button class="btn btn-purple" type="button" onclick="lockPlan(this)">🔒 lock this week</button>
      {% if plan.generated_by_sub == current_user_sub %}
        <button class="btn" type="button" onclick="rerollPlan(this)" id="reroll-btn">↻ re-roll</button>
      {% endif %}
      <button class="btn btn-danger" type="button" onclick="resetPlan(this)" id="reset-btn">⌫ reset week</button>
      <a class="btn" href="/list?week={{ week_start.isoformat() }}">view list →</a>
    </div>
  {% endif %}
</section>

{% if plan.hecate_reading %}
<section class="panel">
  <div class="panel-head">
    <h2>hecate's reading</h2>
    <span class="ctx">weekly</span>
  </div>
  <div class="hecate-reading">{{ plan.hecate_reading }}</div>
</section>
{% endif %}

<section class="panel" id="suggest-panel">
  <div class="panel-head">
    <h2>forgotten gems</h2>
    <span class="ctx">recipes you haven't seen in 90+ days</span>
  </div>
  <p style="margin: 4px 0 12px 0; opacity: 0.8;">
    let hecate look through your library for recipes that fit who you are
    but haven't crossed your table recently.
  </p>
  <div class="btn-row">
    <button class="btn btn-purple" type="button" id="suggest-btn" onclick="askHecate(this, 3)">🔮 suggest 3 gems</button>
    <button class="btn" type="button" onclick="askHecate(this, 5)">🔮 suggest 5</button>
  </div>
  <div class="gen-meta" id="suggest-meta" style="margin-top: 6px;">hecate · ~10s</div>
  <div id="suggest-results" style="margin-top: 14px;"></div>
</section>

{% if plan.slots %}
<section class="panel purple">
  <div class="panel-head">
    <h2>the week</h2>
    <span class="ctx">{{ plan.slots|length }} slot{{ '' if plan.slots|length == 1 else 's' }} · {{ plan.meal_types_list|join(' + ') }}</span>
  </div>
  {# Group slots by day, then render each meal_type within the day card #}
  {% set days_order = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] %}
  {% set meals_by_day = {} %}
  {% for s in plan.slots %}
    {% if s.day not in meals_by_day %}{% set _ = meals_by_day.update({s.day: []}) %}{% endif %}
    {% set _ = meals_by_day[s.day].append(s) %}
  {% endfor %}
  <div class="day-grid">
    {% for d in days_order %}{% if d in meals_by_day %}
      {% set day_slots = meals_by_day[d] %}
      <div class="day-card {% if day_slots|selectattr('picker_subs')|list %}from-pick{% endif %}">
        <div class="dlabel">{{ d }}</div>
        {% for s in day_slots %}
          <div class="meal-row">
            {% if (plan.meal_types_list|length) > 1 %}<div class="meal-tag">{{ s.meal_type or 'dinner' }}</div>{% endif %}
            <a class="recipe-card rname" href="/recipes/{{ s.recipe_slug }}" data-slug="{{ s.recipe_slug }}" data-name="{{ s.recipe_name }}">{{ s.recipe_name }}</a>
            {% if s.picker_subs %}
            <div class="pickers">
              {% for sub in s.picker_subs %}
                <span class="pchip">🍄 {{ sub_display.get(sub, 'family') }}</span>
              {% endfor %}
            </div>
            {% endif %}
            {% if s.reason %}<div class="reason">{{ s.reason }}</div>{% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}{% endfor %}
  </div>
</section>
{% endif %}

<script>
// The week we're operating on — needed so prev/next nav can act on
// non-current weeks without each endpoint having to re-derive from URL.
const PLAN_WEEK = "{{ week_start.isoformat() }}";

async function lockPlan(btn) {
  btn.disabled = true; btn.textContent = '…';
  try {
    const r = await fetch('/api/plan/lock', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ week: PLAN_WEEK }),
    });
    if (!r.ok) throw new Error(r.status);
    location.reload();
  } catch (e) {
    btn.disabled = false; btn.innerHTML = '🔒 lock this week';
  }
}

async function resetPlan(btn) {
  if (!confirm('reset this week back to blank? slots, vibe, macros, exclusions all wiped. (locked weeks cannot be reset — that\'s your historical record.)')) return;
  btn.disabled = true; btn.textContent = '…';
  try {
    const r = await fetch('/api/plan/reset', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ week: PLAN_WEEK }),
    });
    if (!r.ok) {
      const data = await r.json().catch(() => ({}));
      throw new Error(data.detail || data.error || r.status);
    }
    location.reload();
  } catch (e) {
    btn.disabled = false; btn.textContent = '⌫ reset week';
    alert('reset failed: ' + e.message);
  }
}

function setPref(text) {
  const el = document.getElementById('pref-input');
  if (el) { el.value = text; el.focus(); }
}

// Pre-check exclusion checkboxes from server-rendered persisted state
(function hydrateExclusions(){
  const persisted = {{ plan.exclusions_list | tojson if plan.exclusions_list else '[]' }};
  if (!Array.isArray(persisted) || !persisted.length) return;
  const set = new Set(persisted);
  document.querySelectorAll('.excl-check').forEach(el => {
    if (set.has(el.value)) el.checked = true;
  });
})();

function readPref() {
  const el = document.getElementById('pref-input');
  return el ? el.value.trim() : '';
}

function setTargets(cal, pro, carb, fat) {
  const map = {'target-cal': cal, 'target-pro': pro, 'target-carb': carb, 'target-fat': fat};
  for (const id in map) {
    const el = document.getElementById(id);
    if (!el) continue;
    el.value = map[id] > 0 ? map[id] : '';
  }
}

function readTargets() {
  const t = {};
  for (const [id, key] of [
    ['target-cal','calories'], ['target-pro','protein_g'],
    ['target-carb','carbs_g'], ['target-fat','fat_g']
  ]) {
    const el = document.getElementById(id);
    if (!el) continue;
    const n = parseInt(el.value, 10);
    if (Number.isFinite(n) && n > 0) t[key] = n;
  }
  return t;
}

function readExclusions() {
  const out = [];
  document.querySelectorAll('.excl-check:checked').forEach(el => out.push(el.value));
  return out;
}

function readMealTypes() {
  const out = [];
  document.querySelectorAll('.meal-check:checked').forEach(el => out.push(el.value));
  // Default to dinner if nothing checked — never send empty
  return out.length ? out : ['dinner'];
}

async function generatePlan(btn) {
  btn.disabled = true;
  btn.innerHTML = '🪄 summoning…';
  const meta = document.getElementById('gen-meta');
  if (meta) meta.textContent = 'hecate building plan — hold tight';
  try {
    const r = await fetch('/api/plan/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        week: PLAN_WEEK,
        preference: readPref(),
        targets: readTargets(),
        exclusions: readExclusions(),
        meal_types: readMealTypes(),
      }),
    });
    if (r.status === 409) {
      // Someone beat us to it — just reload to see their plan
      location.reload();
      return;
    }
    if (!r.ok) {
      const data = await r.json().catch(() => ({}));
      throw new Error(data.detail || data.error || r.status);
    }
    location.reload();
  } catch (e) {
    btn.disabled = false;
    btn.innerHTML = '🪄 generate this week\'s plan';
    if (meta) meta.textContent = 'failed: ' + e.message;
  }
}

async function rerollPlan(btn) {
  // Re-roll reuses persisted preference + targets + exclusions unless
  // the user opens those fields (currently only visible pre-generate).
  if (!confirm('re-roll the week? slots will be replaced.')) return;
  btn.disabled = true; btn.textContent = '…';
  try {
    const r = await fetch('/api/plan/regenerate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ week: PLAN_WEEK }),  // reuse persisted constraints for this week
    });
    if (!r.ok) {
      const data = await r.json().catch(() => ({}));
      throw new Error(data.detail || data.error || r.status);
    }
    location.reload();
  } catch (e) {
    btn.disabled = false; btn.textContent = '↻ re-roll';
    alert('re-roll failed: ' + e.message);
  }
}

// Day cards have class .recipe-card → the base modal handler picks them up
// automatically (single-click → modal, ctrl/cmd-click → new tab).

function _escapeHtml(s) {
  return String(s == null ? '' : s)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

function _renderSuggestion(s) {
  const fitDots = '★'.repeat(s.fit_score || 0) + '☆'.repeat(Math.max(0, 5 - (s.fit_score || 0)));
  const meta = s.meta_summary || {};
  const metaBits = [];
  if (meta.cuisine) metaBits.push(_escapeHtml(meta.cuisine));
  if (meta.complexity) metaBits.push(_escapeHtml(meta.complexity));
  if (meta.estimated_minutes) metaBits.push(meta.estimated_minutes + 'min');
  if (meta.primary_protein) metaBits.push('protein: ' + _escapeHtml(meta.primary_protein));
  if (meta.comfort_tier) metaBits.push('comfort: ' + _escapeHtml(meta.comfort_tier));
  const metaLine = metaBits.length ? `<div class="ctx" style="margin: 4px 0;">${metaBits.join(' · ')}</div>` : '';
  const lastSeen = s.last_planned ? `last planned ${s.last_planned}` : 'never planned in this household';
  const img = s.image_url ? `<img src="${_escapeHtml(s.image_url)}" alt="" style="width: 100%; max-height: 140px; object-fit: cover; border-radius: 6px; margin-bottom: 8px;">` : '';
  const quip = s.hecate_quip ? `<div style="font-style: italic; opacity: 0.85; margin: 6px 0;">"${_escapeHtml(s.hecate_quip)}"</div>` : '';
  return `
    <div class="day-card" data-slug="${_escapeHtml(s.recipe_slug)}" style="margin-bottom: 12px;">
      ${img}
      <div style="display: flex; justify-content: space-between; align-items: baseline; gap: 8px;">
        <a class="rname" href="/recipes/${_escapeHtml(s.recipe_slug)}" style="font-weight: 600;">${_escapeHtml(s.recipe_name)}</a>
        <span title="hecate's fit score (1-5)" style="font-size: 0.85em; opacity: 0.75; white-space: nowrap;">${fitDots}</span>
      </div>
      ${metaLine}
      ${quip}
      <div style="margin: 6px 0; opacity: 0.9;">${_escapeHtml(s.reason || '')}</div>
      <div class="ctx" style="margin: 4px 0 8px 0;">${_escapeHtml(lastSeen)}</div>
      <div class="btn-row">
        <button class="btn btn-purple" type="button" onclick="pinSuggestion(this, '${_escapeHtml(s.recipe_slug)}')">📌 pin to picks</button>
        <button class="btn" type="button" onclick="this.closest('.day-card').style.display='none'">✗ skip</button>
      </div>
    </div>
  `;
}

async function askHecate(btn, count) {
  const meta = document.getElementById('suggest-meta');
  const results = document.getElementById('suggest-results');
  const original = btn.textContent;
  btn.disabled = true;
  btn.textContent = '🔮 consulting…';
  if (meta) meta.textContent = 'hecate is reading the threads — ~10s';
  results.innerHTML = '';
  try {
    const r = await fetch('/api/plan/suggest', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ week: PLAN_WEEK, count: count }),
    });
    const data = await r.json().catch(() => ({}));
    if (!r.ok) throw new Error(data.detail || data.error || r.status);
    const list = data.suggestions || [];
    if (!list.length) {
      results.innerHTML = `<p style="opacity: 0.85;">${_escapeHtml(data.detail || 'no eligible recipes — every recipe in your library has been planned recently or is already on this week.')}</p>`;
    } else {
      results.innerHTML = list.map(_renderSuggestion).join('');
    }
    if (meta) meta.textContent = `hecate offered ${list.length} gem${list.length === 1 ? '' : 's'}`;
  } catch (e) {
    if (meta) meta.textContent = 'failed: ' + e.message;
  } finally {
    btn.disabled = false;
    btn.textContent = original;
  }
}

async function pinSuggestion(btn, slug) {
  btn.disabled = true;
  const original = btn.textContent;
  btn.textContent = '…';
  try {
    const r = await fetch('/api/plan/suggest/pin', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ recipe_slug: slug }),
    });
    const data = await r.json().catch(() => ({}));
    if (!r.ok) throw new Error(data.detail || data.error || r.status);
    btn.textContent = data.added ? '✓ pinned' : '✓ already pinned';
    btn.classList.remove('btn-purple');
    // Leave the card visible so user can see it pinned, but disable further pinning
  } catch (e) {
    btn.disabled = false;
    btn.textContent = original;
    alert('pin failed: ' + e.message);
  }
}
</script>

{% endblock %}