script.js

// ===============================================================
// 1. CONFIGURAÇÃO E INICIALIZAÇÃO DO FIREBASE BACKCUP
// ===============================================================
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged, signOut, sendEmailVerification, sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";
import { getFirestore, collection, addDoc, query, where, doc, updateDoc, deleteDoc, onSnapshot, serverTimestamp, getDocs } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-firestore.js";

import { firebaseConfig } from './firebase-config.js';

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);

// ===============================================================
// 2. ELEMENTOS DA UI E ESTADO DA APLICAÇÃO
// ===============================================================
const appContainer = document.getElementById('app');
const togglePassword = document.getElementById('toggle-password');
const passwordInput = document.getElementById('password');
const authContainer = document.getElementById('auth-container');
const loginButton = document.getElementById('login-button');
const registerButton = document.getElementById('register-button');
const authFeedback = document.getElementById('auth-feedback');
const logoutButton = document.getElementById('logout-button');
const userEmailDisplay = document.getElementById('user-email');
const btnHamburger = document.getElementById('btn-hamburger');
const checkboxHamburger = document.getElementById('checkbox');
const sidebar = document.getElementById('sidebar');
const overlay = document.getElementById('overlay');
const btnCloseSidebar = document.getElementById('btn-close-sidebar');
const mainContent = document.getElementById('main-content');
const sidebarTitle = document.querySelector('.sidebar-title');
const sidebarTexts = document.querySelectorAll('.sidebar-text');
const pageHome = document.getElementById('page-home');
const pageLearned = document.getElementById('page-learned');
const navButtons = sidebar.querySelectorAll('button[data-page]');
const formAddWord = document.getElementById('form-add-word');
const btnShowForm = document.getElementById('btn-show-form');
const learnedWordsContainer = document.getElementById('learned-words-container');
const searchLearnedInput = document.getElementById('search-learned');
const clearSearchButton = document.getElementById('clear-search');
const sortLearnedSelect = document.getElementById('sort-learned');
const modalWordDetails = document.getElementById('modal-word-details');
const btnCloseModal = document.getElementById('btn-close-modal');
const modalWordTitle = document.getElementById('modal-word-title');
const modalWordContent = document.getElementById('modal-word-content');
const inputWord = document.getElementById('input-word');
const inputContext = document.getElementById('input-context');
const inputMeaning = document.getElementById('input-meaning');
const inputImage = document.getElementById('input-image');
const inputCategorySearch = document.getElementById('input-category-search');
const btnCreateCategory = document.getElementById('btn-create-category');
const categoryListbox = document.getElementById('category-listbox');
const btnDiscard = document.getElementById('btn-discard');
const modalCategory = document.getElementById('modal-category-created');
const btnCloseCategoryModal = document.getElementById('btn-close-category-modal');
const categoryCreatedMessage = document.getElementById('category-created-message');
const confirmModal = document.getElementById('modal-delete-confirm');
const btnConfirmDelete = document.getElementById('btn-confirm-delete');
const btnCancelDelete = document.getElementById('btn-cancel-delete');
const modalEditCategory = document.getElementById('modal-edit-category');
const btnCancelEditCategory = document.getElementById('btn-cancel-edit-category');
const btnSaveCategory = document.getElementById('btn-save-category');
const btnDeleteCategory = document.getElementById('btn-delete-category');
const inputEditCategoryName = document.getElementById('input-edit-category-name');
const profileToggle = document.getElementById('profile-toggle');
const profileMenu = document.getElementById('profile-menu');
const modalAlert = document.getElementById('modal-alert');
const alertTitle = document.getElementById('alert-title');
const alertMessage = document.getElementById('alert-message');
const btnCloseAlert = document.getElementById('btn-close-alert');
const dateFilterContainer = document.getElementById('date-filter-container');
const dateFilterInput = document.getElementById('date-filter-input');
const clearDateFilter = document.getElementById('clear-date-filter');
const wordsPerPage = 20;
let paginationState = {};

let words = [];
let categories = [];
let currentUser = null;
let isSidebarExpanded = window.innerWidth >= 768;
let unsubscribeFromWords = null;
let currentSort = "alphabetical";
let wordIdToDelete = null;
let currentCategoryToEdit = null;
let selectedDateFilter = null;

// ===============================================================
// 3. LÓGICA DE AUTENTICAÇÃO
// ===============================================================

onAuthStateChanged(auth, (user) => {
  const verifyEmailContainer = document.getElementById('verify-email-container');

  if (user) {
    if (user.emailVerified) {
      currentUser = user;
      authContainer.classList.add('hidden');
      verifyEmailContainer.classList.add('hidden');
      appContainer.classList.remove('hidden');
      
      userEmailDisplay.textContent = currentUser.email;
      loadData();
      corrigirPalavrasAntigasSemData();

    } else {
      currentUser = null;
      authContainer.classList.add('hidden');
      appContainer.classList.add('hidden');
      verifyEmailContainer.classList.remove('hidden');
      
      document.getElementById('verification-email-display').textContent = user.email;
    }
  } else {
    currentUser = null;
    if (unsubscribeFromWords) unsubscribeFromWords();
    
    authContainer.classList.remove('hidden');
    appContainer.classList.add('hidden');
    verifyEmailContainer.classList.add('hidden');
    
    words = [];
    renderLearnedWords();
  }
});

document.getElementById("login-form").addEventListener("submit", async (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;

  authFeedback.classList.add('hidden');

  try {
    await signInWithEmailAndPassword(auth, email, password);
  } catch (error) {
    if (error.code === 'auth/invalid-login-credentials' || error.code === 'auth/user-not-found' || error.code === 'auth/wrong-password') {
      authFeedback.textContent = "❌ Email ou senha inválidos.";
    } else {
      authFeedback.textContent = "Ocorreu um erro ao entrar.";
    }
    authFeedback.className = 'text-center mt-4 text-red-500';
  }
});

document.getElementById('resend-verification-button').addEventListener('click', async () => {
  const feedbackEl = document.getElementById('verify-feedback');
  feedbackEl.textContent = 'Enviando...';
  feedbackEl.className = 'text-center mt-4 h-5 text-gray-400';
  
  try {
    if (auth.currentUser) {
      await sendEmailVerification(auth.currentUser);
      feedbackEl.textContent = '✅ E-mail reenviado com sucesso!';
      feedbackEl.className = 'text-center mt-4 h-5 text-green-500';
    }
  } catch (error) {
    feedbackEl.textContent = '❌ Tente novamente em alguns instantes.';
    feedbackEl.className = 'text-center mt-4 h-5 text-red-500';
  }
  setTimeout(() => { feedbackEl.textContent = ''; }, 5000);
});

document.getElementById('back-to-login-button').addEventListener('click', () => {
  signOut(auth);
});

registerButton.addEventListener('click', async (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  authFeedback.className = 'text-center mt-4 hidden';

  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    await sendEmailVerification(userCredential.user);
    

    await signOut(auth);

    authFeedback.textContent = "✅ Conta criada! Verifique seu e-mail para ativá-la.";
    authFeedback.className = 'text-center mt-4 text-green-500';

  } catch (error) {
    if (error.code === 'auth/email-already-in-use') {
      authFeedback.textContent = "Este email já está registrado. Tente entrar.";
    } else if (error.code === 'auth/weak-password') {
      authFeedback.textContent = "A senha precisa ter pelo menos 6 caracteres.";
    } else {
      authFeedback.textContent = "Ocorreu um erro ao criar a conta.";
    }
    authFeedback.className = 'text-center mt-4 text-red-500';
  }
});

logoutButton.addEventListener('click', () => { signOut(auth); });


document.getElementById('forgot-password-button').addEventListener('click', async () => {
  const emailInput = document.getElementById('email');
  const email = emailInput.value;
  const feedback = document.getElementById('auth-feedback');

  if (!email) {
    feedback.textContent = "Digite seu e-mail para redefinir a senha.";
    feedback.className = 'text-center mt-4 text-yellow-400';
    emailInput.focus();
    return;
  }

  feedback.textContent = "Enviando link...";
  feedback.className = 'text-center mt-4 text-gray-400';

  try {
    await sendPasswordResetEmail(auth, email);
    feedback.textContent = "✅ Link enviado! Verifique sua caixa de e-mail (e spam).";
    feedback.className = 'text-center mt-4 text-green-500';
  } catch (error) {
    if (error.code === 'auth/user-not-found') {
      feedback.textContent = "❌ E-mail não encontrado.";
    } else {
      feedback.textContent = "Ocorreu um erro. Tente novamente.";
    }
    feedback.className = 'text-center mt-4 text-red-500';
  }
});

// ===============================================================
// 4. LÓGICA DA BASE DE DADOS (FIRESTORE)
// ===============================================================
function loadData() {
    if (!currentUser) return;


    if (unsubscribeFromWords) unsubscribeFromWords();
    let unsubscribeFromCategories;
    if (unsubscribeFromCategories) unsubscribeFromCategories();

    const wordsQuery = query(collection(db, "palavras"), where("userId", "==", currentUser.uid));
    unsubscribeFromWords = onSnapshot(wordsQuery, (snapshot) => {
        words = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
        renderLearnedWords(searchLearnedInput.value);
    });
    const categoriesQuery = query(collection(db, "categories"), where("userId", "==", currentUser.uid));
    unsubscribeFromCategories = onSnapshot(categoriesQuery, (snapshot) => {
        categories = snapshot.docs.map(doc => doc.data().name).sort();
    });
}
async function addWord(newWordObject) {
  if (!currentUser) return;
  await addDoc(collection(db, "palavras"), {
    ...newWordObject,
    userId: currentUser.uid,
    createdAt: serverTimestamp()
  });
}

async function updateWord(wordId, updatedData) {
  if (!currentUser) return;
  const wordRef = doc(db, "palavras", wordId);
  await updateDoc(wordRef, updatedData);
}

async function deleteWord(wordId) {
  if (!currentUser) return;
  await deleteDoc(doc(db, "palavras", wordId));
}

async function corrigirPalavrasAntigasSemData() {
  if (!currentUser) return;

  const palavrasRef = collection(db, "palavras");
  const snapshot = await getDocs(query(palavrasRef, where("userId", "==", currentUser.uid)));
  const updates = [];

  snapshot.forEach(docSnap => {
    const data = docSnap.data();
    if (!data.createdAt) {
      updates.push(updateDoc(doc(db, "palavras", docSnap.id), {
        createdAt: serverTimestamp()
      }));
    }
  });

  if (updates.length > 0) {
    await Promise.all(updates);
    console.log(`✅ Corrigido: ${updates.length} palavras receberam createdAt.`);
  } else {
    console.log("✅ Nenhuma palavra sem createdAt foi encontrada.");
  }
}

// ===============================================================
// 5. LÓGICA DA APLICAÇÃO E UI
// ===============================================================
function isDuplicate(list, newItemName, currentItemName = null) {
  const normalizedNewName = newItemName.trim().toLowerCase();
  const normalizedCurrentName = currentItemName ? currentItemName.trim().toLowerCase() : null;

  return list.some(item => {
    const normalizedItem = typeof item === 'string' ? item.toLowerCase() : item.word.toLowerCase();
    return normalizedItem === normalizedNewName && normalizedItem !== normalizedCurrentName;
  });
}
function renderCategorySuggestions(searchTerm) {
  if (!searchTerm) {
    categoryListbox.classList.add('hidden');
    return;
  }
  const filteredCategories = categories.filter(cat => 
    cat.toLowerCase().startsWith(searchTerm.toLowerCase())
  );
  if (filteredCategories.length === 0) {
    categoryListbox.classList.add('hidden');
    return;
  }
  categoryListbox.innerHTML = filteredCategories.map(cat => `
    <li class="px-3 py-2 cursor-pointer hover:bg-[rgb(92,130,255)]" tabindex="0">
      ${cat}
    </li>
  `).join('');
  categoryListbox.classList.remove('hidden');
}

inputCategorySearch.addEventListener('input', () => {
  renderCategorySuggestions(inputCategorySearch.value);
});

categoryListbox.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    inputCategorySearch.value = e.target.textContent.trim();
    categoryListbox.classList.add('hidden');
  }
});

window.addEventListener('click', (e) => {
  if (!inputCategorySearch.contains(e.target) && !categoryListbox.contains(e.target)) {
    categoryListbox.classList.add('hidden');
  }
});

formAddWord.addEventListener('submit', async (e) => {
  e.preventDefault();
  const wordValue = inputWord.value.trim();
  const meaningValue = inputMeaning.value.trim();

  document.getElementById('word-error').classList.toggle('hidden', !!wordValue);
  document.getElementById('meaning-error').classList.toggle('hidden', !!meaningValue);

  if (!wordValue || !meaningValue) return;

  if (isDuplicate(words, wordValue)) {
    showAlert(`A palavra "${wordValue}" já existe no seu dicionário.`, "Palavra duplicada");
    return;
  }

  const newWord = {
    word: wordValue,
    meaning: meaningValue,
    context: inputContext.value.trim(),
    image: inputImage.value.trim(),
    category: inputCategorySearch.value.trim() || 'Sem Categoria',
  };

  try {
    const categoryName = newWord.category;
    if (categoryName !== 'Sem Categoria' && !isDuplicate(categories, categoryName)) {
      await addDoc(collection(db, "categories"), {
        name: categoryName,
        userId: currentUser.uid
      });
    }

    await addWord(newWord);

    formAddWord.reset();
    inputCategorySearch.value = '';
    hideForm();
    
    document.getElementById('modal-word-added').classList.remove('hidden');

  } catch (error) {
    console.error("Erro ao adicionar palavra: ", error);
    showAlert("Ocorreu um erro ao salvar a palavra. Verifique sua conexão e tente novamente.");
  }
});

document.getElementById('form-edit-word').addEventListener('submit', async (e) => {
  e.preventDefault();
  const form = e.target;
  const wordId = form.querySelector('#edit-id').value;
  const updatedData = {
    word: form.querySelector('#edit-word').value.trim(),
    meaning: form.querySelector('#edit-meaning').value.trim(),
    context: form.querySelector('#edit-context').value.trim(),
    image: form.querySelector('#edit-image').value.trim(),
    category: form.querySelector('#edit-category').value.trim() || 'Sem Categoria',
  };

  if (!updatedData.word || !updatedData.meaning) {
    showAlert("Palavra e significado são obrigatórios.");
    return;
  }

  const originalWord = words.find(w => w.id === wordId);
  if (originalWord && updatedData.word !== originalWord.word && isDuplicate(words, updatedData.word, originalWord.word)) {
    showAlert(`A palavra "${updatedData.word}" já existe no seu dicionário.`, "Palavra duplicada");
    return;
  }

  try {
    const categoryName = updatedData.category;
    if (categoryName !== 'Sem Categoria' && !isDuplicate(categories, categoryName)) {
      await addDoc(collection(db, "categories"), {
        name: categoryName,
        userId: currentUser.uid
      });
    }

    await updateWord(wordId, updatedData);
    document.getElementById('modal-edit-word').classList.add('hidden');

  } catch (error) {
    console.error("Erro ao atualizar palavra: ", error);
    showAlert("Ocorreu um erro ao salvar as alterações.");
  }
});

function showAlert(message, title = "Atenção") {
    alertTitle.textContent = title;
    alertMessage.textContent = message;
    modalAlert.classList.remove('hidden');
}

function hideForm() { formAddWord.classList.add('hidden'); btnShowForm.classList.remove('hidden'); }
function showForm() { formAddWord.classList.remove('hidden'); btnShowForm.classList.add('hidden'); }
btnShowForm.addEventListener('click', showForm);
btnDiscard.addEventListener('click', hideForm);

function updateSidebarState() {
    const isDesktop = window.innerWidth >= 768;
    mainContent.classList.remove('ml-20', 'ml-64');
    sidebar.classList.remove('w-20', 'w-64', '-translate-x-full');
    overlay.classList.add('hidden');
    sidebarTitle.classList.add('hidden');
    sidebarTexts.forEach(text => text.classList.add('hidden', 'opacity-0'));
    if (isDesktop) {
        if (isSidebarExpanded) {
            sidebar.classList.add('w-64');
            mainContent.classList.add('ml-64');
            sidebarTitle.classList.remove('hidden');
            sidebarTexts.forEach(text => text.classList.remove('hidden', 'opacity-0'));
        } else {
            sidebar.classList.add('w-20');
            mainContent.classList.add('ml-20');
        }
    } else {
        sidebar.classList.add('w-64');
        sidebarTitle.classList.remove('hidden');
        sidebarTexts.forEach(text => text.classList.remove('hidden', 'opacity-0'));
        if (isSidebarExpanded) {
            sidebar.classList.remove('-translate-x-full');
            overlay.classList.remove('hidden');
        } else {
            sidebar.classList.add('-translate-x-full');
        }
    }
    checkboxHamburger.checked = isSidebarExpanded;
}
function toggleSidebar() { isSidebarExpanded = !isSidebarExpanded; updateSidebarState(); }
function showPage(page) {
  pageHome.classList.add('hidden');
  pageLearned.classList.add('hidden');

  if (page === 'home') pageHome.classList.remove('hidden');
  if (page === 'learned') pageLearned.classList.remove('hidden');

  navButtons.forEach(btn => {
    const isSelected = btn.dataset.page === page;
    btn.classList.toggle('bg-[rgb(92,130,255)]', isSelected);
    btn.classList.toggle('text-white', isSelected);
    btn.classList.toggle('text-custom-blue', !isSelected);
  });

  modalCategory.classList.add('hidden');

  if (window.innerWidth < 768) {
    isSidebarExpanded = false;
    updateSidebarState();
  }
}

btnHamburger.addEventListener('click', toggleSidebar);
btnCloseSidebar.addEventListener('click', toggleSidebar);
overlay.addEventListener('click', toggleSidebar);
window.addEventListener('resize', updateSidebarState);
navButtons.forEach(btn => { btn.addEventListener('click', () => showPage(btn.dataset.page)); });

function renderLearnedWords(searchTerm = "") {
  if (!learnedWordsContainer) return;
  
  let processedWords = [...words]; 

  if (selectedDateFilter) {
    const filterDate = new Date(selectedDateFilter + 'T00:00:00');
    processedWords = processedWords.filter(word => {
      if (!word.createdAt || !word.createdAt.seconds) return false;
      const wordDate = new Date(word.createdAt.seconds * 1000);
      
      return wordDate.getFullYear() === filterDate.getFullYear() &&
             wordDate.getMonth() === filterDate.getMonth() &&
             wordDate.getDate() === filterDate.getDate();
    });
  }

  if (searchTerm) {
      processedWords = processedWords.filter(word =>
        word.word.toLowerCase().includes(searchTerm.toLowerCase()) ||
        word.meaning?.toLowerCase().includes(searchTerm.toLowerCase()) ||
        word.context?.toLowerCase().includes(searchTerm.toLowerCase())
      );
  }

  if (currentSort === "date") {
    processedWords.sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0));
  } else {
    processedWords.sort((a, b) => a.word.localeCompare(b.word));
  }


  const grouped = processedWords.reduce((acc, w) => {
    const cat = w.category || 'Sem Categoria';
    if (!acc[cat]) { acc[cat] = []; }
    acc[cat].push(w);
    return acc;
  }, {});
  
  Object.keys(grouped).forEach(cat => {
      if (paginationState[cat] === undefined) {
          paginationState[cat] = 1; 
      }
  });
  
  let categoryOrder;
  if (currentSort === 'alphabetical') {
    categoryOrder = Object.keys(grouped).sort();
  } else { 
    categoryOrder = [...new Set(processedWords.map(w => w.category || 'Sem Categoria'))];
  }
  
  if (processedWords.length === 0) {
    learnedWordsContainer.innerHTML = `<p class="text-center text-gray-400">Nenhuma palavra encontrada para os filtros aplicados.</p>`;
    return;
  }
  
  learnedWordsContainer.innerHTML = categoryOrder.map(cat => {
    const wordsInCategory = grouped[cat];
    const totalWords = wordsInCategory.length;
    
    const currentPage = paginationState[cat] || 1;
    const totalPages = Math.ceil(totalWords / wordsPerPage);
    const startIndex = (currentPage - 1) * wordsPerPage;
    const endIndex = startIndex + wordsPerPage;
    const paginatedWords = wordsInCategory.slice(startIndex, endIndex);

    let paginationControls = '';
    if (totalPages > 1) {
      paginationControls = `
        <div class="flex justify-between items-center mt-3 text-sm">
          <button 
            data-action="paginate" 
            data-category="${cat}" 
            data-direction="prev" 
            ${currentPage === 1 ? 'disabled' : ''}
            class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Anterior
          </button>
          <span class="text-gray-400">Página ${currentPage} de ${totalPages}</span>
          <button 
            data-action="paginate" 
            data-category="${cat}" 
            data-direction="next" 
            ${currentPage === totalPages ? 'disabled' : ''}
            class="px-3 py-1 bg-gray-700 rounded hover:bg-gray-600 disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Próximo
          </button>
        </div>
      `;
    }
    return `
      <div class="space-y-3">
        <h3 class="text-xl font-extrabold text-custom-blue flex items-center gap-2">
          <span>${cat}</span>
          <button class="text-sm text-gray-400 hover:text-white" data-action="edit-category" data-category="${cat}" title="Editar categoria">
            <i class="fas fa-pen"></i>
          </button>
        </h3>
        <ul class="space-y-1">
          ${paginatedWords.map(w => `
            <li data-word-id="${w.id}" class="rounded-md px-3 py-2 hover:bg-[rgb(92,130,255)] flex justify-between items-center group">
              <span data-action="details" class="flex-1 cursor-pointer">${w.word}</span>
              <div class="flex items-center">
                <button data-word-text="${w.word}" data-action="speak" class="p-2 text-gray-400 hover:text-white" title="Ouvir pronúncia">
                    <i class="fas fa-volume-up"></i>
                </button>
                <button data-word-id="${w.id}" data-action="edit" class="p-2 text-gray-400 hover:text-white" title="Editar palavra">
                    <i class="fas fa-pen"></i>
                </button>
              </div>
            </li>
          `).join('')}
        </ul>
        ${paginationControls}
      </div>
    `;
  }).join('');
}

function openModalWordDetails(wordId) {
  const word = words.find(w => w.id === wordId);
  if (!word) return;

  modalWordTitle.innerHTML = `
    <span class="mr-3">${word.word}</span>
    <button id="btn-speak-word" title="Ouvir pronúncia" class="text-gray-400 hover:text-white focus:outline-none text-xl">
        <i class="fas fa-volume-up"></i>
    </button>
  `;

  modalWordContent.innerHTML = `
    ${word.image ? `<img src="${word.image}" alt="Imagem de ${word.word}" class="w-full max-h-60 object-cover rounded-md mb-4">` : ''}
    <p><strong class="font-semibold text-custom-blue">Significado:</strong><br>${word.meaning.replace(/\n/g, '<br>')}</p>
    ${word.context ? `<p class="mt-2"><strong class="font-semibold text-custom-blue">Contexto/Exemplo:</strong><br>${word.context.replace(/\n/g, '<br>')}</p>` : ''}
    <p class="mt-2 text-sm text-gray-400"><strong>Categoria:</strong> ${word.category || 'Nenhuma'}</p>
  `;

  const btnSpeak = document.getElementById('btn-speak-word');
  btnSpeak.addEventListener('click', () => {
  const utterance = new SpeechSynthesisUtterance(word.word);
    utterance.lang = 'en-US';
    utterance.rate = 0.6;
    window.speechSynthesis.speak(utterance);
  });

  modalWordDetails.classList.remove('hidden');
}

function openEditModal(wordId) {
  const word = words.find(w => w.id === wordId);
  if (!word) return;
  const modal = document.getElementById('modal-edit-word');
  modal.querySelector('#edit-id').value = word.id;
  modal.querySelector('#edit-word').value = word.word;
  modal.querySelector('#edit-meaning').value = word.meaning;
  modal.querySelector('#edit-context').value = word.context || '';
  modal.querySelector('#edit-image').value = word.image || '';
  modal.querySelector('#edit-category').value = word.category || '';
  modal.classList.remove('hidden');
}

togglePassword.addEventListener('click', () => {
  const isPassword = passwordInput.type === 'password';
  passwordInput.type = isPassword ? 'text' : 'password';
  togglePassword.innerHTML = `<i class="fas ${isPassword ? 'fa-eye-slash' : 'fa-eye'}"></i>`;
});

document.getElementById('btn-close-edit-modal').addEventListener('click', () => {
  document.getElementById('modal-edit-word').classList.add('hidden');
});

document.getElementById('btn-delete-word').addEventListener('click', () => {
  wordIdToDelete = document.getElementById('edit-id').value;
  confirmModal.classList.remove('hidden');
});

btnCancelDelete.addEventListener('click', () => {
  wordIdToDelete = null;
  confirmModal.classList.add('hidden');
});

btnCloseAlert.addEventListener('click', () => {
    modalAlert.classList.add('hidden');
});

document.getElementById('btn-cancel-edit').addEventListener('click', () => {
  document.getElementById('modal-edit-word').classList.add('hidden');
});

btnCloseModal.addEventListener('click', () => {
  modalWordDetails.classList.add('hidden');
});
document.getElementById('btn-close-word-added-modal').addEventListener('click', () => {
    document.getElementById('modal-word-added').classList.add('hidden');
});


learnedWordsContainer.addEventListener('click', (e) => {
  const target = e.target;
  const actionTarget = target.closest('[data-action]');
  const action = actionTarget?.dataset.action;

  if (!action) return;

  const wordId = target.closest('[data-word-id]')?.dataset.wordId;
  const category = target.closest('[data-category]')?.dataset.category;

  if (action === 'speak') {
    const wordToSpeak = actionTarget.dataset.wordText;
    const utterance = new SpeechSynthesisUtterance(wordToSpeak);
    utterance.lang = 'en-US';
    utterance.rate = 0.6;
    window.speechSynthesis.speak(utterance);
  } 
  
  else if (action === 'details') { 
    openModalWordDetails(wordId); 
  } 
  else if (action === 'edit') { 
    openEditModal(wordId); 
  } 
  else if (action === 'edit-category') {
    currentCategoryToEdit = category;
    inputEditCategoryName.value = currentCategoryToEdit;
    modalEditCategory.classList.remove('hidden');
  } 
  else if (action === 'paginate') {
    const direction = actionTarget.dataset.direction;
    const cat = actionTarget.dataset.category;

    if (direction === 'next') {
      paginationState[cat]++;
    } else if (direction === 'prev') {
      paginationState[cat]--;
    }

    renderLearnedWords(searchLearnedInput.value);
  }
});

btnCancelEditCategory.addEventListener('click', () => {
  modalEditCategory.classList.add('hidden');
  currentCategoryToEdit = null;
});


btnCreateCategory.addEventListener('click', async () => {
  const newCatName = inputCategorySearch.value.trim();
  if (!newCatName) {
    showAlert("Digite um nome de categoria válido.");
    return;
  }
  
  if (isDuplicate(categories, newCatName)) {
    showAlert(`A categoria "${newCatName}" já existe.`, "Nome duplicado");
    return;
  }

  try {
    await addDoc(collection(db, "categories"), {
      name: newCatName,
      userId: currentUser.uid
    });

    inputCategorySearch.value = "";
    categoryListbox.classList.add('hidden');

    categoryCreatedMessage.textContent = `A categoria "${newCatName}" foi criada com sucesso.`;
    modalCategory.classList.remove('hidden');

  } catch (error) {
    console.error("Erro ao criar categoria:", error);
    showAlert("Erro ao criar categoria. Tente novamente.");
  }
});
    btnCloseCategoryModal.addEventListener('click', () => {
      modalCategory.classList.add('hidden');
    });

btnSaveCategory.addEventListener('click', async () => {
  const newName = inputEditCategoryName.value.trim();
  const oldName = currentCategoryToEdit;

  if (!newName || !oldName || newName === oldName) {
    modalEditCategory.classList.add('hidden');
    return;
  }

  const newCategoryAlreadyExists = isDuplicate(categories, newName);

  try {

    const wordsQuery = query(collection(db, "palavras"), where("userId", "==", currentUser.uid), where("category", "==", oldName));
    const wordsSnapshot = await getDocs(wordsQuery);
    const updatePromises = wordsSnapshot.docs.map(docSnap => updateDoc(docSnap.ref, { category: newName }));
    await Promise.all(updatePromises);


    const oldCategoryQuery = query(collection(db, "categories"), where("userId", "==", currentUser.uid), where("name", "==", oldName));
    const oldCategorySnapshot = await getDocs(oldCategoryQuery);
    const deletePromises = oldCategorySnapshot.docs.map(docSnap => deleteDoc(docSnap.ref));
    await Promise.all(deletePromises);


    if (!newCategoryAlreadyExists) {
      await addDoc(collection(db, "categories"), { name: newName, userId: currentUser.uid });
    }

    showAlert(`Categoria "${oldName}" foi renomeada para "${newName}".`, "Sucesso!");
    modalEditCategory.classList.add('hidden');
    currentCategoryToEdit = null;

  } catch (error) {
    console.error("Erro ao renomear categoria:", error);
    showAlert("Ocorreu um erro ao renomear a categoria.", "Erro");
  }
});

btnDeleteCategory.addEventListener('click', () => {
  modalEditCategory.classList.add('hidden');
  confirmModal.classList.remove('hidden');
  wordIdToDelete = '__CATEGORY__' + currentCategoryToEdit;
});


btnConfirmDelete.addEventListener('click', async () => {
  if (!wordIdToDelete) return;

  try {
    if (wordIdToDelete.startsWith('__CATEGORY__')) {
      const categoryName = wordIdToDelete.replace('__CATEGORY__', '');
      
      const wordsQuery = query(collection(db, "palavras"), where("userId", "==", currentUser.uid), where("category", "==", categoryName));
      const wordsSnapshot = await getDocs(wordsQuery);
      const updatePromises = wordsSnapshot.docs.map(docSnap => updateDoc(docSnap.ref, { category: 'Sem Categoria' }));
      await Promise.all(updatePromises);

      const categoryQuery = query(collection(db, "categories"), where("userId", "==", currentUser.uid), where("name", "==", categoryName));
      const categorySnapshot = await getDocs(categoryQuery);
      const deletePromises = categorySnapshot.docs.map(docSnap => deleteDoc(docSnap.ref));
      await Promise.all(deletePromises);
      
      showAlert(`Categoria "${categoryName}" deletada.`, "Sucesso");

    } else {
      await deleteWord(wordIdToDelete);
    }
  } catch(error) {
    console.error("Erro ao deletar:", error);
    showAlert("Ocorreu um erro durante a exclusão.");
  }

  document.getElementById('modal-edit-word').classList.add('hidden');
  confirmModal.classList.add('hidden');
  wordIdToDelete = null;
});


clearSearchButton?.addEventListener('click', () => {
  searchLearnedInput.value = "";
  renderLearnedWords();
  searchLearnedInput.focus();
});

sortLearnedSelect?.addEventListener('change', (e) => {
  paginationState = {}; // Reinicia a paginação
  const selection = e.target.value;

  dateFilterContainer.classList.add('hidden');
  selectedDateFilter = null;

  if (selection === 'by-date') {

    dateFilterContainer.classList.remove('hidden');
    if (!dateFilterInput.value) {
        const today = new Date().toISOString().split('T')[0];
        dateFilterInput.value = today;
    }
    selectedDateFilter = dateFilterInput.value;
  } else {
    currentSort = selection;
  }
  
  renderLearnedWords(searchLearnedInput.value);
});


dateFilterInput?.addEventListener('input', (e) => {
    selectedDateFilter = e.target.value;
    renderLearnedWords(searchLearnedInput.value);
});

clearDateFilter?.addEventListener('click', () => {
    dateFilterContainer.classList.add('hidden');
    selectedDateFilter = null;
    dateFilterInput.value = '';
    
    sortLearnedSelect.value = 'alphabetical';
    currentSort = 'alphabetical';

    renderLearnedWords(searchLearnedInput.value);
});


searchLearnedInput?.addEventListener('input', (e) => {
  renderLearnedWords(e.target.value);
});

profileToggle?.addEventListener('click', () => {
  profileMenu.classList.toggle('hidden');
});

window.addEventListener('click', (e) => {
  if (!profileMenu.contains(e.target) && !profileToggle.contains(e.target)) {
    profileMenu.classList.add('hidden');
  }
});
// ===============================================================
// 6. INICIALIZAÇÃO DA APLICAÇÃO
// ===============================================================
function initialize() {
  updateSidebarState();
  showPage('home');
}
initialize();