{% extends "_base.html" %}
{% block title %}Enrich 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); }
  .stat-card { padding:14px; background:var(--bg-2); border:1px solid var(--line);
    border-radius:8px; margin-bottom:14px; }
  .stat-card .big { font-family:var(--serif); font-size:1.5em; color:var(--bone); }
  .stat-card .lbl { color:var(--muted); font-family:var(--mono); font-size:11px;
    letter-spacing:.15em; text-transform:uppercase; }
</style>

<div class="page-head">
  <div class="crumb">// enrich · per-recipe metadata for smarter planning</div>
  <h1>recipe <span class="accent">enrich</span></h1>
  <div class="lede">
    walk every household recipe and have sonnet generate structured metadata —
    cuisine, complexity, macros, meal type, primary protein + carb,
    comfort tier, one-line summary. the plan generator uses this so
    "high protein week" actually filters the pool, not just biases the vibe.
  </div>
</div>

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

  <div class="stat-card">
    <div class="big" id="existing-count">{{ existing_count }}</div>
    <div class="lbl">recipes already enriched in this household</div>
  </div>

  <div id="empty-pane" style="display:none;">
    <p>kick off an enrichment run? walks every recipe and skips any already
       enriched at the current schema version.</p>
    <button class="btn btn-purple" id="start-btn" type="button" onclick="startRun(false)">🪄 enrich recipes</button>
    <button class="btn" type="button" onclick="startRun(true)" title="ignore enrich_version cache and re-run all">↻ force re-enrich all</button>
    <p class="muted" style="margin-top:8px;">
      cost: ~5s/recipe via clawdforge. ~226 recipes ≈ 20 min the first time.
      after that, only newly-imported / unenriched recipes process.
    </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="enriched">0</strong> enriched</span>
      <span><strong id="skipped">0</strong> already-enriched</span>
      <span><strong id="errors">0</strong> errors</span>
      <span>of <strong id="total">?</strong></span>
      <span class="muted" id="current-slug"></span>
    </div>
    <div class="btn-row" style="margin-top:12px;">
      <button class="btn" type="button" onclick="cancelJob()">cancel</button>
    </div>
  </div>

  <div id="done-pane" style="display:none;">
    <p id="done-line"></p>
    <button class="btn btn-purple" type="button" onclick="startRun(false)">↻ enrich newly-imported</button>
    <button class="btn" type="button" onclick="startRun(true)">↻ force re-enrich all</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(false)">↻ retry</button>
  </div>
</section>

<script>
  let job = {{ (latest_job | tojson) if latest_job else 'null' }};
  let pollTimer = null;
  function $(id){return document.getElementById(id);}
  function showPane(name){
    for(const p of ['empty','progress','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_recipes || 0;
    const done = (job.enriched_count || 0) + (job.skipped_count || 0) + (job.error_count || 0);
    const pct = total>0 ? Math.round((done/total)*100) : 0;
    $('bar').style.width = pct+'%';
    $('enriched').textContent = job.enriched_count || 0;
    $('skipped').textContent  = job.skipped_count  || 0;
    $('errors').textContent   = job.error_count    || 0;
    $('total').textContent    = total || '?';
    $('current-slug').textContent = job.current_slug ? `· ${job.current_slug}` : '';
  }
  async function fetchJob(){
    try {
      const r = await fetch('/api/recipes/enrich-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 === 'done'){
      setStatePill('done','pill-mute');
      const e = job.enriched_count || 0;
      const sk = job.skipped_count || 0;
      $('done-line').textContent = `enriched ${e} recipe${e===1?'':'s'} · ${sk} already-current.`;
      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(force){
    const btn = $('start-btn');
    if(btn){ btn.disabled = true; btn.textContent = 'kicking off…'; }
    try {
      const r = await fetch('/api/recipes/enrich-start',{
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({force: !!force}),
      });
      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 = '🪄 enrich recipes'; }
    }
  }
  async function cancelJob(){
    if(!job) return;
    if(!confirm('cancel?')) return;
    try { await fetch('/api/recipes/enrich-cancel/'+job.id,{method:'POST'}); await fetchJob(); }
    catch(e){ alert('cancel failed: '+e.message); }
  }

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

{% endblock %}