static/help-proof.js

// ── HELP PROOF SCREEN ──────────────────────────────────────────────────────
(function() {
  let helpProofAnimalId = null;
  let helpProofSelType  = 'fed';

  window.openHelpProofScreen = function() {
    helpProofAnimalId = window.profileAnimalId;
    helpProofSelType  = 'fed';

    const preview = document.getElementById('help-proof-preview');
    preview.src = ''; preview.classList.add('hidden');
    document.getElementById('help-proof-placeholder').style.display = '';
    document.getElementById('help-proof-ai-badge').classList.add('hidden');
    document.getElementById('help-proof-verified-badge').classList.add('hidden');
    document.getElementById('help-proof-notes').value = '';
    document.getElementById('help-proof-input').value = '';
    document.querySelectorAll('.help-type-chip').forEach(c => c.classList.remove('active'));
    document.querySelector('.help-type-chip[data-type="fed"]').classList.add('active');

    const name = document.getElementById('profile-title').textContent || 'Animal';
    const sub  = document.getElementById('profile-status-text').textContent || '';
    document.getElementById('help-proof-animal-name').textContent = name;
    document.getElementById('help-proof-animal-sub').textContent  = sub;
    const heroSrc = document.getElementById('profile-hero-img').src;
    const thumb   = document.getElementById('help-proof-animal-photo');
    thumb.style.backgroundImage = heroSrc ? 'url(' + heroSrc + ')' : '';
    thumb.style.backgroundSize  = 'cover';

    window.showScreen('help-proof');
  };

  document.getElementById('help-type-chips').addEventListener('click', e => {
    const chip = e.target.closest('.help-type-chip');
    if (!chip) return;
    document.querySelectorAll('.help-type-chip').forEach(c => c.classList.remove('active'));
    chip.classList.add('active');
    helpProofSelType = chip.dataset.type;
  });

  document.getElementById('help-proof-viewfinder').addEventListener('click', () => {
    document.getElementById('help-proof-input').click();
  });

  document.getElementById('help-proof-input').addEventListener('change', async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const preview = document.getElementById('help-proof-preview');
    preview.src = URL.createObjectURL(file);
    preview.classList.remove('hidden');
    document.getElementById('help-proof-placeholder').style.display = 'none';

    const aiBadge       = document.getElementById('help-proof-ai-badge');
    const verifiedBadge = document.getElementById('help-proof-verified-badge');
    aiBadge.classList.remove('hidden');
    document.getElementById('help-proof-ai-text').textContent = 'Verifying with AI…';
    verifiedBadge.classList.add('hidden');

    try {
      const { client, handleFile } = await window.getGradioClient();
      const res  = await client.predict('/analyze_image', { image_path: handleFile(file) });
      const data = res.data[0] || {};

      aiBadge.classList.add('hidden');
      verifiedBadge.classList.remove('hidden');
      const verifiedText = document.getElementById('help-proof-verified-text');

      if (data.error) {
        verifiedBadge.style.background = 'rgba(220,53,69,0.85)';
        verifiedText.textContent = 'No animal detected in photo';
      } else {
        const match = data.similar && data.similar.find(s => s.id === helpProofAnimalId);
        const score = match ? match.score_pct : 0;
        if (score >= 60) {
          verifiedBadge.style.background = 'rgba(56,140,89,0.9)';
          verifiedText.textContent = 'Same animal confirmed';
        } else if (score >= 35) {
          verifiedBadge.style.background = 'rgba(56,140,89,0.75)';
          verifiedText.textContent = 'Likely the same animal';
        } else {
          verifiedBadge.style.background = 'rgba(180,130,0,0.85)';
          verifiedText.textContent = 'Photo added — animal not matched';
        }
      }
    } catch(err) {
      console.warn('AI verify failed:', err);
      document.getElementById('help-proof-ai-badge').classList.add('hidden');
    }
  });

  document.getElementById('help-proof-submit').addEventListener('click', async () => {
    const btn   = document.getElementById('help-proof-submit');
    const notes = document.getElementById('help-proof-notes').value.trim();
    const file  = document.getElementById('help-proof-input').files[0];

    btn.disabled = true;
    btn.innerHTML = '<div class="spinner"></div> Saving…';

    try {
      const { client, handleFile } = await window.getGradioClient();
      const res = await client.predict('/submit_help_proof', {
        animal_id:  helpProofAnimalId,
        help_type:  helpProofSelType,
        notes:      notes,
        image_path: file ? handleFile(file) : null,
      });
      const result = res.data[0] || {};

      if (result.ok) {
        window.showScreen('profile');
        await window.openProfile(helpProofAnimalId);
        const confirmEl = document.getElementById('helped-confirm');
        confirmEl.classList.remove('hidden');
        requestAnimationFrame(() => {
          confirmEl.classList.add('open');
          if (typeof lucide !== 'undefined') lucide.createIcons();
        });
      } else {
        alert('Erro ao registrar. Tente novamente.');
      }
    } catch(err) {
      console.error(err);
      alert('Erro ao registrar. Tente novamente.');
    } finally {
      btn.disabled = false;
      btn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg> Register Help';
    }
  });

  document.getElementById('help-proof-back').addEventListener('click', () => window.showScreen('profile'));
})();