{% extends "base.html" %}
{% block title %}Chat · Lisa | BancaNet{% endblock %}
{% block content %}
<div class="lisa-chat" id="lisa-chat" data-user="{{ user.id if user else session.get('user_id') }}">
  <header class="lisa-chat__bar">
    <a class="lisa-chat__back" href="{{ url_for('user.dashboard') }}" aria-label="Volver">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 6 9 12l6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </a>
    <div class="lisa-chat__who">
      <span class="lisa-chat__avatar" aria-hidden="true">
        <img src="{{ url_for('static', filename='images/LISA.jpg') }}?v=1" alt="" width="40" height="40" decoding="async">
      </span>
      <div>
        <strong>Lisa</strong>
        <small>Operadora · En línea</small>
      </div>
    </div>
  </header>

  <div class="lisa-chat__thread" id="lisa-thread" role="log" aria-live="polite"></div>

  <form class="lisa-chat__composer" id="lisa-form" autocomplete="off">
    <input id="lisa-input" type="text" maxlength="500" placeholder="Escribe un mensaje..." required>
    <button type="submit" aria-label="Enviar">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h12M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>
    </button>
  </form>
</div>
{% endblock %}
{% block scripts %}
<script>
(() => {
  const root = document.getElementById("lisa-chat");
  const thread = document.getElementById("lisa-thread");
  const form = document.getElementById("lisa-form");
  const input = document.getElementById("lisa-input");
  if (!root || !thread || !form || !input) return;

  const storageKey = "kia_lisa_chat_v3_" + (root.dataset.user || "guest");
  const FIRST_REPLY = "Hola, soy Lisa de soporte CARD-E. Cuéntame en qué te ayudo: recarga, retiro o acceso.";

  const replies = [
    "Perfecto, ya estoy revisando tu caso.",
    "Gracias. ¿Me confirmas tu número registrado?",
    "Entendido. En un momento te confirmo el estatus.",
    "Listo, seguimos por aquí. Si tienes el ID de la operación, mándamelo.",
    "Recibido. Te aviso en breve con la actualización.",
  ];

  function load() {
    try {
      const raw = localStorage.getItem(storageKey);
      const list = raw ? JSON.parse(raw) : null;
      if (Array.isArray(list)) return list;
    } catch (_) {}
    return [];
  }

  function save(list) {
    try { localStorage.setItem(storageKey, JSON.stringify(list.slice(-80))); } catch (_) {}
  }

  function timeLabel(ts) {
    try {
      return new Date(ts).toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" });
    } catch (_) {
      return "";
    }
  }

  function bubble(msg) {
    const el = document.createElement("div");
    el.className = "lisa-chat__bubble is-" + (msg.from === "user" ? "user" : "lisa");
    el.innerHTML = "<p></p><time></time>";
    el.querySelector("p").textContent = msg.text;
    el.querySelector("time").textContent = timeLabel(msg.at);
    return el;
  }

  let messages = load();
  messages.forEach((m) => thread.appendChild(bubble(m)));
  thread.scrollTop = thread.scrollHeight;

  function push(msg) {
    messages.push(msg);
    save(messages);
    thread.appendChild(bubble(msg));
    thread.scrollTop = thread.scrollHeight;
  }

  function userMessageCount() {
    return messages.filter((m) => m.from === "user").length;
  }

  function lisaReply(isFirst) {
    const typing = document.createElement("div");
    typing.className = "lisa-chat__typing";
    typing.textContent = "Lisa está escribiendo…";
    thread.appendChild(typing);
    thread.scrollTop = thread.scrollHeight;
    setTimeout(() => {
      typing.remove();
      const text = isFirst
        ? FIRST_REPLY
        : replies[Math.floor(Math.random() * replies.length)];
      push({ from: "lisa", text, at: Date.now() });
    }, isFirst ? 700 : 900 + Math.random() * 900);
  }

  form.addEventListener("submit", (event) => {
    event.preventDefault();
    const text = (input.value || "").trim();
    if (!text) return;
    input.value = "";
    push({ from: "user", text, at: Date.now() });
    lisaReply(userMessageCount() === 1);
  });
})();
</script>
{% endblock %}