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

<style>
  .progress-rail { width:100%; height:14px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:8px; overflow:hidden;
    margin:12px 0 6px 0; }
  .progress-fill { height:100%;
    background:linear-gradient(90deg, var(--purple-deep), var(--purple-bright));
    transition:width .3s ease; box-shadow:0 0 12px -2px var(--purple-glow); }
  .progress-meta { color:var(--bone-dim); font-family:var(--mono); font-size:12px;
    letter-spacing:.1em; display:flex; gap:18px; flex-wrap:wrap; }
  .progress-meta strong { color:var(--bone); }

  .review-bar { position:sticky; top:70px; z-index:5; display:flex;
    align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
    padding:12px 14px; background:var(--bg-2); border:1px solid var(--line);
    border-radius:8px; margin-bottom:14px; }
  .review-bar .left { display:flex; gap:14px; align-items:center; }

  .cluster-card { background:var(--surface); border:1px solid var(--line);
    border-left:3px solid var(--purple-dim); border-radius:6px;
    padding:12px 14px; margin-bottom:10px; }
  .cluster-card.approved { border-left-color: var(--green-bright); }
  .cluster-card.rejected { border-left-color: var(--muted); opacity: .55; }
  .cluster-card.no-merge { border-left-color: var(--bone-dim); }
  .cluster-card.errored  { border-left-color: var(--crit); }

  .cluster-head { display:flex; align-items:center; justify-content:space-between;
    gap:10px; flex-wrap:wrap; }
  .cluster-name { color:var(--bone); font-family:var(--serif); font-size:1.05em;
    line-height:1.2; }
  .cluster-meta { color:var(--muted); font-family:var(--mono); font-size:11px;
    letter-spacing:.15em; text-transform:uppercase; }
  .toggle { display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
    border-radius:999px; border:1px solid var(--line); background:var(--bg-2);
    color:var(--bone-dim); font-family:var(--mono); font-size:11px;
    letter-spacing:.1em; cursor:pointer; min-height:28px; }
  .toggle.on  { background:rgba(110,168,72,.18); border-color:var(--green-dim);
    color:var(--green-bright); }
  .toggle.off { background:rgba(232,96,106,.12);
    border-color:rgba(232,96,106,.3); color:var(--crit); }
  .toggle:disabled { opacity:.4; cursor:not-allowed; }

  .members-list { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
  .member-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px;
    background:var(--bg-2); border:1px solid var(--line); border-radius:4px;
    font-family:var(--mono); font-size:12px; color:var(--bone-dim); }
  .member-chip.canonical {
    background:rgba(155,95,232,.15); border-color:var(--purple-dim);
    color:var(--purple-bright); }
  .member-chip.canonical::before { content:"★ "; color:var(--purple-bright); }
  .member-chip.discard { color:var(--muted); }
  .member-chip.discard::before { content:"× "; color:var(--crit); }

  .reason { color:var(--bone-dim); font-style:italic; font-size:.9em;
    margin-top:6px; line-height:1.3; }
  .alias-add { color:var(--green-bright); font-size:.85em; font-family:var(--mono);
    margin-top:4px; }

  .empty-state { padding:28px 14px; text-align:center; color:var(--bone-dim); }
</style>

<div class="page-head">
  <div class="crumb">// consolidate · merge duplicate foods in mealie</div>
  <h1>foods <span class="accent">consolidate</span></h1>
  <div class="lede">
    scan your mealie household foods, cluster lookalikes by similarity,
    let sonnet pick the survivor + the rest become aliases on it. mealie
    rewrites every recipe ingredient to point at the canonical row.
  </div>
</div>

<section class="panel" id="consolidate-shell">
  <div class="panel-head">
    <h2>state</h2>
    <span class="pill" id="state-pill">loading…</span>
    <span class="ctx" id="state-ctx"></span>
  </div>

  <div id="empty-pane" style="display:none;">
    <p>no run yet. kick one off?</p>
    <button class="btn btn-purple" id="start-btn" type="button" onclick="startRun()">🪄 scan + cluster mealie foods</button>
    <p class="muted" style="margin-top:8px;">
      walks your household catalog, clusters by name similarity, asks sonnet for the survivor of each cluster.
      first run might take 5-15 min depending on cluster count.
    </p>
  </div>

  <div id="progress-pane" style="display:none;">
    <div class="progress-rail"><div class="progress-fill" id="bar" style="width:0%;"></div></div>
    <div class="progress-meta">
      <span><strong id="processed">0</strong> processed</span>
      <span><strong id="merged">0</strong> merged</span>
      <span><strong id="errors">0</strong> errors</span>
      <span>of <strong id="total">?</strong> clusters</span>
      <span class="muted" id="current-cluster"></span>
    </div>
    <div class="btn-row" style="margin-top:12px;">
      <button class="btn" type="button" onclick="cancelJob()">cancel</button>
    </div>
  </div>

  <div id="review-pane" style="display:none;">
    <div class="review-bar">
      <div class="left">
        <span><strong id="approved-count">0</strong> selected</span>
        <span class="muted" id="review-meta"></span>
      </div>
      <div class="right">
        <button class="btn" type="button" onclick="setAll(true)">approve all merges</button>
        <button class="btn" type="button" onclick="setAll(false)">clear</button>
        <button class="btn btn-purple" type="button" id="apply-btn" onclick="applyApproved()">apply selected →</button>
      </div>
    </div>
    <div id="proposals-grid"></div>
  </div>

  <div id="done-pane" style="display:none;">
    <p id="done-line"></p>
    <button class="btn btn-purple" type="button" onclick="startRun()">↻ start new run</button>
  </div>

  <div id="failed-pane" style="display:none;">
    <p style="color:var(--crit);" id="failed-line"></p>
    <button class="btn btn-purple" type="button" onclick="startRun()">↻ retry</button>
  </div>
</section>

<script>
  let job = {{ (latest_job | tojson) if latest_job else 'null' }};
  let pollTimer = null;
  let proposals = [];
  function $(id){return document.getElementById(id);}

  function showPane(name){
    for(const p of ['empty','progress','review','done','failed']){
      $(`${p}-pane`).style.display = (p === name) ? '' : 'none';
    }
  }
  function setStatePill(text, klass){
    const el = $('state-pill');
    el.textContent = text;
    el.className = 'pill ' + (klass || 'pill-mute');
  }
  function paint(){
    if(!job) return;
    const total = job.total_clusters || 0;
    const done = (job.processed_count || 0) + (job.error_count || 0);
    const pct = total>0 ? Math.round((done/total)*100) : 0;
    $('bar').style.width = pct+'%';
    $('processed').textContent = job.processed_count || 0;
    $('merged').textContent    = job.merged_count   || 0;
    $('errors').textContent    = job.error_count    || 0;
    $('total').textContent     = total || '?';
    $('current-cluster').textContent = job.current_cluster ? `· ${job.current_cluster}` : '';
  }
  async function fetchJob(){
    try {
      const r = await fetch('/api/foods/consolidate-status');
      const d = await r.json();
      job = d.job || null; route();
    } catch(e){ console.error('status poll failed', e); }
  }
  function route(){
    if(!job){ stopPoll(); setStatePill('idle','pill-mute'); $('state-ctx').textContent=''; showPane('empty'); return; }
    $('state-ctx').textContent = `started ${new Date(job.started_at).toLocaleString()}`;
    const s = job.state;
    if(s === 'running'){ setStatePill('walking','pill-ok'); paint(); showPane('progress'); startPoll(); }
    else if(s === 'review'){ setStatePill('review','pill-ok'); paint(); showPane('review'); stopPoll(); loadProposals(); }
    else if(s === 'applying'){ setStatePill('applying','pill-ok'); paint(); showPane('progress'); startPoll(); }
    else if(s === 'done'){ setStatePill('done','pill-mute');
      const m = job.merged_count || 0;
      $('done-line').textContent = `merged ${m} cluster${m===1?'':'s'} into canonical foods.`;
      showPane('done'); stopPoll(); }
    else if(s === 'failed'){ setStatePill('failed','pill-mute'); $('failed-line').textContent = job.last_error || 'job failed'; showPane('failed'); stopPoll(); }
    else if(s === 'cancelled'){ setStatePill('cancelled','pill-mute'); $('done-line').textContent='job cancelled.'; showPane('done'); stopPoll(); }
  }
  function startPoll(){ if(pollTimer) return; pollTimer = setInterval(fetchJob, 2000); }
  function stopPoll(){ if(pollTimer){ clearInterval(pollTimer); pollTimer=null; } }

  async function startRun(){
    const btn = $('start-btn');
    if(btn){ btn.disabled = true; btn.textContent = 'kicking off…'; }
    try {
      const r = await fetch('/api/foods/consolidate-start',{method:'POST'});
      if(!r.ok){ const j = await r.json().catch(()=>({})); throw new Error(j.error || r.status); }
      await fetchJob();
    } catch(e){
      alert('start failed: ' + e.message);
      if(btn){ btn.disabled = false; btn.textContent = '🪄 scan + cluster mealie foods'; }
    }
  }
  async function cancelJob(){
    if(!job) return;
    if(!confirm('cancel this run?')) return;
    try { await fetch('/api/foods/consolidate-cancel/'+job.id,{method:'POST'}); await fetchJob(); }
    catch(e){ alert('cancel failed: '+e.message); }
  }
  async function loadProposals(){
    if(!job) return;
    try {
      const r = await fetch('/api/foods/consolidate-jobs/'+job.id+'/proposals');
      const d = await r.json();
      proposals = d.proposals || [];
      for(const p of proposals){
        const dec = p.sonnet_decision || {};
        if(p.approved === null || p.approved === undefined){
          // Default: approve mergeable clusters with no apply error
          p.approved = !!dec.merge && !p.apply_error;
        }
      }
      renderProposals();
    } catch(e){ console.error('proposals load failed', e); }
  }
  function renderProposals(){
    const grid = $('proposals-grid');
    grid.innerHTML = '';
    if(!proposals.length){
      grid.innerHTML = '<div class="empty-state">no clusters found — your foods table is already clean (or close to it).</div>';
      $('apply-btn').disabled = true; return;
    }
    let approvedCount = 0;
    for(const p of proposals){
      if(p.approved) approvedCount++;
      grid.appendChild(renderOne(p));
    }
    $('approved-count').textContent = approvedCount;
    const total = proposals.length;
    const noMerge = proposals.filter(p=>!(p.sonnet_decision||{}).merge).length;
    $('review-meta').textContent = `· ${total} clusters, ${noMerge} marked no-merge`;
    $('apply-btn').disabled = approvedCount === 0;
  }
  function renderOne(p){
    const card = document.createElement('div');
    card.className = 'cluster-card';
    const dec = p.sonnet_decision || {};
    const cluster = p.cluster_json || [];
    if(p.apply_error) card.classList.add('errored');
    else if(!dec.merge) card.classList.add('no-merge');
    else if(p.approved) card.classList.add('approved');
    else card.classList.add('rejected');

    const head = document.createElement('div');
    head.className = 'cluster-head';
    const left = document.createElement('div');
    const nm = document.createElement('div');
    nm.className = 'cluster-name';
    nm.textContent = dec.canonical_name || `cluster of ${cluster.length}`;
    const meta = document.createElement('div');
    meta.className = 'cluster-meta';
    meta.textContent = dec.merge ? `merge ${cluster.length} → 1` : `keep separate (${cluster.length} foods)`;
    left.appendChild(nm); left.appendChild(meta);

    const tog = document.createElement('button');
    tog.type = 'button';
    tog.className = 'toggle ' + (p.approved ? 'on' : 'off');
    tog.textContent = p.approved ? 'merge' : (dec.merge ? 'skip' : 'keep separate');
    tog.disabled = !dec.merge;
    tog.onclick = () => flip(p, card, tog);
    head.appendChild(left); head.appendChild(tog);
    card.appendChild(head);

    const list = document.createElement('div');
    list.className = 'members-list';
    const canonId = dec.canonical_id;
    const discardSet = new Set(dec.discard_ids || []);
    for(const m of cluster){
      const chip = document.createElement('span');
      chip.className = 'member-chip';
      if(m.id === canonId && dec.merge) chip.classList.add('canonical');
      else if(discardSet.has(m.id)) chip.classList.add('discard');
      chip.textContent = m.name + (m.pluralName && m.pluralName !== m.name ? ` / ${m.pluralName}` : '');
      list.appendChild(chip);
    }
    card.appendChild(list);

    if(dec.alias_additions && dec.alias_additions.length){
      const al = document.createElement('div');
      al.className = 'alias-add';
      al.textContent = `+ aliases: ${dec.alias_additions.join(', ')}`;
      card.appendChild(al);
    }

    if(dec.reason){
      const r = document.createElement('div');
      r.className = 'reason';
      r.textContent = dec.reason;
      card.appendChild(r);
    }
    if(p.apply_error){
      const e = document.createElement('div');
      e.className = 'reason';
      e.style.color = 'var(--crit)';
      e.textContent = 'apply error: ' + p.apply_error;
      card.appendChild(e);
    }
    return card;
  }
  function flip(p, card, tog){
    const dec = p.sonnet_decision || {};
    if(!dec.merge) return;
    p.approved = !p.approved;
    card.classList.toggle('approved', p.approved);
    card.classList.toggle('rejected', !p.approved);
    tog.classList.toggle('on', p.approved);
    tog.classList.toggle('off', !p.approved);
    tog.textContent = p.approved ? 'merge' : 'skip';
    const cnt = proposals.filter(x => x.approved).length;
    $('approved-count').textContent = cnt;
    $('apply-btn').disabled = cnt === 0;
  }
  function setAll(on){
    for(const p of proposals){
      const dec = p.sonnet_decision || {};
      if(dec.merge) p.approved = on;
    }
    renderProposals();
  }
  async function applyApproved(){
    const ids = proposals.filter(p => p.approved && (p.sonnet_decision||{}).merge).map(p => p.id);
    if(!ids.length) return;
    if(!confirm(`merge ${ids.length} cluster${ids.length===1?'':'s'} in mealie? this rewrites recipe references.`)) return;
    const btn = $('apply-btn'); btn.disabled = true; btn.textContent = 'applying…';
    try {
      const r = await fetch('/api/foods/consolidate-apply/'+job.id, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({approved_ids: ids}),
      });
      if(!r.ok){ const j = await r.json().catch(()=>({})); throw new Error(j.error || r.status); }
      await fetchJob();
    } catch(e){
      alert('apply failed: '+e.message);
      btn.disabled = false; btn.textContent = 'apply selected →';
    }
  }

  route();
  if(job && (job.state === 'running' || job.state === 'applying')) startPoll();
</script>

{% endblock %}