// view.js
// Pure view functions

/**
 * Pure view functions for the application.
 *
 * Why pure functions returning HTML strings? Because Elm does it, tbh.
 * - Keeps rendering logic stateless and easy to test.
 * - Ensures the UI is always a direct function of state, which should in theory totally avoid bugs from incremental DOM updates.
 * - Using template literals is minimal and browser-native, with no dependencies, and is fun.
 *
 * Why escape output?
 * - Prevents XSS and ensures all user/content data is safely rendered.
 *
 * Why semantic/accessible HTML?
 * - Ensures the app is usable for all users, including those using assistive tech, and is easy to reason about.
 */
/**
 * Render the app UI as an HTML string
 * @param {object} state
 * @returns {string}
 */
export function view(state) {
  return `
    <header class="app-header">
      <h1>Baba Yaga's PokéDex</h1>
    </header>
    <container>
      <form id="search-form" autocomplete="off">
        <label for="pokemon-query">Pokémon Name (or number)</label>
        <input id="pokemon-query" type="text" value="${escape(state.query)}" placeholder="e.g. eevee" aria-label="Pokémon Name" required />
        <button type="submit" ${state.loading ? 'disabled' : ''}>${state.loading ? 'Loading...' : 'Search'}</button>
      </form>
      ${state.error ? `<div class="error" role="alert" tabindex="-1">${escape(state.error)}</div>` : ''}
      
      ${state.pokemon ? renderPokemonResult(state.pokemon) : ''}
      ${state.pokemon ? '<div class="workflow-arrow">⬇</div>' : ''}
      ${state.evolutionChain ? renderEvolutionSection(state) : ''}
      ${state.evolutionChain ? '<div class="workflow-arrow">⬇</div>' : ''}
      ${renderBabaYagaSection(state)}
    </container>
  `;
}

function renderPokemonResult(pokemon) {
  return `
    <div class="result">
      <h2>${capitalize(pokemon.name)} (#${pokemon.id})</h2>
      <img class="pokemon-sprite" src="${pokemon.sprites.front_default}" alt="${escape(pokemon.name)} sprite" />
      <ul>
        <li>Type: <b>${pokemon.types.map(t => capitalize(escape(t.type.name))).join(', ')}</b></li>
        <li>Height: <b>${pokemon.height / 10} m</b></li>
        <li>Weight: <b>${pokemon.weight / 10} kg</b></li>
      </ul>
    </div>
  `;
}

function renderEvolutionSection(state) {
  return `
    <div class="evolution-section">
      <h3>Evolution Chain</h3>
      ${renderEvolutionTree(state.evolutionChain)}
    </div>
  `;
}

function renderEvolutionTree(evolutionChain) {
  if (!evolutionChain || !evolutionChain.evolutionChain || !evolutionChain.evolutionChain.chain) {
    return '<p>No evolution data available.</p>';
  }

  const chain = evolutionChain.evolutionChain.chain;
  let html = '<div class="evolution-tree">';
  
  // Render the base species
  html += `<div class="evolution-stage base">`;
  html += `<div class="pokemon-node">${capitalize(chain.species.name)}</div>`;
  html += `</div>`;
  
  // Render evolution stages
  if (chain.evolves_to && chain.evolves_to.length > 0) {
    html += renderEvolutionStages(chain.evolves_to, 1);
  }
  
  html += '</div>';
  return html;
}

function renderEvolutionStages(evolutions, level) {
  if (!evolutions || evolutions.length === 0) return '';
  
  let html = `<div class="evolution-stage level-${level}">`;
  
  evolutions.forEach((evolution, index) => {
    html += '<div class="evolution-branch">';
    
    // Evolution details
    if (evolution.evolution_details && evolution.evolution_details.length > 0) {
      const detail = evolution.evolution_details[0];
      html += `<div class="evolution-detail">`;
      html += `<span class="evolution-method">${capitalize(detail.trigger.name)}`;
      if (detail.min_level) {
        html += ` (Level ${detail.min_level})`;
      }
      html += `</span>`;
      html += `</div>`;
    }
    
    // Pokemon node
    html += `<div class="pokemon-node">${capitalize(evolution.species.name)}</div>`;
    
    // Recursive evolution stages
    if (evolution.evolves_to && evolution.evolves_to.length > 0) {
      html += renderEvolutionStages(evolution.evolves_to, level + 1);
    }
    
    html += '</div>';
  });
  
  html += '</div>';
  return html;
}

function renderBabaYagaSection(state) {
  return `
    <div class="baba-yaga-section">
      <h3>Baba Yaga Data Transformation</h3>
      <div class="script-editor">
        <label for="baba-yaga-script">Transformation Script:</label>
        <textarea 
          id="baba-yaga-script" 
          placeholder="Write your Baba Yaga script here..."
          rows="8"
        >${escape(state.babaYagaScript)}</textarea>
        <div class="script-controls">
          <button id="execute-script" type="button" ${!state.evolutionChain || !state.babaYagaScript.trim() ? 'disabled' : ''}>
            Execute Script
          </button>
          <button id="clear-script" type="button">Clear</button>
          <select id="example-scripts">
            <option value="">Load Example...</option>
            <option value="Basic Evolution Stages">Basic Evolution Stages</option>
            <option value="Evolution Methods">Evolution Methods</option>
            <option value="Filter by Evolution Method">Filter by Evolution Method</option>
          </select>
        </div>
        ${!state.evolutionChain ? '<p class="help-text">💡 Search for a Pokémon to automatically load its evolution chain and enable script execution.</p>' : ''}
        ${state.evolutionChain && !state.babaYagaScript.trim() ? '<p class="help-text">💡 Write a Baba Yaga script or load an example to enable execution.</p>' : ''}
      </div>
      
      ${state.scriptError ? `<div class="script-error" role="alert">${escape(state.scriptError)}</div>` : ''}
      ${state.scriptOutput ? renderScriptOutput(state.scriptOutput) : ''}
    </div>
  `;
}

function renderScriptOutput(scriptOutput) {
  let html = '<div class="script-output">';
  html += '<h4>Script Results:</h4>';
  
  // Display emitted data
  if (scriptOutput.emitted && Object.keys(scriptOutput.emitted).length > 0) {
    html += '<div class="emitted-data">';
    html += '<h5>Emitted Data:</h5>';
    Object.entries(scriptOutput.emitted).forEach(([event, data]) => {
      html += `<div class="emitted-event">`;
      html += `<h6>${escape(event)}:</h6>`;
      html += `<pre>${escape(JSON.stringify(data, null, 2))}</pre>`;
      html += `</div>`;
    });
    html += '</div>';
  }
  
  // Display script result
  if (scriptOutput.result !== undefined) {
    html += '<div class="script-result">';
    html += '<h5>Script Result:</h5>';
    html += `<pre>${escape(JSON.stringify(scriptOutput.result, null, 2))}</pre>`;
    html += '</div>';
  }
  
  html += '</div>';
  return html;
}

function escape(str) {
  /**
   * Escapes HTML special characters to prevent XSS.
   *
   * Why escape here? Keeps all rendering safe by default, so no accidental injection is possible.
   */
  return String(str).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}