⚡ Comunicació FrontEnd i BackEnd

# Guarda les claus a Colab → Icona de clau 🔑 → Secrets
# Nom secret 1: GOOGLE_API_KEY  |  Nom secret 2: NGROK_TOKEN
import json, os, re, time, requests
from bs4 import BeautifulSoup
from urllib.parse import urljoin, urlparse
from flask import Flask, request, jsonify
from flask_cors import CORS
from pyngrok import ngrok
from google.colab import userdata
from google import genai

try:
    client = genai.Client(api_key=userdata.get('GOOGLE_API_KEY'))
    ngrok.set_auth_token(userdata.get('NGROK_TOKEN'))
    print("✅ Claus de Google i ngrok configurades correctament.")
except Exception as e:
    print(f"❌ ERROR de configuració: {e}")

app = Flask(__name__)
CORS(app)  # Autoritza peticions des del domini del WordPress

URL_BASE        = "https://asaldana.inscastellbisbal.net/"
DOMINI_PROPI    = urlparse(URL_BASE).netloc  # confinament estricte al domini
PROFUNDITAT_MAX = 4        # màxim 4 nivells de profunditat (0 = portada)
FITXER_CACHE    = "dades_araceli.json"  # caché persistent entre execucions
DELAY_PETICIONS = 0.5      # rate-limiting cortès: 0.5s entre peticions
EXTENSIONS_SKIP = ('.jpg','.jpeg','.png','.gif','.pdf',
                   '.svg','.webp','.ico','.mp4','.zip')
RUTES_SKIP      = ('wp-admin','wp-json','wp-login',
                   'xmlrpc','#','?replytocom','feed/')

@app.route('/ask', methods=['POST'])
def ask():
    """Entrada: {"message": "..."} · Sortida: {"reply": "..."}"""
    try:
        data = request.get_json(force=True, silent=True)
        if not data or 'message' not in data:
            return jsonify({"reply": "Error: format de petició incorrecte."}), 400
        pregunta = data['message'].strip()
        if not pregunta:
            return jsonify({"reply": "No he rebut cap pregunta. Escriu alguna cosa!"})
        print(f"📩 Pregunta: {pregunta}")
        resposta = demanar_a_ia(pregunta)
        print(f"💬 Resposta ({len(resposta)} caràcters)")
        return jsonify({"reply": resposta})
    except Exception as e:
        print(f"❌ Error servidor: {e}")
        return jsonify({"reply": "Ho sento, s'ha produït un error intern. Torna-ho a intentar. 🙏"}), 500

// La clau API NO apareix en cap lloc d'aquest fitxer.
// El JS és públic: qualsevol persona el pot llegir amb F12.
const API_URL = "https://XXXX.ngrok-free.app/ask"; // ← s'actualitza cada sessió

async function processarPregunta() {
    const textUsuari = inputField.value.trim();
    if (!textUsuari || esperantResposta) return;

    // Comprovació de seguretat: avisa si l'URL no s'ha actualitzat
    if (API_URL.includes('CANVIA-AIXO')) {
        afegirMissatgeBot('⚠️ El xat no està configurat...', true);
        return;
    }

    afegirMissatgeUsuari(textUsuari);
    inputField.value = '';
    bloquejarInput(true);    // evita doble enviament
    mostrarEscrivint(true);  // tres puntets animats (CSS keyframes)

    try {
        const resposta = await fetch(API_URL, {
            method:  'POST',
            headers: {
                'Content-Type': 'application/json',
                'ngrok-skip-browser-warning': 'true'  // ← imprescindible amb ngrok
            },
            body: JSON.stringify({ message: textUsuari })
        });
        if (!resposta.ok) throw new Error(`Error HTTP ${resposta.status}`);
        const dades    = await resposta.json();
        const textResp = dades.reply || dades.message || 'No he rebut resposta vàlida.';
        mostrarEscrivint(false);
        afegirMissatgeBot(textResp, false);
    } catch (error) {
        mostrarEscrivint(false);
        console.error('[Xatbot Araceli] Error de connexió:', error);
        afegirMissatgeBot(
            '⚠️ No s\'ha pogut connectar amb el servidor. Comprova que el Colab estigui en marxa.',
            true
        );
    } finally {
        bloquejarInput(false);  // sempre es reactiva, tingui error o no
    }
}

function convertirEnllacos(text) {
    // Pas 1: Escapa HTML bàsic (prevenció XSS)
    let net = text
        .replace(/&/g, '&')
        .replace(/'<')
        .replace(/>/g, '>');

    // Pas 2: [text](url) → <a href> (format Markdown de Gemini)
    net = net.replace(
        /\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g,
        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
    );

    // Pas 3: URLs nues → clicables
    net = net.replace(
        /(?<!\()(https?:\/\/[^\s<"]+)/g,
        '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>'
    );

    // Pas 4: **text** → <strong>text</strong>
    net = net.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');

    return net;
}

/* Tot el CSS usa el prefix #araceli- o .araceli-
   Evita xocar amb els estils del tema de WordPress */

#araceli-chat-window {
    width:      340px;
    height:     480px;
    background: linear-gradient(160deg, #1e1e1e 0%, #1a2e0f 60%, #2d4a1e 100%);
    border:     1px solid rgba(106,176,76,0.35);
    border-radius: 16px;
    animation:  araceli-slideIn 0.25s ease-out; /* animació d'entrada */
}
@keyframes araceli-slideIn {
    from { opacity: 0; transform: translateY(15px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Scrollbar verda personalitzada */
#araceli-chat-messages::-webkit-scrollbar       { width: 5px; }
#araceli-chat-messages::-webkit-scrollbar-thumb  {
    background: rgba(106,176,76,0.4); border-radius: 10px;
}

/* Responsive mòbil: s'adapta fins a 400px */
@media (max-width: 400px) {
    #araceli-chat-window {
        width:  calc(100vw - 30px);
        height: 420px;
    }
}

# Pas 1: afegir secrets a Colab
#   Menú esquerre → Icona de clau 🔑 → "Afegir secret nou"
#   Nom: GOOGLE_API_KEY  →  valor: la teva clau de Google AI Studio
#   Nom: NGROK_TOKEN     →  valor: el teu token de ngrok.com
#   (El valor MAI apareixerà al notebook ni als outputs)

from google.colab import userdata

try:
    # userdata.get() llegeix el secret sense mostrar-lo mai al codi
    client = genai.Client(api_key=userdata.get('GOOGLE_API_KEY'))
    ngrok.set_auth_token(userdata.get('NGROK_TOKEN'))
    print("✅ Claus de Google i ngrok configurades correctament.")
except Exception as e:
    print(f"❌ ERROR de configuració: {e}")

# ── El que l'usuari veu al JavaScript ──────────────────────
# const API_URL = "https://XXXX.ngrok-free.app/ask";
# Només l'URL de ngrok. Cap clau. Cap secret.
# ───────────────────────────────────────────────────────────