<?php
// ============================================================
// chatbot.php — Receives user message, calls OpenAI, returns response
// Called via JavaScript fetch() from the chat widget
// ============================================================

require_once 'config.php';

// Only allow POST requests
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    http_response_code(405);
    exit(json_encode(['error' => 'Method not allowed']));
}

// Set JSON response header
header('Content-Type: application/json');

// Get and sanitise the incoming data
$input = json_decode(file_get_contents('php://input'), true);

if (!isset($input['message']) || empty(trim($input['message']))) {
    echo json_encode(['error' => 'No message provided']);
    exit;
}

$user_message = trim(htmlspecialchars($input['message'], ENT_QUOTES, 'UTF-8'));

// Get conversation history from the request (to maintain context)
$history = isset($input['history']) ? $input['history'] : [];

// Build the messages array for the OpenAI API
// System prompt comes first, then the conversation history, then the new message
$messages = [
    ['role' => 'system', 'content' => SYSTEM_PROMPT]
];

// Add previous messages (limit to last 10 to control token usage)
$recent_history = array_slice($history, -10);
foreach ($recent_history as $msg) {
    if (isset($msg['role']) && isset($msg['content'])) {
        $messages[] = [
            'role'    => in_array($msg['role'], ['user','assistant']) ? $msg['role'] : 'user',
            'content' => htmlspecialchars($msg['content'], ENT_QUOTES, 'UTF-8')
        ];
    }
}

// Add the new user message
$messages[] = ['role' => 'user', 'content' => $user_message];

// Build the request payload for OpenAI
$payload = json_encode([
    'model'       => OPENAI_MODEL,
    'messages'    => $messages,
    'max_tokens'  => MAX_TOKENS,
    'temperature' => 0.7, // 0 = very consistent, 1 = more creative
]);

// Call the OpenAI Chat Completions API using cURL
$ch = curl_init('https://api.openai.com/v1/chat/completions');

curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POST           => true,
    CURLOPT_POSTFIELDS     => $payload,
    CURLOPT_HTTPHEADER     => [
        'Content-Type: application/json',
        'Authorization: Bearer ' . OPENAI_API_KEY,
    ],
    CURLOPT_TIMEOUT        => 30,
]);

$response    = curl_exec($ch);
$curl_error  = curl_error($ch);
$http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);

// Handle cURL errors (e.g. no internet connection)
if ($curl_error) {
    echo json_encode(['error' => 'Connection error: ' . $curl_error]);
    exit;
}

// Handle non-200 responses from OpenAI
if ($http_status !== 200) {
    $error_data = json_decode($response, true);
    $error_msg  = isset($error_data['error']['message']) 
                  ? $error_data['error']['message'] 
                  : 'API error (HTTP ' . $http_status . ')';
    echo json_encode(['error' => $error_msg]);
    exit;
}

// Parse the OpenAI response
$data = json_decode($response, true);

if (!isset($data['choices'][0]['message']['content'])) {
    echo json_encode(['error' => 'Unexpected response from API']);
    exit;
}

// Extract the AI reply and token usage info
$bot_reply   = $data['choices'][0]['message']['content'];
$tokens_used = isset($data['usage']['total_tokens']) ? $data['usage']['total_tokens'] : 0;

// Return the response to the JavaScript frontend
echo json_encode([
    'reply'       => $bot_reply,
    'tokens_used' => $tokens_used,
]);
?>

<!-- ============================================================
     chatbot-widget.php — Floating chat widget UI + JavaScript
     Include this file at the bottom of any page where you want
     the chatbot: <?php include 'chatbot-widget.php'; ?>
     ============================================================ -->

<!-- Floating chat button -->
<div id="cz-chat-bubble" onclick="czToggleChat()" title="Chat with AI Assistant"
  style="position:fixed;bottom:24px;right:24px;width:54px;height:54px;
  background:#0057b8;border-radius:50%;display:flex;align-items:center;
  justify-content:center;cursor:pointer;z-index:9999;box-shadow:0 4px 16px rgba(0,87,184,.4);
  font-size:1.4em;transition:transform .2s" onmouseover="this.style.transform='scale(1.1)'"
  onmouseout="this.style.transform='scale(1)'">💬</div>

<!-- Unread badge -->
<div id="cz-badge" style="position:fixed;bottom:64px;right:22px;background:#ef4444;
  color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;
  justify-content:center;font-size:.65em;font-weight:700;z-index:10000;display:none">1</div>

<!-- Chat window -->
<div id="cz-chat-window" style="display:none;position:fixed;bottom:90px;right:24px;
  width:340px;max-width:calc(100vw - 40px);background:#fff;border-radius:14px;
  box-shadow:0 8px 40px rgba(0,0,0,.18);z-index:9998;overflow:hidden;
  font-family:'Segoe UI',Tahoma,sans-serif;border:1px solid #e2e8f0">

  <!-- Header -->
  <div style="background:#0057b8;padding:14px 16px;display:flex;align-items:center;
    justify-content:space-between">
    <div style="display:flex;align-items:center;gap:10px">
      <div style="width:34px;height:34px;background:rgba(255,255,255,.2);border-radius:50%;
        display:flex;align-items:center;justify-content:center;font-size:1.1em">🤖</div>
      <div>
        <div style="color:#fff;font-weight:700;font-size:.9em">AI Assistant</div>
        <div style="color:rgba(255,255,255,.75);font-size:.72em">Powered by ChatGPT</div>
      </div>
    </div>
    <button onclick="czToggleChat()" style="background:none;border:none;color:rgba(255,255,255,.8);
      font-size:1.2em;cursor:pointer;padding:4px 8px;border-radius:4px" title="Close">✕</button>
  </div>

  <!-- Messages area -->
  <div id="cz-messages" style="height:280px;overflow-y:auto;padding:14px;
    display:flex;flex-direction:column;gap:10px;background:#f8faff">
    <!-- Welcome message -->
    <div style="background:#fff;border:1px solid #e2e8f0;border-radius:10px 10px 10px 2px;
      padding:10px 13px;font-size:.84em;color:#444;max-width:88%;line-height:1.55">
      👋 Hi! I am your AI assistant. How can I help you today?
    </div>
  </div>

  <!-- Input area -->
  <div style="padding:12px;border-top:1px solid #e8edf5;background:#fff;display:flex;gap:8px">
    <input id="cz-input" type="text" placeholder="Type your message..."
      style="flex:1;padding:9px 13px;border:1.5px solid #e2e8f0;border-radius:8px;
      font-family:'Segoe UI',sans-serif;font-size:.84em;outline:none;color:#1c1c1c"
      onfocus="this.style.borderColor='#0057b8'" onblur="this.style.borderColor='#e2e8f0'"
      onkeypress="if(event.key==='Enter')czSendMessage()">
    <button id="cz-send-btn" onclick="czSendMessage()"
      style="background:#0057b8;color:#fff;border:none;border-radius:8px;padding:9px 14px;
      font-size:.84em;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s"
      onmouseover="this.style.background='#003d8a'" onmouseout="this.style.background='#0057b8'">
      Send
    </button>
  </div>

  <!-- Footer -->
  <div style="padding:6px 12px 8px;text-align:center;font-size:.68em;color:#aaa;background:#fff">
    Powered by OpenAI GPT-4o mini
  </div>

</div>

<script>
var czHistory = [];
var czOpen    = false;

function czToggleChat() {
    czOpen = !czOpen;
    document.getElementById('cz-chat-window').style.display = czOpen ? 'block' : 'none';
    document.getElementById('cz-badge').style.display = 'none';
    if (czOpen) document.getElementById('cz-input').focus();
}

function czAddMessage(text, isUser) {
    var msgs = document.getElementById('cz-messages');
    var div  = document.createElement('div');
    div.style.cssText = isUser
        ? 'background:#0057b8;color:#fff;border-radius:10px 10px 2px 10px;padding:10px 13px;font-size:.84em;max-width:88%;align-self:flex-end;margin-left:auto;line-height:1.55'
        : 'background:#fff;border:1px solid #e2e8f0;border-radius:10px 10px 10px 2px;padding:10px 13px;font-size:.84em;color:#333;max-width:88%;line-height:1.55';
    div.textContent = text;
    msgs.appendChild(div);
    msgs.scrollTop = msgs.scrollHeight;
    return div;
}

function czShowTyping() {
    var msgs = document.getElementById('cz-messages');
    var div  = document.createElement('div');
    div.id   = 'cz-typing';
    div.style.cssText = 'background:#fff;border:1px solid #e2e8f0;border-radius:10px 10px 10px 2px;padding:10px 13px;font-size:.84em;color:#999;max-width:88%;font-style:italic;line-height:1.55';
    div.textContent = 'Thinking...';
    msgs.appendChild(div);
    msgs.scrollTop = msgs.scrollHeight;
}

function czRemoveTyping() {
    var t = document.getElementById('cz-typing');
    if (t) t.remove();
}

function czSendMessage() {
    var input = document.getElementById('cz-input');
    var btn   = document.getElementById('cz-send-btn');
    var text  = input.value.trim();
    if (!text) return;

    // Add user message to UI and history
    czAddMessage(text, true);
    czHistory.push({ role: 'user', content: text });
    input.value = '';
    btn.disabled = true;
    btn.textContent = '...';
    czShowTyping();

    // Send to PHP backend
    fetch('chatbot.php', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ message: text, history: czHistory })
    })
    .then(function(res) { return res.json(); })
    .then(function(data) {
        czRemoveTyping();
        if (data.error) {
            czAddMessage('Sorry, something went wrong: ' + data.error, false);
        } else {
            czAddMessage(data.reply, false);
            czHistory.push({ role: 'assistant', content: data.reply });
        }
    })
    .catch(function() {
        czRemoveTyping();
        czAddMessage('Could not connect to the server. Please try again.', false);
    })
    .finally(function() {
        btn.disabled = false;
        btn.textContent = 'Send';
        document.getElementById('cz-input').focus();
    });
}
</script>

<?php
// Your existing PHP code above ...
?>

<!DOCTYPE html>
<html>
<head>
    <title>Your PHP Project</title>
</head>
<body>

    <!-- Your existing page content -->
    <h1>Welcome to my project</h1>

    <!-- ADD THIS ONE LINE at the bottom of every page where you want the chatbot -->
    <?php include 'chatbot-widget.php'; ?>

</body>
</html>