/**
 * RESULTS PAGE SCRIPT (results-calculator.js)
 * Place this in Code Injection > PAGE HEADER for the Results Page
 * Or in a Code Block on the Results page
 */

// Style weights (as per algorithm)
const WEIGHTS = {
  'Sage': {Power: 0.95, Role: 0.25, Structure: 1.0, Persuasion: 0.85, Time: 0.55, Scope: 0.60, Energy: 0.25},
  'Spark': {Power: 0.25, Role: 0.65, Structure: 0.30, Persuasion: 0.75, Time: 0.95, Scope: 0.60, Energy: 0.95},
  'Guide': {Power: 0.50, Role: 1.0, Structure: 0.60, Persuasion: 0.65, Time: 0.50, Scope: 0.60, Energy: 0.55},
  'Rebel': {Power: 0.30, Role: 0.85, Structure: 0.35, Persuasion: 0.75, Time: 0.70, Scope: 0.95, Energy: 0.85},
  'Jester': {Power: 0.20, Role: 0.45, Structure: 0.35, Persuasion: 0.85, Time: 0.60, Scope: 0.45, Energy: 1.0},
  'Weaver': {Power: 0.65, Role: 0.60, Structure: 0.45, Persuasion: 0.55, Time: 0.60, Scope: 1.0, Energy: 0.45}
};

const AXES = ['Power', 'Role', 'Structure', 'Persuasion', 'Time', 'Scope', 'Energy'];
const STYLES = ['Sage', 'Spark', 'Guide', 'Rebel', 'Jester', 'Weaver'];

// Style descriptions
const STYLE_DESCRIPTIONS = {
  'Sage': 'You are a <strong>Sage</strong> storyteller. You bring wisdom, structure, and authority to your narratives. You excel at providing comprehensive insights backed by experience and logic.',
  'Spark': 'You are a <strong>Spark</strong> storyteller. You ignite excitement and energy in your stories. Your narratives are dynamic, fast-paced, and emotionally engaging.',
  'Guide': 'You are a <strong>Guide</strong> storyteller. You lead through example and mentorship. Your stories help others navigate challenges by showing the path forward.',
  'Rebel': 'You are a <strong>Rebel</strong> storyteller. You challenge conventions and push boundaries. Your narratives question the status quo and inspire change.',
  'Jester': 'You are a <strong>Jester</strong> storyteller. You use humor and energy to connect with others. Your stories are memorable, engaging, and often lighten serious moments.',
  'Weaver': 'You are a <strong>Weaver</strong> storyteller. You connect diverse threads into cohesive narratives. You excel at seeing the big picture and bringing elements together.'
};

function identifyStyle(axes) {
  // Validate inputs
  for (let axis of AXES) {
    const key = axis.toLowerCase();
    if (!(key in axes)) {
      return {error: 'Missing axis: ' + axis};
    }
    const val = parseInt(axes[key]);
    if (isNaN(val) || val < 1 || val > 5) {
      return {error: 'Invalid value for ' + axis};
    }
  }
  
  // Compute scores for each style
  const scores = {};
  
  for (let style of STYLES) {
    let sum = 0;
    for (let axis of AXES) {
      const key = axis.toLowerCase();
      sum += WEIGHTS[style][axis] * parseInt(axes[key]);
    }
    scores[style] = Math.round(sum * 10) / 10; // Round to 1 decimal
  }
  
  // Find maximum score
  let maxScore = -Infinity;
  for (let style of STYLES) {
    if (scores[style] > maxScore) {
      maxScore = scores[style];
    }
  }
  
  // Find all styles with max score (for tie-breaking)
  const ties = STYLES.filter(s => scores[s] === maxScore);
  
  let topStyle;
  
  if (ties.length === 1) {
    topStyle = ties[0];
  } else {
    // Tie-breaker: highest single-axis product on strongest weight axis
    let best = null;
    let bestVal = -Infinity;
    
    for (let style of ties) {
      // Find axis with maximum weight for this style
      let maxWeight = -Infinity;
      let maxAxis = null;
      
      for (let axis of AXES) {
        if (WEIGHTS[style][axis] > maxWeight) {
          maxWeight = WEIGHTS[style][axis];
          maxAxis = axis;
        }
      }
      
      const val = WEIGHTS[style][maxAxis] * parseInt(axes[maxAxis.toLowerCase()]);
      
      if (val > bestVal || (val === bestVal && style < best)) {
        bestVal = val;
        best = style;
      }
    }
    
    topStyle = best;
  }
  
  return {
    style: topStyle,
    scores: scores,
    axes: axes
  };
}

function displayResults(result) {
  // Get result container
  const container = document.getElementById('results-container');
  
  if (!container) {
    console.error('Results container not found. Add a Code Block with id="results-container"');
    return;
  }
  
  // Build HTML
  let html = '<div class="diagnostic-results">';
  html += '<h2>Your Storytelling Style</h2>';
  html += '<div class="primary-style">';
  html += '<h3>' + result.style + '</h3>';
  html += '<p>' + STYLE_DESCRIPTIONS[result.style] + '</p>';
  html += '</div>';
  
  html += '<div class="all-scores">';
  html += '<h4>Your Score Breakdown</h4>';
  html += '<ul>';
  
  // Sort styles by score (descending)
  const sortedStyles = STYLES.slice().sort((a, b) => result.scores[b] - result.scores[a]);
  
  for (let style of sortedStyles) {
    const isTop = style === result.style;
    html += '<li class="' + (isTop ? 'top-score' : '') + '">';
    html += '<strong>' + style + ':</strong> ' + result.scores[style];
    html += '</li>';
  }
  
  html += '</ul>';
  html += '</div>';
  
  html += '<div class="drill-offer">';
  html += '<h4>Want to improve your storytelling?</h4>';
  html += '<p>We can send you a personalized 5-minute drill to help you master your ' + result.style + ' style.</p>';
  html += '<button id="request-drill-btn" class="drill-button">Yes, Send Me The 5-Minute Drill</button>';
  html += '</div>';
  
  html += '</div>';
  
  // Add some basic styles
  html += '<style>';
  html += '.diagnostic-results { max-width: 600px; margin: 0 auto; padding: 20px; }';
  html += '.primary-style { background: #f0f8ff; padding: 20px; border-radius: 8px; margin: 20px 0; }';
  html += '.primary-style h3 { color: #2c5282; margin-top: 0; font-size: 2em; }';
  html += '.all-scores { margin: 30px 0; }';
  html += '.all-scores ul { list-style: none; padding: 0; }';
  html += '.all-scores li { padding: 10px; border-bottom: 1px solid #e2e8f0; }';
  html += '.all-scores li.top-score { background: #edf7ed; font-weight: bold; }';
  html += '.drill-offer { background: #fff3cd; padding: 20px; border-radius: 8px; margin: 30px 0; text-align: center; }';
  html += '.drill-button { background: #2c5282; color: white; padding: 12px 24px; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }';
  html += '.drill-button:hover { background: #1e3a5f; }';
  html += '</style>';
  
  container.innerHTML = html;
  
  // Add event listener for drill button
  document.getElementById('request-drill-btn').addEventListener('click', function() {
    const email = result.axes.email;
    
    // You can send this to your backend, or show a confirmation
    alert('Great! We will send the 5-minute drill to: ' + email);
    
    // TODO: Integrate with your email service (e.g., send to backend API)
    // Example:
    // fetch('/api/send-drill', {
    //   method: 'POST',
    //   headers: {'Content-Type': 'application/json'},
    //   body: JSON.stringify({
    //     email: email,
    //     style: result.style,
    //     scores: result.scores
    //   })
    // });
  });
}

// Main execution
document.addEventListener('DOMContentLoaded', function() {
  // Retrieve data from sessionStorage
  const dataStr = sessionStorage.getItem('diagnosticData');
  
  if (!dataStr) {
    // No data found - redirect to form or show error
    const container = document.getElementById('results-container');
    if (container) {
      container.innerHTML = '<div style="text-align:center; padding: 40px;"><h3>No data found</h3><p>Please complete the diagnostic form first.</p><a href="/form">Go to Form</a></div>';
    }
    return;
  }
  
  try {
    const data = JSON.parse(dataStr);
    
    // Calculate results
    const result = identifyStyle(data);
    
    if (result.error) {
      throw new Error(result.error);
    }
    
    // Display results
    displayResults(result);
    
    // Optional: Clear sessionStorage after displaying
    // sessionStorage.removeItem('diagnosticData');
    
  } catch (err) {
    console.error('Error processing results:', err);
    const container = document.getElementById('results-container');
    if (container) {
      container.innerHTML = '<div style="text-align:center; padding: 40px;"><h3>Error</h3><p>There was an error processing your results. Please try again.</p><a href="/form">Go to Form</a></div>';
    }
  }
});