<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AI Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Main styles */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5; /* Light flat background */
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        .chat-container {
            width: 90%;
            max-width: 800px;
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 90vh;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow to separate from background */
        }

        .chat-header {
            background-color: #007bff; /* Flat blue color */
            color: white;
            text-align: center;
            padding: 20px;
            font-size: 1.8rem;
            font-weight: bold;
        }

        .chat-history {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f9f9f9; /* Light gray background for chat history */
        }

        .chat-message {
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 8px;
            background-color: #e9ecef; /* Flat message background */
        }

        .user {
            color: #007bff;
            font-weight: bold;
        }

        .assistant {
            color: #28a745;
            font-weight: bold;
        }

        .chat-footer {
            padding: 20px;
            background-color: #ffffff;
            border-top: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        textarea {
            resize: none;
            width: 100%;
            height: 80px;
            padding: 12px;
            font-size: 1rem;
            border: 1px solid #ccc;
            border-radius: 8px;
            background-color: #f1f3f5; /* Light gray background for text area */
            color: #333;
            transition: border-color 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: #007bff;
        }

        .button-row {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        button {
            padding: 12px 24px;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .send-button {
            background-color: #007bff;
            color: white;
        }

        .send-button:hover {
            background-color: #0056b3;
        }

        .clear-button {
            background-color: #dc3545;
            color: white;
        }

        .clear-button:hover {
            background-color: #a71d2a;
        }

        /* Typing indicator styles */
        .typing-indicator {
            display: none;
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 8px;
            background-color: #e9ecef;
            font-style: italic;
            color: #555;
        }

        /* Optional: Animation for typing dots */
        .typing-indicator::after {
            content: ' ';
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            border-radius: 50%;
            background-color: #555;
            animation: blink 1s infinite;
        }

        @keyframes blink {
            0% { opacity: 0.2; }
            20% { opacity: 1; }
            100% { opacity: 0.2; }
        }

        /* Responsiveness */
        @media (max-width: 768px) {
            .chat-header {
                font-size: 1.5rem;
                padding: 15px;
            }

            textarea {
                height: 60px;
                padding: 10px;
            }

            button {
                font-size: 0.9rem;
                padding: 10px 18px;
            }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
            <a href="https://botai.click/" target="_blank" rel="noopener">Boost Your Website with a Free AI Chatbot</a>
        </div>

        <!-- Chat history -->
        <div class="chat-history" id="chatHistory">
            <?php if (!empty($_SESSION['chat_history'])): ?>
                <?php foreach ($_SESSION['chat_history'] as $message): ?>
                    <div class="chat-message">
                        <strong class="<?php echo htmlspecialchars($message['role']); ?>">
                            <?php echo ucfirst($message['role']); ?>:
                        </strong>
                        <?php echo nl2br(htmlspecialchars($message['content'])); ?>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <p>Chat history is empty.</p>
            <?php endif; ?>
        </div>

        <!-- Typing indicator -->
        <div class="typing-indicator" id="typingIndicator">
            Assistant is typing...
        </div>

        <!-- Message sending form -->
        <div class="chat-footer">
            <form id="chatForm">
                <textarea name="prompt" id="prompt" placeholder="Enter your request..." required></textarea>
                <div class="button-row">
                    <button type="submit" class="send-button">Send</button>
                </div>
            </form>
        </div>

        <!-- Clear chat button -->
        <div style="padding: 20px; background-color: #ffffff; border-top: 1px solid #ddd;">
            <form id="clearChatForm">
                <button type="submit" name="clear_chat" value="1" class="clear-button">Clear Chat</button>
            </form>
        </div>
    </div>

    <!-- JavaScript for handling AJAX and typing indicator -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatForm = document.getElementById('chatForm');
            const clearChatForm = document.getElementById('clearChatForm');
            const chatHistory = document.getElementById('chatHistory');
            const typingIndicator = document.getElementById('typingIndicator');
            const promptInput = document.getElementById('prompt');

            // Function to scroll chat to the bottom
            function scrollToBottom() {
                chatHistory.scrollTop = chatHistory.scrollHeight;
            }

            // Handle chat form submission
            chatForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const prompt = promptInput.value.trim();
                if (prompt === '') return;

                // Append user's message to chat history
                appendMessage('user', prompt);
                scrollToBottom();

                // Clear the input
                promptInput.value = '';

                // Show typing indicator
                typingIndicator.style.display = 'block';

                // Prepare form data
                const formData = new FormData();
                formData.append('prompt', prompt);

                // Send AJAX request
                fetch('', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    // Hide typing indicator
                    typingIndicator.style.display = 'none';

                    if (data.status === 'success') {
                        // Append assistant's response
                        appendMessage('assistant', data.response);
                        scrollToBottom();
                    } else {
                        // Handle unexpected statuses or errors
                        appendMessage('assistant', 'An error occurred. Please try again.');
                        scrollToBottom();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    typingIndicator.style.display = 'none';
                    appendMessage('assistant', 'An error occurred. Please try again.');
                    scrollToBottom();
                });
            });

            // Handle clear chat form submission
            clearChatForm.addEventListener('submit', function(e) {
                e.preventDefault();

                // Optionally, show a confirmation dialog
                if (!confirm('Are you sure you want to clear the chat?')) {
                    return;
                }

                // Send AJAX request to clear chat
                const formData = new FormData();
                formData.append('clear_chat', '1');

                fetch('', {
                    method: 'POST',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'cleared') {
                        // Clear chat history in the UI
                        chatHistory.innerHTML = '<p>Chat history is empty.</p>';
                        scrollToBottom();
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });

            // Function to append a message to the chat history
            function appendMessage(role, message) {
                const messageDiv = document.createElement('div');
                messageDiv.classList.add('chat-message');

                const strong = document.createElement('strong');
                strong.classList.add(role);
                strong.textContent = ucfirst(role) + ': ';

                const content = document.createElement('span');
                content.innerHTML = nl2br_escape(message);

                messageDiv.appendChild(strong);
                messageDiv.appendChild(content);

                chatHistory.appendChild(messageDiv);
            }

            // Utility function to capitalize the first letter
            function ucfirst(string) {
                return string.charAt(0).toUpperCase() + string.slice(1);
            }

            // Utility function to convert newlines to <br> and escape HTML
            function nl2br_escape(str) {
                const escaped = str
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
                return escaped.replace(/\n/g, '<br>');
            }

            // Initial scroll to bottom
            scrollToBottom();
        });
    </script>
</body>
</html>