{% extends "_base.html" %}
{% block title %}Dedupe Recipes · 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; }
  .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(232,96,106,.15); border-color:rgba(232,96,106,.3); color:var(--crit); }
  .toggle.off { background:rgba(110,168,72,.18); border-color:var(--green-dim); color:var(--green-bright); }
  .toggle:disabled { opacity:.4; cursor:not-allowed; }

  .recipe-row { display:grid; grid-template-columns: 1fr; gap:8px; margin-top:10px; }
  @media (min-width: 720px) { .recipe-row { grid-template-columns: 1fr 1fr; } }
  .rcell { padding:10px; border:1px solid var(--line); border-radius:4px; background:var(--bg-2); }
  .rcell.canonical { border-color: var(--purple-dim); background:rgba(155,95,232,.08); }
  .rcell.canonical::before { content:"★ KEEP"; color:var(--purple-bright); font-family:var(--mono); font-size:10px; letter-spacing:.2em; display:block; margin-bottom:4px; }
  .rcell.delete { border-color: rgba(232,96,106,.4); background:rgba(232,96,106,.06); }
  .rcell.delete::before { content:"× DELETE"; color:var(--crit); font-family:var(--mono); font-size:10px; letter-spacing:.2em; display:block; margin-bottom:4px; }
  .rcell .rname { font-family:var(--serif); font-size:1em; color:var(--bone); }
  .rcell .rmeta { color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.1em; margin-top:4px; }
  .rcell .ringing { color:var(--bone-dim); font-size:.85em; margin-top:6px; line-height:1.3; max-height:48px; overflow:hidden; }
  .rcell a { color:var(--purple-bright); }

  .reason { color:var(--bone-dim); font-style:italic; font-size:.9em; margin-top:8px; }
  .empty-state { padding:28px 14px; text-align:center; color:var(--bone-dim); }
</style>

<div class="page-head">
  <div class="crumb">// dedupe · find duplicate recipes</div>
  <h1>recipe <span class="accent">dedupe</span></h1>
  <div class="lede">
    scan your household recipes for duplicates by name similarity. sonnet
    looks at ingredients + step counts + source URLs to decide whether
    similar-named recipes are actually the same dish. you confirm per
    cluster — DELETE in Mealie is permanent.
  </div>
</div>

<section class="panel" id="dedupe-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. scan now?</p>
    <button class="btn btn-purple" id="start-btn" type="button" onclick="startRun()">🪄 scan recipes for duplicates</button>
    <p class="muted" style="margin-top:8px;">walks your household recipes, clusters by name similarity, asks sonnet which clusters are real dupes. apply path uses Mealie's DELETE endpoint — irreversible. user-confirms per cluster.</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="deleted">0</strong> deleted</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 dupes</button>
        <button class="btn" type="button" onclick="setAll(false)">clear</button>
        <button class="btn btn-purple" type="button" id="apply-btn" onclick="applyApproved()">delete 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 scan</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;
    $('deleted').textContent   = job.deleted_count  || 0;
    $('errors').textContent    = job.error_count   || 0;
    $('total').textContent     = total || '?';
    $('current-cluster').textContent = job.current_cluster ? `· ${job.current_cluster.slice(0,40)}…` : '';
  }
  async function fetchJob(){
    try {
      const r = await fetch('/api/recipes/dedupe-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.deleted_count || 0;
      $('done-line').textContent = `deleted ${m} duplicate recipe${m===1?'':'s'}.`;
      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/recipes/dedupe-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 recipes for duplicates'; }
    }
  }
  async function cancelJob(){
    if(!job) return;
    if(!confirm('cancel?')) return;
    try { await fetch('/api/recipes/dedupe-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/recipes/dedupe-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 to NOT approved — recipe deletion is destructive,
          // user must opt-in per cluster
          p.approved = false;
        }
      }
      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 recipes are unique.</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 noDup = proposals.filter(p=>!(p.sonnet_decision||{}).duplicates).length;
    $('review-meta').textContent = `· ${total} clusters, ${noDup} flagged not-duplicates`;
    $('apply-btn').disabled = approvedCount === 0;
  }
  function escapeHtml(s){return String(s).replace(/[&<>"']/g, m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":"&#39;"}[m]));}
  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.duplicates) 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 = (cluster[0] && cluster[0].name) || `cluster of ${cluster.length}`;
    const meta = document.createElement('div');
    meta.className = 'cluster-meta';
    meta.textContent = dec.duplicates
      ? `delete ${(dec.delete_slugs||[]).length}, keep 1`
      : `keep all ${cluster.length} (sonnet says distinct)`;
    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 ? 'will delete' : (dec.duplicates ? 'skip' : 'keep all');
    tog.disabled = !dec.duplicates;
    tog.onclick = () => flip(p, card, tog);
    head.appendChild(left); head.appendChild(tog);
    card.appendChild(head);

    const row = document.createElement('div');
    row.className = 'recipe-row';
    const canonSlug = dec.canonical_slug;
    const deleteSet = new Set(dec.delete_slugs || []);
    for(const r of cluster){
      const cell = document.createElement('div');
      cell.className = 'rcell';
      if(r.slug === canonSlug && dec.duplicates) cell.classList.add('canonical');
      else if(deleteSet.has(r.slug)) cell.classList.add('delete');
      const link = r.source_url ? ` <a href="${escapeHtml(r.source_url)}" target="_blank">↗</a>` : '';
      cell.innerHTML = `
        <div class="rname">${escapeHtml(r.name || r.slug)}${link}</div>
        <div class="rmeta">${escapeHtml(r.slug)} · ${r.step_count} steps · ${escapeHtml(r.yields || 'no yield set')}</div>
        <div class="ringing">${escapeHtml((r.ingredient_summary||[]).slice(0,8).join(', ')) || 'no ingredients'}</div>
      `;
      row.appendChild(cell);
    }
    card.appendChild(row);

    if(dec.reason){
      const rs = document.createElement('div');
      rs.className = 'reason';
      rs.textContent = dec.reason;
      card.appendChild(rs);
    }
    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.duplicates) 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 ? 'will delete' : '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.duplicates) p.approved = on;
    }
    renderProposals();
  }
  async function applyApproved(){
    const ids = proposals.filter(p => p.approved && (p.sonnet_decision||{}).duplicates).map(p => p.id);
    if(!ids.length) return;
    const total_to_delete = proposals
      .filter(p => p.approved && (p.sonnet_decision||{}).duplicates)
      .reduce((sum, p) => sum + ((p.sonnet_decision||{}).delete_slugs || []).length, 0);
    if(!confirm(`PERMANENTLY DELETE ${total_to_delete} recipe${total_to_delete===1?'':'s'} from mealie? this cannot be undone.`)) return;
    const btn = $('apply-btn'); btn.disabled = true; btn.textContent = 'deleting…';
    try {
      const r = await fetch('/api/recipes/dedupe-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 = 'delete selected →';
    }
  }
  route();
  if(job && (job.state === 'running' || job.state === 'applying')) startPoll();
</script>

{% endblock %}