<!DOCTYPE html>
<html lang="id">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SIDALAP AI</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<style>
    #topHeader {
        display: none; 
        align-items: center;
        padding: 15px 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background-color: transparent;
        animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* Styling khusus welcome screen aya robotna */
    #welcome {
        text-align: center;
    }
    #welcome img {
        width: 140px;
        height: 140px;
        object-fit: contain;
        margin-bottom: 15px;
        border-radius: 50%;
        box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
        border: 2px solid rgba(245, 158, 11, 0.5);
        animation: floatRobot 3s ease-in-out infinite;
    }
    @keyframes floatRobot {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    #welcome .logo-circle {
        display: none !important;
    }
</style>
</head>

<body>

<div class="sidebar">
    <div class="logo">
        <div class="logo-circle">AI</div>
    </div>
    <i class="bi bi-chat-left-text"></i>
    <i class="bi bi-folder2-open"></i>
    <i class="bi bi-bar-chart"></i>
    <i class="bi bi-gear"></i>
    <div class="bottom">
        <i class="bi bi-person-circle"></i>
    </div>
</div>

<div class="main">

    <div id="topHeader">
        <h1 style="font-family: 'Poppins', 'Inter', sans-serif; font-size: 24px; font-weight: 800; letter-spacing: 1.5px; background: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; text-transform: uppercase;">
            SIDALAP AI
        </h1>
    </div>

    <div class="center">
        <div id="welcome">
            <img src="{{ url_for('static', filename='images/robot.png') }}" alt="Robot AI">
            <h1 style="font-family: 'Poppins', 'Inter', sans-serif; font-weight: 800; background: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-transform: uppercase;">
                SIDALAP AI
            </h1>
            <p>Asisten Cerdas Penyuluh KB</p>
        </div>

        <div id="chatbox"></div>
    </div>

    <div class="input-area">
        <button class="icon-btn">
            <i class="bi bi-paperclip"></i>
        </button>
        <input
            id="query"
            type="text"
            placeholder="Tanyakan apa saja..."
            autocomplete="off"
        >
        <button class="send-btn" id="btnKirim">
            <i class="bi bi-arrow-up"></i>
        </button>
    </div>

</div>

<script>
const chat = document.getElementById("chatbox");
const input = document.getElementById("query");
const btn = document.getElementById("btnKirim");
const topHeader = document.getElementById("topHeader");

btn.addEventListener("click", kirim);

input.addEventListener("keydown", function(e){
    if(e.key === "Enter" && !e.shiftKey){
        e.preventDefault();
        kirim();
    }
});

async function kirim(){
    const q = input.value.trim();
    if(q === "") return;

    document.getElementById("welcome").style.display = "none";
    topHeader.style.display = "flex"; 

    input.value = "";
    const aiId = "ai_" + Date.now();

    chat.insertAdjacentHTML("beforeend", `
        <div class="user-row">
            <div class="user-bubble">
                ${escapeHtml(q)}
            </div>
        </div>
        <div class="ai-row">
            <div class="ai-bubble" id="${aiId}">
                ⏳ SIDALAP AI sedang menyiapkan jawaban...
            </div>
        </div>
    `);

    scrollBawah();

    try {
        const res = await fetch("./tanya", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                query: q
            })
        });

        if(!res.ok){
            throw new Error("HTTP " + res.status);
        }

        const data = await res.json();
        const bubble = document.getElementById(aiId);
        if(bubble){
            bubble.innerHTML = formatJawaban(data.jawaban);
        }
    } catch(err) {
        const bubble = document.getElementById(aiId);
        if(bubble){
            bubble.innerHTML = "❌ Error: " + err.message;
        }
    }

    scrollBawah();
}

function formatJawaban(text){
    if(!text){
        return "Tidak ada jawaban.";
    }
    return escapeHtml(text).replace(/\n/g, "<br>");
}

function escapeHtml(text){
    const div = document.createElement("div");
    div.innerText = text;
    return div.innerHTML;
}

function scrollBawah(){
    chat.scrollTop = chat.scrollHeight;
    window.scrollTo({
        top: document.body.scrollHeight,
        behavior: "smooth"
    });
}
</script>

</body>
</html>