<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Indira AI – MIND</title>

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

    <style>
        /* GLOBAL */
        body {
            background: #001737; /* biru donker Kemenparekraf */
            color: white;
            font-family: "Segoe UI", sans-serif;
        }

        .chat-container {
            width: 100%;
            max-width: 650px;
            margin: 35px auto;
            background: #0a2b5c;
            border-radius: 18px;
            box-shadow: 0 0 25px rgba(0,0,0,0.35);
            overflow: hidden;
        }

        /* HEADER */
        .header {
            text-align: center;
            padding: 25px 10px;
            border-bottom: 1px solid rgba(255,255,255,0.15);
            background: #0c326e;
        }

        .header img {
            width: 80px;
            margin-bottom: 8px;
        }

        /* CHAT AREA */
        #chat-box {
            height: 62vh;
            overflow-y: auto;
            padding: 20px;
        }

        .msg-user, .msg-bot {
            margin-bottom: 14px;
            display: flex;
        }

        .msg-user { justify-content: flex-end; }

        .bubble {
            padding: 13px 17px;
            border-radius: 20px;
            max-width: 78%;
            font-size: 15px;
            line-height: 1.45;
        }

        .bubble-user {
            background: #0a84ff;
            color: white;
            border-bottom-right-radius: 4px;
        }

        .bubble-bot {
            background: #e4e7ec;
            color: #000;
            border-bottom-left-radius: 4px;
        }

        /* INPUT AREA */
        .input-area {
            padding: 15px;
            background: #0a2b5c;
            border-top: 1px solid rgba(255,255,255,0.15);
        }

        /* TYPING INDICATOR */
        .typing-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .typing-dots {
            display: flex;
            gap: 4px;
        }

        .typing-dots span {
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            display: inline-block;
            animation: typingBlink 1.4s infinite ease-in-out both;
        }

        .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
        .typing-dots span:nth-child(2) { animation-delay: -0.16s; }

        @keyframes typingBlink {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
            40% { transform: translateY(-6px); opacity: 1; }
        }

        .typing-text {
            color: white;
            opacity: 0.9;
            font-size: 13px;
        }

    </style>
</head>

<body>

<div class="chat-container">

    <!-- HEADER -->
    <div class="header">
        <img src="/static/logo/logokemenpar.png" alt="Kemenparekraf">
        <h4 style="font-weight:600; margin:0;">Indira AI – Manajemen Industri</h4>
    
        <small style="opacity:0.75;">Knowledge Base Permenpar No. 6 Tahun 2025</small>
    </div>

    <!-- CHAT -->
    <div id="chat-box"></div>

    <!-- INPUT -->
    <div class="input-area">
        <div class="input-group">
            <input id="question" class="form-control" placeholder="Tulis pertanyaan Anda…">
            <button class="btn btn-primary" onclick="sendMessage()">Kirim</button>
        </div>
    </div>

</div>


<script>
/* =======================
   APPEND USER & BOT
======================= */
function appendUser(text) {
    document.getElementById("chat-box").innerHTML += `
        <div class="msg-user">
            <div class="bubble bubble-user">${text}</div>
        </div>
    `;
    scrollDown();
}

function appendBot(text) {
    document.getElementById("chat-box").innerHTML += `
        <div class="msg-bot">
            <div class="bubble bubble-bot">${text}</div>
        </div>
    `;
    scrollDown();
}

/* =======================
   TYPING
======================= */
function appendTyping() {
    document.getElementById("chat-box").innerHTML += `
        <div id="typing" class="msg-bot">
            <div class="typing-wrapper">
                <div class="typing-dots">
                    <span></span><span></span><span></span>
                </div>
                <div class="typing-text">Indira sedang berpikir...</div>
            </div>
        </div>
    `;
    scrollDown();
}

function removeTyping() {
    let el = document.getElementById("typing");
    if (el) el.remove();
}

function scrollDown() {
    let box = document.getElementById("chat-box");
    box.scrollTop = box.scrollHeight;
}

/* =======================
   SEND MESSAGE
======================= */
async function sendMessage() {
    let q = document.getElementById("question").value.trim();
    if (!q) return;

    appendUser(q);
    document.getElementById("question").value = "";

    appendTyping();

    try {
        let res = await fetch("/query", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
                question: q,
                top_k: 5,
                use_llm: true
            })
        });

        let data = await res.json();
        removeTyping();

        if (data.answer) appendBot(data.answer);
        else appendBot("⚠️ Indira belum menemukan jawaban yang sesuai.");

    } catch (err) {
        removeTyping();
        appendBot("❗ Terjadi kesalahan jaringan.");
        console.error(err);
    }
}
</script>
<script>
/* =======================
   FUNC: DAPATKAN SAPAAN
======================= */
function getGreeting() {
    let h = new Date().getHours();
    if (h >= 4 && h < 11) return "Selamat pagi";
    if (h >= 11 && h < 15) return "Selamat siang";
    if (h >= 15 && h < 18) return "Selamat sore";
    return "Selamat malam";
}

/* =======================
   APPEND USER & BOT
======================= */
function appendUser(text) {
    document.getElementById("chat-box").innerHTML += `
        <div class="msg-user">
            <div class="bubble bubble-user">${text}</div>
        </div>
    `;
    scrollDown();
}

function appendBot(text) {
    document.getElementById("chat-box").innerHTML += `
        <div class="msg-bot">
            <div class="bubble bubble-bot">${text}</div>
        </div>
    `;
    scrollDown();
}

/* =======================
   TYPING
======================= */
function appendTyping() {
    document.getElementById("chat-box").innerHTML += `
        <div id="typing" class="msg-bot">
            <div class="typing-wrapper">
                <div class="typing-dots">
                    <span></span><span></span><span></span>
                </div>
                <div class="typing-text">Indira sedang berpikir...</div>
            </div>
        </div>
    `;
    scrollDown();
}

function removeTyping() {
    let el = document.getElementById("typing");
    if (el) el.remove();
}

function scrollDown() {
    let box = document.getElementById("chat-box");
    box.scrollTop = box.scrollHeight;
}

/* =======================
   SEND MESSAGE
======================= */
async function sendMessage() {
    let q = document.getElementById("question").value.trim();
    if (!q) return;

    appendUser(q);
    document.getElementById("question").value = "";

    appendTyping();

    try {
        let res = await fetch("/query", {
            method: "POST",
            headers: {"Content-Type": "application/json"},
            body: JSON.stringify({
                question: q,
                top_k: 5,
                use_llm: true
            })
        });

        let data = await res.json();
        removeTyping();

        if (data.answer) appendBot(data.answer);
        else appendBot("⚠️ Indira belum menemukan jawaban yang sesuai.");

    } catch (err) {
        removeTyping();
        appendBot("❗ Terjadi kesalahan jaringan.");
        console.error(err);
    }
}

/* =======================
   WELCOME MESSAGE OTOMATIS
======================= */
window.onload = function () {
    setTimeout(() => {
        let greet = getGreeting();
        appendBot(`${greet}! 👋`);
        appendBot("Halo, saya <b>Indira AI – MIND</b>.<br>Saya masih belajar dan akan membantu menjawab pertanyaan berdasarkan Permenpar No. 6 Tahun 2025. 😊");
    }, 400);
}
</script>


</body>
</html>
