worddex.js

// worddex.js - Handles WordDex Display, Search, and Sort

let currentSort = 'alpha';
let activeFilters = new Set();
let wordData = null;
// Remove duplicate declaration of EVO_COLORS if Evolution.colors is present
// We need to be careful not to redeclare if already in scope (though 'const' is block scoped, these are global scripts)
// Best approach: Use a different name for local fallback or check window
const EVO_COLORS_LOCAL = {
    1: '#FF7043',
    2: '#4FC3F7',
    3: '#FFD700',
    4: '#E1BEE7'
};

const EVO_STARS_LOCAL = {
    1: '★',
    2: '★★',
    3: '★★★',
    4: '✧'
};

const EVO_COLORS_REF = (typeof Evolution !== 'undefined' && Evolution.colors) ? Evolution.colors : EVO_COLORS_LOCAL;
const EVO_STARS_REF = (typeof Evolution !== 'undefined' && Evolution.stars) ? Evolution.stars : EVO_STARS_LOCAL;

let searchQuery = '';

const typeMap = {
  noun: 'type_n',
  verb: 'type_v',
  adjective: 'type_adj',
  adverb: 'type_adv',
  pronoun: 'type_p',
  preposition: 'type_pre',
  conjunction: 'type_conj',
  interjection: 'type_interj'
};

const rarityOrder = {
  common: 1,
  uncommon: 2,
  rare: 3,
  epic: 4,
  legendary: 5,
  mythic: 6,
  god: 7
};

const rarityColors = {
  common: '#ebebeb',
  uncommon: '#a1ff96',
  rare: '#96c7ff',
  epic: '#b996ff',
  legendary: '#fffa96',
  mythic: '#ff6969',
  god: 'linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)'
};

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function sortEntries(entries, sortType) {
  switch(sortType) {
    case 'alpha':
      return entries.sort((a, b) => a[0].localeCompare(b[0]));

    case 'recent':
      return entries.sort((a, b) => {
        const timeA = a[1].timestamp || 0;
        const timeB = b[1].timestamp || 0;
        return timeB - timeA;
      });

    case 'rarity':
      return entries.sort((a, b) => {
        const rarityA = rarityOrder[a[1].rarity] ?? 3;
        const rarityB = rarityOrder[b[1].rarity] ?? 3;
        if (rarityA !== rarityB) {
          return rarityA - rarityB;
        }
        return a[0].localeCompare(b[0]);
      });

    case 'tag':
      return entries.sort((a, b) => {
        const tagsA = a[1].tags || [];
        const tagsB = b[1].tags || [];
        
        // Put tagged items first
        if (tagsA.length > 0 && tagsB.length === 0) return -1;
        if (tagsA.length === 0 && tagsB.length > 0) return 1;
        
        // Sort by first tag alpha
        if (tagsA.length > 0 && tagsB.length > 0) {
           const tagComp = tagsA[0].localeCompare(tagsB[0]);
           if (tagComp !== 0) return tagComp;
        }
        
        return a[0].localeCompare(b[0]);
      });

    default:
      return entries;
  }
}

function displayWordDex(sortType = 'alpha') {
      // Save Persistent Sort
      chrome.storage.local.set({ lastSort: currentSort });

      chrome.storage.local.get(["wordDex", "achievements", "streakData", "badges"], (data) => {
    if (chrome.runtime.lastError) {
      console.error('Storage error:', chrome.runtime.lastError);
      displayError("Error loading word collection. Please try again.");
      return;
    }

    try {
      const dex = data.wordDex || {};
      const stats = data.achievements || {};
      const dexDiv = document.getElementById("dex");
      const statsDiv = document.getElementById("stats");

      if (!dexDiv || !statsDiv) {
        console.error('Required DOM elements not found');
        return;
      }

      wordData = dex;
      dexDiv.innerHTML = '';

      let entries = Object.entries(dex);

      // Filter by Search Query
      if (searchQuery) {
        entries = entries.filter(([word, info]) => {
          const searchLower = searchQuery.toLowerCase();
          return word.toLowerCase().includes(searchLower) ||
                 (info.origin && info.origin.toLowerCase().includes(searchLower));
        });
      }

      // Filter by Tags (Multi-select OR logic)
      if (activeFilters.size > 0) {
          entries = entries.filter(([word, info]) => {
              // Check if word has ANY of the active filters
              // 1. Check Rarity
              if (info.rarity && activeFilters.has(info.rarity)) return true;
              
              // 2. Check Tags
              if (info.tags) {
                  return info.tags.some(tag => activeFilters.has(tag));
              }
              
              return false;
          });
      }
          
        // Show filter indicator if any filter is active
        if (activeFilters.size > 0) {
            const filterMsg = document.createElement('div');
            filterMsg.className = 'filter-indicator';
            
            const filterNames = Array.from(activeFilters).map(filter => {
                // Check if it's a rarity or type and translate
                const lower = filter.toLowerCase();
                const rarityKey = lower.toUpperCase(); // COMMON, RARE, etc.
                
                // Map full type name to key
                if (typeMap[lower]) {
                    return t(typeMap[lower]);
                }
                
                // Check Rarities
                const rarities = ['common', 'uncommon', 'rare', 'epic', 'legendary', 'mythic', 'god'];
                if (rarities.includes(lower)) {
                    return t(rarityKey);
                }
                
                return filter;
            }).join(', ');
            
            const displayNames = filterNames.length > 30 ? filterNames.substring(0, 30) + '...' : filterNames;
            
            filterMsg.innerHTML = `<span>${t('filterByTag')}: <strong>${displayNames}</strong></span> <button id="clearFilters">${t('clearFilter')}</button>`;
            dexDiv.appendChild(filterMsg);
          
          // We need to attach event after appending
          setTimeout(() => {
              const clearBtn = document.getElementById('clearFilters');
              if(clearBtn) clearBtn.onclick = () => {
                  activeFilters.clear();
                  displayWordDex(currentSort);
              };
          }, 0);
      }

      entries = sortEntries(entries, sortType);

      // Variables for grouping
      let lastGroup = null;

      if (entries.length === 0 && searchQuery) {
        dexDiv.innerHTML = `<p style="color: gray; text-align: center; padding: 20px;">${t('noSearchResults')}</p>`;
      } else if (entries.length === 0) {
        dexDiv.innerHTML = `<p style="color: gray; text-align: center; padding: 20px;">${t('noWordsMessage')}</p>`;
      } else {
    // --- Rarity Styles ---
    // (rarityColors is now global)
    
    // Helper to get specialized card class/style
    const getCardStyle = (tags, evolution) => {
        let classes = '';
        if (tags) {
            if (tags.includes('tech')) classes += ' tech-card';
            else if (tags.includes('bio')) classes += ' bio-card';
            else if (tags.includes('chem')) classes += ' chem-card';
            else if (tags.includes('astro')) classes += ' astro-card';
        }
        
        if (evolution && evolution.stage > 0) {
            classes += ` evo-stage-${evolution.stage}`;
        }
        return classes;
    };

    entries.forEach(([word, info]) => {
          if (!info || typeof info !== 'object') {
            console.warn(`Invalid data for word: ${word}`);
            return;
          }

          // Handle Group Headers for Tag Sort
          if (sortType === 'tag') {
              const currentTags = info.tags || [];
              // Use first tag as group, or 'Untagged'
              const groupName = currentTags.length > 0 ? currentTags[0] : 'Untagged';
              
              if (groupName !== lastGroup) {
                  const header = document.createElement('div');
                  header.className = 'dex-group-header';
                  if (groupName === 'Untagged') header.classList.add('untagged');
                  header.textContent = groupName === 'Untagged' ? 'Untagged' : groupName; // Could translate 'Untagged'
                  dexDiv.appendChild(header);
                  lastGroup = groupName;
              }
          }

          const div = document.createElement("div");
          div.className = "word-entry" + getCardStyle(info.tags, info.evolution);
          div.style.position = 'relative';
          div.style.paddingRight = '60px'; // Prevent text overlap with delete button

          // specialized background logic for Tech and Chem (Refactored to CSS classes)
          // Classes .tech-card and .chem-card are now applied in getCardStyle based on tags
          // Just need to apply overrides that are dynamic or not covered by standard CSS
          
          /* Inline styles removed in favor of CSS classes in popup.html */
          
          // Evolution Glow Override
          // REFACTOR: Use text-shadow Aura instead of box-shadow Border
          if (info.evolution && info.evolution.stage > 0) {
              const evoColor = EVO_COLORS_REF[info.evolution.stage] || '#CD7F32'; // Use shared constant
              
              // Apply aura to the title text
              // We need to wait for wordStrong to be created? No, we can set style on it later.
              // Actually, wordStrong is created below. Let's set a flag or style it after creation.
              
              // Remove old box-shadow logic if present (it was applied to 'div')
              div.style.boxShadow = 'none'; 
              
              // Add a subtle background tint if not Tech/Chem
              if (!info.tags || (!info.tags.includes('tech') && !info.tags.includes('chem'))) {
                  // Very subtle gradient to hint at evolution without overwhelming
                  div.style.background = `linear-gradient(135deg, rgba(255,255,255,0.8) 0%, ${evoColor}22 100%)`;
              }
          }

          const rarity = info.rarity || 'common';
          const origin = info.origin || info.definition || 'No information available';

          const wordStrong = document.createElement('strong');
          
          // Name + Stars
          let displayName = word;
          if (info.evolution && info.evolution.stage > 0) {
              const stars = EVO_STARS_REF[info.evolution.stage] || '★'.repeat(info.evolution.stage);
              displayName += ` ${stars}`;
              
              // AURA EFFECT
              const evoColor = EVO_COLORS_REF[info.evolution.stage] || '#CD7F32';
              // Multiple shadows for "Aura" effect
              wordStrong.style.textShadow = `0 0 5px ${evoColor}, 0 0 10px ${evoColor}, 0 0 20px ${evoColor}66`;
              // Make text slightly larger or bolder?
              wordStrong.style.fontWeight = '900';
          }
          wordStrong.textContent = displayName;
          
          wordStrong.style.overflowWrap = 'anywhere'; // Ensure long words wrap
          wordStrong.style.display = 'block'; // Ensure it takes width to wrap properly

          
          // Default color logic moved below to avoid override
          // wordStrong.style.color = rarityColors[rarity] || '#6b5b95';
          // if (rarity === 'common') {
          //   wordStrong.style.color = '#9b9b9b';
          // }
          
          // Project Moon Character Colors
          const pmColors = {
              'yisang': '#d4dfe8',
              'faust': '#ffbfb4',
              'donquixote': '#FFEF23',
              'ryoshu': '#cf0000',
              'meursault': '#293b95',
              'honglu': '#5BFFDE',
              'heathcliff': '#4e3076',
              'ishmael': '#ff9500',
              'rodya': '#820000',
              'dante': '#b01c37',
              'sinclair': '#8b9c15',
              'outis': '#325339',
              'gregor': '#69350b'
          };

          const lowerWord = word.toLowerCase();
          if (pmColors[lowerWord]) {
              const charColor = pmColors[lowerWord];
              // Force override with !important logic via inline styles
              wordStrong.style.setProperty('color', charColor, 'important');
              
              div.style.borderLeft = `4px solid ${charColor}`;
              // Use a stronger gradient to make it visible
              div.style.background = `linear-gradient(90deg, ${charColor}33 0%, transparent 100%)`; // 33 = 20% opacity
              
              // Add subtle text shadow for lighter colors to ensure readability
              if (['yisang', 'faust', 'donquixote', 'honglu'].includes(lowerWord)) {
                  wordStrong.style.textShadow = '0px 0px 2px rgba(0,0,0,0.5)';
              }
          } else {
              // Apply standard rarity color only if NOT a PM character
              wordStrong.style.color = rarityColors[rarity] || '#6b5b95';
              if (rarity === 'common') {
                   wordStrong.style.color = '#9b9b9b';
              }
          }
          
          if (word.toLowerCase() === 'lingomon' || rarity === 'god') {
            wordStrong.style.backgroundImage = 'linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet)';
            wordStrong.style.backgroundSize = '200% auto';
            wordStrong.style.webkitBackgroundClip = 'text';
            wordStrong.style.webkitTextFillColor = 'transparent';
            wordStrong.style.animation = 'rainbow 2s linear infinite';
            wordStrong.style.textShadow = 'none';
            
            if (!document.getElementById('rainbow-style')) {
              const style = document.createElement('style');
              style.id = 'rainbow-style';
              style.innerHTML = `
                @keyframes rainbow {
                  to { background-position: 200% center; }
                }
              `;
              document.head.appendChild(style);
            }
          }
          
          // Custom color for Heathcliff - REMOVED (Handled by pmColors now)
          /*
          if (word.toLowerCase() === 'heathcliff') {
              wordStrong.style.color = '#4e3076';
              // Also style the border of the card?
              div.style.borderLeft = '4px solid #4e3076';
              div.style.background = 'linear-gradient(90deg, rgba(78, 48, 118, 0.1) 0%, transparent 100%)';
          }
          */

          // Inline Tag Container
          const metaRow = document.createElement('div');
          metaRow.style.display = 'flex';
          metaRow.style.alignItems = 'center';
          metaRow.style.gap = '8px';
          metaRow.style.marginTop = '2px';
          
          // Rarity Badge (Styled like a tag)
          const rarityBadge = document.createElement('span');
          rarityBadge.className = 'tag-badge rarity-badge';
          rarityBadge.textContent = t(rarity.toUpperCase());
          rarityBadge.style.fontWeight = 'bold';
          
          if (rarity === 'god') {
             rarityBadge.classList.add('rainbow-text');
             // Border handled by CSS class now
          } else {
             const rColor = rarityColors[rarity] || '#9b8bb5';
             rarityBadge.style.color = rColor;
             rarityBadge.style.borderColor = rColor;
             // Light background tint based on rarity color?
             // For now just white/dark background with colored text/border
             rarityBadge.style.background = 'transparent';
          }
          
          metaRow.appendChild(rarityBadge);

          // SOURCE BADGE (New for v1.8.1) - No Emojis Version
          if (info.frequencySource) {
              const sourceBadge = document.createElement('span');
              sourceBadge.className = 'tag-badge source-badge';
              sourceBadge.style.fontSize = '9px';
              sourceBadge.style.opacity = '0.8';
              
              let sourceText = info.frequencySource;
              
              if (sourceText.includes('stack_exchange')) {
                  sourceText = 'StackOverflow';
                  sourceBadge.style.background = '#ffe0b2'; // Orange tint
                  sourceBadge.style.color = '#e65100';
                  sourceBadge.style.borderColor = '#ffcc80';
              } else if (sourceText.includes('bio_api')) {
                  sourceText = 'GBIF';
                  sourceBadge.style.background = '#e8f5e9'; // Green tint
                  sourceBadge.style.color = '#2e7d32';
                  sourceBadge.style.borderColor = '#a5d6a7';
              } else if (sourceText.includes('chem_api')) {
                  sourceText = 'PubChem';
                  sourceBadge.style.background = '#fffde7'; // Yellow tint
                  sourceBadge.style.color = '#fbc02d';
                  sourceBadge.style.borderColor = '#fff59d';
              } else if (sourceText.includes('astro_api')) {
                  sourceText = 'SolarData';
                  sourceBadge.style.background = '#f3e5f5'; // Purple tint
                  sourceBadge.style.color = '#7b1fa2';
                  sourceBadge.style.borderColor = '#ce93d8';
              } else if (sourceText.includes('project_moon')) {
                  sourceText = 'Project Moon';
                  sourceBadge.style.background = '#ffe5b8'; // Deep Indigo
                  sourceBadge.style.color = '#ede7f6';
                  sourceBadge.style.borderColor = '#b39ddb';
              } else if (sourceText.includes('easter_egg')) {
                  sourceText = 'Easter Egg';
                  sourceBadge.style.background = '#fff8e1';
                  sourceBadge.style.color = '#ff6f00';
                  sourceBadge.style.borderColor = '#ffca28';
              } else if (sourceText.includes('tech_api')) {
                  sourceText = 'TechDict';
              }
              
              sourceBadge.textContent = sourceText;
              sourceBadge.title = `Data Source: ${info.frequencySource}`;
              metaRow.appendChild(sourceBadge);
          }

          // Tag Management Section
          const tagContainer = document.createElement('div');
          tagContainer.className = 'inline-tag-container';
          
          // Evolve Button (If Eligible)
          // We need to check if Evolution global is available OR check logic manually here
          // But wait, info.evolution.canEvolve might be stale if we just bumped level via script without updating flag
          // So let's double check eligibility
          let showEvolveBtn = false;
          
          if (info.evolution) {
              if (info.evolution.canEvolve) showEvolveBtn = true;
              else {
                  // Fallback check
                  const stg = info.evolution.stage || 0;
                  const lvl = info.srs ? info.srs.level : 0;
                  // SRS 1 -> Evo 1 (Bronze)
                  if (stg < 1 && lvl >= 1) showEvolveBtn = true;
                  // SRS 3 -> Evo 2 (Silver)
                  if (stg < 2 && lvl >= 3) showEvolveBtn = true;
                  // SRS 5 -> Evo 3 (Gold)
                  if (stg < 3 && lvl >= 5) showEvolveBtn = true;
              }
          }
          
          if (showEvolveBtn) {
              const evolveBtn = document.createElement('button');
              evolveBtn.textContent = t('evolve');
              evolveBtn.className = 'tag-badge';
              
              // Determine next stage color
              const nextStage = (info.evolution ? info.evolution.stage : 0) + 1;
              const nextColor = EVO_COLORS_REF[nextStage] || '#FFD700'; // Default gold if unknown
              
              // REMOVED Gradient, used Solid Color for flat look
              evolveBtn.style.background = nextColor;
              
              // Dark text for lighter backgrounds (Silver/Gold), White for darker (Bronze)?
              // Actually Bronze #CD7F32 is darkish, Silver #BCC6CC is light, Gold #FEDA75 is light.
              // Let's use a text shadow or adjust color.
              evolveBtn.style.color = '#333'; 
              if (nextStage === 1) evolveBtn.style.color = 'white'; // Bronze looks better with white text
              
              evolveBtn.style.fontWeight = 'bold';
              evolveBtn.style.border = 'none';
              evolveBtn.style.cursor = 'pointer';
              evolveBtn.style.animation = 'pulse 1s infinite';
              evolveBtn.style.marginLeft = '8px'; // Spacing
              
              evolveBtn.onclick = async (e) => {
                  e.stopPropagation();
                  if (typeof confirmEvolution !== 'undefined') {
                      confirmEvolution(word, info);
                  }
              };
              metaRow.appendChild(evolveBtn);
          }

          if (info.evolution?.stage === 3 && info.familyId) {
              const familyWords = Object.entries(wordData || {})
                  .filter(([w, entry]) => entry.familyId === info.familyId && entry.evolution?.stage === 3);
              
              if (familyWords.length >= 5) {
                  const fusionBtn = document.createElement('button');
                  fusionBtn.textContent = t('familyFusion');
                  fusionBtn.className = 'tag-badge';
                  fusionBtn.style.background = '#E1BEE7';
                  fusionBtn.style.color = '#333';
                  fusionBtn.style.fontWeight = 'bold';
                  fusionBtn.style.animation = 'pulse 1s infinite';
                  fusionBtn.onclick = (e) => {
                      e.stopPropagation();
                      if (typeof window.AscensionModal !== 'undefined') {
                          window.AscensionModal.confirmFusion(word, info);
                      }
                  };
                  metaRow.appendChild(fusionBtn);
              }
          }
          
          const refreshInlineTags = () => {
              tagContainer.innerHTML = '';
              if (info.tags) {
                  info.tags.forEach(tag => {
                      const badge = document.createElement('span');
                      badge.className = 'tag-badge';
                      badge.textContent = tag;
                      badge.title = 'Click to remove';
                      badge.style.cursor = 'pointer';
                      badge.onclick = (e) => {
                          e.stopPropagation();
                          if(confirm(`Remove tag "${tag}"?`)) {
                              removeTagGlobal(word, tag);
                          }
                      };
                      tagContainer.appendChild(badge);
                  });
              }
              
              const addBtn = document.createElement('button');
              addBtn.className = 'tag-plus-btn';
              addBtn.textContent = '+';
              addBtn.onclick = (e) => {
                  e.stopPropagation();
                  // Switch to input
                  const input = document.createElement('input');
                  input.className = 'inline-tag-input';
                  input.placeholder = 'Tag...';
                  input.setAttribute('list', 'existingTags');
                  
                  // Auto-focus and handle save
                  input.onblur = () => {
                      const val = input.value.trim();
                      if (val) addTagGlobal(word, val);
                      else refreshInlineTags(); // Revert
                  };
                  input.onkeydown = (ev) => {
                      if (ev.key === 'Enter') {
                          const val = input.value.trim();
                          if (val) addTagGlobal(word, val);
                          else refreshInlineTags();
                      }
                      if (ev.key === 'Escape') refreshInlineTags();
                  };
                  
                  tagContainer.innerHTML = ''; // Clear badges momentarily
                  tagContainer.appendChild(input);
                  input.focus();
              };
              tagContainer.appendChild(addBtn);
          };
          refreshInlineTags();
          
          metaRow.appendChild(tagContainer);

          const originDiv = document.createElement('div');
          originDiv.className = 'word-info';
          
          // Enhanced Origin Display
          let originText = origin.length > 150 ? origin.substring(0, 150) + '...' : origin;
          let originHtml = escapeHtml(originText).replace(/\n/g, '<br>');
          
          originDiv.innerHTML = originHtml;
          
          // Special Text Color for Tech Cards (Ensure description is legible)
          // Handled via CSS .tech-card .word-info now
          /*
          if (info.tags && info.tags.includes('tech')) {
              originDiv.style.color = '#e0f7fa'; // Light cyan for description text (readable on black)
              originDiv.style.textShadow = 'none'; // No glow on body text for readability
          }
          */

          const frequencyDiv = document.createElement('div');
          frequencyDiv.className = 'frequency-info';
          frequencyDiv.style.fontSize = '11px';
          frequencyDiv.style.marginTop = '4px';

          // Tags Display (Removed - now inline)
          /*
          if (info.tags && info.tags.length > 0) {
             const tagsDiv = document.createElement('div');
             tagsDiv.className = 'word-tags';
             info.tags.forEach(tag => {
                 const badge = document.createElement('span');
                 badge.className = 'tag-badge';
                 badge.textContent = tag;
                 tagsDiv.appendChild(badge);
             });
             div.appendChild(tagsDiv);
          }
          */

          if (info.frequency !== undefined && info.frequency !== null) {
            const freqDisplay = info.frequency >= 1
              ? info.frequency.toFixed(2)
              : info.frequency.toFixed(4);
            const sourceMap = {
              'api': t('sourceAPI'),
              'local': t('sourceLocalDB'),
              'korean-api': t('sourceKoreanAPI')
            };
            const sourceLabel = sourceMap[info.frequencySource] || t('sourceAPI');
            
            if (currentLanguage === 'ko') {
                frequencyDiv.textContent = `${t('frequency')}: ${t('perMillion')} ${freqDisplay} (${sourceLabel})`;
            } else {
                frequencyDiv.textContent = `${t('frequency')}: ${freqDisplay} ${t('perMillion')} (${sourceLabel})`;
            }
            frequencyDiv.title = `Source: ${info.frequencySource || 'unknown'}`;
          } else {
            frequencyDiv.textContent = `${t('frequency')}: ${t('frequencyNA')}`;
            frequencyDiv.style.fontStyle = 'italic';
          }

          const deleteBtn = document.createElement('button');
          deleteBtn.textContent = t('deleteButton');
          deleteBtn.className = 'delete-btn';
          deleteBtn.style.position = 'absolute';
          deleteBtn.style.top = '10px';
          deleteBtn.style.right = '0px';
          deleteBtn.style.background = 'transparent';
          deleteBtn.style.border = 'none';
          deleteBtn.style.cursor = 'pointer';
          deleteBtn.style.fontSize = '16px';
          deleteBtn.style.color = '#ff4444';
          deleteBtn.style.fontWeight = 'bold';
          deleteBtn.style.opacity = '0.5';
          deleteBtn.style.transition = 'opacity 0.2s';
          deleteBtn.onmouseover = () => deleteBtn.style.opacity = '1';
          deleteBtn.onmouseout = () => deleteBtn.style.opacity = '0.5';
          deleteBtn.onclick = (e) => {
            e.stopPropagation();
            deleteWord(word, rarity);
          };

          const infoBtn = document.createElement('button');
          infoBtn.textContent = t('infoButton');
          infoBtn.className = 'info-btn';
          // Style like delete button (text, transparent bg)
          infoBtn.style.background = 'transparent';
          infoBtn.style.border = 'none';
          infoBtn.style.cursor = 'pointer';
          infoBtn.style.fontSize = '11px'; // Slightly smaller than title
          infoBtn.style.color = '#888'; 
          infoBtn.style.fontWeight = 'bold';
          infoBtn.style.padding = '0';
          infoBtn.style.marginTop = '4px';
          infoBtn.style.marginBottom = '2px';
          infoBtn.style.display = 'block'; // Ensure it sits on its own line
          infoBtn.style.opacity = '0.8';
          infoBtn.style.transition = 'opacity 0.2s, color 0.2s';
          
          infoBtn.onmouseover = () => {
            infoBtn.style.opacity = '1';
            infoBtn.style.color = '#555';
          };
          infoBtn.onmouseout = () => {
            infoBtn.style.opacity = '0.8';
            infoBtn.style.color = '#888';
          };
          infoBtn.onclick = (e) => {
            e.stopPropagation();
            showWordContext(word, info);
          };

          div.appendChild(wordStrong);
          div.appendChild(metaRow);
          div.appendChild(infoBtn); // Inserted before description
          div.appendChild(originDiv);
          div.appendChild(frequencyDiv);
          div.appendChild(deleteBtn);

          dexDiv.appendChild(div);
        });
      }

      // Display stats using global function from stats.js
      const total = entries.length;
      const commonCount = stats.common || 0;
      const uncommonCount = stats.uncommon || 0;
      const rareCount = stats.rare || 0;
      const epicCount = stats.epic || 0;
      const legendaryCount = stats.legendary || 0;
      const mythicCount = stats.mythic || 0;

      const streakData = data.streakData || { currentStreak: 0, longestStreak: 0 };

      statsDiv.innerHTML = '';

      const statsStrong = document.createElement('strong');
      statsStrong.textContent = t('collectionStats');

      const statsP = document.createElement('p');
      statsP.style.margin = '8px 0 0 0';
      statsP.appendChild(statsStrong);
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('totalWords')}: ${total}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createElement('br'));

      // Streak display
      const streakSpan = document.createElement('span');
      streakSpan.style.fontWeight = 'bold';
      streakSpan.className = 'streak-text';
      streakSpan.style.color = streakData.currentStreak >= 7 ? '#fffa96' : streakData.currentStreak >= 3 ? '#96c7ff' : '';
      const dayText = streakData.currentStreak !== 1 ? t('days') : t('day');
      streakSpan.textContent = `${t('streak')}: ${streakData.currentStreak} ${dayText}`;
      statsP.appendChild(streakSpan);
      statsP.appendChild(document.createElement('br'));

      if (streakData.longestStreak > 0) {
        const longestDayText = streakData.longestStreak !== 1 ? t('days') : t('day');
        statsP.appendChild(document.createTextNode(`${t('longest')}: ${streakData.longestStreak} ${longestDayText}`));
        statsP.appendChild(document.createElement('br'));
      }

      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('COMMON')}: ${commonCount}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('UNCOMMON')}: ${uncommonCount}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('RARE')}: ${rareCount}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('EPIC')}: ${epicCount}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('LEGENDARY')}: ${legendaryCount}`));
      statsP.appendChild(document.createElement('br'));
      statsP.appendChild(document.createTextNode(`${t('MYTHIC')}: ${mythicCount}`));

      statsDiv.appendChild(statsP);

      if (typeof displayCharts !== 'undefined') {
        displayCharts(data.wordDex || {}, stats);
      }
      if (typeof displayBadges !== 'undefined') {
        displayBadges(data.badges || { main: [], hidden: [] });
      }

    } catch (err) {
      console.error('Error displaying word dex:', err);
      displayError("Error displaying words. Please try refreshing.");
    }
  });
}

function showWordContext(word, info) {
  // Create Modal
  const overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = '0';
  overlay.style.left = '0';
  overlay.style.width = '100%';
  overlay.style.height = '100%';
  overlay.style.background = 'rgba(0,0,0,0.5)';
  overlay.style.zIndex = '10000';
  overlay.style.display = 'flex';
  overlay.style.alignItems = 'center';
  overlay.style.justifyContent = 'center';
  overlay.onclick = (e) => {
    if (e.target === overlay) overlay.remove();
  };

  const modal = document.createElement('div');
  modal.style.background = '#fff';
  modal.style.padding = '24px';
  modal.style.borderRadius = '16px';
  modal.style.maxWidth = '90%';
  modal.style.width = '400px';
  modal.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
  modal.style.fontFamily = 'inherit';
  modal.style.position = 'relative';

  const closeBtn = document.createElement('button');
  closeBtn.innerHTML = '&times;';
  closeBtn.style.position = 'absolute';
  closeBtn.style.top = '12px';
  closeBtn.style.right = '12px';
  closeBtn.style.background = 'none';
  closeBtn.style.border = 'none';
  closeBtn.style.fontSize = '24px';
  closeBtn.style.cursor = 'pointer';
  closeBtn.style.color = '#999';
  closeBtn.onclick = () => overlay.remove();

  const title = document.createElement('h2');
  title.textContent = word;
  title.style.margin = '0 0 16px 0';
  title.style.color = rarityColors[info.rarity] || '#333';
  if (info.rarity === 'god') {
     title.style.backgroundImage = rarityColors[info.rarity];
     title.style.backgroundSize = '200% auto';
     title.style.webkitBackgroundClip = 'text';
     title.style.webkitTextFillColor = 'transparent';
     title.style.animation = 'rainbow 2s linear infinite';
  }

  const details = document.createElement('div');
  details.style.fontSize = '14px';
  details.style.lineHeight = '1.6';
  details.style.color = '#555';

  const formatDate = (ts) => {
    if (!ts) return 'Unknown';
    return new Date(ts).toLocaleDateString() + ' ' + new Date(ts).toLocaleTimeString();
  };

  const firstDate = formatDate(info.firstCaught || info.timestamp);
  const lastDate = formatDate(info.timestamp);
  const caughtOn = info.caughtOn || 'Unknown';
  
  // Highlight word in context
  let contextHtml = '<em>No context available.</em>';
  if (info.context) {
      // Escape HTML first
      const escapedContext = escapeHtml(info.context);
      // Create regex to match word (case insensitive)
      const regex = new RegExp(`(${word})`, 'gi');
      
      let highlightStyle = `color: ${rarityColors[info.rarity] || '#000'}; font-weight: bold;`;
      if (info.rarity === 'god') {
          // For god tier text, we can't easily do gradient text in inline replacement without more complex HTML
          // So just use a fallback color or simple style
          highlightStyle = `color: #ff00ff; font-weight: bold; text-shadow: 0 0 5px rgba(255,0,255,0.3);`;
      }
      
      contextHtml = escapedContext.replace(regex, `<span style="${highlightStyle}">$1</span>`);
  }

  details.innerHTML = `
    <div style="margin-bottom: 8px;"><strong>First Caught:</strong> ${firstDate}</div>
    <div style="margin-bottom: 8px;"><strong>Last Caught:</strong> ${lastDate}</div>
    <div style="margin-bottom: 16px;"><strong>Caught On:</strong> ${caughtOn}</div>
    <div style="background: #f5f5f5; padding: 12px; border-radius: 8px; border-left: 4px solid ${rarityColors[info.rarity] || '#ccc'};">
        <strong>Context:</strong><br/>
        <span style="font-style: italic;">"${contextHtml}"</span>
    </div>
  `;

  // Tag Management Section
  const tagContainer = document.createElement('div');
  tagContainer.className = 'tag-input-container';
  
  const tagList = document.createElement('div');
  tagList.className = 'tag-list';
  
  const renderTags = () => {
      tagList.innerHTML = '';
      const currentTags = info.tags || [];
      currentTags.forEach(tag => {
          const chip = document.createElement('div');
          chip.className = 'tag-chip';
          chip.innerHTML = `${tag} <button data-tag="${tag}">&times;</button>`;
          chip.querySelector('button').onclick = () => removeTag(word, tag);
          tagList.appendChild(chip);
      });
  };
  renderTags();

  const addRow = document.createElement('div');
  addRow.className = 'tag-add-row';
  
  const input = document.createElement('input');
  input.id = 'newTagInput';
  input.placeholder = 'Add tag...';
  input.setAttribute('list', 'existingTags'); // Datalist for suggestions

  const addBtn = document.createElement('button');
  addBtn.id = 'addTagBtn';
  addBtn.textContent = 'Add';
  addBtn.onclick = () => {
      const newTag = input.value.trim();
      if(newTag) {
          addTag(word, newTag);
          input.value = '';
      }
  };

  addRow.appendChild(input);
  addRow.appendChild(addBtn);
  
  tagContainer.appendChild(tagList);
  tagContainer.appendChild(addRow);
  details.appendChild(tagContainer);

  modal.appendChild(closeBtn);
  modal.appendChild(title);
  modal.appendChild(details);
  overlay.appendChild(modal);
  document.body.appendChild(overlay);

  // Populate Datalist for Autocomplete
  chrome.storage.local.get(['wordDex'], (data) => {
      const allTags = new Set();
      Object.values(data.wordDex || {}).forEach(w => {
          if(w.tags) w.tags.forEach(t => allTags.add(t));
      });
      
      let datalist = document.getElementById('existingTags');
      if(!datalist) {
          datalist = document.createElement('datalist');
          datalist.id = 'existingTags';
          document.body.appendChild(datalist);
      }
      datalist.innerHTML = '';
      allTags.forEach(tag => {
          const option = document.createElement('option');
          option.value = tag;
          datalist.appendChild(option);
      });
  });

  // Tag Actions
  const addTag = (targetWord, tag) => {
      chrome.storage.local.get(['wordDex'], (data) => {
          const dex = data.wordDex || {};
          if(dex[targetWord]) {
              if(!dex[targetWord].tags) dex[targetWord].tags = [];
              if(!dex[targetWord].tags.includes(tag)) {
                  dex[targetWord].tags.push(tag);
                  chrome.storage.local.set({ wordDex: dex }, () => {
                      info.tags = dex[targetWord].tags; // Update local reference
                      renderTags();
                      displayWordDex(currentSort); // Update background list
                  });
              }
          }
      });
  };

  const removeTag = (targetWord, tag) => {
      chrome.storage.local.get(['wordDex'], (data) => {
          const dex = data.wordDex || {};
          if(dex[targetWord] && dex[targetWord].tags) {
              dex[targetWord].tags = dex[targetWord].tags.filter(t => t !== tag);
              chrome.storage.local.set({ wordDex: dex }, () => {
                  info.tags = dex[targetWord].tags; // Update local reference
                  renderTags();
                  displayWordDex(currentSort);
              });
          }
      });
  };
}

function displayError(message) {
  const dexDiv = document.getElementById("dex");
  if (dexDiv) {
    dexDiv.innerHTML = `<p style="color: red; text-align: center; padding: 20px;">${escapeHtml(message)}</p>`;
  }
}

function setupSortButtons() {
    // Restore persistent sort
    chrome.storage.local.get(['lastSort'], (data) => {
        if (data.lastSort) {
            currentSort = data.lastSort;
            updateActiveSortButton(currentSort);
            // Don't call displayWordDex here, popup initialization calls it globally
        }
    });

  const buttons = document.querySelectorAll('.sort-btn');
  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const sortType = btn.getAttribute('data-sort');
      
      if (sortType === 'tag') {
          showTagFilterMenu();
          return;
      }
      
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      
      // Clear tag filter if switching sort? 
      // User might want to sort filtered list. 
      // If we switch to 'rarity', we keep the filter but change sort order? 
      // The requirement says "Order by tag should also allow you to select by which tag".
      // Let's assume 'Tag' button is SPECIAL -> It sets filter.
      // Other buttons set SORT order.
      
      currentSort = sortType;
      displayWordDex(sortType);
    });
  });
}

function showTagFilterMenu() {
    chrome.storage.local.get(['wordDex'], (data) => {
        const dex = data.wordDex || {};
        const allTags = new Set();
        Object.values(dex).forEach(w => {
            if(w.tags) w.tags.forEach(t => allTags.add(t));
        });
        
        const tags = Array.from(allTags).sort();
        const rarities = ['god', 'mythic', 'legendary', 'epic', 'rare', 'uncommon', 'common'];
        
        // Create a simple modal or overlay
        const overlay = document.createElement('div');
        overlay.style.position = 'fixed';
        overlay.style.top = '0';
        overlay.style.left = '0';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.background = 'rgba(0,0,0,0.5)';
        overlay.style.zIndex = '20000';
        overlay.style.display = 'flex';
        overlay.style.alignItems = 'center';
        overlay.style.justifyContent = 'center';
        overlay.onclick = (e) => { if(e.target === overlay) overlay.remove(); };
        
        const modal = document.createElement('div');
        modal.style.background = '#fff';
        modal.style.padding = '16px';
        modal.style.borderRadius = '8px';
        modal.style.width = '240px';
        modal.style.maxHeight = '400px';
        modal.style.overflowY = 'auto';
        modal.style.display = 'flex';
        modal.style.flexDirection = 'column';
        
        const header = document.createElement('div');
        header.style.display = 'flex';
        header.style.justifyContent = 'space-between';
        header.style.alignItems = 'center';
        header.style.marginBottom = '12px';
        
        const title = document.createElement('h3');
        title.textContent = t('filterMenuTitle');
        title.style.marginTop = '0';
        title.style.marginBottom = '0';
        
        const doneBtn = document.createElement('button');
        doneBtn.textContent = 'Done';
        doneBtn.style.padding = '4px 8px';
        doneBtn.style.cursor = 'pointer';
        doneBtn.onclick = () => overlay.remove();
        
        header.appendChild(title);
        header.appendChild(doneBtn);
        modal.appendChild(header);

        // Helper to create checkboxes
        const createCheckbox = (text, value, color = null) => {
            const row = document.createElement('div');
            // ... (rest of createCheckbox logic) ...
            row.style.display = 'flex';
            row.style.alignItems = 'center';
            row.style.padding = '8px 0';
            row.style.borderBottom = '1px solid #eee';
            row.style.cursor = 'pointer';
            
            const checkbox = document.createElement('input');
            checkbox.type = 'checkbox';
            checkbox.checked = activeFilters.has(value);
            checkbox.style.marginRight = '8px';
            
            const label = document.createElement('span');
            // Translate display text if it matches a type or rarity
            let displayText = text;
            
            // Check if value is a known type
            
            if (typeMap[value.toLowerCase()]) {
                displayText = t(typeMap[value.toLowerCase()]);
            }
            
            label.textContent = displayText;
            if (color) {
                label.style.color = color;
                label.style.fontWeight = 'bold';
            }
            // Special handling for GOD tier rainbow effect
            if (value === 'god') {
                label.classList.add('rainbow-text');
                label.style.color = 'transparent'; 
            }
            
            // Toggle logic
            const toggle = () => {
                if (activeFilters.has(value)) {
                    activeFilters.delete(value);
                    checkbox.checked = false;
                } else {
                    activeFilters.add(value);
                    checkbox.checked = true;
                }
                displayWordDex(currentSort); 
            };
            
            row.onclick = (e) => {
                if(e.target !== checkbox) toggle();
            };
            checkbox.onclick = (e) => {
                e.stopPropagation();
                toggle();
            };
            
            row.appendChild(checkbox);
            row.appendChild(label);
            return row;
        };

        const scrollArea = document.createElement('div');
        scrollArea.style.overflowY = 'auto';
        scrollArea.style.flex = '1';
        
        // 1. Sorting Options (Radio buttons basically)
        const sortLabel = document.createElement('div');
        sortLabel.textContent = t('sortView');
        sortLabel.style.fontSize = '11px';
        sortLabel.style.fontWeight = 'bold';
        sortLabel.style.color = '#999';
        sortLabel.style.marginTop = '4px';
        sortLabel.style.marginBottom = '4px';
        scrollArea.appendChild(sortLabel);

        // Sort Buttons
        const createSortBtn = (text, sortType) => {
            const btn = document.createElement('button');
            btn.textContent = text;
            btn.style.width = '100%';
            btn.style.padding = '8px';
            btn.style.textAlign = 'left';
            btn.style.background = currentSort === sortType ? '#f0f0f0' : 'transparent';
            btn.style.border = '1px solid #eee';
            btn.style.borderRadius = '4px';
            btn.style.marginBottom = '4px';
            btn.style.cursor = 'pointer';
            if (currentSort === sortType) btn.style.fontWeight = 'bold';
            
            btn.onclick = () => {
                currentSort = sortType;
                displayWordDex(sortType);
                updateActiveSortButton(sortType);
                // Update UI state of buttons
                const allSorts = scrollArea.querySelectorAll('.sort-opt-btn');
                allSorts.forEach(b => {
                    b.style.background = 'transparent';
                    b.style.fontWeight = 'normal';
                });
                btn.style.background = '#f0f0f0';
                btn.style.fontWeight = 'bold';
            };
            btn.className = 'sort-opt-btn';
            return btn;
        };

        scrollArea.appendChild(createSortBtn(t('sortByTags'), 'tag'));
        // scrollArea.appendChild(createSortBtn(t('sortAlpha'), 'alpha')); // Restore ability to switch sort inside menu

        // 2. Filter List
        const filterLabel = document.createElement('div');
        filterLabel.textContent = t('filterByTag');
        filterLabel.style.fontSize = '11px';
        filterLabel.style.fontWeight = 'bold';
        filterLabel.style.color = '#999';
        filterLabel.style.marginTop = '12px';
        filterLabel.style.marginBottom = '4px';
        scrollArea.appendChild(filterLabel);

        // Rarities
        rarities.forEach(r => {
            const rColor = rarityColors[r] || '#333';
            scrollArea.appendChild(createCheckbox(t(r.toUpperCase()), r, rColor));
        });

        // Custom Tags
        if (tags.length > 0) {
            tags.forEach(tag => {
                // If tag is a word type, use translated text, else use raw
                scrollArea.appendChild(createCheckbox(tag, tag));
            });
        } else {
            const noTags = document.createElement('div');
            noTags.textContent = 'No custom tags yet.';
            noTags.style.color = '#ccc';
            noTags.style.fontStyle = 'italic';
            noTags.style.fontSize = '12px';
            noTags.style.padding = '8px 0';
            scrollArea.appendChild(noTags);
        }
        
        modal.appendChild(scrollArea);
        
        // Clear Filter Button
        const clearBtn = document.createElement('button');
        clearBtn.textContent = t('clearFilter');
        clearBtn.style.width = '100%';
        clearBtn.style.marginTop = '12px';
        clearBtn.style.padding = '10px';
        clearBtn.style.background = '#f5f5f5';
        clearBtn.style.border = 'none';
        clearBtn.style.borderRadius = '4px';
        clearBtn.style.cursor = 'pointer';
        clearBtn.style.fontWeight = 'bold';
        clearBtn.onclick = () => {
            activeFilters.clear();
            displayWordDex(currentSort);
            overlay.remove();
        };
        modal.appendChild(clearBtn);
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
    });
}

function updateActiveSortButton(type) {
    document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
    // If type is 'tag', highlight tag button. 
    // If type is 'rarity', we don't have a button, so maybe highlight 'Tag' as it's the "Advanced" menu?
    // Or just highlight nothing?
    // The previous code highlighted 'tag' for all menu actions.
    const btn = document.querySelector(`.sort-btn[data-sort="${type}"]`) || document.querySelector(`.sort-btn[data-sort="tag"]`);
    if(btn) btn.classList.add('active');
}

function addTagGlobal(word, tag) {
   chrome.storage.local.get(['wordDex'], (data) => {
      const dex = data.wordDex || {};
      if(dex[word]) {
          if(!dex[word].tags) dex[word].tags = [];
          if(!dex[word].tags.includes(tag)) {
              dex[word].tags.push(tag);
              chrome.storage.local.set({ wordDex: dex }, () => {
                  displayWordDex(currentSort);
              });
          }
      }
  });
}

function removeTagGlobal(word, tag) {
   chrome.storage.local.get(['wordDex'], (data) => {
      const dex = data.wordDex || {};
      if(dex[word] && dex[word].tags) {
          dex[word].tags = dex[word].tags.filter(t => t !== tag);
          chrome.storage.local.set({ wordDex: dex }, () => {
              displayWordDex(currentSort);
          });
      }
  });
}

function setupSearchBar() {
  const searchBar = document.getElementById('searchBar');
  if (searchBar) {
    searchBar.addEventListener('input', (e) => {
      searchQuery = e.target.value;
      displayWordDex(currentSort);
    });
  }
}

function deleteWord(word, rarity) {
  if (!confirm(t('deleteConfirm', { word }))) {
    return;
  }

  // Send delete request to background script to avoid race conditions
  // We MUST send the exact word as stored in the DB (case-sensitive key)
  // 'word' here comes from the entries iteration, so it should be correct.
  // But let's log to be sure.
  console.log(`Sending delete request for: "${word}"`);
  
  chrome.runtime.sendMessage({ type: 'deleteWord', word, rarity }, (response) => {
      if (chrome.runtime.lastError) {
          console.error('Delete error:', chrome.runtime.lastError);
          return;
      }
      
      if (response && response.success) {
          displayWordDex(currentSort);
      } else {
          console.error('Failed to delete word:', response ? response.error : 'Unknown error');
      }
  });
}

// Expose globals
window.escapeHtml = escapeHtml;
window.displayWordDex = displayWordDex;
window.setupSortButtons = setupSortButtons;
window.setupSearchBar = setupSearchBar;
window.currentSort = currentSort;
window.showWordContext = showWordContext;