<?php
// chat-opac.php - Full-page test view for the MetaBookflix OPAC chat.
// Receives: ?instance=koha_biblioteca&borrower=123&name=Juan

// ─────────────────────────────────────────────────────────────────────────────
// 0. Cargar .env
// ─────────────────────────────────────────────────────────────────────────────
function loadEnv(string $path): void {
    if (!file_exists($path)) return;
    foreach (file($path, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES) as $line) {
        if (str_starts_with(trim($line), '#')) continue;
        [$key, $value] = array_map('trim', explode('=', $line, 2));
        if ($key && !isset($_ENV[$key])) {
            $_ENV[$key] = $value;
            putenv("$key=$value");
        }
    }
}
loadEnv(__DIR__ . '/.env');

// ─────────────────────────────────────────────────────────────────────────────
// 1. Variables desde .env
// ─────────────────────────────────────────────────────────────────────────────
$webhook_url  = $_ENV['N8N_OPAC_WEBHOOK_URL'] ?? '';
$redirect_url = $_ENV['REDIRECT_URL']         ?? 'https://metabiblioteca.com';

// ─────────────────────────────────────────────────────────────────────────────
// 2. Parámetros de entrada
// ─────────────────────────────────────────────────────────────────────────────
$instance = trim($_GET['instance'] ?? '');
$borrower = trim($_GET['borrower'] ?? '');
$borrower_name = trim($_GET['name'] ?? '');

$instance = preg_replace('/[^a-zA-Z0-9_\-.]/', '', $instance);
$borrower = preg_replace('/[^0-9]/', '', $borrower);
$borrower_name = preg_replace('/[^\p{L}\p{N}\s_\-.,]/u', '', $borrower_name);

// Las URLs de documentación (schema, manual) se resuelven directamente en N8N
// a partir de la versión recibida — no se construyen ni envían desde el front.
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MetaBookflix Chat — <?php echo htmlspecialchars($instance, ENT_QUOTES, 'UTF-8'); ?></title>

  <!-- N8N Chat styles -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" />

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">

  <!-- App styles — mismo CSS que MetaRag (sin sección PDF) -->
  <link rel="stylesheet" href="src/style.css?v=<?php echo filemtime(__DIR__ . '/src/style.css'); ?>" />

  <style>
    /* Ocultar el contenedor del PDF — no se usa en esta versión */
    #pdf-viewer-container { display: none !important; }

    /* La página completa es el fondo del chat */
    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--c-bg);
    }

    /* Info pill en la toolbar */
    .toolbar-info {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .info-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,.85);
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      padding: 3px 10px;
      border-radius: 999px;
      font-family: 'DM Mono', monospace;
      letter-spacing: .02em;
    }

    .info-pill-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #FFD700;
      flex-shrink: 0;
    }
  </style>
</head>

<!--
  Valores PHP pasados via data-* — el JS los lee desde dataset.
-->
<body
  data-instance="<?php echo htmlspecialchars($instance, ENT_QUOTES, 'UTF-8'); ?>"
  data-borrower="<?php echo htmlspecialchars($borrower, ENT_QUOTES, 'UTF-8'); ?>"
  data-borrower-name="<?php echo htmlspecialchars($borrower_name, ENT_QUOTES, 'UTF-8'); ?>"
  data-webhook-url="<?php echo htmlspecialchars($webhook_url, ENT_QUOTES, 'UTF-8'); ?>"
>

  <!-- ── Toolbar ────────────────────────────────────────────────────────────── -->
  <div id="toolbar">
    <div class="brand">
      <div class="logo-dot"></div>
      <div>
        <h1>MetaBookflix</h1>
        <span>Asistente de recomendaciones bibliográficas</span>
      </div>
    </div>

    <div class="toolbar-right">
      <!-- Muestra la instancia y usuario activo -->
      <div class="toolbar-info">
        <?php if ($instance): ?>
        <span class="info-pill">
          <span class="info-pill-dot" style="background:#22C55E;"></span>
          <?php echo htmlspecialchars($instance, ENT_QUOTES, 'UTF-8'); ?>
        </span>
        <?php endif; ?>
        <?php if ($borrower): ?>
        <span class="info-pill">
          <span class="info-pill-dot" style="background:#4A90D9;"></span>
          ID <?php echo htmlspecialchars($borrower, ENT_QUOTES, 'UTF-8'); ?>
        </span>
        <?php endif; ?>
      </div>
      <div class="badge"><i></i> Online</div>
    </div>
  </div>

  <!-- ── Contenedor PDF (oculto, requerido por el CSS base) ─────────────────── -->
  <div id="pdf-viewer-container">
    <div id="loading" style="display:none;">
      <div class="spinner"></div>
      <div>Cargando…</div>
    </div>
  </div>

  <!-- ── N8N Chat mount target ──────────────────────────────────────────────── -->
  <div id="koha-ia-chat"></div>

  <!-- ES-module bridge -->
  <script type="module">
    import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';
    window.__mountChat = (opts) => createChat(opts);
  </script>

  <!-- App script -->
  <script src="src/chat-opac-script.js?v=<?php echo filemtime(__DIR__ . '/src/chat-opac-script.js'); ?>" defer></script>

</body>
</html>
