/**
 * UI Rendering — all DOM construction and manipulation
 */
(function () {
  'use strict';

  var App = window.BenchmarkApp;

  var TIER_COLORS = {
    A: { bg: '#E8F5E9', text: '#4CAF50', border: '#4CAF50' },
    B: { bg: '#FFF3E0', text: '#FF9800', border: '#FF9800' },
    C: { bg: '#FFEBEE', text: '#F44336', border: '#F44336' }
  };

  var SUB_TIER_LABELS = ['C-', 'C', 'C+', 'B-', 'B', 'B+', 'A-', 'A', 'A+'];
  // Map sub-tier index from thresholds (0=A+, 8=C-) to scale position (0=C-, 8=A+)
  function subTierToScalePosition(thresholdIndex) {
    return 8 - thresholdIndex;
  }

  // --- Fallback Screen ---
  App.renderFallbackScreen = function () {
    var app = document.getElementById('app');
    app.innerHTML =
      '<div class="fallback-screen">' +
        '<div class="fallback-icon">' +
          '<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#FF5223" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
            '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>' +
          '</svg>' +
        '</div>' +
        '<h1>Benchmark Report Unavailable</h1>' +
        '<p>Please fill out the benchmark form first to generate your personalized report.</p>' +
        '<a href="https://netpeak.us/blog/amazon-benchmark-tool/" class="btn-primary">Go to Benchmark Form</a>' +
      '</div>';
  };

  // --- Tier Block ---
  App.renderTierBlock = function (scoring, params) {
    var section = document.getElementById('tier-section');
    var tier = scoring.tier;
    var colors = TIER_COLORS[tier];
    var industryLabel = App.INDUSTRY_LABELS[params.industry];
    var scalePos = subTierToScalePosition(scoring.subTierIndex);

    // Build scale segments HTML
    var scaleHtml = '<div class="scale-bar" role="img" aria-label="Tier scale showing your position at ' + scoring.subTier + '">';
    for (var i = 0; i < 9; i++) {
      var isActive = i === scalePos;
      scaleHtml += '<div class="scale-segment' + (isActive ? ' active' : '') + '" data-index="' + i + '">' +
        '<span class="scale-label">' + SUB_TIER_LABELS[i] + '</span>' +
      '</div>';
    }
    scaleHtml += '</div>';

    // YOU marker
    var markerLeft = ((scalePos + 0.5) / 9 * 100).toFixed(1);
    var markerHtml =
      '<div class="you-marker-container">' +
        '<div class="you-marker" style="left:' + markerLeft + '%">' +
          '<span class="you-label">YOU</span>' +
          '<div class="you-arrow"></div>' +
        '</div>' +
      '</div>';

    // Metrics summary
    var metricsHtml = '<div class="metrics-grid">';
    var metricDisplays = [
      { key: 'revenue', label: 'Revenue', displayValue: App.REVENUE_LABELS[params.revenue] },
      { key: 'budget',  label: 'Marketing Budget', displayValue: App.BUDGET_LABELS[params.budget] },
      { key: 'asins',   label: 'ASINs', displayValue: params.asins.toLocaleString() },
      { key: 'growth',  label: 'YoY Growth', displayValue: App.GROWTH_LABELS[params.growth] }
    ];

    for (var j = 0; j < metricDisplays.length; j++) {
      var m = metricDisplays[j];
      var mData = scoring.metrics[m.key];
      var mColors = TIER_COLORS[mData.tierLetter];
      metricsHtml +=
        '<div class="metric-item">' +
          '<span class="metric-label">' + m.label + '</span>' +
          '<span class="metric-value">' + m.displayValue + '</span>' +
          '<span class="metric-badge" style="background:' + mColors.bg + ';color:' + mColors.text + '">' + mData.subTier + '</span>' +
        '</div>';
    }
    metricsHtml += '</div>';

    section.innerHTML =
      '<div class="tier-block">' +
        '<div class="tier-header">' +
          '<p class="tier-intro">' + params.company + ' in <strong>' + industryLabel + '</strong></p>' +
          '<div class="tier-display">' +
            '<div class="tier-circle" style="background:' + colors.bg + ';color:' + colors.text + ';border-color:' + colors.border + '">' +
              '<span class="tier-letter">' + tier + '</span>' +
            '</div>' +
            '<div class="tier-info">' +
              '<span class="tier-sub">' + scoring.subTier + '</span>' +
              '<span class="tier-score">Score: ' + scoring.weightedScore.toFixed(2) + '</span>' +
            '</div>' +
          '</div>' +
        '</div>' +
        '<div class="scale-wrapper">' +
          markerHtml +
          scaleHtml +
        '</div>' +
        metricsHtml +
      '</div>';
  };

  // --- Recommendation Cards ---
  App.renderRecommendationCards = function (recommendations, tier) {
    var section = document.getElementById('recommendations-section');
    var leverOrder = ['ppc', 'listing', 'seo', 'account'];

    // Sort by rank
    leverOrder.sort(function (a, b) {
      return recommendations[a].rank - recommendations[b].rank;
    });

    var html = '<h2 class="section-title">Growth Recommendations</h2><div class="cards-grid">';

    for (var i = 0; i < leverOrder.length; i++) {
      var key = leverOrder[i];
      var rec = recommendations[key];
      var config = App.LEVER_CONFIG[key];
      var desc = App.LEVER_DESCRIPTIONS[key][tier];
      var fillPct = Math.min(100, (rec.score / 0.75 * 100)).toFixed(0);

      var priorityClass = 'priority-' + rec.priority.toLowerCase();

      html +=
        '<div class="rec-card" style="border-top-color:' + config.color + '">' +
          '<div class="rec-card-header">' +
            '<span class="rec-rank">#' + rec.rank + '</span>' +
            '<span class="rec-priority ' + priorityClass + '">' + rec.priority + '</span>' +
          '</div>' +
          '<h3 class="rec-title" style="color:' + config.color + '">' + config.label + '</h3>' +
          '<p class="rec-desc">' + desc + '</p>' +
          '<div class="rec-progress-bar">' +
            '<div class="rec-progress-fill" style="width:' + fillPct + '%;background:' + config.color + '"></div>' +
          '</div>' +
        '</div>';
    }

    html += '</div>';
    section.innerHTML = html;
  };

  // --- Placeholder Shimmer Tables ---
  App.renderPlaceholderTables = function () {
    var section = document.getElementById('top3-section');
    var tiers = ['A', 'B', 'C'];
    var html = '';

    for (var t = 0; t < tiers.length; t++) {
      var colors = TIER_COLORS[tiers[t]];
      html +=
        '<div class="top3-table-block">' +
          '<h3 class="top3-header" style="color:' + colors.text + '">Segment ' + tiers[t] + ' — Top Players</h3>' +
          '<div class="shimmer-table">' +
            '<div class="shimmer-row shimmer-head"><div class="shimmer-cell"></div></div>' +
            '<div class="shimmer-row"><div class="shimmer-cell"></div></div>' +
            '<div class="shimmer-row"><div class="shimmer-cell"></div></div>' +
            '<div class="shimmer-row"><div class="shimmer-cell"></div></div>' +
          '</div>' +
        '</div>';
    }

    section.innerHTML = html;
  };

  // --- Email Gate Overlay ---
  App.renderEmailGate = function () {
    var container = document.getElementById('gate-overlay');
    container.innerHTML =
      '<div class="gate-content" role="dialog" aria-label="Unlock full report">' +
        '<div class="gate-icon">' +
          '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FF5223" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
            '<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>' +
          '</svg>' +
        '</div>' +
        '<h2 class="gate-title">Unlock Your Full Benchmark Report</h2>' +
        '<p class="gate-subtitle">Enter your email to see top industry players and detailed analysis</p>' +
        '<form id="email-form" novalidate>' +
          '<div class="gate-input-wrap">' +
            '<input type="email" id="gate-email" class="gate-input" placeholder="your@email.com" required aria-label="Email address" autocomplete="email">' +
            '<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off">' +
          '</div>' +
          '<div id="gate-error" class="gate-error" role="alert"></div>' +
          '<button type="submit" class="btn-primary gate-btn" id="gate-submit">Unlock Full Report</button>' +
        '</form>' +
        '<p class="gate-disclaimer">We\'ll send you a copy. Your data is handled per our Privacy Policy.</p>' +
      '</div>';
  };

  // --- Top-3 Tables (real data) ---
  App.renderTop3Tables = function (topCompanies, userCompany) {
    var section = document.getElementById('top3-section');
    var tiers = ['A', 'B', 'C'];
    var html = '';

    for (var t = 0; t < tiers.length; t++) {
      var tierKey = tiers[t];
      var companies = topCompanies[tierKey] || [];
      var colors = TIER_COLORS[tierKey];

      html +=
        '<div class="top3-table-block">' +
          '<h3 class="top3-header" style="color:' + colors.text + '">Segment ' + tierKey + ' — Top Players</h3>' +
          '<div class="top3-table-wrap">' +
            '<table class="top3-table" role="table">' +
              '<thead><tr>' +
                '<th>#</th><th>Brand</th><th>Revenue</th><th>ASINs</th><th>YoY Growth</th><th>Ad Budget</th>' +
              '</tr></thead><tbody>';

      for (var r = 0; r < companies.length; r++) {
        var c = companies[r];
        var isUser = userCompany && c.brand.toLowerCase() === userCompany.toLowerCase();
        html +=
          '<tr' + (isUser ? ' class="highlight-row"' : '') + '>' +
            '<td>' + c.rank + '</td>' +
            '<td>' + c.brand + (c.parent ? ' <span class="parent-label">(' + c.parent + ')</span>' : '') + (isUser ? ' <span class="you-badge">YOU</span>' : '') + '</td>' +
            '<td>' + c.revenue + '</td>' +
            '<td>' + c.asins + '</td>' +
            '<td>' + c.yoy + '</td>' +
            '<td>' + c.budget + '</td>' +
          '</tr>';
      }

      html += '</tbody></table></div></div>';
    }

    section.innerHTML = html;
  };

  // --- Blur Control ---
  App.applyBlur = function () {
    var gated = document.getElementById('gated-content');
    gated.classList.add('blurred');
    document.getElementById('gate-overlay').classList.add('visible');
  };

  App.removeBlur = function () {
    var gated = document.getElementById('gated-content');
    gated.classList.remove('blurred');
    document.getElementById('gate-overlay').classList.remove('visible');
    document.querySelector('.gated-wrapper').classList.add('unlocked');
  };

  // --- Loading Spinner ---
  App.showSpinner = function () {
    var btn = document.getElementById('gate-submit');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner"></span> Unlocking...';
  };

  App.hideSpinner = function () {
    var btn = document.getElementById('gate-submit');
    btn.disabled = false;
    btn.textContent = 'Unlock Full Report';
  };

  // --- Gate Error Message ---
  App.showGateError = function (msg) {
    document.getElementById('gate-error').textContent = msg;
  };

  App.clearGateError = function () {
    document.getElementById('gate-error').textContent = '';
  };

  // --- Fallback message for failed webhook ---
  App.showFallbackMessage = function (email) {
    var section = document.getElementById('top3-section');
    section.innerHTML =
      '<div class="fallback-message">' +
        '<p>Your full report with industry leaders will be sent to <strong>' + email + '</strong> shortly.</p>' +
      '</div>';
  };
})();