<!-- Live Robot Status Panel -->
<div class="robot-status-panel">
    <div class="stat-item"><span class="stat-label">System Status</span><span class="stat-value blink" style="color: var(--neon-green);">● ACTIVE</span></div>
    <div class="stat-item"><span class="stat-label">Uptime</span><span class="stat-value" id="robotUptime">00:00:00</span></div>
    <div class="stat-item"><span class="stat-label">Active Primary</span><span class="stat-value" id="currentPrimaryDisplay" style="color: var(--neon-green);">Server1</span></div>
    <div class="stat-item"><span class="stat-label">CPU Load</span><span class="stat-value" id="cpuLoad">12%</span></div>
</div>

<!-- Server Grid -->
<div class="server-grid" id="serverGrid"></div>

<!-- AI Command Center -->
<div class="ai-control-panel">
    <h2>⚡ Manual Command Center</h2>
    <div style="background: #0d1219; padding: 8px 15px; border-radius: 4px; margin-bottom: 15px; border-left: 3px solid #ffaa00;">
        <strong style="color:#ffaa00;">⚙️ Active Policy:</strong> <span id="customRuleDisplay" style="color: var(--text-main);">Only Primary nodes can write to agDatabase.</span>
    </div>
    <div class="control-group">
        <button class="danger" onclick="simulateFailover('Server2')">⚡ Failover to S2</button>
        <button class="danger" onclick="simulateFailover('Server3')">⚡ Failover to S3</button>
        <button class="primary-act" onclick="resetSimulation()">⟳ Reset System</button>
        <button onclick="simulateJobRun('Server1')">Run Job S1</button>
        <button onclick="simulateJobRun('Server2')">Run Job S2</button>
        <button onclick="simulateJobRun('Server3')">Run Job S3</button>
    </div>
</div>

<!-- AI Terminal Log -->
<div class="ai-terminal">
    <div class="terminal-header">
        <span>📟 TERMINAL LOG</span>
        <span>Operator: A.P.PATHUm LAKMAL</span>
    </div>
    <div class="terminal-window" id="logFeed">
        <div class="log-line log-success">[INIT] System initialized. A.P.PATHUm LAKMAL ready.</div>
    </div>
</div>

<!-- NEW: AI CHATBOT INTERFACE -->
<div class="chat-container">
    <div class="chat-header">
        <span>🧠 AI System Bot (Read / Write / Scan / Execute)</span>
        <span style="font-size: 0.8rem; color: var(--neon-green);">● ONLINE</span>
    </div>
    <div class="chat-messages" id="chatMessages">
        <div class="msg bot"><div class="bubble">Hello! I am your AI Orchestrator. You can ask me to check server status, run jobs, or failover nodes! Try: "Scan Server 2"</div></div>
    </div>
    <div class="typing-indicator" id="typingIndicator">AI is thinking...</div>
    <div class="chat-input-group">
        <input type="text" id="chatInput" placeholder="Type a command... (e.g., 'Failover to Server 3')" onkeypress="handleChatEnter(event)">
        <button onclick="handleChatSend()">Send ⚡</button>
    </div>
</div>

<!-- Social Footer -->
<div class="social-footer">
    <h3>CONNECT WITH THE DEVELOPER</h3>
    <div class="social-links">
        <a href="https://www.facebook.com/" target="_blank" class="social-btn">📘 Facebook</a>
        <a href="https://github.com/pathum25" target="_blank" class="social-btn">🐙 GitHub</a>
        <a href="https://huggingface.co/Pq234" target="_blank" class="social-btn">🤗 Hugging Face</a>
        <a href="https://wa.me/94767605853" target="_blank" class="social-btn">💬 WhatsApp</a>
    </div>
    <div class="creator-credit">Created by <strong>A.P.PATHUm LAKMAL</strong> © 2026</div>
</div>