/*!
Theme Name: Aximo
Theme URI: https://favdevs.com/demos/wp/aximo
Author: mthemeus
Author URI: https://themeforest.net/user/mthemeus
Description: A premium WordPress theme for Creative Agency, Digital Marketing Agency, Seo , Services and many more
Version: 1.0.4
Tested up to: 6.4.2
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE    
Text Domain: aximo
Tags: agency, creative agency, digital agency, digital marketing, digital marketing agency, digital marketing theme, marketing
*/


/**
 * Cybalgo Audit – UI/Graphs (EN) with Chart.js + Progress Bar
 */
(function () {
  function el(id) { return document.getElementById(id); }
  function qs(sel, root=document) { return root.querySelector(sel); }
  function escapeHtml(str){ return (str||'').toString().replace(/[&<>"']/g, s=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[s])); }

  let lastReport = null;
  let scoreCharts = {};
  let metricsChart = null;

  // -------- Progress bar helpers --------
  let progressTimer = null;
  let currentProgress = 0;

  function showProgress(label){
    const box = el('cyb-progress'); if (!box) return;
    box.hidden = false; box.setAttribute('aria-hidden','false');
    qs('.label', box).textContent = label || 'Preparing audit…';
    setProgress(0);
  }
  function setProgress(p){
    currentProgress = Math.max(0, Math.min(100, p));
    const box = el('cyb-progress'); if (!box) return;
    const fill = qs('.fill', box); if (!fill) return;
    fill.style.width = currentProgress + '%';
  }
  function startProgressSimulation(maxBeforeFinish=90, totalMs=60000){
    stopProgressSimulation(); // reset
    const stepMs = 300;
    const steps = Math.ceil(totalMs/stepMs);
    let tick = 0;
    progressTimer = setInterval(()=>{
      tick++;
      // ease-out curve to approach maxBeforeFinish
      const ratio = Math.min(1, tick/steps);
      const eased = 1 - Math.pow(1 - ratio, 1.8);
      const target = Math.floor(maxBeforeFinish * eased);
      setProgress(Math.max(currentProgress, target));
    }, stepMs);
  }
  function stopProgressSimulation(finalText, success=true){
    if (progressTimer){ clearInterval(progressTimer); progressTimer = null; }
    if (success){ setProgress(100); }
    const box = el('cyb-progress'); if (!box) return;
    if (finalText) qs('.label', box).textContent = finalText;
    // hide after a short delay on success
    if (success){
      setTimeout(()=>{ box.hidden = true; box.setAttribute('aria-hidden','true'); }, 600);
    }
  }

  // -------- Charts --------
  function parseSeconds(displayValue){
    if (!displayValue && displayValue !== 0) return null;
    const v = (displayValue+'').trim().toLowerCase();
    if (v.endsWith('ms')) return Number(v.replace('ms','').trim())/1000;
    if (v.endsWith('s'))  return Number(v.replace('s','').trim());
    const num = Number(v);
    return isNaN(num) ? null : num;
  }
  function scoreColor(score){
    if (score == null) return '#9CA3AF';
    if (score >= 90)   return '#10B981';
    if (score >= 50)   return '#F59E0B';
    return '#EF4444';
  }
  function destroyCharts(){
    Object.values(scoreCharts).forEach(ch => ch && ch.destroy());
    scoreCharts = {};
    if (metricsChart) { metricsChart.destroy(); metricsChart = null; }
  }
  function labelize(key){
    switch(key){
      case 'performance': return 'Performance';
      case 'seo': return 'SEO';
      case 'accessibility': return 'Accessibility';
      case 'best_practices': return 'Best Practices';
      default: return key;
    }
  }
  function renderScoreGauges(scores){
    ['performance','seo','accessibility','best_practices'].forEach(k => {
      const canvas = el('cyb-g-'+k);
      if (!canvas || !window.Chart) return;
      const v = scores[k] ?? null;
      const col = scoreColor(v);
      const data = v==null ? [0,100] : [v, 100 - v];

      if (scoreCharts[k]) { scoreCharts[k].destroy(); }
      scoreCharts[k] = new Chart(canvas, {
        type: 'doughnut',
        data: {
          labels: [labelize(k), ''],
          datasets: [{
            data,
            backgroundColor: [col, '#E5E7EB'],
            borderWidth: 0,
            cutout: '70%'
          }]
        },
        options: { responsive: true, plugins: { legend: { display: false }, tooltip: { enabled: false } } }
      });
    });
  }
  function renderMetrics(met){
    const ctx = el('cyb-metrics'); if (!ctx || !window.Chart) return;
    const fcp = parseSeconds(met.FCP), lcp = parseSeconds(met.LCP),
          tti = parseSeconds(met.TTI), tbt = parseSeconds(met.TBT),
          cls = parseSeconds(met.CLS);

    const labels = ['FCP (s)','LCP (s)','TTI (s)','TBT (s)','CLS'];
    const values = [fcp,lcp,tti,tbt,cls].map(v => (v==null?0:v));

    if (metricsChart) metricsChart.destroy();
    metricsChart = new Chart(ctx, {
      type: 'bar',
      data: { labels, datasets: [{ data: values, backgroundColor: '#3273ff' /* brand blue */ }] },
      options: { responsive: true, scales: { y:{ beginAtZero:true } }, plugins:{ legend:{ display:false } } }
    });
  }
  function buildResultsUI(container, data){
    const s   = data.data?.scores || {};
    const met = data.data?.metrics || {};
    const chk = data.checks || {};
    const recs= data.recs || [];
    const ai  = data.ai || null;
    const cmp = data.competitors || {};

    container.innerHTML = `
      <section class="cyb-section">
        <h4 class="cyb-h4">Scores</h4>
        <div class="cyb-scores-grid">
          ${['performance','seo','accessibility','best_practices'].map(k => `
            <div class="cyb-score-card">
              <canvas id="cyb-g-${k}" width="140" height="140" aria-label="${k} gauge"></canvas>
              <div class="cyb-score-label">
                <span class="cyb-score-name">${labelize(k)}</span>
                <span class="cyb-score-value">${s[k] != null ? s[k]+'/100' : 'N/A'}</span>
              </div>
            </div>
          `).join('')}
        </div>
      </section>

      <section class="cyb-section">
        <h4 class="cyb-h4">Key Metrics</h4>
        <div class="cyb-card">
          <canvas id="cyb-metrics" aria-label="Core metrics chart"></canvas>
          <p class="cyb-hint">* Lower is better for FCP, LCP, TTI, TBT, and CLS.</p>
        </div>
      </section>

      <section class="cyb-section">
        <h4 class="cyb-h4">Checks</h4>
        <div class="cyb-card">
          <ul class="cyb-checks">
            <li><span>Meta Description</span> ${chk.meta_description ? '✅' : '❌'}</li>
            <li><span>Open Graph</span> ${chk.og_title ? '✅' : '❌'}</li>
            <li><span>Google Analytics</span> ${chk.google_analytics ? '✅' : '❌'}</li>
            <li><span>Meta Pixel</span> ${chk.facebook_pixel ? '✅' : '❌'}</li>
          </ul>
        </div>
      </section>

      ${Object.keys(cmp).length ? `
      <section class="cyb-section">
        <h4 class="cyb-h4">Competitive Benchmark</h4>
        <div class="cyb-card">
          <ul class="cyb-competitors">
            ${Object.entries(cmp).map(([u,cd]) => cd ? `
              <li><b>${escapeHtml(new URL(u).host)}</b>
              <span>Perf: ${cd.scores.performance ?? 'N/A'}/100 · SEO: ${cd.scores.seo ?? 'N/A'}/100</span></li>` : '').join('')}
          </ul>
        </div>
      </section>` : ''}

      ${recs.length ? `
      <section class="cyb-section">
        <h4 class="cyb-h4">Recommendations</h4>
        <div class="cyb-card"><ol class="cyb-recs">
          ${recs.map(r=>`<li>${escapeHtml(r)}</li>`).join('')}
        </ol></div>
      </section>` : ''}

      ${ai ? `
      <section class="cyb-section">
        <h4 class="cyb-h4">AI Summary</h4>
        <div class="cyb-card"><div class="cyb-ai">${escapeHtml(ai).replace(/\n/g,'<br>')}</div></div>
      </section>` : ''}

      <div class="cyb-cta">
        <a class="cyb-btn" href="/contact" aria-label="Contact Cybalgo">🚀 Improve my score with Cybalgo</a>
      </div>
    `;

    renderScoreGauges(s);
    renderMetrics(met);
  }

  async function runAudit() {
    const url   = el('cyb-audit-url').value.trim();
    const email = el('cyb-audit-email') ? el('cyb-audit-email').value.trim() : '';
    const c1    = el('cyb-audit-competitor1') ? el('cyb-audit-competitor1').value.trim() : '';
    const c2    = el('cyb-audit-competitor2') ? el('cyb-audit-competitor2').value.trim() : '';
    const hp    = el('cyb-audit-website') ? el('cyb-audit-website').value.trim() : ''; // honeypot

    const status = el('cyb-audit-status');
    const out = el('cyb-audit-result');
    const btnPdf = el('cyb-audit-pdf');

    if(!url){ status.textContent = 'Please enter a valid URL.'; return; }

    status.textContent = 'Analyzing…';
    out.hidden = true; out.innerHTML = ''; if (btnPdf) btnPdf.disabled = true;
    destroyCharts();

    // progress bar
    showProgress('Preparing audit…');
    startProgressSimulation(90, 60000);

    try {
      const res = await fetch(CybalgoAudit.restUrl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-WP-Nonce': CybalgoAudit.nonce },
        body: JSON.stringify({ url, email, competitor1:c1, competitor2:c2, website: hp })
      });
      const data = await res.json();
      if(!res.ok){ throw new Error(data && data.error ? data.error : 'Unknown error'); }

      lastReport = data;
      status.textContent = '';
      out.hidden = false;
      if (btnPdf) btnPdf.disabled = false;

      stopProgressSimulation('Done', true);
      buildResultsUI(out, data);
    } catch(err){
      status.textContent = 'Error: ' + (err?.message || String(err));
      stopProgressSimulation('Error while analyzing', false);
    }
  }

  async function exportPdf() {
    if (!lastReport) return;
    const status = el('cyb-audit-status');
    status.textContent = 'Generating PDF…';

    try{
      const res = await fetch(CybalgoAudit.pdfUrl, {
        method: 'POST',
        headers: {'Content-Type':'application/json','X-WP-Nonce': CybalgoAudit.nonce},
        body: JSON.stringify({ report: JSON.stringify(lastReport) })
      });
      const data = await res.json();
      if(!res.ok){ throw new Error(data && data.error ? data.error : 'PDF error'); }

      const bytes = atob(data.data);
      const arr = new Uint8Array(bytes.length);
      for (let i=0;i<bytes.length;i++) arr[i] = bytes.charCodeAt(i);
      const mime = data.mime || 'application/pdf';
      const blob = new Blob([arr], {type: mime});
      const url = URL.createObjectURL(blob);

      const a = document.createElement('a');
      a.href = url;
      a.download = data.filename || 'cybalgo-audit.pdf';
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
      status.textContent = '';
    } catch(e) {
      status.textContent = 'PDF error: ' + (e?.message || e);
    }
  }

  document.addEventListener('click', (e) => {
    if (e.target?.id === 'cyb-audit-run') { e.preventDefault(); runAudit(); }
    if (e.target?.id === 'cyb-audit-pdf') { e.preventDefault(); exportPdf(); }
  });
})();