<?php
/**
 * CIT-CHAT-BOT Widget Standalone Page
 *
 * Can be loaded in an iframe or embedded directly.
 * The API key must be provided via ?key=YOUR_KEY in production.
 */

require_once __DIR__ . '/auth.php';

$apiKey = isset($_GET['key']) ? trim((string) $_GET['key']) : '';
$position = isset($_GET['position']) && in_array($_GET['position'], ['bottom-right', 'bottom-left'], true)
    ? $_GET['position']
    : 'bottom-right';

// Validate key if one is supplied
$configuredOrigin = ($apiKey !== '' && array_key_exists($apiKey, ALLOWED_KEYS)) ? ALLOWED_KEYS[$apiKey] : '*';
$endpoint = './api.php';
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CIT-CHAT-BOT Widget</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./assets/widget.css">
    <style>
      body { margin: 0; min-height: 100vh; background: #f5f5f5; font-family: 'Cairo', sans-serif; }
      .demo-banner {
        background: linear-gradient(135deg, #e87820, #c45f0a);
        color: #fff;
        padding: 24px;
        text-align: center;
      }
      .demo-banner h1 { margin: 0 0 8px; font-size: 22px; }
      .demo-banner p { margin: 0; opacity: 0.9; font-size: 14px; }
      .demo-content { padding: 40px 20px; max-width: 800px; margin: 0 auto; }
      .demo-card {
        background: #fff;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        margin-bottom: 20px;
      }
      .demo-card h2 { color: #1a1208; font-size: 18px; margin-top: 0; }
      .demo-card code {
        background: #f4f4f5;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 13px;
      }
      .demo-card pre {
        background: #1a1208;
        color: #e87820;
        padding: 16px;
        border-radius: 10px;
        overflow-x: auto;
        font-size: 13px;
        line-height: 1.6;
      }
    </style>
</head>
<body>
    <div class="demo-banner">
      <h1>CIT-CHAT-BOT Widget</h1>
      <p>فقاعة محادثة ذكية لموقع كلية التقنية الصناعية</p>
    </div>

    <div class="demo-content">
      <div class="demo-card">
        <h2>كيفية التضمين</h2>
        <p>انسخ هذا الكود إلى موقعك:</p>
        <pre>&lt;script
  src="https://chatbot.cit.edu.ly/widget/assets/widget.js"
  data-endpoint="https://chatbot.cit.edu.ly/widget/api.php"
  data-api-key="YOUR_WIDGET_KEY"
  data-position="bottom-right"
  data-title="CIT-CHAT-BOT"&gt;
&lt;/script&gt;</pre>
      </div>

      <div class="demo-card">
        <h2>الوضع الحالي</h2>
        <p>المفتاح المستخدم: <code><?php echo htmlspecialchars($apiKey ?: 'غير محدد', ENT_QUOTES, 'UTF-8'); ?></code></p>
        <p>الموضع: <code><?php echo htmlspecialchars($position, ENT_QUOTES, 'UTF-8'); ?></code></p>
        <p>Origin المسموح: <code><?php echo htmlspecialchars($configuredOrigin, ENT_QUOTES, 'UTF-8'); ?></code></p>
      </div>
    </div>

    <script src="./assets/widget.js"
            data-endpoint="<?php echo htmlspecialchars($endpoint, ENT_QUOTES, 'UTF-8'); ?>"
            data-api-key="<?php echo htmlspecialchars($apiKey, ENT_QUOTES, 'UTF-8'); ?>"
            data-position="<?php echo htmlspecialchars($position, ENT_QUOTES, 'UTF-8'); ?>"
            data-title="CIT-CHAT-BOT">
    </script>
</body>
</html>
