const themeToggle = document.getElementById('themeToggle');
themeToggle.addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
  themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️';
});

const langToggle = document.getElementById('langToggle');
let currentLang = 'en';

const translations = {
  en: {
    title: "MoA Chat - Documentation",
    what_is_title: "📖 What is MoA Chat?",
    intro: "<strong>MoA Chat</strong> is a simple but powerful chat platform where multiple AI models answer the same question at the same time, and an aggregator model combines their outputs into one final answer.",
    tech_1: "Built in <strong>Python 3</strong>.",
    tech_2: "Web framework: <strong>Flask</strong>.",
    tech_3: "Frontend: HTML, JavaScript, TailwindCSS (optionally removable).",
    tech_4: "Designed to work <strong>first on Hugging Face Spaces</strong>, but can also be <strong>self-hosted</strong>.",
    architecture_alt: "MoA Architecture",
    features_title: "⚙️ Features",
    feature_1: "Send your question once — multiple AI models answer simultaneously.",
    feature_2: "Aggregator model (LLM-D) summarizes all responses.",
    feature_3: "Fully configurable: choose which models you want to use.",
    feature_4: "Modern minimal UI with light/dark theme toggle.",
    feature_5: "Spanish/English documentation switch.",
    feature_6: "<strong>Free models</strong> supported through <strong>OpenRouter</strong> and others.",
    feature_7: "<strong>No API keys exposed</strong> in the frontend (safe backend request).",
    self_host_title: "🛠️ Self Hosting",
    self_host_intro: "You can clone the project like this:",
    requirements_title: "Requirements:",
    req_1: "Python 3.11+",
    req_2: "Pip",
    req_3: "Create a <code>.env</code> file and add your API keys.",
    install_title: "Install dependencies:",
    run_title: "Run locally:",
    port_note: "Default port is <strong>7860</strong> (to match Hugging Face standard).",
    docker_title: "🐳 Docker support:",
    docker_intro: "Your repository includes a <code>Dockerfile</code> for easy containerization when you clone it. Here's the content:",
    docker_alt_option: "Alternatively, you can manually create your own <code>Dockerfile</code> with the above content if you prefer to customize it.",
    docker_build: "To build and run the Docker container after cloning the repository:",
    docker_secrets_note: "Docker will NOT automatically inject secrets unless you:",
    docker_secret_env: "Use a <code>.env</code> file with <code>--env-file .env</code>",
    docker_secret_manual: "Manually use <code>-e VAR=VALUE</code> flags in <code>docker run</code>",
    api_keys_title: "🔑 Environment Variables (Secrets)",
    api_keys_intro: "To use this app, you must set your API keys in <strong>secrets</strong> or <strong>environment variables</strong>.",
    api_keys_syntax: "Follow this syntax:",
    api_keys_code: "OPENROUTER_API_KEY=your-openrouter-key\nTOGETHER_API_KEY=your-together-key\nGROK_API_KEY=your-grok-key\nGROQ_API_KEY=your-groq-key",
    api_keys_location: "You can set these in:",
    api_loc_1: "Hugging Face <strong>Secrets</strong> section (recommended if on Spaces)",
    api_loc_2: "<code>.env</code> file (only for self-hosting)",
    add_models_title: "🧩 How to Add More Models",
    add_models_intro: "All models and providers are declared inside:",
    add_models_structure: "The structure looks like this:",
    add_models_steps_title: "<strong>To add a new model:</strong>",
    add_step_1: "Find the right provider (OpenRouter, Together, Grok, Groq, etc).",
    add_step_2: "Add its endpoint URL under \"providers\" if not already listed.",
    add_step_3: "Add your model name under \"models\" section, linking it to the provider.",
    add_models_note: "Make sure your environment variables (secrets) are correctly configured.",
    license_title: "🏷️ Licensing",
    license_text: "This project is licensed under <strong>Apache 2.0</strong> — You are free to use, modify, and distribute, even commercially.",
    
    footer: "Made with ❤️ in Panamá<br>by UntilDot\n<div class=\"mt-2 flex justify-center\">\n  <span class=\"mx-2\">✨</span>\n  <span class=\"mx-2\">✨</span>\n</div>"
  },
  es: {
    title: "MoA Chat - Documentación",
    what_is_title: "📖 ¿Qué es MoA Chat?",
    intro: "<strong>MoA Chat</strong> es una plataforma de chat simple pero poderosa donde múltiples modelos de IA responden la misma pregunta al mismo tiempo, y un modelo agregador combina sus resultados en una respuesta final.",
    tech_1: "Construido en <strong>Python 3</strong>.",
    tech_2: "Framework web: <strong>Flask</strong>.",
    tech_3: "Frontend: HTML, JavaScript, TailwindCSS (opcionalmente removible).",
    tech_4: "Diseñado para funcionar <strong>primero en Hugging Face Spaces</strong>, pero también puede ser <strong>autohospedado</strong>.",
    architecture_alt: "Arquitectura MoA",
    features_title: "⚙️ Características",
    feature_1: "Envía tu pregunta una vez — múltiples modelos de IA responden simultáneamente.",
    feature_2: "Modelo agregador (LLM-D) resume todas las respuestas.",
    feature_3: "Completamente configurable: elige qué modelos deseas usar.",
    feature_4: "Interfaz de usuario minimalista moderna con cambio de tema claro/oscuro.",
    feature_5: "Cambio de documentación entre español/inglés.",
    feature_6: "<strong>Modelos gratuitos</strong> soportados a través de <strong>OpenRouter</strong> y otros.",
    feature_7: "<strong>Sin claves API expuestas</strong> en el frontend (solicitud segura al backend).",
    self_host_title: "🛠️ Autohospedaje",
    self_host_intro: "Puedes clonar el proyecto así:",
    requirements_title: "Requisitos:",
    req_1: "Python 3.11+",
    req_2: "Pip",
    req_3: "Crea un archivo <code>.env</code> y agrega tus claves API.",
    install_title: "Instalar dependencias:",
    run_title: "Ejecutar localmente:",
    port_note: "El puerto predeterminado es <strong>7860</strong> (para coincidir con el estándar de Hugging Face).",
    docker_title: "🐳 Soporte para Docker:",
    docker_intro: "Tu repositorio incluye un <code>Dockerfile</code> para una fácil containerización cuando lo clonas. Aquí está el contenido:",
    docker_alt_option: "Alternativamente, puedes crear manualmente tu propio <code>Dockerfile</code> con el contenido anterior si prefieres personalizarlo.",
    docker_build: "Para construir y ejecutar el contenedor Docker después de clonar el repositorio:",
    docker_secrets_note: "Docker NO inyectará automáticamente los secretos a menos que:",
    docker_secret_env: "Uses un archivo <code>.env</code> con <code>--env-file .env</code>",
    docker_secret_manual: "Uses manualmente banderas <code>-e VAR=VALUE</code> en <code>docker run</code>",
    api_keys_title: "🔑 Variables de Entorno (Secretos)",
    api_keys_intro: "Para usar esta aplicación, debes configurar tus claves API en <strong>secretos</strong> o <strong>variables de entorno</strong>.",
    api_keys_syntax: "Sigue esta sintaxis:",
    api_keys_code: "OPENROUTER_API_KEY=tu-clave-openrouter\nTOGETHER_API_KEY=tu-clave-together\nGROK_API_KEY=tu-clave-grok\nGROQ_API_KEY=tu-clave-groq",
    api_keys_location: "Puedes configurarlas en:",
    api_loc_1: "Sección de <strong>Secretos</strong> de Hugging Face (recomendado si estás en Spaces)",
    api_loc_2: "Archivo <code>.env</code> (solo para autohospedaje)",
    add_models_title: "🧩 Cómo Agregar Más Modelos",
    add_models_intro: "Todos los modelos y proveedores se declaran dentro de:",
    add_models_structure: "La estructura se ve así:",
    add_models_steps_title: "<strong>Para agregar un nuevo modelo:</strong>",
    add_step_1: "Encuentra el proveedor adecuado (OpenRouter, Together, Grok, Groq, etc).",
    add_step_2: "Agrega su URL de endpoint bajo \"providers\" si no está ya listado.",
    add_step_3: "Agrega el nombre de tu modelo bajo la sección \"models\", vinculándolo al proveedor.",
    add_models_note: "Asegúrate de que tus variables de entorno (secretos) estén correctamente configuradas.",
    license_title: "🏷️ Licenciamiento",
    license_text: "Este proyecto está licenciado bajo <strong>Apache 2.0</strong> — Eres libre de usar, modificar y distribuir, incluso comercialmente.",
    
    footer: "Hecho con ❤️ en Panamá<br>por UntilDot\n<div class=\"mt-2 flex justify-center\">\n  <span class=\"mx-2\">✨</span>\n  <span class=\"mx-2\">✨</span>\n</div>"
  }
};

function updateLanguage(lang) {
  document.querySelectorAll('[data-i18n]').forEach(element => {
    const key = element.getAttribute('data-i18n');
    if (translations[lang][key]) {
      element.innerHTML = translations[lang][key];
    }
  });
  document.querySelectorAll('[data-i18n-alt]').forEach(element => {
    const key = element.getAttribute('data-i18n-alt');
    if (translations[lang][key]) {
      element.setAttribute('alt', translations[lang][key]);
    }
  });
  document.querySelectorAll('code[data-i18n]').forEach(element => {
    const key = element.getAttribute('data-i18n');
    if (translations[lang][key]) {
      element.textContent = translations[lang][key];
    }
  });
}

langToggle.addEventListener('click', () => {
  currentLang = currentLang === 'en' ? 'es' : 'en';
  updateLanguage(currentLang);
});

// Initialize language on load
updateLanguage(currentLang);