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

<style>
  .filter-row { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 18px 0;
    align-items:center; }
  .filter-row label { font-family:var(--mono); font-size:11px;
    color:var(--bone-dim); letter-spacing:.1em; text-transform:uppercase;
    display:flex; flex-direction:column; gap:4px; }
  .filter-row input[type=text], .filter-row input[type=number],
  .filter-row select {
    background:var(--bg-2); border:1px solid var(--line); color:var(--bone);
    padding:6px 8px; border-radius:6px; font-family:var(--mono);
    font-size:13px; min-width:130px; }
  .filter-row input[type=text].search { min-width:240px; }
  .grid { display:grid; gap:14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .dcard { background:var(--bg-2); border:1px solid var(--line);
    border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
  .dcard .img { width:100%; aspect-ratio: 16/10;
    background:var(--bg-1) center/cover no-repeat;
    border-bottom:1px solid var(--line); }
  .dcard .img.placeholder { display:flex; align-items:center;
    justify-content:center; color:var(--muted); font-size:36px; }
  .dcard .body { padding:12px 14px; flex:1; display:flex;
    flex-direction:column; gap:8px; }
  .dcard h3 { font-family:var(--serif); font-size:1.05em; margin:0;
    color:var(--bone); line-height:1.2; }
  .dcard .meta-line { font-family:var(--mono); font-size:11px;
    color:var(--bone-dim); letter-spacing:.05em; }
  .dcard .quip { font-family:var(--serif); font-style:italic;
    color:var(--purple-bright); font-size:.92em; line-height:1.35; }
  .dcard .desc { color:var(--muted); font-size:.9em; line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden; }
  .dcard .src { font-family:var(--mono); font-size:10.5px;
    color:var(--muted); text-transform:lowercase; }
  .dcard .src a { color:var(--green-bright); text-decoration:none; }
  .dcard .actions { display:flex; gap:8px; padding:10px 14px;
    border-top:1px solid var(--line); background:var(--bg-1); }
  .dcard .actions .btn { flex:1; }
  .dcard.imported { opacity:.55; }
  .dcard.rejected { opacity:.4; }
  .dcard .raw-tag { display:inline-block; padding:2px 6px; font-size:10px;
    border:1px solid var(--line); border-radius:4px; color:var(--muted);
    font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; }
  .empty { color:var(--muted); font-style:italic; padding:32px;
    text-align:center; border:1px dashed var(--line); border-radius:8px; }
  .seed-row { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
  .seed-row .chip { cursor:pointer; }
  .progress-rail { width:100%; height:10px; background:var(--bg-2);
    border:1px solid var(--line); border-radius:6px; overflow:hidden;
    margin:8px 0; }
  .progress-fill { height:100%;
    background:linear-gradient(90deg, var(--purple-deep), var(--purple-bright));
    transition:width .3s ease; }
  .progress-meta { color:var(--bone-dim); font-family:var(--mono);
    font-size:11px; letter-spacing:.1em; display:flex; gap:14px; flex-wrap:wrap; }
  .progress-meta strong { color:var(--bone); }
  details.scrape-panel { margin-bottom:14px; }
  details.scrape-panel summary { cursor:pointer; font-family:var(--mono);
    font-size:12px; letter-spacing:.1em; color:var(--bone-dim);
    text-transform:uppercase; padding:6px 0; }
  details.scrape-panel summary:hover { color:var(--purple-bright); }
  textarea#urls-input { width:100%; min-height:80px;
    background:var(--bg-2); border:1px solid var(--line); color:var(--bone);
    padding:8px; border-radius:6px; font-family:var(--mono); font-size:12px; }
</style>

<div class="page-head">
  <div class="crumb">// discover · external recipe corpus</div>
  <h1>recipe <span class="accent">discover</span></h1>
  <div class="lede">
    a cross-household library of recipes scraped from the open web —
    each enriched by hecate so you can filter by cuisine, complexity,
    primary protein, kid-friendliness, time. one click imports to your
    mealie household; the same sterilize + enrich pipelines you already
    trust run on it.
  </div>
</div>

<section class="panel">
  <div class="panel-head">
    <h2>browse</h2>
    <span class="ctx" id="status-line">
      {{ counts.get('enriched', 0) }} enriched · {{ counts.get('raw', 0) }} raw ·
      {{ counts.get('imported', 0) }} imported · {{ counts.get('rejected', 0) }} rejected
    </span>
  </div>

  <div class="filter-row">
    <label>search
      <input type="text" id="q" class="search" placeholder="chicken, soup, ramen…">
    </label>
    <label>cuisine
      <select id="cuisine">
        <option value="">any</option>
        <option>american</option><option>italian</option><option>asian</option>
        <option>mexican</option><option>mediterranean</option>
        <option>indian</option><option>french</option>
        <option>middle-eastern</option><option>other</option>
      </select>
    </label>
    <label>complexity
      <select id="complexity">
        <option value="">any</option>
        <option>easy</option><option>medium</option><option>involved</option>
      </select>
    </label>
    <label>protein
      <select id="primary_protein">
        <option value="">any</option>
        <option>chicken</option><option>beef</option><option>pork</option>
        <option>fish</option><option>seafood</option><option>tofu</option>
        <option>tempeh</option><option>beans</option><option>eggs</option>
        <option>cheese</option><option>nuts</option><option>none</option>
        <option>mixed</option>
      </select>
    </label>
    <label>meal type
      <select id="meal_type">
        <option value="">any</option>
        <option>breakfast</option><option>lunch</option><option>dinner</option>
        <option>snack</option><option>dessert</option><option>side</option>
      </select>
    </label>
    <label>kid-fit ≥
      <select id="kid_friendly_min">
        <option value="">any</option>
        <option value="1">1</option><option value="2">2</option>
        <option value="3">3</option><option value="4">4</option>
        <option value="5">5</option>
      </select>
    </label>
    <label>max minutes
      <input type="number" id="max_minutes" min="1" max="600" placeholder="—">
    </label>
    <label>status
      <select id="status">
        <option value="active" selected>enriched + raw</option>
        <option value="enriched">enriched only</option>
        <option value="all">all (incl imported/rejected)</option>
        <option value="imported">imported</option>
        <option value="rejected">rejected</option>
      </select>
    </label>
  </div>

  <details class="scrape-panel">
    <summary>+ scrape new recipes (admin)</summary>
    <p class="muted" style="margin-top:8px;">
      kick off a background scrape from a curated seed list, or paste your own
      urls (one per line, max 50). each url goes through scrape →
      insert → hecate enrich.
    </p>
    <div class="seed-row">
      {% for s in seeds %}
        <button class="chip" type="button" onclick="seedSet('{{ s.name }}')">
          {{ s.name }} <span class="muted">({{ s.count }})</span>
        </button>
      {% endfor %}
    </div>
    <textarea id="urls-input" placeholder="https://… one per line"></textarea>
    <div class="btn-row" style="margin-top:8px;">
      <button class="btn btn-purple" type="button" onclick="startScrape()">▸ start scrape</button>
      <button class="btn" type="button" onclick="cancelScrape()" id="cancel-btn" style="display:none;">cancel</button>
    </div>
    <div id="scrape-progress" style="display:none; margin-top:12px;">
      <div class="progress-rail"><div class="progress-fill" id="bar" style="width:0%;"></div></div>
      <div class="progress-meta">
        <span><strong id="pages">0</strong> walked</span>
        <span><strong id="added">0</strong> added</span>
        <span><strong id="skipped">0</strong> skipped</span>
        <span><strong id="errors">0</strong> errors</span>
        <span class="muted" id="last-error"></span>
      </div>
    </div>
  </details>

  <div id="grid" class="grid"></div>
  <div id="empty-msg" class="empty" style="display:none;">no recipes match. widen filters or scrape some new ones.</div>
</section>

<script>
  let scrapeJob = {{ (latest_job | tojson) if latest_job else 'null' }};
  let scrapePoll = null;
  let searchTimer = null;

  function $(id){ return document.getElementById(id); }
  function _esc(s){
    if(s == null) return '';
    return String(s).replace(/[&<>"']/g, ch => ({
      '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'
    })[ch]);
  }

  function _metaLine(meta){
    if(!meta) return '<span class="raw-tag">awaiting enrich</span>';
    const bits = [];
    if(meta.cuisine && meta.cuisine !== 'unknown') bits.push(meta.cuisine);
    if(meta.complexity) bits.push(meta.complexity);
    if(meta.primary_protein && meta.primary_protein !== 'none') bits.push(meta.primary_protein);
    if(meta.estimated_minutes) bits.push(meta.estimated_minutes + ' min');
    if(meta.kid_friendly_score != null) bits.push('kid:' + meta.kid_friendly_score);
    return _esc(bits.join(' · '));
  }

  function _renderCard(r){
    const meta = r.meta_json || null;
    const quip = meta && meta.hecate_quip ? meta.hecate_quip : '';
    const desc = r.description || (meta && meta.summary) || '';
    const imgUrl = r.image_url || '';
    const klass = 'dcard ' + (r.status === 'imported' ? 'imported' :
                  r.status === 'rejected' ? 'rejected' : '');
    const imgHtml = imgUrl
      ? `<div class="img" style="background-image:url('${_esc(imgUrl)}')"></div>`
      : `<div class="img placeholder">🍴</div>`;
    let actionsHtml = '';
    if(r.status === 'imported'){
      actionsHtml = '<span class="muted" style="flex:1; text-align:center; font-family:var(--mono); font-size:11px;">✓ imported</span>';
    } else if(r.status === 'rejected'){
      actionsHtml = '<span class="muted" style="flex:1; text-align:center; font-family:var(--mono); font-size:11px;">✗ rejected</span>';
    } else {
      actionsHtml = `
        <button class="btn btn-purple" type="button" onclick="importDiscover(${r.id}, this)">🍳 import</button>
        <button class="btn" type="button" onclick="rejectDiscover(${r.id}, this)" title="hide from discover">✗ skip</button>
      `;
    }
    return `
      <div class="${klass}" data-id="${r.id}">
        ${imgHtml}
        <div class="body">
          <h3>${_esc(r.name || '(untitled)')}</h3>
          <div class="meta-line">${_metaLine(meta)}</div>
          ${quip ? `<div class="quip">${_esc(quip)}</div>` : ''}
          ${desc ? `<div class="desc">${_esc(desc)}</div>` : ''}
          <div class="src"><a href="${_esc(r.source_url)}" target="_blank" rel="noopener noreferrer">${_esc(new URL(r.source_url).host)}</a></div>
        </div>
        <div class="actions">${actionsHtml}</div>
      </div>`;
  }

  async function refreshSearch(){
    const params = new URLSearchParams();
    for(const id of ['q','cuisine','complexity','primary_protein','meal_type','kid_friendly_min','max_minutes','status']){
      const v = $(id).value;
      if(v !== '') params.set(id, v);
    }
    try {
      const r = await fetch('/api/discover/search?' + params.toString());
      const d = await r.json();
      const recipes = d.recipes || [];
      $('grid').innerHTML = recipes.map(_renderCard).join('');
      $('empty-msg').style.display = recipes.length === 0 ? '' : 'none';
    } catch(e){
      console.error('search failed', e);
    }
  }

  function debouncedSearch(){
    clearTimeout(searchTimer);
    searchTimer = setTimeout(refreshSearch, 250);
  }

  for(const id of ['q','cuisine','complexity','primary_protein','meal_type','kid_friendly_min','max_minutes','status']){
    const el = $(id);
    el.addEventListener('input', debouncedSearch);
    el.addEventListener('change', debouncedSearch);
  }

  async function importDiscover(id, btn){
    btn.disabled = true; btn.textContent = 'importing…';
    try {
      const r = await fetch('/api/discover/import/' + id, { method:'POST' });
      const d = await r.json();
      if(!r.ok) throw new Error(d.error || r.status);
      // Mark card as imported in-place
      const card = btn.closest('.dcard');
      if(card){
        card.classList.add('imported');
        card.querySelector('.actions').innerHTML =
          '<span class="muted" style="flex:1; text-align:center; font-family:var(--mono); font-size:11px;">✓ imported as <code>' + _esc(d.slug) + '</code></span>';
      }
    } catch(e){
      btn.disabled = false; btn.textContent = '🍳 import';
      alert('import failed: ' + e.message);
    }
  }

  async function rejectDiscover(id, btn){
    btn.disabled = true; btn.textContent = '…';
    try {
      const r = await fetch('/api/discover/reject/' + id, { method:'POST' });
      if(!r.ok){ const d = await r.json().catch(()=>({})); throw new Error(d.error || r.status); }
      const card = btn.closest('.dcard');
      if(card) card.remove();
    } catch(e){
      btn.disabled = false; btn.textContent = '✗ skip';
      alert('reject failed: ' + e.message);
    }
  }

  function seedSet(name){
    $('urls-input').value = '__seed:' + name;
    $('urls-input').setAttribute('data-seed', name);
  }

  async function startScrape(){
    const txt = $('urls-input').value.trim();
    let body;
    if(txt.startsWith('__seed:')){
      body = { seed: txt.slice(7).trim() };
    } else {
      const urls = txt.split(/\r?\n/).map(s => s.trim()).filter(Boolean);
      if(urls.length === 0){ alert('paste some urls or pick a seed'); return; }
      body = { urls };
    }
    try {
      const r = await fetch('/api/discover/scrape-start', {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify(body),
      });
      const d = await r.json();
      if(!r.ok) throw new Error(d.error || r.status);
      scrapeJob = { id: d.job_id, state: 'running' };
      paintScrape();
      pollScrape();
    } catch(e){
      alert('scrape start failed: ' + e.message);
    }
  }

  async function cancelScrape(){
    if(!scrapeJob) return;
    if(!confirm('cancel scrape?')) return;
    try {
      await fetch('/api/discover/scrape-cancel/' + scrapeJob.id, { method:'POST' });
      await fetchScrapeStatus();
    } catch(e){
      alert('cancel failed: ' + e.message);
    }
  }

  async function fetchScrapeStatus(){
    try {
      const r = await fetch('/api/discover/scrape-status');
      const d = await r.json();
      scrapeJob = d.job || null;
      paintScrape();
    } catch(e){
      console.error('scrape status failed', e);
    }
  }

  function paintScrape(){
    const j = scrapeJob;
    const pp = $('scrape-progress');
    const cb = $('cancel-btn');
    if(!j || j.state !== 'running'){
      pp.style.display = j ? '' : 'none';
      cb.style.display = 'none';
      stopPollScrape();
    } else {
      pp.style.display = '';
      cb.style.display = '';
    }
    if(!j) return;
    const total = (j.pages_scraped || 0) + 0;  // we don't pre-emit total; pages tracks done
    $('pages').textContent   = j.pages_scraped || 0;
    $('added').textContent   = j.recipes_added || 0;
    $('skipped').textContent = j.skipped_count || 0;
    $('errors').textContent  = j.error_count   || 0;
    $('last-error').textContent = j.last_error ? '· ' + j.last_error : '';
    // Bar can't show absolute pct without a known total; show a slow pulse on progress
    if(j.state === 'running'){
      const pct = Math.min(95, ((j.pages_scraped || 0) * 7) % 95);
      $('bar').style.width = pct + '%';
    } else if(j.state === 'done'){
      $('bar').style.width = '100%';
    }
    if(j.state === 'done' || j.state === 'cancelled' || j.state === 'failed'){
      // refresh the grid so any new rows appear
      refreshSearch();
    }
  }

  function pollScrape(){ if(!scrapePoll) scrapePoll = setInterval(fetchScrapeStatus, 2000); }
  function stopPollScrape(){ if(scrapePoll){ clearInterval(scrapePoll); scrapePoll = null; } }

  // Initial paint
  paintScrape();
  if(scrapeJob && scrapeJob.state === 'running') pollScrape();
  refreshSearch();
</script>

{% endblock %}