content.js

// Utility functions
const debounce = (func, timeout = 300) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), timeout);
  };
};

// Extension toggle functionality
let extensionEnabled = localStorage.getItem("extension_enabled") !== "false";

// Check extension state on page load and hide/show buttons accordingly
function initializeExtensionState() {
  extensionEnabled = localStorage.getItem("extension_enabled") !== "false";
  if (!extensionEnabled) {
    // Remove all existing buttons when disabled
    document.querySelectorAll(".reply-button-inner").forEach((btn) => {
      btn.parentElement?.remove();
    });
    // Hide popup if open
    if (popup) {
      popup.style.display = "none";
    }
  }
}

// Listen for extension toggle messages
try {
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "EXTENSION_TOGGLE") {
      extensionEnabled = message.enabled;
      localStorage.setItem("extension_enabled", message.enabled);

      if (!extensionEnabled) {
        // Remove all existing buttons when disabled
        document.querySelectorAll(".reply-button-inner").forEach((btn) => {
          btn.parentElement?.remove();
        });
        // Hide popup if open
        if (popup) {
          popup.style.display = "none";
        }
      } else {
        // Re-run the service to add buttons back
        setTimeout(() => {
          outletService();
        }, 100);
      }
      sendResponse({ success: true });
    }
  });
} catch (error) {
  // Chrome extension APIs might not be available
  console.log("Chrome extension APIs not available");
}

// Check if extension is enabled before adding buttons
function isExtensionEnabled() {
  return extensionEnabled;
}


// API Configuration
function getConfig() {
  const provider = localStorage.getItem("ai_provider") || "mistral";

  const configs = {
    ollama: {
      provider: "ollama",
      model: localStorage.getItem("ollama_model") || "llama2",
      host: localStorage.getItem("ollama_host") || "http://localhost:11434",
      apiKey: localStorage.getItem("ollama_api_key"),
      apiEndpoint: `${
        localStorage.getItem("ollama_host") || "http://localhost:11434"
      }/api/generate`,
    },
    mistral: {
      provider: "mistral",
      apiKey: localStorage.getItem("mistral_api_key"),
      model: localStorage.getItem("mistral_model") || "mistral-large-latest",
      apiEndpoint: "https://api.mistral.ai/v1/chat/completions",
    },
    openai: {
      provider: "openai",
      apiKey: localStorage.getItem("openai_api_key"),
      model: localStorage.getItem("openai_model") || "gpt-3.5-turbo",
      apiEndpoint: "https://api.openai.com/v1/chat/completions",
    },
    claude: {
      provider: "claude",
      apiKey: localStorage.getItem("claude_api_key"),
      model: localStorage.getItem("claude_model") || "claude-3-haiku-20240307",
      apiEndpoint: "https://api.anthropic.com/v1/messages",
    },
    gemini: {
      provider: "gemini",
      apiKey: localStorage.getItem("gemini_api_key"),
      model: localStorage.getItem("gemini_model") || "gemini-pro",
      apiEndpoint: `https://generativelanguage.googleapis.com/v1beta/models/${
        localStorage.getItem("gemini_model") || "gemini-pro"
      }:generateContent`,
    },
  };

  return configs[provider] || configs.mistral;
}

const popup = document.createElement("div");
popup.className = "reply-idea-popup";
popup.innerHTML = `
   <div class="reply-idea-content">
    <div class="reply-idea-header">
      <h3 class="reply-idea-title">
       <img
          alt="dragonfruit"
          style="width: 30px; height: 30px;"
          src="https://i.ibb.co/TxFbv3kt/dragonfruit.png"
        />
      </h3>
      <button class="reply-idea-close" title="Close popup">&times;</button>
    </div>
    
    <!-- Tab Switcher -->
    <div class="tab-switcher">
      <button class="tab-button active" data-tab="regular">Regular</button>
      <button class="tab-button" data-tab="personas">Personas</button>
    </div>
    
    <!-- Regular Tab Content -->
    <div class="tab-content" id="regular-tab">
      
      <div class="regular-main-layout">
        <!-- Column 1: Left Sidebar -->
        <div class="regular-left-column">
          <div class="success-content"></div>
          
          <div class="regular-info">
            <h4>Quick Reply Generator</h4>
            <p style="font-size: 12px; opacity: 0.7; margin-top: 8px; margin-bottom: 16px;">
              Generate AI-powered replies with customizable mood and style settings.
            </p>
            
            <div style="border-top: 1px solid rgba(140, 140, 140, 0.2); padding-top: 12px;">
              <h5 style="font-size: 11px; margin: 0 0 8px 0; color: rgba(140, 140, 140, 0.9); font-family: 'Geist Mono';">How it works:</h5>
              <ul style="font-size: 10px; opacity: 0.7; margin: 0; padding-left: 16px; line-height: 1.4;">
                <li>Select a mood or create custom</li>
                <li>Adjust brainrot intensity (0-100%)</li>
                <li>Add custom instructions if needed</li>
                <li>AI generates contextual reply</li>
              </ul>
            </div>
            
            <div style="border-top: 1px solid rgba(140, 140, 140, 0.2); padding-top: 12px; margin-top: 12px;">
              <h5 style="font-size: 11px; margin: 0 0 8px 0; color: rgba(140, 140, 140, 0.9); font-family: 'Geist Mono';">Mood Options:</h5>
              <div style="font-size: 10px; opacity: 0.7; line-height: 1.4;">
                <span style="display: block; margin-bottom: 4px;"><strong>Auto:</strong> AI decides tone</span>
                <span style="display: block; margin-bottom: 4px;"><strong>Agree/Disagree:</strong> Support or counter</span>
                <span style="display: block; margin-bottom: 4px;"><strong>Motivate:</strong> Inspirational response</span>
                <span style="display: block; margin-bottom: 4px;"><strong>Roast:</strong> Humorous criticism</span>
                <span style="display: block; margin-bottom: 4px;"><strong>Cute:</strong> Friendly and warm</span>
                <span style="display: block;"><strong>Custom:</strong> Define your own mood</span>
              </div>
            </div>
            
            <div style="border-top: 1px solid rgba(140, 140, 140, 0.2); padding-top: 12px; margin-top: 12px;">
              <h5 style="font-size: 11px; margin: 0 0 8px 0; color: rgba(140, 140, 140, 0.9); font-family: 'Geist Mono';">Tips:</h5>
              <div style="font-size: 10px; opacity: 0.7; line-height: 1.4;">
                <span style="display: block; margin-bottom: 4px;">• Use Ctrl+Enter to regenerate</span>
                <span style="display: block; margin-bottom: 4px;">• Press Escape to close popup</span>
                <span style="display: block; margin-bottom: 4px;">• Higher intensity = more casual/bold</span>
                <span style="display: block;">• Custom instructions refine output</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- Column 2: Reply Controls & Generation -->
        <div class="regular-right-column">
          <h4>Reply Controls</h4>
          
          <div class="tweet-content-body"></div>
          <textarea class="reply-idea-body-editable" placeholder="Your generated reply will appear here... You can edit it directly!"></textarea>
          <div class="reply-char-counter">0/280 characters</div>
          <div class="reply-tip" style="text-align: left; margin-top: -0.3rem; font-size: 10px; opacity: 0.6;">
            💡 Tip: Press Ctrl+Enter to regenerate reply.
          </div>
          
          <div class="brainrot-slider-container">
            <div class="slider-label" style="margin-bottom: 10px">
              <span>Mood:</span>
              <select class="select-mood" id="select-mood">
                <option selected value="Auto">Auto</option>
                <option value="Agree">Agree</option>
                <option value="Disagree">Disagree</option>
                <option value="Motivate">Motivate</option>
                <option value="Roast">Roast</option>
                <option value="Cute">Cute</option>
                <option value="Custom">Custom</option>
              </select>
            </div>
            <input
              type="text"
              class="user-need"
              placeholder="Enter custom mood (e.g., Sarcastic, Professional, Funny...)"
              id="custom-mood-input"
              style="display: none; height: 40px; margin-top: 0.5rem; margin-bottom: 1rem;"
            />
            <div class="slider-label">
              <span>Brainrot Intensity:</span>
              <span id="slider-value">69%</span>
            </div>
            <input type="range" min="0" max="100" value="69" class="brainrot-slider" id="brainrot-slider">
            <div class="thinking-checkbox-container">
              <input type="checkbox" id="thinking-checkbox" class="thinking-checkbox">
              <label for="thinking-checkbox" class="thinking-checkbox-label">Remove thinking tags (for thinking models)</label>
            </div>
            <textarea placeholder="I want this reply to..." class="user-need-textarea" id="user-need-textarea"></textarea>
          </div>
          
          <div class="reply-actions">
            <button class="copy-button">Copy</button>
            <button class="new-reply-button">New Reply</button>
            <button class="go-to-tweet-button">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                <path d="m22 2-7 20-4-9-9-4Z"/>
                <path d="M22 2 11 13"/>
              </svg>
              Reply this
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Personas Tab Content -->
    <div class="tab-content" id="personas-tab" style="display: none;">
      
      <div class="personas-main-layout">
        <!-- Column 1: Personas Management -->
        <div class="personas-left-column">
          <div class="success-content"></div>
          
          <div class="personas-header">
            <h4>Available Personas</h4>
            <button class="create-persona-btn">+ Create</button>
          </div>
          
          <div class="personas-list" id="personas-list">
            <!-- Personas will be dynamically loaded here -->
          </div>
          
          <div class="selected-personas" id="selected-personas">
            <h4>Selected Personas</h4>
            <div class="selected-personas-chips"></div>
          </div>
        </div>
        
        <!-- Column 2: Reply Controls & Generation -->
        <div class="personas-right-column">
          <h4>Reply Controls</h4>
          
          <div class="tweet-content-body"></div>
          <textarea class="reply-idea-body-editable" placeholder="AI will generate reply based on selected personas..."></textarea>
          <div class="reply-char-counter">0/280 characters</div>
          <div class="reply-tip" style="text-align: left; margin-top: -0.3rem; font-size: 10px; opacity: 0.6;">
            💡 Tip: Press Ctrl+Enter to regenerate reply.
          </div>
          
          <div class="brainrot-slider-container">
            <div class="slider-label" style="margin-bottom: 10px">
              <span>Mood:</span>
              <select class="select-mood personas-mood" id="personas-select-mood">
                <option selected value="Auto">Auto</option>
                <option value="Agree">Agree</option>
                <option value="Disagree">Disagree</option>
                <option value="Motivate">Motivate</option>
                <option value="Roast">Roast</option>
                <option value="Cute">Cute</option>
                <option value="Custom">Custom</option>
              </select>
            </div>
            <input
              type="text"
              class="user-need personas-custom-mood"
              placeholder="Enter custom mood (e.g., Sarcastic, Professional, Funny...)"
              id="personas-custom-mood-input"
              style="display: none; height: 40px; margin-top: 0.5rem; margin-bottom: 1rem;"
            />
            <div class="slider-label">
              <span>Brainrot Intensity:</span>
              <span id="personas-slider-value">69%</span>
            </div>
            <input type="range" min="0" max="100" value="69" class="brainrot-slider personas-slider" id="personas-brainrot-slider">
            <div class="thinking-checkbox-container">
              <input type="checkbox" id="personas-thinking-checkbox" class="thinking-checkbox personas-thinking">
              <label for="personas-thinking-checkbox" class="thinking-checkbox-label">Remove thinking tags (for thinking models)</label>
            </div>
            <textarea placeholder="I want this reply to..." class="user-need-textarea personas-user-need" id="personas-user-need-textarea"></textarea>
          </div>
          
          <div class="reply-actions">
            <button class="copy-button">Copy</button>
            <button class="new-reply-button">New Reply</button>
            <button class="go-to-tweet-button">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                <path d="m22 2-7 20-4-9-9-4Z"/>
                <path d="M22 2 11 13"/>
              </svg>
              Reply this
            </button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Persona Creation/Edit Modal -->
    <div class="persona-modal" id="persona-modal" style="display: none;">
      <div class="persona-modal-content">
        <div class="persona-modal-header">
          <h4 id="persona-modal-title">Create Persona</h4>
          <button class="persona-modal-close">&times;</button>
        </div>
        <div class="persona-form">
          <input type="text" id="persona-title" class="persona-input" placeholder="Persona Title" maxlength="50">
          <textarea id="persona-description" class="persona-textarea" placeholder="Description (optional)" rows="3"></textarea>
          <textarea id="persona-tweets" class="persona-textarea" placeholder="Paste up to 100 tweets from this person here..." rows="8"></textarea>
          <textarea id="persona-prompt" class="persona-textarea" placeholder="Additional prompting about this persona (optional)" rows="3"></textarea>
          <div class="persona-actions">
            <button class="cancel-persona-btn">Cancel</button>
            <button class="save-persona-btn">Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
`;
document.body.appendChild(popup);

// Personas functionality
class PersonaManager {
  constructor() {
    this.personas = this.loadPersonas();
    this.selectedPersonas = [];
    this.currentEditingId = null;
    this.eventListenersAttached = false;
    this.updateThrottle = null;
  }

  loadPersonas() {
    const saved = localStorage.getItem("dragon_fruit_personas");
    return saved ? JSON.parse(saved) : [];
  }

  savePersonas() {
    localStorage.setItem(
      "dragon_fruit_personas",
      JSON.stringify(this.personas)
    );
  }

  createPersona(title, description, tweets, prompt) {
    const id = Date.now().toString();
    const persona = {
      id,
      title: title.trim(),
      description: description.trim(),
      tweets: tweets.trim(),
      prompt: prompt.trim(),
      createdAt: new Date().toISOString(),
    };
    this.personas.push(persona);
    this.savePersonas();
    return persona;
  }

  updatePersona(id, updates) {
    const index = this.personas.findIndex((p) => p.id === id);
    if (index !== -1) {
      this.personas[index] = { ...this.personas[index], ...updates };
      this.savePersonas();
      return this.personas[index];
    }
    return null;
  }

  deletePersona(id) {
    this.personas = this.personas.filter((p) => p.id !== id);
    this.selectedPersonas = this.selectedPersonas.filter((p) => p !== id);
    this.savePersonas();
  }

  getPersona(id) {
    return this.personas.find((p) => p.id === id);
  }

  togglePersonaSelection(id) {
    const index = this.selectedPersonas.indexOf(id);
    if (index === -1) {
      this.selectedPersonas.push(id);
    } else {
      this.selectedPersonas.splice(index, 1);
    }

    // Only update UI elements that changed, not the entire list
    this.updatePersonaItemSelection(id);

    // Throttle the chips update to prevent excessive DOM manipulation
    if (this.updateThrottle) {
      clearTimeout(this.updateThrottle);
    }
    this.updateThrottle = setTimeout(() => {
      this.updateSelectedPersonasDisplay();
    }, 100);
  }

  updatePersonaItemSelection(personaId) {
    const personaItem = document.querySelector(
      `[data-persona-id="${personaId}"]`
    );
    if (personaItem) {
      const isSelected = this.selectedPersonas.includes(personaId);
      if (isSelected) {
        personaItem.classList.add("selected");
      } else {
        personaItem.classList.remove("selected");
      }
    }
  }
  attachEventListeners() {
    if (this.eventListenersAttached) return;

    const container = document.getElementById("personas-list");
    if (!container) return;

    // Use event delegation for better performance
    container.addEventListener("click", this.handleClick.bind(this));

    this.eventListenersAttached = true;
  }

  handleClick(e) {
    const personaItem = e.target.closest(".persona-item");
    const actionBtn = e.target.closest(".persona-action-btn");

    if (actionBtn) {
      e.stopPropagation();
      const action = actionBtn.dataset.action;
      const personaId = actionBtn.dataset.personaId;

      if (action === "edit") {
        this.openPersonaModal(personaId);
      } else if (action === "delete") {
        // Single click delete with confirmation
        const persona = this.getPersona(personaId);
        if (persona && confirm(`Delete persona "${persona.title}"?`)) {
          this.deletePersona(personaId);
          this.renderPersonasList();
          this.updateSelectedPersonasDisplay();
          this.showFeedback(`Deleted "${persona.title}"`, "error");
        }
      }
    } else if (personaItem) {
      const personaId = personaItem.dataset.personaId;
      // Use requestAnimationFrame for smooth UI updates
      requestAnimationFrame(() => {
        this.togglePersonaSelection(personaId);
      });
    }
  }

  showFeedback(message, type = "info") {
    const feedback = document.createElement("div");
    const bgColor =
      type === "error" ? "rgba(220, 38, 38, 0.9)" : "rgba(34, 197, 94, 0.9)";

    feedback.style.cssText = `
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: ${bgColor};
      color: white;
      padding: 8px 16px;
      border-radius: 6px;
      font-size: 12px;
      z-index: 10000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    `;
    feedback.textContent = message;
    document.body.appendChild(feedback);

    // Animate in
    requestAnimationFrame(() => {
      feedback.style.opacity = "1";
    });

    setTimeout(() => {
      feedback.style.opacity = "0";
      setTimeout(() => {
        if (document.body.contains(feedback)) {
          document.body.removeChild(feedback);
        }
      }, 300);
    }, 1500);
  }

  renderPersonasList() {
    const container = document.getElementById("personas-list");
    if (!container) return;

    if (this.personas.length === 0) {
      container.innerHTML = `
        <div style="text-align: center; padding: 2rem; color: rgba(140, 140, 140, 0.6); font-family: 'Geist Mono'; font-size: 12px;">
          No personas created yet.<br/>
          Click "Create Persona" to get started.
        </div>
      `;
      return;
    }

    // Create document fragment for better performance
    const fragment = document.createDocumentFragment();

    // Add instruction header
    const instructionHeader = document.createElement("div");
    instructionHeader.style.cssText =
      "text-align: center; padding: 0.5rem; margin-bottom: 1rem; color: rgba(140, 140, 140, 0.6); font-family: 'Geist Mono'; font-size: 10px; border-bottom: 1px solid rgba(140, 140, 140, 0.2);";
    instructionHeader.textContent =
      "Click to select • ✏️ to edit • 🗑️ to delete";
    fragment.appendChild(instructionHeader);

    // Create persona items efficiently
    this.personas.forEach((persona) => {
      const personaDiv = document.createElement("div");
      personaDiv.className = `persona-item ${
        this.selectedPersonas.includes(persona.id) ? "selected" : ""
      }`;
      personaDiv.dataset.personaId = persona.id;

      personaDiv.innerHTML = `
        <div class="persona-info">
          <div class="persona-title">${this.escapeHtml(persona.title)}</div>
          ${
            persona.description
              ? `<div class="persona-description">${this.escapeHtml(
                  persona.description
                )}</div>`
              : ""
          }
        </div>
        <div class="persona-actions">
          <button class="persona-action-btn edit" data-action="edit" data-persona-id="${
            persona.id
          }">✏️</button>
          <button class="persona-action-btn delete" data-action="delete" data-persona-id="${
            persona.id
          }" title="Click to delete">🗑️</button>
        </div>
      `;

      fragment.appendChild(personaDiv);
    });

    // Clear and append all at once
    container.innerHTML = "";
    container.appendChild(fragment);

    // Attach event listeners only once
    this.attachEventListeners();
  }

  updatePersonasList() {
    // Use the optimized render method
    this.renderPersonasList();
  }

  updateSelectedPersonasDisplay() {
    const container = popup.querySelector(".selected-personas-chips");
    if (!container) return;

    // Clear existing event listeners to prevent memory leaks
    const oldContainer = container.cloneNode(false);
    container.parentNode.replaceChild(oldContainer, container);

    if (this.selectedPersonas.length === 0) {
      oldContainer.innerHTML =
        '<span style="color: rgba(140, 140, 140, 0.6); font-style: italic; font-size: 11px;">No personas selected</span>';
      return;
    }

    // Use document fragment for better performance
    const fragment = document.createDocumentFragment();

    this.selectedPersonas.forEach((id) => {
      const persona = this.getPersona(id);
      if (!persona) return;

      const chip = document.createElement("div");
      chip.className = "persona-chip";
      chip.innerHTML = `
        ${this.escapeHtml(persona.title)}
        <span class="persona-chip-remove" data-persona-id="${id}">×</span>
      `;
      fragment.appendChild(chip);
    });

    oldContainer.appendChild(fragment);

    // Add single delegated event listener
    oldContainer.addEventListener("click", (e) => {
      if (e.target.classList.contains("persona-chip-remove")) {
        const personaId = e.target.dataset.personaId;
        // Use requestAnimationFrame for smooth updates
        requestAnimationFrame(() => {
          this.togglePersonaSelection(personaId);
        });
      }
    });
  }

  openPersonaModal(personaId = null) {
    this.currentEditingId = personaId;
    const modal = document.getElementById("persona-modal");
    const title = document.getElementById("persona-modal-title");
    const titleInput = document.getElementById("persona-title");
    const descriptionInput = document.getElementById("persona-description");
    const tweetsInput = document.getElementById("persona-tweets");
    const promptInput = document.getElementById("persona-prompt");

    if (personaId) {
      const persona = this.getPersona(personaId);
      if (persona) {
        title.textContent = "Edit Persona";
        titleInput.value = persona.title;
        descriptionInput.value = persona.description;
        tweetsInput.value = persona.tweets;
        promptInput.value = persona.prompt;
      }
    } else {
      title.textContent = "Create Persona";
      titleInput.value = "";
      descriptionInput.value = "";
      tweetsInput.value = "";
      promptInput.value = "";
    }

    modal.style.display = "flex";
    titleInput.focus();
  }

  closePersonaModal() {
    const modal = document.getElementById("persona-modal");
    modal.style.display = "none";
    this.currentEditingId = null;
  }

  saveCurrentPersona() {
    const titleInput = document.getElementById("persona-title");
    const descriptionInput = document.getElementById("persona-description");
    const tweetsInput = document.getElementById("persona-tweets");
    const promptInput = document.getElementById("persona-prompt");

    const title = titleInput.value.trim();
    const description = descriptionInput.value.trim();
    const tweets = tweetsInput.value.trim();
    const prompt = promptInput.value.trim();

    if (!title) {
      alert("Please enter a persona title");
      titleInput.focus();
      return;
    }

    if (!tweets) {
      alert("Please paste some tweets for this persona");
      tweetsInput.focus();
      return;
    }

    if (this.currentEditingId) {
      this.updatePersona(this.currentEditingId, {
        title,
        description,
        tweets,
        prompt,
      });
    } else {
      this.createPersona(title, description, tweets, prompt);
    }

    this.updatePersonasList();
    this.closePersonaModal();
  }

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

  generatePersonaPrompt() {
    if (this.selectedPersonas.length === 0) {
      return null;
    }

    const selectedPersonaData = this.selectedPersonas
      .map((id) => this.getPersona(id))
      .filter(Boolean);

    let prompt = "You must embody these personas completely and naturally:\n\n";

    selectedPersonaData.forEach((persona, index) => {
      prompt += `PERSONA ${index + 1}: ${persona.title}\n`;
      if (persona.description) {
        prompt += `Background: ${persona.description}\n`;
      }
      if (persona.prompt) {
        prompt += `Context: ${persona.prompt}\n`;
      }
      prompt += `Writing samples:\n${persona.tweets}\n\n`;
    });

    prompt += `CRITICAL INSTRUCTIONS:
- You ARE this person/combination of people - don't reference being an AI
- Study their exact writing patterns: punctuation, capitalization, slang, emoji use, sentence length
- Mirror their vocabulary choices and avoid words/phrases they wouldn't use
- Copy their grammar patterns and any "mistakes" they make consistently
- Don't be overly articulate if they're casual - match their intelligence level
- Never use corporate/AI language like "delighted", "thrilled", "incredible", "amazing"
- Don't give advice or be helpful unless that's clearly their personality
- Avoid buzzwords, marketing speak, or anything that sounds "generated"
- Be authentic to THEIR voice, not a polished version
- If they use poor grammar, incomplete sentences, or internet slang - copy that
- Don't explain or analyze - just respond as they naturally would
- Keep responses focused and short unless they typically write long posts
- Use their authentic reactions and emotional expressions

STRICT NO-COPYING RULES:
- NEVER copy exact phrases, sentences, or paragraphs from the provided tweets
- NEVER reference specific events, dates, or situations mentioned in their old posts
- NEVER use identical word combinations or unique expressions from their tweets
- DO NOT quote or paraphrase their previous content
- Create ORIGINAL content that matches their STYLE only, not their substance
- Think of how they WOULD respond, not how they DID respond to similar topics
- Generate fresh thoughts in their voice, don't recycle their old thoughts

Reply as if you're genuinely this person having a real conversation with completely new, original thoughts.`;

    return prompt;
  }
}

// Initialize persona manager
const personaManager = new PersonaManager();

// Tab switching functionality
function initTabSwitching() {
  const tabButtons = popup.querySelectorAll(".tab-button");
  const tabContents = popup.querySelectorAll(".tab-content");

  // Load last opened tab from localStorage
  const lastTab = localStorage.getItem("dragon_fruit_last_tab") || "regular";

  // Function to switch to a specific tab
  const switchToTab = (targetTab) => {
    // Update button states
    tabButtons.forEach((btn) => btn.classList.remove("active"));
    const targetButton = popup.querySelector(`[data-tab="${targetTab}"]`);
    if (targetButton) {
      targetButton.classList.add("active");
    }

    // Update content visibility
    tabContents.forEach((content) => {
      content.style.display = "none";
    });

    const targetContent = document.getElementById(`${targetTab}-tab`);
    if (targetContent) {
      targetContent.style.display = "block";
    }

    // Save to localStorage
    localStorage.setItem("dragon_fruit_last_tab", targetTab);

    // Initialize personas list if switching to personas tab
    if (targetTab === "personas") {
      personaManager.updatePersonasList();
      personaManager.updateSelectedPersonasDisplay();
    }

    // Auto-generate reply when switching tabs if there's tweet content
    const tweetContentBody = popup.querySelector(".tweet-content-body");
    if (
      tweetContentBody &&
      tweetContentBody.textContent &&
      tweetContentBody.textContent.trim()
    ) {
      const tweetText = tweetContentBody.textContent.trim();
      const replyBody = popup.querySelector(
        `#${targetTab}-tab .reply-idea-body-editable`
      );

      if (replyBody) {
        replyBody.value = "Generating reply...";
        replyBody.disabled = true;

        // Get form values for the target tab
        const formValues = getFormValues();

        // Generate reply for the new tab
        generateReply(tweetText, formValues.userNeed, formValues.mood)
          .then((reply) => {
            const processedReply = processThinkingTags(reply);
            replyBody.value = processedReply;
            replyBody.disabled = false;

            // Trigger character counter update
            const event = new Event("input");
            replyBody.dispatchEvent(event);
          })
          .catch((error) => {
            console.error("Error generating reply on tab switch:", error);
            replyBody.value =
              "Error generating reply. Check your configuration.";
            replyBody.disabled = false;
          });
      }
    }

    // Re-establish event handlers for the newly active tab
    if (popup.style.display === "flex") {
      setupTabEventHandlers();
      setupPopupCloseHandlers();
    }
  };

  // Set up click handlers
  tabButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const targetTab = button.dataset.tab;
      switchToTab(targetTab);
    });
  });

  // Restore last opened tab
  switchToTab(lastTab);
}

// Initialize modal event listeners
function initPersonaModal() {
  const modal = document.getElementById("persona-modal");
  const closeBtn = modal.querySelector(".persona-modal-close");
  const cancelBtn = modal.querySelector(".cancel-persona-btn");
  const saveBtn = modal.querySelector(".save-persona-btn");
  const createBtn = popup.querySelector(".create-persona-btn");

  createBtn?.addEventListener("click", () => {
    personaManager.openPersonaModal();
  });

  closeBtn?.addEventListener("click", () => {
    personaManager.closePersonaModal();
  });

  cancelBtn?.addEventListener("click", () => {
    personaManager.closePersonaModal();
  });

  saveBtn?.addEventListener("click", () => {
    personaManager.saveCurrentPersona();
  });

  // Close modal when clicking outside
  modal?.addEventListener("click", (e) => {
    if (e.target === modal) {
      personaManager.closePersonaModal();
    }
  });

  // Handle Enter key in title input
  const titleInput = document.getElementById("persona-title");
  titleInput?.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      personaManager.saveCurrentPersona();
    }
  });
}

// Initialize everything after popup is created
initTabSwitching();
initPersonaModal();
initializeExtensionState();

// Update existing slider functionality to work with the new structure

// Slider functionality - for both regular and personas tabs
const setupSliders = () => {
  // Regular tab slider
  const slider = popup.querySelector("#brainrot-slider");
  const sliderValue = popup.querySelector("#slider-value");
  if (slider && sliderValue) {
    slider.addEventListener("input", (e) => {
      sliderValue.textContent = `${e.target.value}%`;
    });
  }

  // Personas tab slider
  const personasSlider = popup.querySelector("#personas-brainrot-slider");
  const personasSliderValue = popup.querySelector("#personas-slider-value");
  if (personasSlider && personasSliderValue) {
    personasSlider.addEventListener("input", (e) => {
      personasSliderValue.textContent = `${e.target.value}%`;
    });
  }
};

setupSliders();

// Character counter for reply textarea - works for both tabs
function setupCharacterCounters() {
  const textareas = popup.querySelectorAll(".reply-idea-body-editable");
  const counters = popup.querySelectorAll(".reply-char-counter");

  textareas.forEach((textarea, index) => {
    const counter = counters[index];
    if (!counter) return;

    const updateCharCounter = () => {
      const length = textarea.value.length;
      const maxLength = 280;
      counter.textContent = `${length}/${maxLength} characters`;

      // Update styling based on character count
      counter.classList.remove("warning", "error");
      if (length > maxLength * 0.9) {
        counter.classList.add("warning");
      }
      if (length > maxLength) {
        counter.classList.add("error");
      }
    };

    textarea.addEventListener("input", updateCharCounter);
    textarea.addEventListener("paste", () => setTimeout(updateCharCounter, 10));

    // Initialize counter
    updateCharCounter();
  });
}

setupCharacterCounters();

// Custom mood functionality - for both tabs
const setupMoodFunctionality = () => {
  // Regular tab
  const moodSelect = popup.querySelector("#select-mood");
  const customMoodInput = popup.querySelector("#custom-mood-input");

  if (moodSelect && customMoodInput) {
    moodSelect.addEventListener("change", (e) => {
      const isCustom = e.target.value === "Custom";
      customMoodInput.style.display = isCustom ? "block" : "none";
      if (isCustom) {
        customMoodInput.focus();
      }
    });
  }

  // Personas tab
  const personasMoodSelect = popup.querySelector("#personas-select-mood");
  const personasCustomMoodInput = popup.querySelector(
    "#personas-custom-mood-input"
  );

  if (personasMoodSelect && personasCustomMoodInput) {
    personasMoodSelect.addEventListener("change", (e) => {
      const isCustom = e.target.value === "Custom";
      personasCustomMoodInput.style.display = isCustom ? "block" : "none";
      if (isCustom) {
        personasCustomMoodInput.focus();
      }
    });
  }
};

setupMoodFunctionality();

// Thinking checkbox functionality - for both tabs
const setupThinkingCheckbox = () => {
  const thinkingCheckbox = popup.querySelector("#thinking-checkbox");
  const personasThinkingCheckbox = popup.querySelector(
    "#personas-thinking-checkbox"
  );

  const handleThinkingChange = (checkbox) => {
    if (checkbox) {
      checkbox.addEventListener("change", () => {
        const activeTab = popup.querySelector(
          '.tab-content:not([style*="display: none"])'
        );
        const replyTextarea = activeTab?.querySelector(
          ".reply-idea-body-editable"
        );
        if (
          replyTextarea &&
          replyTextarea.value &&
          replyTextarea.value.trim()
        ) {
          // Re-process the current text when checkbox state changes
          const processedText = processThinkingTags(replyTextarea.value);
          replyTextarea.value = processedText;

          // Update character counter
          const event = new Event("input");
          replyTextarea.dispatchEvent(event);
        }
      });
    }
  };

  handleThinkingChange(thinkingCheckbox);
  handleThinkingChange(personasThinkingCheckbox);
};

setupThinkingCheckbox();

// Main reply generation function
async function generateReply(prompt, userNeed, mood) {
  // Check which tab is active with multiple fallbacks
  let activeTab = popup.querySelector(".tab-button.active")?.dataset.tab;

  // If no active tab is found, check if the regular tab button exists and make it active
  if (!activeTab) {
    const regularButton = popup.querySelector('[data-tab="regular"]');
    if (regularButton) {
      regularButton.classList.add("active");
      activeTab = "regular";
    }
  }

  // Final fallback to regular if still no tab detected
  const currentTab = activeTab || "regular";

  // Get the appropriate slider based on active tab
  const sliderSelector =
    currentTab === "personas"
      ? "#personas-brainrot-slider"
      : "#brainrot-slider";
  const slider = popup.querySelector(sliderSelector);
  const brainrotIntensity = parseInt(slider?.value) || 50;
  const config = getConfig();

  try {
    const handlers = {
      ollama: generateOllamaReply,
      mistral: generateMistralReply,
      openai: generateOpenAIReply,
      claude: generateClaudeReply,
      gemini: generateGeminiReply,
    };

    const handler = handlers[config.provider];
    if (!handler) {
      throw new Error(`Unsupported provider: ${config.provider}`);
    }

    // If personas tab is active, use persona prompting
    if (currentTab === "personas") {
      const personaPrompt = personaManager.generatePersonaPrompt();
      if (personaPrompt) {
        return await handler(
          config,
          prompt,
          userNeed,
          mood,
          brainrotIntensity,
          personaPrompt
        );
      } else {
        return "Please select at least one persona to generate a reply.";
      }
    } else {
      // Regular tab - use normal generation
      return await handler(config, prompt, userNeed, mood, brainrotIntensity);
    }
  } catch (error) {
    console.error("API Error:", error);
    return "Error generating reply. Check your configuration.";
  }
}

// System prompt builder
function buildSystemPrompt(brainrotIntensity, personaPrompt = null) {
  let systemPrompt = "";

  // If persona prompt exists, prioritize it
  if (personaPrompt) {
    systemPrompt = personaPrompt + "\n\n";
    // Add minimal brainrot rules for persona mode
    systemPrompt += "Additional guidelines:\n";
    systemPrompt +=
      "- DO NOT use hashtags, AVOID USING EMOJIS, NEVER USE exclamation marks\n";
    systemPrompt += "- Keep replies under 100 characters when possible\n";
    systemPrompt += "- Act naturally based on the persona patterns\n";
    return systemPrompt;
  }

  // Regular mode - use existing brainrot rules
  const rules = [
    brainrotIntensity >= 0 &&
      "DO NOT use hashtags, AVOID USING EMOJIS, NEVER USE exclamation marks",
    brainrotIntensity >= 0 &&
      "act more humane and authentic, never sound like an AI",
    brainrotIntensity >= 0 &&
      "NEVER use words like: amazing, incredible, delighted, thrilled, wonderful, fantastic, awesome, outstanding, remarkable, excellent, superb, magnificent, brilliant, terrific, marvelous",
    brainrotIntensity >= 0 &&
      "avoid corporate speak, marketing language, or overly polished responses",
    brainrotIntensity >= 0 &&
      "sound like a real person having a genuine conversation",
    brainrotIntensity >= 0 &&
      "do not exceed the character limit of 100 characters, dont use one word sentences, instead merge them or avoid using punctuations",
    brainrotIntensity >= 20 && "reply controversial bangers",
    brainrotIntensity >= 40 && "act like a cute cat reply guy :3 uwu",
    brainrotIntensity >= 40 &&
      "be concise and on the point, share educational reply if possible",
    brainrotIntensity >= 40 &&
      "according to my experience in this field, in my opinion...",
    brainrotIntensity >= 40 &&
      "YOU HAVE TO MAKE IT AS CONTROVERSIAL AS POSSIBLE, DISAGREE WITH THE PROMPT IF it is POSSIBLE, else answer it in a way that is not expected",
    brainrotIntensity >= 60 &&
      "if its a question, answer it in a way that is not expected, controversially",
    brainrotIntensity >= 60 &&
      "make it sound like you know what you are talking about and make it meaningful",
    brainrotIntensity >= 80 &&
      `use words like imo or tbh or legit or lfg or gotta or umm or damn or omfg or oomf or lol or slop or hype or ngmi or cooking or cooked or pussies or get real or touch grass or your mom or get a job, etc (dont exceed ${brainrotIntensity}% of the time)`,
    brainrotIntensity >= 80 &&
      `STAY CRAZY, FOOLISH, CONTROVERSIAL, AND savage, BANGERS BANGERS BANGERS (dont exceed ${brainrotIntensity}% of the time)`,
    brainrotIntensity >= 80 &&
      "USE AS MUCH LESS PUNCTUATIONS AS POSSIBLE, AVOID USING PUNCTUATIONS",
  ].filter(Boolean);

  return rules.map((rule) => `- ${rule}`).join("\n");
}

// User prompt builder
function buildUserPrompt(prompt, userNeed, mood, personaPrompt = null) {
  // Handle custom mood - check which tab is active
  const activeTab =
    popup.querySelector(".tab-button.active")?.dataset.tab || "regular";
  const customMoodSelector =
    activeTab === "personas"
      ? "#personas-custom-mood-input"
      : "#custom-mood-input";

  const actualMood =
    mood === "Custom"
      ? popup.querySelector(customMoodSelector)?.value.trim() || "Auto"
      : mood;

  const parts = [];

  // Different prompting for persona mode vs regular mode
  if (personaPrompt) {
    parts.push(
      "Reply to this tweet staying in character based on your persona analysis:"
    );
  } else {
    parts.push(
      "do not exceed the character limit of 100 characters, you are a cracked reply guy"
    );
  }

  if (userNeed) {
    parts.push(`User's need: ${userNeed}`);
  }

  if (actualMood !== "Auto" && !personaPrompt) {
    parts.push(`YOU MUST REPLY WITH THIS MOOD: ${actualMood}`);
  }

  parts.push(`Generate reply: ${prompt}`);

  return parts.join(" ");
}

// API Handlers
async function generateMistralReply(
  config,
  prompt,
  userNeed,
  mood,
  brainrotIntensity,
  personaPrompt = null
) {
  const response = await fetch(config.apiEndpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${config.apiKey}`,
    },
    body: JSON.stringify({
      model: config.model,
      messages: [
        {
          role: "system",
          content: buildSystemPrompt(brainrotIntensity, personaPrompt),
        },
        {
          role: "user",
          content: buildUserPrompt(prompt, userNeed, mood, personaPrompt),
        },
      ],
    }),
  });

  const data = await response.json();
  return data.choices[0]?.message?.content || "Could not generate reply";
}

async function generateOllamaReply(
  config,
  prompt,
  userNeed,
  mood,
  brainrotIntensity,
  personaPrompt = null
) {
  const headers = { "Content-Type": "application/json" };
  if (config.apiKey) {
    headers.Authorization = `Bearer ${config.apiKey}`;
  }

  const systemPrompt = buildSystemPrompt(brainrotIntensity, personaPrompt);
  const userPrompt = buildUserPrompt(prompt, userNeed, mood, personaPrompt);

  const response = await fetch(config.apiEndpoint, {
    method: "POST",
    headers,
    body: JSON.stringify({
      model: config.model,
      prompt: `${systemPrompt}\n\n${userPrompt}`,
      stream: false,
    }),
  });

  const data = await response.json();
  return data.response || "Could not generate reply";
}

async function generateOpenAIReply(
  config,
  prompt,
  userNeed,
  mood,
  brainrotIntensity,
  personaPrompt = null
) {
  const response = await fetch(config.apiEndpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${config.apiKey}`,
    },
    mode: "cors",
    body: JSON.stringify({
      model: config.model,
      messages: [
        {
          role: "system",
          content: buildSystemPrompt(brainrotIntensity, personaPrompt),
        },
        {
          role: "user",
          content: buildUserPrompt(prompt, userNeed, mood, personaPrompt),
        },
      ],
      max_tokens: 150,
    }),
  });

  if (!response.ok) {
    throw new Error(
      `OpenAI API error: ${response.status} ${response.statusText}`
    );
  }

  const data = await response.json();
  return data.choices[0]?.message?.content || "Could not generate reply";
}

async function generateClaudeReply(
  config,
  prompt,
  userNeed,
  mood,
  brainrotIntensity,
  personaPrompt = null
) {
  const response = await fetch(config.apiEndpoint, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": config.apiKey,
      "anthropic-version": "2023-06-01",
    },
    mode: "cors",
    body: JSON.stringify({
      model: config.model,
      max_tokens: 150,
      messages: [
        {
          role: "user",
          content: `${buildSystemPrompt(
            brainrotIntensity,
            personaPrompt
          )}\n\n${buildUserPrompt(prompt, userNeed, mood, personaPrompt)}`,
        },
      ],
    }),
  });

  if (!response.ok) {
    throw new Error(
      `Claude API error: ${response.status} ${response.statusText}`
    );
  }

  const data = await response.json();
  return data.content[0]?.text || "Could not generate reply";
}

async function generateGeminiReply(
  config,
  prompt,
  userNeed,
  mood,
  brainrotIntensity,
  personaPrompt = null
) {
  const response = await fetch(`${config.apiEndpoint}?key=${config.apiKey}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    mode: "cors",
    body: JSON.stringify({
      contents: [
        {
          parts: [
            {
              text: `${buildSystemPrompt(
                brainrotIntensity,
                personaPrompt
              )}\n\n${buildUserPrompt(prompt, userNeed, mood, personaPrompt)}`,
            },
          ],
        },
      ],
      generationConfig: {
        maxOutputTokens: 150,
      },
    }),
  });

  if (!response.ok) {
    throw new Error(
      `Gemini API error: ${response.status} ${response.statusText}`
    );
  }

  const data = await response.json();
  return (
    data.candidates[0]?.content?.parts[0]?.text || "Could not generate reply"
  );
}

// Function to wait for element
function waitForElement(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();

    const checkElement = () => {
      const element = document.querySelector(selector);
      if (element) {
        resolve(element);
        return;
      }

      if (Date.now() - startTime > timeout) {
        reject(new Error(`Timeout waiting for element: ${selector}`));
        return;
      }

      setTimeout(checkElement, 100);
    };

    checkElement();
  });
}

// Function to process thinking tags
function processThinkingTags(text) {
  // Check which tab is active and get the appropriate checkbox
  const activeTab =
    popup.querySelector(".tab-button.active")?.dataset.tab || "regular";
  const checkboxSelector =
    activeTab === "personas"
      ? "#personas-thinking-checkbox"
      : "#thinking-checkbox";
  const thinkingCheckbox = document.querySelector(checkboxSelector);

  if (!thinkingCheckbox || !thinkingCheckbox.checked) {
    return text; // Return original text if checkbox is not checked
  }

  // Remove everything between <think> and </think> tags (case insensitive)
  // This regex matches <think>...</think> with any content inside, including newlines
  const thinkingTagRegex = /<think\b[^>]*>.*?<\/think>/gis;

  let processedText = text.replace(thinkingTagRegex, "");

  // Clean up any extra whitespace that might be left
  processedText = processedText.replace(/\n\s*\n\s*\n/g, "\n\n"); // Replace multiple newlines with double newlines
  processedText = processedText.trim();

  console.log("Thinking tags processing:", {
    originalLength: text.length,
    processedLength: processedText.length,
    hadThinkingTags: thinkingTagRegex.test(text),
  });

  return processedText;
}

// Function to open Twitter's native reply box
async function openTwitterReplyBox(tweetElement) {
  try {
    console.log("🔍 Looking for reply button in tweet element:", tweetElement);

    // Try multiple selectors for the reply button
    const replySelectors = [
      '[data-testid="reply"]',
      '[role="button"][aria-label*="Reply"]',
      '[role="button"][aria-label*="reply"]',
      'button[aria-label*="Reply"]',
      'button[aria-label*="reply"]',
      '[data-testid="reply"] button',
      'div[role="button"][aria-label*="Reply"]',
    ];

    let replyButton = null;

    for (const selector of replySelectors) {
      replyButton = tweetElement.querySelector(selector);
      console.log(`🔎 Trying selector "${selector}":`, replyButton);
      if (replyButton) {
        console.log("✅ Found reply button with selector:", selector);
        break;
      }
    }

    if (!replyButton) {
      console.error("❌ Reply button not found in tweet with any selector");
      console.log(
        "🔍 Available buttons in tweet:",
        tweetElement.querySelectorAll('button, [role="button"]')
      );
      return false;
    }

    console.log("🖱️ Clicking reply button...", replyButton);

    // Try different click methods
    try {
      // Method 1: Direct click
      replyButton.click();
      console.log("✅ Direct click successful");
    } catch (e) {
      console.log("⚠️ Direct click failed, trying mouse event");
      // Method 2: Mouse event
      const clickEvent = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window,
      });
      replyButton.dispatchEvent(clickEvent);
      console.log("✅ Mouse event click successful");
    }

    // Wait for Twitter's reply box to appear
    console.log("⏳ Waiting for Twitter reply box to appear...");
    await waitForElement(
      ".public-DraftStyleDefault-block.public-DraftStyleDefault-ltr",
      5000
    );
    console.log("✅ Twitter reply box opened successfully");

    return true;
  } catch (error) {
    console.error("💥 Error opening Twitter reply box:", error);
    return false;
  }
}

// Function to extract just the tweet text from an article element
function extractTweetText(articleElement) {
  try {
    // Look for the main tweet text container
    // Twitter uses various selectors for tweet text, try multiple approaches
    const textSelectors = [
      '[data-testid="tweetText"]',
      "[lang] span",
      ".css-901oao.r-18jsvk2.r-37j5jr.r-a023e6.r-16dba41.r-rjixqe.r-1awozwy.r-6koalj.r-1h0z5md.r-o7ynqc.r-clp7b1.r-3s2u2q",
      ".css-901oao.css-16my406.r-poiln3.r-bcqeeo.r-qvutc0",
    ];

    for (const selector of textSelectors) {
      const textElement = articleElement.querySelector(selector);
      if (textElement && textElement.textContent.trim()) {
        return textElement.textContent.trim();
      }
    }

    // Fallback: try to find text containers and filter out UI elements
    const potentialTextElements = articleElement.querySelectorAll("span");
    let longestText = "";

    for (const span of potentialTextElements) {
      const text = span.textContent.trim();
      // Skip if it looks like UI text (short, contains numbers only, etc.)
      if (
        text.length > longestText.length &&
        text.length > 10 &&
        !text.match(/^\d+$/) &&
        !text.match(/^@\w+$/) &&
        !text.includes("views") &&
        !text.includes("likes") &&
        !text.includes("reposts")
      ) {
        longestText = text;
      }
    }

    return longestText || articleElement.innerText;
  } catch (error) {
    console.error("Error extracting tweet text:", error);
    return articleElement.innerText;
  }
}

// Function to type in Twitter's Draft.js editor
async function typeInTwitterEditor(text) {
  try {
    console.log("typeInTwitterEditor called with text:", text);
    console.log("Text length:", text.length);
    console.log("Text type:", typeof text);

    // Validate input
    if (!text || typeof text !== "string" || text.trim().length === 0) {
      console.error("Invalid text provided to typeInTwitterEditor:", text);
      return false;
    }

    const cleanText = text.trim();
    console.log("Clean text to insert:", cleanText);

    // Wait for Twitter's Draft.js editor block to appear
    const editorBlock = await waitForElement(
      ".public-DraftStyleDefault-block.public-DraftStyleDefault-ltr"
    );

    if (!editorBlock) {
      console.error("Twitter editor block not found");
      return false;
    }

    console.log("Found Twitter editor block:", editorBlock);

    // Try multiple approaches to set the text

    // Approach 1: Direct text content setting
    try {
      editorBlock.textContent = "";
      editorBlock.innerHTML = "";
      editorBlock.innerText = cleanText;
      console.log("Approach 1: Set innerText to:", editorBlock.innerText);
    } catch (e) {
      console.log("Approach 1 failed:", e);
    }

    // Approach 2: Focus and use document.execCommand (if available)
    try {
      editorBlock.focus();

      // Select all existing content and delete it
      const selection = window.getSelection();
      const range = document.createRange();
      range.selectNodeContents(editorBlock);
      selection.removeAllRanges();
      selection.addRange(range);

      // Try to replace with new text
      if (document.execCommand) {
        document.execCommand("delete");
        document.execCommand("insertText", false, cleanText);
        console.log("Approach 2: Used execCommand");
      }
    } catch (e) {
      console.log("Approach 2 failed:", e);
    }

    // Approach 3: Simulate typing character by character
    try {
      editorBlock.focus();

      // Clear existing content
      editorBlock.textContent = "";

      // Add text character by character with events
      for (let i = 0; i < cleanText.length; i++) {
        const char = cleanText[i];
        editorBlock.textContent += char;

        // Dispatch input event for each character
        const inputEvent = new InputEvent("input", {
          bubbles: true,
          cancelable: true,
          inputType: "insertText",
          data: char,
        });
        editorBlock.dispatchEvent(inputEvent);
      }
      console.log("Approach 3: Character by character typing completed");
    } catch (e) {
      console.log("Approach 3 failed:", e);
    }

    // Final verification
    console.log("Final editor content:", editorBlock.textContent);
    console.log("Final editor innerHTML:", editorBlock.innerHTML);

    // Dispatch final events (removed Enter keyup to prevent auto-submission)
    const events = [
      new Event("input", { bubbles: true }),
      new Event("change", { bubbles: true }),
    ];

    events.forEach((event) => {
      try {
        editorBlock.dispatchEvent(event);
      } catch (e) {
        console.log("Event dispatch failed:", e);
      }
    });

    // Wait a moment for the text to be processed
    await new Promise((resolve) => setTimeout(resolve, 500));

    // Automatically click the Reply button
    try {
      console.log("Looking for Twitter Reply button...");

      // Try multiple selectors for the Reply button
      const replyButtonSelectors = [
        '[data-testid="tweetButton"]',
        'button[data-testid="tweetButton"]',
        ".css-175oi2r.r-sdzlij.r-1phboty.r-rs99b7.r-lrvibr.r-1cwvpvk.r-2yi16.r-1qi8awa.r-3pj75a.r-1loqt21.r-o7ynqc.r-6416eg.r-1ny4l3l",
        'button:contains("Reply")',
        'button[role="button"]:has(span:contains("Reply"))',
      ];

      let replyButton = null;
      for (const selector of replyButtonSelectors) {
        replyButton = document.querySelector(selector);
        if (replyButton) {
          console.log("Found Reply button with selector:", selector);
          break;
        }
      }

      // If standard selectors don't work, try finding by text content
      if (!replyButton) {
        const allButtons = document.querySelectorAll('button[role="button"]');
        for (const button of allButtons) {
          if (
            button.textContent.includes("Reply") &&
            button.getAttribute("data-testid") === "tweetButton"
          ) {
            replyButton = button;
            console.log("Found Reply button by text content");
            break;
          }
        }
      }

      if (replyButton) {
        console.log("Clicking Reply button automatically...");
        replyButton.click();
        console.log("Reply button clicked successfully");
      } else {
        console.log(
          "Reply button not found - user will need to click manually"
        );
      }
    } catch (error) {
      console.error("Error clicking Reply button:", error);
    }

    console.log("Finished typing in Twitter editor");
    return true;
  } catch (error) {
    console.error("Error typing in Twitter editor:", error);
    return false;
  }
}
function extractViewCount(ariaLabel) {
  const parts = ariaLabel.split(",").map((p) => p.trim());
  for (let i = parts.length - 1; i >= 0; i--) {
    if (parts[i].includes("views")) {
      const numbers = parts[i]
        .replace(/[^0-9]/g, " ")
        .split(" ")
        .filter((n) => n !== "");
      return numbers.length > 0 ? parseInt(numbers[0], 10) : null;
    }
  }
  return null;
}

function applyViewCountStyles(button, viewCount) {
  const innerButton = button.querySelector(".reply-button-inner");
  if (!innerButton) return;

  innerButton.style.transition = "all 0.3s ease";
  const styles = [
    { threshold: 100000, color: "hsl(0, 72%, 45%)" },
    { threshold: 50000, color: "hsl(30, 100%, 50%)" },
    { threshold: 10000, color: "hsl(45, 100%, 50%)" },
    { threshold: 0, color: "hsl(221.2 83.2% 53.3%)" },
  ];

  const style = styles.find((s) => (viewCount || 0) >= s.threshold);
  const textDiv = innerButton.querySelector('div[dir="ltr"]');
  if (textDiv && style) {
    textDiv.style.color = style.color;
    textDiv.style.opacity = Math.min(
      0.95,
      0.7 + (viewCount || 0) / 100000
    ).toFixed(2);
  }
}

function createReplyButton(viewCount, ariaLabel) {
  const button = document.createElement("div");
  button.className = "css-175oi2r r-18u37iz r-1h0z5md r-13awgt0";

  // Use the same algorithm as the beta feature for success rate
  const successRate = analyzeSuccess(ariaLabel);

  // Determine quality dots and color based on success rate
  let qualityDots = "";
  let dotColor = "rgb(113, 118, 123)"; // default gray

  if (successRate.successRate > 70) {
    qualityDots = "● ● ●"; // 3 dots for high success
    dotColor = "hsl(120, 60%, 50%)"; // green
  } else if (successRate.successRate > 50) {
    qualityDots = "● ●"; // 2 dots for medium success
    dotColor = "hsl(45, 100%, 50%)"; // yellow
  } else if (successRate.successRate > 30) {
    qualityDots = "●"; // 1 dot for low success
    dotColor = "hsl(30, 100%, 50%)"; // orange
  } else if (successRate.successRate > 0) {
    qualityDots = "●"; // 1 dot for very low success
    dotColor = "hsl(0, 72%, 45%)"; // red
  }
  button.innerHTML = `
    <button aria-label="Generate AI Reply (Success Rate: ${
      successRate.successRate
    }%)" role="button" class="css-175oi2r r-1777fci r-bt1l66 r-bztko3 r-lrvibr r-1loqt21 r-1ny4l3l reply-button-inner" type="button" title="Success Rate: ${
    successRate.successRate
  }% - ${successRate.message}">
      <div dir="ltr" class="css-146c3p1 r-bcqeeo r-1ttztb7 r-qvutc0 r-37j5jr r-a023e6 r-rjixqe r-16dba41 r-1awozwy r-6koalj r-1h0z5md r-o7ynqc r-clp7b1 r-3s2u2q" style="color: ${dotColor};">
        <div class="css-175oi2r r-xoduu5">
          <div class="css-175oi2r r-xoduu5 r-1p0dtai r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-1niwhzg r-sdzlij r-xf4iuw r-o7ynqc r-6416eg r-1ny4l3l"></div>          <svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-1xvli5t r-1hdv0qi" style="color: ${dotColor};">
            <g>
              <path d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" stroke="${dotColor}" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
            </g>
          </svg>
        </div>
        ${
          qualityDots
            ? `<div class="css-175oi2r r-xoduu5 r-1udh08x" style="display: inline-block; margin-left: 0.5rem;">
          <span style="font-size: 8px; letter-spacing: 1px; color: ${dotColor}; opacity: 0.8;">${qualityDots}</span>
        </div>`
            : ""
        }
      </div>
    </button>
  `;
  return button;
}

// Success rate analysis with meaningful formulas and precise scoring
function analyzeSuccess(input) {
  const numbers = input.match(/\d+/g);
  if (!numbers || numbers.length < 5) {
    return { successRate: 0, message: "Insufficient data for analysis" };
  }

  const [replies, reposts, likes, bookmarks, views] = numbers.map(Number);

  // Prevent division by zero and handle edge cases
  const safeViews = Math.max(views, 1);
  const safeLikes = Math.max(likes, 1);

  // Calculate precise engagement metrics
  const totalEngagements = likes + reposts + replies + bookmarks;
  const engagementRate = (totalEngagements / safeViews) * 100;
  const likeToViewRatio = (likes / safeViews) * 100;
  const qualityScore = (replies + bookmarks) / Math.max(totalEngagements, 1);
  const viralityScore = reposts / safeLikes;
  const saveRate = bookmarks / safeLikes;
  const responseRate = replies / safeLikes;

  // Base scoring system (0-100, precise integers)
  let successRate = 0;
  const messages = [];

  // Engagement Rate Scoring (0-40 points)
  if (engagementRate >= 10) {
    successRate += 40;
    messages.push("Exceptional viral engagement");
  } else if (engagementRate >= 5) {
    successRate += 35;
    messages.push("Outstanding engagement rate");
  } else if (engagementRate >= 3) {
    successRate += 30;
    messages.push("Very strong engagement");
  } else if (engagementRate >= 2) {
    successRate += 25;
    messages.push("Strong engagement");
  } else if (engagementRate >= 1) {
    successRate += 18;
    messages.push("Above average engagement");
  } else if (engagementRate >= 0.5) {
    successRate += 12;
    messages.push("Average engagement");
  } else if (engagementRate >= 0.2) {
    successRate += 6;
    messages.push("Below average engagement");
  } else {
    messages.push("Poor engagement");
  }

  // Like Conversion Scoring (0-25 points)
  if (likeToViewRatio >= 5) {
    successRate += 25;
    messages.push("Excellent like conversion");
  } else if (likeToViewRatio >= 3) {
    successRate += 20;
    messages.push("Very good like conversion");
  } else if (likeToViewRatio >= 2) {
    successRate += 15;
    messages.push("Good like conversion");
  } else if (likeToViewRatio >= 1) {
    successRate += 10;
    messages.push("Fair like conversion");
  } else if (likeToViewRatio >= 0.5) {
    successRate += 5;
  }

  // Quality Interaction Bonus (0-20 points)
  if (qualityScore >= 0.4) {
    successRate += 20;
    messages.push("High-quality interactions");
  } else if (qualityScore >= 0.25) {
    successRate += 15;
    messages.push("Good interaction quality");
  } else if (qualityScore >= 0.15) {
    successRate += 10;
    messages.push("Moderate interaction quality");
  } else if (qualityScore >= 0.05) {
    successRate += 5;
  }

  // Virality Bonus (0-10 points)
  if (viralityScore >= 0.3) {
    successRate += 10;
    messages.push("Strong viral potential");
  } else if (viralityScore >= 0.15) {
    successRate += 7;
    messages.push("Good sharing rate");
  } else if (viralityScore >= 0.05) {
    successRate += 4;
  }

  // Value Content Bonus (0-5 points)
  if (saveRate >= 0.1) {
    successRate += 5;
    messages.push("High-value content");
  } else if (saveRate >= 0.03) {
    successRate += 3;
  }

  // Ensure integer result between 0-100
  successRate = Math.round(Math.max(0, Math.min(100, successRate)));

  const message = messages.length > 0 ? messages[0] : "Limited engagement data";

  return { successRate, message };
}

// Global variables and popup event handlers
let activeArticle = null;
let shouldAutoPostWhenReady = false;
let escapeKeyHandler = null; // Track escape key handler to avoid duplicates

// SIMPLE popup close function
function closePopup() {
  console.log("CLOSING POPUP NOW!");
  popup.style.display = "none";
  activeArticle = null;
  shouldAutoPostWhenReady = false;
}

// Function to specifically set up close handlers (can be called multiple times safely)
// Function to close Twitter's native reply modal
function closeTwitterReplyModal() {
  console.log("Attempting to close Twitter's native reply modal...");

  // Try multiple selectors to find Twitter's reply modal close button
  const closeSelectors = [
    '[data-testid="mask"]', // Twitter's modal backdrop
    '[aria-label="Close"]', // Close button with aria-label
    'button[aria-label="Close"]',
    '[role="button"][aria-label="Close"]',
    ".r-yfoy4p", // Common Twitter close button class
    '[data-testid="app-bar-close"]', // App bar close button
    '[data-testid="closeConfirmationDialog"]', // Dialog close button
    'button[data-testid*="close"]', // Any button with close in testid
    'svg[aria-label="Close"]', // SVG close icons
  ];

  for (const selector of closeSelectors) {
    try {
      const closeElement = document.querySelector(selector);
      if (closeElement && closeElement.offsetParent !== null) {
        // Check if visible
        console.log(`Found Twitter close element with selector: ${selector}`);
        closeElement.click();
        return; // Exit after first successful close
      }
    } catch (error) {
      console.warn(
        `Error clicking close element with selector ${selector}:`,
        error
      );
    }
  }

  // Alternative: Try to press Escape on the document to close modals
  try {
    const escapeEvent = new KeyboardEvent("keydown", {
      key: "Escape",
      keyCode: 27,
      which: 27,
      bubbles: true,
      cancelable: true,
    });
    document.dispatchEvent(escapeEvent);
    console.log("Dispatched Escape key event to close Twitter modal");
  } catch (error) {
    console.warn("Error dispatching Escape key:", error);
  }
}

function setupPopupCloseHandlers() {
  console.log("Setting up SIMPLE close handlers...");

  // Remove ALL existing event listeners and start fresh
  const oldPopup = popup;

  // Create a completely new close button element
  const closeButton = popup.querySelector(".reply-idea-close");
  if (closeButton) {
    // Remove all existing handlers by replacing with new element
    const newCloseButton = document.createElement("button");
    newCloseButton.className = "reply-idea-close";
    newCloseButton.title = "Close popup";
    newCloseButton.innerHTML = "&times;";

    // Replace the old button
    closeButton.parentNode.replaceChild(newCloseButton, closeButton);

    // Add ONE simple event listener
    newCloseButton.onclick = function (e) {
      console.log("CLOSE BUTTON CLICKED!");
      popup.style.display = "none";
      activeArticle = null;
      shouldAutoPostWhenReady = false;

      // Also close Twitter's native reply popup if it's open
      closeTwitterReplyModal();
    };

    console.log("NEW close button created and attached");
  } else {
    console.error("Close button container not found!");
  }
}

// Popup event handlers
// Update event handlers to work with both tabs
function setupPopupEventHandlers() {
  console.log("Setting up SIMPLE popup event handlers...");

  // Set up close button handlers
  setupPopupCloseHandlers();

  // SIMPLE escape key handler - remove old one first
  document.removeEventListener("keydown", escapeKeyHandler);

  // Create new simple escape handler
  escapeKeyHandler = function (e) {
    if (e.key === "Escape" && popup && popup.style.display === "flex") {
      console.log("ESCAPE PRESSED - CLOSING POPUP");
      popup.style.display = "none";
      activeArticle = null;
      shouldAutoPostWhenReady = false;

      // Also close Twitter's native reply popup if it's open
      closeTwitterReplyModal();
    }
  };

  document.addEventListener("keydown", escapeKeyHandler);

  // Simple backdrop click
  popup.onclick = function (e) {
    if (e.target === popup) {
      console.log("BACKDROP CLICKED - CLOSING POPUP");
      popup.style.display = "none";
      activeArticle = null;
      shouldAutoPostWhenReady = false;

      // Also close Twitter's native reply popup if it's open
      closeTwitterReplyModal();
    }
  };

  // Prevent content clicks from closing
  const popupContent = popup.querySelector(".reply-idea-content");
  if (popupContent) {
    popupContent.onclick = function (e) {
      e.stopPropagation();
    };
  }

  // New Reply button handler
  popup.querySelectorAll(".new-reply-button").forEach((button) => {
    button.addEventListener("click", async () => {
      if (activeArticle) {
        const activeTab = popup.querySelector(
          '.tab-content:not([style*="display: none"])'
        );
        const replyBody = activeTab.querySelector(".reply-idea-body-editable");

        replyBody.value = "Generating new reply...";
        replyBody.disabled = true;

        // Use extracted tweet text instead of full article text
        const tweetText = extractTweetText(activeArticle);

        // Get form values from the active tab or regular tab for personas
        let { userNeed, mood } = getFormValues();

        const reply = await generateReply(tweetText, userNeed, mood);

        // Process thinking tags if checkbox is enabled
        const processedReply = processThinkingTags(reply);
        replyBody.value = processedReply;
        replyBody.disabled = false;
        replyBody.focus();

        // Trigger character counter update
        const event = new Event("input");
        replyBody.dispatchEvent(event);

        // Check if we should auto-post
        if (shouldAutoPostWhenReady) {
          console.log("Auto-posting new reply as requested by Enter key");
          shouldAutoPostWhenReady = false;
          setTimeout(() => {
            const replyButton = activeTab.querySelector(".go-to-tweet-button");
            if (replyButton) {
              replyButton.click();
            }
          }, 500);
        } else {
          // Reset button state and focus it when ready
          const replyButton = activeTab.querySelector(".go-to-tweet-button");
          if (replyButton) {
            replyButton.disabled = false;
            replyButton.style.opacity = "1";
            replyButton.innerHTML = `
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                <path d="m22 2-7 20-4-9-9-4Z"/>
                <path d="M22 2 11 13"/>
              </svg>
              Reply this
            `;
            replyButton.focus();
            setTimeout(() => replyButton.focus(), 100);
          }
        }
      }
    });
  });
}

setupPopupEventHandlers();

// Ctrl+Enter regeneration handler
popup.addEventListener("keydown", async (e) => {
  if (e.key === "Enter" && e.ctrlKey) {
    // Ctrl+Enter to regenerate
    if (activeArticle) {
      const activeTab = popup.querySelector(
        '.tab-content:not([style*="display: none"])'
      );
      const replyBody = activeTab.querySelector(".reply-idea-body-editable");

      replyBody.value = "Generating new reply...";
      replyBody.disabled = true;

      // Use extracted tweet text instead of full article text
      const tweetText = extractTweetText(activeArticle);

      // Get form values from the active tab or regular tab for personas
      let { userNeed, mood } = getFormValues();

      const reply = await generateReply(tweetText, userNeed, mood);

      // Process thinking tags if checkbox is enabled
      const processedReply = processThinkingTags(reply);
      replyBody.value = processedReply;
      replyBody.disabled = false;
      replyBody.focus();

      // Trigger character counter update
      const event = new Event("input");
      replyBody.dispatchEvent(event);
    }
  }
});

// Helper function to get the active tab
function getActiveTab() {
  return popup.querySelector('.tab-content:not([style*="display: none"])');
}

// Helper function to get form values from the appropriate tab
function getFormValues() {
  const activeTab =
    popup.querySelector(".tab-button.active")?.dataset.tab || "regular";

  if (activeTab === "personas") {
    // Get values from personas tab controls
    const personasUserNeed =
      popup.querySelector("#personas-user-need-textarea")?.value || "";
    const personasMood =
      popup.querySelector("#personas-select-mood")?.value || "Auto";

    return {
      userNeed: personasUserNeed,
      mood: personasMood,
    };
  } else {
    // Get values from regular tab controls
    return {
      userNeed: popup.querySelector("#user-need-textarea")?.value || "",
      mood: popup.querySelector("#select-mood")?.value || "Auto",
    };
  }
}

// Update the setupButtonInteraction to handle both tabs properly
function setupButtonInteraction(element, button, metricsElement, tweetLink) {
  const innerButton = button.querySelector(".reply-button-inner");
  if (!innerButton) return;

  innerButton.addEventListener("click", async () => {
    console.log("🚀 DragonFruit reply button clicked!");
    activeArticle = element;

    // First, open Twitter's native reply box
    console.log("📱 Attempting to open Twitter's native reply box...");
    const replyBoxOpened = await openTwitterReplyBox(element);
    if (!replyBoxOpened) {
      console.error(
        "❌ Failed to open Twitter reply box - continuing without it"
      );
      // Don't return here, continue showing the popup
    } else {
      console.log("✅ Twitter reply box opened successfully");
    }

    // Show the extension popup on screen (with blur restored)
    console.log("🎪 Showing DragonFruit popup...");
    popup.style.display = "flex";
    // Keep the original blur effect
    popup.style.backdropFilter = "blur(15px)";
    popup.style.background = "rgba(0,0,0,0.7)";

    // Ensure regular tab is active by default (fix for persona detection issue)
    const activeTabButton = popup.querySelector(".tab-button.active");
    if (!activeTabButton) {
      const regularTabButton = popup.querySelector('[data-tab="regular"]');
      if (regularTabButton) {
        regularTabButton.classList.add("active");
        // Also ensure regular tab content is visible
        const regularTabContent = popup.querySelector("#regular-tab");
        const personasTabContent = popup.querySelector("#personas-tab");
        if (regularTabContent) regularTabContent.style.display = "block";
        if (personasTabContent) personasTabContent.style.display = "none";
      }
    }

    // Immediately ensure close handlers are active
    setupPopupCloseHandlers();

    // Analyze success rate
    const successRate = analyzeSuccess(
      metricsElement.getAttribute("aria-label")
    );

    // Update success content for both tabs
    const successContents = popup.querySelectorAll(".success-content");
    successContents.forEach((successContent) => {
      successContent.innerHTML = `
        <span>[BETA FEATURE]</span><br/>
        <span>Success Rate: ${successRate.successRate}%</span><br/>
        <span>${successRate.message}</span>
      `;

      const bgColor =
        successRate.successRate > 70
          ? "rgb(7 59 0)"
          : successRate.successRate > 40
          ? "rgb(59 7 0)"
          : "rgb(59 0 0)";
      successContent.style.backgroundColor = bgColor;
    });

    // Setup popup content for both tabs
    const popupBodies = popup.querySelectorAll(".reply-idea-body-editable");
    const tweetContentBodies = popup.querySelectorAll(".tweet-content-body");

    popupBodies.forEach((body) => {
      body.value = "Generating reply...";
      body.disabled = true;
    });

    // Extract just the tweet text for display in popup
    const tweetText = extractTweetText(element);
    tweetContentBodies.forEach((body) => {
      body.textContent = tweetText;
    });

    // Setup enhanced event handlers with Twitter integration FIRST
    setupTabEventHandlers();

    // Re-establish close button handlers (they might get lost during DOM manipulation)
    setupPopupCloseHandlers();

    // Re-setup new reply button handlers after cloning (they get lost during button cloning)
    setTimeout(() => {
      popup.querySelectorAll(".new-reply-button").forEach((button) => {
        // Remove any existing event listeners by cloning
        const newButton = button.cloneNode(true);
        button.parentNode.replaceChild(newButton, button);

        // Re-add the event listener
        newButton.addEventListener("click", async () => {
          if (activeArticle) {
            const activeTab = popup.querySelector(
              '.tab-content:not([style*="display: none"])'
            );
            const replyBody = activeTab.querySelector(
              ".reply-idea-body-editable"
            );

            replyBody.value = "Generating new reply...";
            replyBody.disabled = true;

            // Use extracted tweet text instead of full article text
            const tweetText = extractTweetText(activeArticle);

            // Get form values from the active tab
            let { userNeed, mood } = getFormValues();

            const reply = await generateReply(tweetText, userNeed, mood);

            // Process thinking tags if checkbox is enabled
            const processedReply = processThinkingTags(reply);
            replyBody.value = processedReply;
            replyBody.disabled = false;
            replyBody.focus();

            // Trigger character counter update
            const event = new Event("input");
            replyBody.dispatchEvent(event);

            // Check if we should auto-post
            if (shouldAutoPostWhenReady) {
              console.log("Auto-posting new reply as requested by Enter key");
              shouldAutoPostWhenReady = false;
              setTimeout(() => {
                const replyButton = activeTab.querySelector(
                  ".go-to-tweet-button"
                );
                if (replyButton) {
                  replyButton.click();
                }
              }, 500);
            } else {
              // Reset button state and focus it when ready
              const replyButton = activeTab.querySelector(
                ".go-to-tweet-button"
              );
              if (replyButton) {
                replyButton.disabled = false;
                replyButton.style.opacity = "1";
                replyButton.innerHTML = `
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
                    <path d="m22 2-7 20-4-9-9-4Z"/>
                    <path d="M22 2 11 13"/>
                  </svg>
                  Reply this
                `;
                replyButton.focus();
                setTimeout(() => replyButton.focus(), 100);
              }
            }
          }
        });
      });
    }, 100);

    // Immediately focus the reply button and make it ready for Enter
    setTimeout(() => {
      const activeTab = popup.querySelector(
        '.tab-content:not([style*="display: none"])'
      );
      const replyButton = activeTab?.querySelector(".go-to-tweet-button");
      if (replyButton) {
        replyButton.disabled = false;
        replyButton.style.opacity = "1";
        replyButton.focus();
        console.log("Reply button is now ready for Enter key");
      }
    }, 100);

    // Generate reply in background
    const formValues = getFormValues();
    generateReply(tweetText, formValues.userNeed, formValues.mood)
      .then((reply) => {
        // Process thinking tags if checkbox is enabled
        const processedReply = processThinkingTags(reply);

        popupBodies.forEach((body) => {
          body.value = processedReply;
          body.disabled = false;
          // Trigger character counter update
          const event = new Event("input");
          body.dispatchEvent(event);
        });

        // Check if we should auto-post (user pressed Enter while generating)
        if (shouldAutoPostWhenReady) {
          console.log("Auto-posting reply as requested by Enter key");
          shouldAutoPostWhenReady = false;
          setTimeout(() => {
            const activeTab = popup.querySelector(
              '.tab-content:not([style*="display: none"])'
            );
            const replyButton = activeTab?.querySelector(".go-to-tweet-button");
            if (replyButton) {
              replyButton.click();
            }
          }, 200);
        }

        // Re-establish button handlers after content is loaded
        setupTabEventHandlers();
        setupPopupCloseHandlers();
      })
      .catch((error) => {
        console.error("Reply generation failed:", error);
        popupBodies.forEach((body) => {
          body.value = "Error generating reply. Check your configuration.";
          body.disabled = false;
        });

        // Re-establish button handlers even after error
        setupTabEventHandlers();
        setupPopupCloseHandlers();
      });
  });
}

// Function to set up copy and reply button handlers for the active tab
function setupTabEventHandlers() {
  const activeTab = getActiveTab();
  if (!activeTab) return;

  const replyButton = activeTab.querySelector(".go-to-tweet-button");
  const copyButton = activeTab.querySelector(".copy-button");

  // Set up reply button handler
  if (replyButton) {
    // Clone to remove existing listeners
    const newReplyButton = replyButton.cloneNode(true);
    replyButton.parentNode.replaceChild(newReplyButton, replyButton);

    newReplyButton.innerHTML = `
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
        <path d="m22 2-7 20-4-9-9-4Z"/>
        <path d="M22 2 11 13"/>
      </svg>
      Reply this
    `;
    newReplyButton.disabled = false;
    newReplyButton.style.opacity = "1";

    newReplyButton.onclick = async () => {
      try {
        // Get the text from the textarea from the active tab
        const currentActiveTab = getActiveTab();
        const textareaElement = currentActiveTab?.querySelector(
          ".reply-idea-body-editable"
        );

        if (!textareaElement) {
          console.error("Textarea element not found in active tab");
          return;
        }

        // Like the tweet immediately on reply intent
        if (window.triggerLikeOnReply && activeArticle) {
          window.triggerLikeOnReply(activeArticle);
        }

        let replyText = textareaElement.value;

        // Check if reply is still generating
        if (
          replyText === "Generating reply..." ||
          replyText === "Generating new reply..." ||
          textareaElement.disabled
        ) {
          console.log("Reply still generating - setting auto-post flag");
          shouldAutoPostWhenReady = true;

          // Visual feedback
          newReplyButton.style.opacity = "0.7";
          newReplyButton.innerHTML = `
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
            <path d="m22 2-7 20-4-9-9-4Z"/>
            <path d="M22 2 11 13"/>
          </svg>
          Will post when ready...
        `;
          return;
        }

        replyText = replyText.trim();

        // Process thinking tags if checkbox is enabled
        replyText = processThinkingTags(replyText);

        // Check if the text contains HTML-like content (which shouldn't be there)
        if (
          replyText.includes("<") ||
          replyText.includes("Mood:") ||
          replyText.includes("Brainrot")
        ) {
          console.error(
            "Contaminated text detected, attempting to clean:",
            replyText
          );
          // Try to extract just the actual reply content
          const lines = replyText.split("\n");
          const cleanLines = lines.filter((line) => {
            const trimmed = line.trim();
            return (
              trimmed.length > 0 &&
              !trimmed.includes("Mood:") &&
              !trimmed.includes("Brainrot") &&
              !trimmed.includes("Copy") &&
              !trimmed.includes("Reply this") &&
              !trimmed.includes("💡") &&
              !trimmed.includes("Auto") &&
              !trimmed.includes("Agree") &&
              !trimmed.includes("Disagree") &&
              !trimmed.includes("Motivate") &&
              !trimmed.includes("Roast") &&
              !trimmed.includes("Cute") &&
              !trimmed.includes("Custom") &&
              !trimmed.includes("%")
            );
          });
          replyText = cleanLines.join(" ").trim();
        }

        // Validate that we have actual content
        if (!replyText || replyText.length === 0) {
          console.error("No valid reply text to insert after cleaning");
          return;
        }

        // Hide popup immediately when user clicks reply
        closePopup();

        // Wait a moment for popup to close
        await new Promise((resolve) => setTimeout(resolve, 100));

        // Type the reply directly into Twitter's editor
        const success = await typeInTwitterEditor(replyText);

        if (!success) {
          console.error("Failed to type reply into Twitter editor");
        }
      } catch (error) {
        console.error("Error in reply handler:", error);
      }
    };
  }

  // Set up copy button handler
  if (copyButton) {
    // Clone to remove existing listeners
    const newCopyButton = copyButton.cloneNode(true);
    copyButton.parentNode.replaceChild(newCopyButton, copyButton);

    newCopyButton.disabled = false;
    newCopyButton.onclick = async () => {
      try {
        // Get textarea from the active tab, not just the first one found
        const currentActiveTab = getActiveTab();
        const textareaElement = currentActiveTab?.querySelector(
          ".reply-idea-body-editable"
        );

        if (!textareaElement) {
          throw new Error("No textarea found in active tab");
        }

        const textToCopy = textareaElement.value.trim();

        if (!textToCopy) {
          throw new Error("No content to copy");
        }

        await navigator.clipboard.writeText(textToCopy);
        newCopyButton.textContent = "Copied!";
        newCopyButton.classList.add("copy-success");
        newCopyButton.disabled = true;

        setTimeout(() => {
          newCopyButton.textContent = "Copy";
          newCopyButton.classList.remove("copy-success");
          newCopyButton.disabled = false;
        }, 3000);
      } catch (error) {
        console.error("Copy error:", error);
        newCopyButton.textContent = "Error";
        newCopyButton.classList.add("copy-error");
        setTimeout(() => {
          newCopyButton.textContent = "Copy";
          newCopyButton.classList.remove("copy-error");
          newCopyButton.disabled = false;
        }, 2000);
      }
    };
  }
}

// Tweet Filtering System
let filterSettings = {};

// Load filter settings from localStorage
function loadFilterSettings() {
  const defaultSettings = {
    // Engagement filters
    filter_views_enabled: false,
    filter_likes_enabled: false,
    filter_retweets_enabled: false,
    filter_replies_enabled: false,
    filter_success_rate_enabled: false,

    // Time filter
    filter_time_enabled: false,

    // Content filters
    filter_engagement_bait_enabled: false,
    filter_bad_words_enabled: false,
    filter_custom_words_enabled: false,
    filter_blocked_accounts_enabled: false,
  };

  for (const [key, defaultValue] of Object.entries(defaultSettings)) {
    const stored = localStorage.getItem(key);
    filterSettings[key] = stored !== null ? stored === "true" : defaultValue;
  }

  // Load numeric thresholds
  const numericSettings = [
    "filter_views_threshold",
    "filter_likes_threshold",
    "filter_retweets_threshold",
    "filter_replies_threshold",
    "filter_success_rate_threshold",
    "filter_custom_hours",
    "filter_views_max_threshold",
    "filter_likes_max_threshold",
    "filter_retweets_max_threshold",
    "filter_replies_max_threshold",
  ];

  for (const setting of numericSettings) {
    const stored = localStorage.getItem(setting);
    filterSettings[setting] = stored ? parseInt(stored) : null; // Use null to distinguish from 0
  }

  // Load text settings
  const textSettings = [
    "filter_time_preset",
    "filter_custom_words_list",
    "filter_blocked_accounts_list",
    "filter_custom_moderation_rules",
  ];

  for (const setting of textSettings) {
    filterSettings[setting] = localStorage.getItem(setting) || "";
  }
}

// Extract engagement metrics from tweet article
function extractEngagementMetrics(articleElement) {
  const metrics = {
    views: 0,
    likes: 0,
    retweets: 0,
    replies: 0,
    bookmarks: 0,
  };

  try {
    // Find the metrics container
    const metricsContainer = articleElement.querySelector('[role="group"]');
    if (!metricsContainer) return metrics;

    // Extract view count
    const viewElement = metricsContainer.querySelector('[href$="/analytics"]');
    if (viewElement) {
      const viewText = viewElement.textContent.trim();
      metrics.views = parseMetricNumber(viewText);
    }

    // Extract other metrics from aria-labels and text content
    const buttons = metricsContainer.querySelectorAll(
      'button, [role="button"]'
    );

    buttons.forEach((button) => {
      const ariaLabel = button.getAttribute("aria-label") || "";
      const text = button.textContent.trim();

      // Replies
      if (ariaLabel.includes("replies") || ariaLabel.includes("reply")) {
        metrics.replies =
          parseMetricNumber(ariaLabel) || parseMetricNumber(text);
      }
      // Retweets
      else if (ariaLabel.includes("repost") || ariaLabel.includes("retweet")) {
        metrics.retweets =
          parseMetricNumber(ariaLabel) || parseMetricNumber(text);
      }
      // Likes
      else if (ariaLabel.includes("likes") || ariaLabel.includes("like")) {
        metrics.likes = parseMetricNumber(ariaLabel) || parseMetricNumber(text);
      }
      // Bookmarks
      else if (ariaLabel.includes("bookmark")) {
        metrics.bookmarks =
          parseMetricNumber(ariaLabel) || parseMetricNumber(text);
      }
    });
  } catch (error) {
    console.error("Error extracting engagement metrics:", error);
  }

  return metrics;
}

// Parse metric numbers (handles K, M suffixes)
function parseMetricNumber(text) {
  if (!text) return 0;

  const match = text.match(/[\d,]+\.?\d*[KkMm]?/);
  if (!match) return 0;

  let num = parseFloat(match[0].replace(/,/g, ""));
  const suffix = match[0].slice(-1).toLowerCase();

  if (suffix === "k") num *= 1000;
  else if (suffix === "m") num *= 1000000;

  return Math.floor(num);
}

// Extract tweet timestamp
function extractTweetTimestamp(articleElement) {
  try {
    const timeElement = articleElement.querySelector("time");
    if (timeElement) {
      const datetime = timeElement.getAttribute("datetime");
      if (datetime) {
        return new Date(datetime);
      }
    }

    // Fallback: look for relative time links
    const timeLink = articleElement.querySelector('a[href*="/status/"] time');
    if (timeLink) {
      const datetime = timeLink.getAttribute("datetime");
      if (datetime) {
        return new Date(datetime);
      }
    }
  } catch (error) {
    console.error("Error extracting tweet timestamp:", error);
  }

  return null;
}

// Extract username from tweet
function extractUsername(articleElement) {
  try {
    // Look for username in various selectors
    const usernameSelectors = [
      '[data-testid="User-Name"] a[href^="/"]',
      'a[href^="/"][role="link"] span',
      '[data-testid="User-Names"] a span',
    ];

    for (const selector of usernameSelectors) {
      const element = articleElement.querySelector(selector);
      if (element) {
        const href = element.closest("a")?.getAttribute("href");
        if (href && href.startsWith("/") && !href.includes("/status/")) {
          return href.substring(1); // Remove leading /
        }
      }
    }
  } catch (error) {
    console.error("Error extracting username:", error);
  }

  return "";
}

// Check if tweet passes engagement filters
function passesEngagementFilters(metrics) {
  const checks = [
    {
      enabled: "filter_views_enabled",
      threshold: "filter_views_threshold",
      value: metrics.views,
    },
    {
      enabled: "filter_likes_enabled",
      threshold: "filter_likes_threshold",
      value: metrics.likes,
    },
    {
      enabled: "filter_retweets_enabled",
      threshold: "filter_retweets_threshold",
      value: metrics.retweets,
    },
    {
      enabled: "filter_replies_enabled",
      threshold: "filter_replies_threshold",
      value: metrics.replies,
    },
  ];

  for (const check of checks) {
    if (
      filterSettings[check.enabled] &&
      check.value < filterSettings[check.threshold]
    ) {
      return false;
    }
  }

  // Add max threshold checks
  const maxChecks = [
    {
      threshold: "filter_views_max_threshold",
      value: metrics.views,
    },
    {
      threshold: "filter_likes_max_threshold",
      value: metrics.likes,
    },
    {
      threshold: "filter_retweets_max_threshold",
      value: metrics.retweets,
    },
    {
      threshold: "filter_replies_max_threshold",
      value: metrics.replies,
    },
  ];

  for (const check of maxChecks) {
    if (
      filterSettings[check.threshold] !== null &&
      check.value > filterSettings[check.threshold]
    ) {
      return false;
    }
  }

  // Success rate check
  if (filterSettings.filter_success_rate_enabled) {
    const successAnalysis = analyzeSuccess(
      `${metrics.replies} ${metrics.retweets} ${metrics.likes} ${metrics.bookmarks} ${metrics.views}`
    );
    console.log("Success rate filter DEBUG:", {
      enabled: filterSettings.filter_success_rate_enabled,
      threshold: filterSettings.filter_success_rate_threshold,
      calculated: successAnalysis.successRate,
      message: successAnalysis.message,
      metrics: metrics,
      willHide:
        successAnalysis.successRate <
        filterSettings.filter_success_rate_threshold,
      comparison: `${successAnalysis.successRate} < ${
        filterSettings.filter_success_rate_threshold
      } = ${
        successAnalysis.successRate <
        filterSettings.filter_success_rate_threshold
      }`,
    });
    if (
      successAnalysis.successRate < filterSettings.filter_success_rate_threshold
    ) {
      return false;
    }
  }

  return true;
}

// Check if tweet passes time filters
function passesTimeFilters(timestamp) {
  if (!filterSettings.filter_time_enabled || !timestamp) {
    return true;
  }

  const now = new Date();
  let hoursLimit = 0;

  if (filterSettings.filter_time_preset === "custom") {
    hoursLimit = filterSettings.filter_custom_hours || 24;
  } else if (filterSettings.filter_time_preset) {
    hoursLimit = parseInt(filterSettings.filter_time_preset);
  }

  if (hoursLimit > 0) {
    const hoursDiff = (now - timestamp) / (1000 * 60 * 60);
    return hoursDiff <= hoursLimit;
  }

  return true;
}

// Remove thinking tags from AI responses (for moderation purposes)
function removeThinkingTagsFromResponse(text) {
  if (!text) return text;

  // Remove everything between <think> and </think> tags (case insensitive)
  const thinkingTagRegex = /<think\b[^>]*>.*?<\/think>/gis;
  let processedText = text.replace(thinkingTagRegex, "");

  // Clean up any extra whitespace that might be left
  processedText = processedText.replace(/\n\s*\n\s*\n/g, "\n\n");
  processedText = processedText.trim();

  console.log("🧠 Thinking tags removed from AI response:", {
    originalLength: text.length,
    processedLength: processedText.length,
    hadThinkingTags: thinkingTagRegex.test(text),
  });

  return processedText;
}

// AI-powered engagement bait detection
async function isEngagementBait(tweetText, username) {
  console.log("🔍 AI Engagement Bait Analysis Starting:", {
    tweetText: tweetText.substring(0, 100) + "...",
    username,
  });

  try {
    const config = getConfig();
    console.log("🔧 Config loaded:", {
      provider: config.provider,
      hasApiKey: !!config.apiKey,
    });

    // Count hashtags and mentions
    const hashtagCount = (tweetText.match(/#\w+/g) || []).length;
    const mentionCount = (tweetText.match(/@\w+/g) || []).length;

    console.log("📊 Tweet stats:", { hashtagCount, mentionCount });

    // Quick rule-based filter for obvious cases
    if (hashtagCount > 5 || mentionCount > 3) {
      console.log("⚡ Quick filter: Excessive hashtags/mentions detected");
      return { isBait: true, reason: "Excessive hashtags or mentions" };
    }

    // Build the classification prompt with custom moderation rules
    let prompt = `Analyze this tweet for engagement bait, LinkedIn-style corporate content, or spam characteristics:

Tweet: "${tweetText}"
Username: ${username}
Hashtags: ${hashtagCount}
Mentions: ${mentionCount}

Classify this tweet as BAD if it contains:
1. Engagement bait (asking for likes, follows, shares, comments just for engagement)
2. LinkedIn-style corporate posts (motivational quotes, hustle culture, "agree?", "thoughts?")
3. Excessive self-promotion or spam
4. Generic motivational content with no real value
5. Posts that clearly belong on LinkedIn rather than Twitter
6. Obvious attention-seeking without substance`;

    // Add custom moderation rules if they exist
    if (
      filterSettings.filter_custom_moderation_rules &&
      filterSettings.filter_custom_moderation_rules.trim()
    ) {
      const customRules = filterSettings.filter_custom_moderation_rules.trim();
      prompt += `
7. Custom criteria: ${customRules}`;
    }

    prompt += `

Classify as GOOD if it's:
- Genuine personal thoughts or experiences
- Actual news, information, or discussion
- Authentic questions seeking real answers
- Creative content, jokes, or entertainment
- Professional content that's appropriate for Twitter

Respond with ONLY one word: "BAD" or "GOOD"`;

    // Use the same AI provider as configured
    const handlers = {
      ollama: generateOllamaReply,
      mistral: generateMistralReply,
      openai: generateOpenAIReply,
      claude: generateClaudeReply,
      gemini: generateGeminiReply,
    };

    const handler = handlers[config.provider];
    if (!handler) {
      console.log("❌ No AI provider configured for engagement bait detection");
      return { isBait: false, reason: "No AI provider available" };
    }

    console.log("🤖 Calling AI provider for analysis...");

    // Get AI analysis
    const response = await handler(config, prompt, "", "", 0);

    console.log("📝 AI Response (raw):", response);

    // Remove thinking tags from AI response by default
    const cleanResponse = removeThinkingTagsFromResponse(response);
    console.log("📝 AI Response (processed):", cleanResponse);

    // Check if response contains "bad" (case-insensitive)
    const responseText = cleanResponse.toLowerCase().trim();
    const isBad =
      responseText.includes("bad") || responseText.startsWith("bad");

    if (isBad) {
      console.log(`🚫 AI detected engagement bait`);
      return { isBait: true, reason: "AI classified as engagement bait" };
    } else {
      console.log("✅ AI classified as good content");
      return { isBait: false, reason: "Passed AI analysis" };
    }
  } catch (error) {
    console.error("💥 Error in AI engagement bait detection:", error);
    // Fallback to basic rule-based detection
    return { isBait: false, reason: "AI analysis failed, passed by default" };
  }
}

// Check if tweet content passes content filters
async function passesContentFilters(tweetText, username) {
  console.log("🛡️ Content filters check starting for:", {
    username,
    textPreview: tweetText.substring(0, 50) + "...",
  });
  console.log("🔧 Filter settings:", {
    engagementBaitEnabled: filterSettings.filter_engagement_bait_enabled,
    badWordsEnabled: filterSettings.filter_bad_words_enabled,
    customWordsEnabled: filterSettings.filter_custom_words_enabled,
    blockedAccountsEnabled: filterSettings.filter_blocked_accounts_enabled,
  });

  // AI-powered engagement bait detection
  if (filterSettings.filter_engagement_bait_enabled) {
    console.log("🤖 Running AI engagement bait detection...");
    const baitAnalysis = await isEngagementBait(tweetText, username);
    if (baitAnalysis.isBait) {
      console.log(`🚫 Tweet filtered out: ${baitAnalysis.reason}`);
      return false;
    }
  } else {
    console.log("⏭️ Engagement bait filter disabled, skipping");
  }

  // Bad words filter
  if (filterSettings.filter_bad_words_enabled) {
    const badWords = [
      "spam",
      "scam",
      "fake",
      "bot",
      "clickbait",
      "misleading",
      "hate",
      "toxic",
      "troll",
      "harassment",
      "abuse",
      "offensive",
      "inappropriate",
      "nsfw",
      "explicit",

      // ADD LATER: More specific words can be added here
    ];

    const lowerText = tweetText.toLowerCase();
    if (badWords.some((word) => lowerText.includes(word))) {
      return false;
    }
  }

  // Custom words filter
  if (
    filterSettings.filter_custom_words_enabled &&
    filterSettings.filter_custom_words_list
  ) {
    const customWords = filterSettings.filter_custom_words_list
      .split(";")
      .map((word) => word.trim().toLowerCase())
      .filter((word) => word.length > 0);

    const lowerText = tweetText.toLowerCase();
    if (customWords.some((word) => lowerText.includes(word))) {
      return false;
    }
  }

  // Blocked accounts filter
  if (
    filterSettings.filter_blocked_accounts_enabled &&
    filterSettings.filter_blocked_accounts_list
  ) {
    const blockedAccounts = filterSettings.filter_blocked_accounts_list
      .split(";")
      .map((account) => account.trim().toLowerCase().replace("@", ""))
      .filter((account) => account.length > 0);

    const lowerUsername = username.toLowerCase();
    if (
      blockedAccounts.some(
        (account) =>
          lowerUsername === account || lowerUsername.includes(account)
      )
    ) {
      return false;
    }
  }

  return true;
}

// Main filter function
async function shouldHideTweet(articleElement) {
  // Skip if no filters are enabled
  const anyFilterEnabled = Object.keys(filterSettings).some(
    (key) => key.includes("_enabled") && filterSettings[key]
  );

  console.log(
    "🎯 shouldHideTweet called - Any filters enabled:",
    anyFilterEnabled
  );

  if (!anyFilterEnabled) {
    return false;
  }

  try {
    // Extract data from tweet
    const metrics = extractEngagementMetrics(articleElement);
    const timestamp = extractTweetTimestamp(articleElement);
    const tweetText = extractTweetText(articleElement);
    const username = extractUsername(articleElement);

    console.log("📊 Extracted tweet data:", {
      username,
      textPreview: tweetText.substring(0, 50) + "...",
      metrics: metrics ? { views: metrics.views, likes: metrics.likes } : null,
    });

    // Apply filters
    if (!passesEngagementFilters(metrics)) {
      console.log("❌ Failed engagement filters");
      return true;
    }

    if (!passesTimeFilters(timestamp)) {
      console.log("❌ Failed time filters");
      return true;
    }

    if (!(await passesContentFilters(tweetText, username))) {
      console.log("❌ Failed content filters");
      return true;
    }

    console.log("✅ Tweet passed all filters");
  } catch (error) {
    console.error("💥 Error in tweet filtering:", error);
  }

  return false;
}

// Apply filters to visible tweets
async function applyTweetFilters() {
  if (!isExtensionEnabled()) return;

  console.log("🔄 applyTweetFilters started");

  const articles = document.querySelectorAll(
    'article[data-testid="tweet"]:not([data-filter-processed])'
  );
  let hiddenCount = 0;
  let totalProcessed = articles.length;

  console.log(`📝 Found ${totalProcessed} unprocessed tweets to filter`);

  // Process articles in smaller batches to avoid overwhelming the AI
  const batchSize = 5;
  for (let i = 0; i < articles.length; i += batchSize) {
    const batch = Array.from(articles).slice(i, i + batchSize);

    await Promise.all(
      batch.map(async (article) => {
        article.dataset.filterProcessed = "true";

        if (await shouldHideTweet(article)) {
          hiddenCount++;
          // Hide the tweet with a smooth transition
          article.style.transition = "all 0.3s ease-out";
          article.style.opacity = "0";
          article.style.transform = "scale(0.95)";
          article.style.maxHeight = "0";
          article.style.overflow = "hidden";
          article.style.marginBottom = "0";
          article.style.paddingTop = "0";
          article.style.paddingBottom = "0";

          // Completely remove from DOM after transition
          setTimeout(() => {
            if (article.parentNode) {
              article.remove();
            }
          }, 300);
        }
      })
    );

    // Small delay between batches to prevent rate limiting
    if (i + batchSize < articles.length) {
      await new Promise((resolve) => setTimeout(resolve, 100));
    }
  }

  // Log filter statistics if any tweets were processed
  if (totalProcessed > 0) {
    console.log(
      `DragonFruit Filters: Processed ${totalProcessed} tweets, hidden ${hiddenCount}`
    );
  }
}

// Listen for filter settings updates
try {
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === "FILTER_SETTINGS_UPDATED") {
      loadFilterSettings();
      // Re-process all tweets with new settings
      document
        .querySelectorAll('article[data-testid="tweet"]')
        .forEach((article) => {
          article.removeAttribute("data-filter-processed");
        });
      setTimeout(() => applyTweetFilters(), 100);
    }
  });
} catch (error) {
  console.error("Error setting up filter message listener:", error);
}

// Initialize filters
loadFilterSettings();

// Apply filters on scroll and mutations
const filterDebounce = debounce(applyTweetFilters, 300);
window.addEventListener("scroll", filterDebounce);

// Watch for new tweets being added to DOM
const filterObserver = new MutationObserver((mutations) => {
  let shouldFilter = false;

  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (
            node.matches('article[data-testid="tweet"]') ||
            node.querySelector('article[data-testid="tweet"]')
          ) {
            shouldFilter = true;
          }
        }
      });
    }
  });

  if (shouldFilter) {
    filterDebounce();
  }
});

// Start observing
filterObserver.observe(document.body, {
  childList: true,
  subtree: true,
});

// Initial filter application
setTimeout(() => {
  applyTweetFilters();
}, 1000);

// Main service function to add reply buttons to tweets
const outletService = () => {
  if (!isExtensionEnabled()) return;

  const articles = document.querySelectorAll(
    'article[data-testid="tweet"]:not([data-processed])'
  );

  articles.forEach((article) => {
    // Skip if this article has already been processed
    if (article.dataset.processed) return;

    // Find the metrics container (where engagement stats are shown)
    const metricsElement = article.querySelector('[role="group"]');
    if (!metricsElement) return;

    // Extract engagement data from aria-label
    const ariaLabel = metricsElement.getAttribute("aria-label");
    if (!ariaLabel) return;

    // Extract view count
    const viewCount = extractViewCount(ariaLabel);

    // Get tweet link for navigation
    const tweetLink = article.querySelector('a[href*="/status/"]');
    if (!tweetLink) return;

    // Find the reply button in the metrics element and insert our button before it
    const replyButtonContainer = metricsElement.querySelector(
      "div.css-175oi2r.r-18u37iz.r-1h0z5md.r-13awgt0"
    );
    if (!replyButtonContainer) return;

    const button = createReplyButton(viewCount, ariaLabel);
    applyViewCountStyles(button, viewCount);
    setupButtonInteraction(article, button, metricsElement, tweetLink);

    // Insert our button before the reply button
    metricsElement.insertBefore(button, replyButtonContainer);

    // Add the "Bring agent here" button via the agent's exposed function
    if (window.addAgentButtonToTweet) {
      window.addAgentButtonToTweet(article, metricsElement, button.nextSibling);
    }

    article.dataset.processed = "true";
  });
};

// Initialize
outletService();
window.addEventListener("scroll", debounce(outletService));

// Apply both tweet filters and reply button generation
const combinedService = debounce(() => {
  outletService();
  applyTweetFilters();
}, 300);

// Update existing filter observer to also run outletService
filterObserver.disconnect();

const combinedObserver = new MutationObserver((mutations) => {
  let shouldProcess = false;

  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      mutation.addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          if (
            node.matches('article[data-testid="tweet"]') ||
            node.querySelector('article[data-testid="tweet"]')
          ) {
            shouldProcess = true;
          }
        }
      });
    }
  });

  if (shouldProcess) {
    combinedService();
  }
});

// Start combined observing
combinedObserver.observe(document.body, {
  childList: true,
  subtree: true,
});

// Initial combined application
setTimeout(() => {
  outletService();
  applyTweetFilters();
}, 1000);

// ========================= AGENTIC MODE V3 =========================
(function () {
  // Inject highlight CSS
  const style = document.createElement("style");
  style.textContent = `@keyframes agentHighlightPulse{0%{background-color:rgba(245,208,0,0.4);}50%{background-color:rgba(245,208,0,0.8);}100%{background-color:rgba(245,208,0,0.4);}}.agentic-highlight{scale:1.1;transition:all 0.3s;backdrop-filter:blur(10px);animation:agentHighlightPulse 1.5s infinite;border-radius:8px;box-shadow:0 0 10px rgba(245,208,0,0.7);}`;
  document.head.appendChild(style);

  const agentState = {
    isEnabled: false,
    settings: {},
    currentTweetEl: null,
    isNavigating: false,
    agentStep: 'IDLE', // IDLE -> HIGHLIGHTED -> POPUP_OPEN
  };

  function updateBodyClass() {
    if (agentState.isEnabled) {
      document.body.classList.add('agent-mode-active');
    } else {
      document.body.classList.remove('agent-mode-active');
    }
  }

  function loadAgentSettings() {
    agentState.isEnabled = localStorage.getItem("agent_mode_enabled") === "true";
    agentState.settings = {
      likes_enabled: localStorage.getItem("agent_likes_enabled") === "true",
      likes_threshold: parseInt(localStorage.getItem("agent_likes_threshold") || "0"),
      views_enabled: localStorage.getItem("agent_views_enabled") === "true",
      views_threshold: parseInt(localStorage.getItem("agent_views_threshold") || "0"),
      retweets_enabled: localStorage.getItem("agent_retweets_enabled") === "true",
      retweets_threshold: parseInt(localStorage.getItem("agent_retweets_threshold") || "0"),
      replies_enabled: localStorage.getItem("agent_replies_enabled") === "true",
      replies_threshold: parseInt(localStorage.getItem("agent_replies_threshold") || "0"),
      success_enabled: localStorage.getItem("agent_success_enabled") === "true",
      success_threshold: parseInt(localStorage.getItem("agent_success_threshold") || "0"),
      ai_enabled: localStorage.getItem("agent_ai_enabled") === "true",
      ai_prompt: localStorage.getItem("agent_ai_prompt") || "",
    };
  }

  loadAgentSettings();
  updateBodyClass();

  try {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.type === "AGENT_SETTINGS_UPDATED") {
        loadAgentSettings();
        updateBodyClass();
        if (!agentState.isEnabled && agentState.currentTweetEl) {
          agentState.currentTweetEl.classList.remove('agentic-highlight');
          agentState.currentTweetEl = null;
          agentState.agentStep = 'IDLE';
        }
        sendResponse && sendResponse({ success: true });
      }
    });
  } catch (err) { /* ignore */ }

  function isTweetEligible(article) {
    if (!article || article.classList.contains('already-replied')) return false;
    const settings = agentState.settings;
    const metrics = extractEngagementMetrics(article);
    if (!metrics) return false;

    if (settings.likes_enabled && metrics.likes < settings.likes_threshold) return false;
    if (settings.views_enabled && metrics.views < settings.views_threshold) return false;
    if (settings.retweets_enabled && metrics.retweets < settings.retweets_threshold) return false;
    if (settings.replies_enabled && metrics.replies < settings.replies_threshold) return false;

    if (settings.success_enabled) {
      const success = analyzeSuccess(`${metrics.replies} ${metrics.retweets} ${metrics.likes} ${metrics.bookmarks} ${metrics.views}`);
      if (success.successRate < settings.success_threshold) return false;
    }
    return true;
  }

  function highlightTweet(article) {
      if (agentState.currentTweetEl) {
          agentState.currentTweetEl.classList.remove('agentic-highlight');
      }
      if (article) {
          agentState.currentTweetEl = article;
          article.classList.add('agentic-highlight');
          article.scrollIntoView({ behavior: 'instant', block: 'center' });
          agentState.agentStep = 'HIGHLIGHTED';
      } else {
          agentState.currentTweetEl = null;
          agentState.agentStep = 'IDLE';
      }
  }

  async function navigate(direction) {
    if (agentState.isNavigating) return;
    agentState.isNavigating = true;

    const allEligibleTweets = Array.from(document.querySelectorAll('article[data-testid="tweet"]')).filter(isTweetEligible);
    const currentTweet = agentState.currentTweetEl;
    let nextTweet = null;

    if (direction === 1) { // Forward
        if (currentTweet) {
            const currentRect = currentTweet.getBoundingClientRect();
            // Find the first tweet that is visibly below the current one
            nextTweet = allEligibleTweets.find(t => t.getBoundingClientRect().top > currentRect.bottom - 50);
        } else {
            // Start from the top
            nextTweet = allEligibleTweets[0];
        }

        if (!nextTweet) {
            // We're at the bottom, scroll to load more
            window.scrollBy(0, window.innerHeight);
            setTimeout(() => {
                agentState.isNavigating = false;
                navigate(1); // Retry after a delay
            }, 500);
            return;
        }
    } else { // Backward
        if (currentTweet) {
            const currentRect = currentTweet.getBoundingClientRect();
            // Find the last tweet that is visibly above the current one
            nextTweet = [...allEligibleTweets].reverse().find(t => t.getBoundingClientRect().bottom < currentRect.top + 50);
        }
        // If no current or no previous, do nothing
    }
    
    highlightTweet(nextTweet);
    agentState.isNavigating = false;
  }

  window.addEventListener('keydown', (e) => {
    if (!agentState.isEnabled) return;
    const target = e.target;
    if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) return;

    // Tab: Main progression
    if (e.key === 'Tab' && !e.shiftKey && !e.ctrlKey) {
        e.preventDefault();
        
        if (agentState.agentStep === 'IDLE') {
            navigate(1);
        } else if (agentState.agentStep === 'HIGHLIGHTED' && agentState.currentTweetEl) {
            agentState.currentTweetEl.querySelector('.reply-button-inner')?.click();
            agentState.agentStep = 'POPUP_OPEN';
        } else if (agentState.agentStep === 'POPUP_OPEN') {
            const replyBtn = popup.querySelector('.go-to-tweet-button');
            if (replyBtn) {
              if (agentState.currentTweetEl) {
                  agentState.currentTweetEl.classList.add('already-replied');
                  if (window.triggerLikeOnReply) {
                    window.triggerLikeOnReply(agentState.currentTweetEl);
                  }
              }
              replyBtn.click();
              highlightTweet(null); // Un-highlight and reset state
              setTimeout(() => navigate(1), 200); // Navigate to next after a short delay
            }
        }
    }

    // Shift + Tab: Go back
    if (e.key === 'Tab' && e.shiftKey) {
        e.preventDefault();
        navigate(-1);
    }
    
    // Escape: Skip current, go to next
    if (e.key === 'Escape') {
      e.preventDefault();
      if (popup && popup.style.display === 'flex') {
        closePopup();
      }
      navigate(1);
    }
    
    // Ctrl + Tab: Regenerate reply
    if (e.key === 'Tab' && e.ctrlKey) {
        e.preventDefault();
        if (popup && popup.style.display === 'flex' && agentState.agentStep === 'POPUP_OPEN') {
            popup.querySelector('.new-reply-button')?.click();
        }
    }
  }, true);

  window.addAgentButtonToTweet = (article, metricsEl, referenceNode) => {
    if (!metricsEl || !referenceNode) return;
    const agentButton = createAgentHereButton(article);
    metricsEl.insertBefore(agentButton, referenceNode);
  };
  // ... new function ...
  function createAgentHereButton(article) {
    const button = document.createElement("div");
    // Using similar classes to blend in, but smaller
    button.className = "css-175oi2r r-18u37iz r-1h0z5md r-13awgt0 agent-here-button-container";
    button.style.width = '38px';
    button.style.marginLeft = '-8px'; // Adjust spacing

    button.innerHTML = `
      <button aria-label="Bring agent here" role="button" class="css-175oi2r r-1777fci r-bt1l66 r-bztko3 r-lrvibr r-1loqt21 r-1ny4l3l agent-here-button" type="button" title="Bring agent here">
        <div dir="ltr" class="css-146c3p1 r-bcqeeo r-1ttztb7 r-qvutc0 r-37j5jr r-a023e6 r-rjixqe r-16dba41 r-1awozwy r-6koalj r-1h0z5md r-o7ynqc r-clp7b1 r-3s2u2q" style="color: rgb(113, 118, 123); transition: color 0.2s;">
          <div class="css-175oi2r r-xoduu5">
            <svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-dnmrzs r-bnwqim r-lrvibr r-m6rgpd r-1xvli5t r-1hdv0qi" style="width: 1.2em; height: 1.2em; fill:currentColor;">
              <g>
                <path d="M19 7v4H5.83l3.58-3.59L8 6l-6 6 6 6 1.41-1.41L5.83 13H21V7z"></path>
              </g>
            </svg>
          </div>
        </div>
      </button>
    `;
    
    const btnEl = button.querySelector('button');
    const textDiv = button.querySelector('div[dir="ltr"]');
    if(btnEl) {
        btnEl.addEventListener('click', (e) => {
          // This stops the click from opening the tweet itself
          e.stopPropagation();
          
          // Give feedback if agent mode is off
          if (!agentState.isEnabled) {
              console.log('Agent mode is not enabled.');
              if(textDiv) textDiv.style.color = 'rgb(255, 100, 100)';
              button.style.transform = 'scale(0.9)';
              setTimeout(() => {
                  button.style.transform = 'scale(1)';
                  if(textDiv) textDiv.style.color = 'rgb(113, 118, 123)';
              }, 300);
              return;
          }

          // For debugging: confirm the click is registered
          console.log("Agent summoned to tweet.", article);

          // Move the agent's focus to this tweet
          highlightTweet(article);
        });
    }

    return button;
  }

})();
// ======================= END AGENTIC MODE V3 =======================

// ========================= AUTOLIKE =========================
(function() {
  const autolikeState = {
    feedEnabled: false,
    replyEnabled: false,
    delay: 2000,
    delayRandom: 500,
    isLiking: false,
  };

  function loadAutolikeSettings() {
    autolikeState.feedEnabled = localStorage.getItem('autolike_feed_enabled') === 'true';
    autolikeState.replyEnabled = localStorage.getItem('autolike_reply_enabled') === 'true';
    autolikeState.delay = parseInt(localStorage.getItem('autolike_delay') || '2000', 10);
    autolikeState.delayRandom = parseInt(localStorage.getItem('autolike_delay_random') || '500', 10);
  }

  loadAutolikeSettings();

  try {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      if (request.type === "AUTOLIKE_SETTINGS_UPDATED") {
        loadAutolikeSettings();
        // Trigger a run if it was just enabled
        if (autolikeState.feedEnabled) {
          runFeedAutoliker();
        }
        sendResponse && sendResponse({ success: true });
      }
    });
  } catch (err) { /* ignore */ }

  function getLikeButton(article) {
    // Twitter uses data-testid="like" for unliked tweets
    return article.querySelector('[data-testid="like"]');
  }

  function likeTweet(article) {
    if (!article) return;
    const likeButton = getLikeButton(article);
    if (likeButton) {
      likeButton.click();
      console.log("DragonFruit Autolike:", article);
    }
  }

  function getRandomDelay() {
    const base = autolikeState.delay;
    const random = autolikeState.delayRandom;
    if (random > 0) {
      const randomOffset = Math.floor(Math.random() * (random * 2 + 1)) - random;
      return Math.max(200, base + randomOffset);
    }
    return base;
  }

  async function runFeedAutoliker() {
    if (!autolikeState.feedEnabled || autolikeState.isLiking) return;

    autolikeState.isLiking = true;
    const articlesToLike = Array.from(document.querySelectorAll('article[data-testid="tweet"]'))
      .filter(article => getLikeButton(article) && !article.dataset.autoliked);

    for (const article of articlesToLike) {
      // Mark as processed immediately to avoid re-queuing
      article.dataset.autoliked = 'true';
      likeTweet(article);
      const delay = getRandomDelay();
      await new Promise(resolve => setTimeout(resolve, delay));
    }

    autolikeState.isLiking = false;
  }

  // Hook into the reply function to trigger like-on-reply
  function likeOnReply(tweetArticle) {
    if (autolikeState.replyEnabled) {
      // Use the configured random delay
      const delay = getRandomDelay();
      setTimeout(() => likeTweet(tweetArticle), delay);
    }
  }
  
  // Expose the like-on-reply function to be called from other parts of the script
  window.triggerLikeOnReply = likeOnReply;

  // Run the feed autoliker on scroll and DOM changes
  const debouncedFeedAutoliker = debounce(runFeedAutoliker, 1000);
  window.addEventListener('scroll', debouncedFeedAutoliker);
  // Re-use the existing observer for new tweets
  const existingObserver = new MutationObserver((mutations) => {
    let shouldProcess = false;
    mutations.forEach((mutation) => {
      if (mutation.type === "childList") {
        mutation.addedNodes.forEach((node) => {
          if (node.nodeType === Node.ELEMENT_NODE) {
            if (node.matches('article[data-testid="tweet"]') || node.querySelector('article[data-testid="tweet"]')) {
              shouldProcess = true;
            }
          }
        });
      }
    });
    if (shouldProcess) {
      debouncedFeedAutoliker();
    }
  });
  
  existingObserver.observe(document.body, { childList: true, subtree: true });

})();
// ======================= END AUTOLIKE =======================