<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Biblioteca Gráfica</title>
<style>
  :root { --bg:#0f1115; --card:#1a1d24; --accent:#c9662b; --text:#e8e6e1; --muted:#9aa0aa; }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
         background:var(--bg); color:var(--text); }
  header { padding:16px 18px; border-bottom:1px solid #2a2e37; position:sticky; top:0;
           background:var(--bg); }
  header h1 { margin:0; font-size:18px; }
  header p { margin:4px 0 0; color:var(--muted); font-size:12px; }
  #chat { max-width:820px; margin:0 auto; padding:16px 14px 140px; }
  .msg { margin:14px 0; padding:14px 16px; border-radius:14px; line-height:1.5;
         white-space:pre-wrap; word-wrap:break-word; }
  .user { background:var(--accent); color:#fff; margin-left:auto; max-width:85%; }
  .bot  { background:var(--card); border:1px solid #2a2e37; }
  .sources { margin-top:10px; font-size:12px; color:var(--muted); }
  .sources span { display:inline-block; background:#252a33; padding:3px 8px; border-radius:8px;
                  margin:3px 4px 0 0; }
  .loading { color:var(--muted); font-style:italic; }
  form { position:fixed; bottom:0; left:0; right:0; background:var(--bg);
         border-top:1px solid #2a2e37; padding:12px; }
  .bar { max-width:820px; margin:0 auto; display:flex; gap:8px; }
  textarea { flex:1; resize:none; background:var(--card); color:var(--text);
             border:1px solid #333a45; border-radius:12px; padding:12px; font-size:16px;
             max-height:120px; }
  button { background:var(--accent); color:#fff; border:0; border-radius:12px;
           padding:0 18px; font-size:16px; font-weight:600; cursor:pointer; }
  button:disabled { opacity:.5; cursor:default; }
</style>
</head>
<body>
<header>
  <h1>Biblioteca Gráfica</h1>
  <p>Preguntá sobre tus manuales de tintas, recubrimientos y artes gráficas.</p>
</header>

<div id="chat"></div>

<form id="f">
  <div class="bar">
    <textarea id="q" rows="1" placeholder="Escribí tu pregunta…"></textarea>
    <button id="send" type="submit">Enviar</button>
  </div>
</form>

<script>
const chat = document.getElementById('chat');
const form = document.getElementById('f');
const q = document.getElementById('q');
const sendBtn = document.getElementById('send');

function add(text, cls) {
  const d = document.createElement('div');
  d.className = 'msg ' + cls;
  d.textContent = text;
  chat.appendChild(d);
  window.scrollTo(0, document.body.scrollHeight);
  return d;
}

q.addEventListener('input', () => {
  q.style.height = 'auto';
  q.style.height = Math.min(q.scrollHeight, 120) + 'px';
});

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const question = q.value.trim();
  if (!question) return;
  add(question, 'user');
  q.value = ''; q.style.height = 'auto';
  sendBtn.disabled = true;
  const loading = add('Consultando los libros…', 'bot loading');
  try {
    const res = await fetch('/ask', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ question })
    });
    const data = await res.json();
    loading.remove();
    if (data.error) { add('Error: ' + data.error, 'bot'); return; }
    const bot = add(data.answer, 'bot');
    if (data.sources && data.sources.length) {
      const s = document.createElement('div');
      s.className = 'sources';
      const seen = new Set();
      data.sources.forEach(src => {
        const key = src.book + '#' + src.page;
        if (seen.has(key)) return; seen.add(key);
        const tag = document.createElement('span');
        tag.textContent = src.book + ' · pág. ' + src.page;
        s.appendChild(tag);
      });
      bot.appendChild(s);
    }
  } catch (err) {
    loading.remove();
    add('Error de conexión: ' + err.message, 'bot');
  } finally {
    sendBtn.disabled = false;
    q.focus();
  }
});
</script>
</body>
</html>