app.py

"""
AI HTML Editor — Flask Server
Multi-file support, system prompt from file, Eruda-only preview.
Job disimpan di memori dengan TTL 1 hari.
"""

from flask import Flask, request, jsonify, Response
import uuid, time, re, threading, requests, os

app = Flask(__name__)

# ─────────────────────────────────────────────
#  LOAD SYSTEM PROMPT FROM FILE
# ─────────────────────────────────────────────
_SP_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'system_prompt.md')
with open(_SP_PATH, 'r', encoding='utf-8') as _f:
    SYSTEM_PROMPT = _f.read()

# ─────────────────────────────────────────────
#  JOB STORE  (in-memory, TTL = 1 hari)
# ─────────────────────────────────────────────
JOBS: dict[str, dict] = {}
JOB_TTL = 86_400
_lock = threading.Lock()

def _purge_expired():
    now = time.time()
    with _lock:
        expired = [jid for jid, j in JOBS.items() if now - j["created_at"] > JOB_TTL]
        for jid in expired:
            del JOBS[jid]

def new_job(payload: dict) -> str:
    _purge_expired()
    jid = str(uuid.uuid4())
    with _lock:
        JOBS[jid] = {
            "status": "pending",
            "created_at": time.time(),
            "payload": payload,
            "result": None,
            "error": None,
        }
    return jid

def get_job(jid: str) -> dict | None:
    _purge_expired()
    with _lock:
        return JOBS.get(jid)

def update_job(jid: str, **kwargs):
    with _lock:
        if jid in JOBS:
            JOBS[jid].update(kwargs)


# ─────────────────────────────────────────────
#  FUZZY REPLACE (Levenshtein-based)
# ─────────────────────────────────────────────

def levenshtein(a: str, b: str) -> int:
    la, lb = len(a), len(b)
    if la == 0: return lb
    if lb == 0: return la
    matrix = [list(range(la + 1))] + [[i] + [0] * la for i in range(1, lb + 1)]
    for i in range(1, lb + 1):
        for j in range(1, la + 1):
            if b[i-1] == a[j-1]:
                matrix[i][j] = matrix[i-1][j-1]
            else:
                matrix[i][j] = 1 + min(matrix[i-1][j-1], matrix[i][j-1], matrix[i-1][j])
    return matrix[lb][la]

def calculate_similarity(s1: str, s2: str) -> float:
    longer  = s1 if len(s1) >= len(s2) else s2
    shorter = s1 if len(s1) <  len(s2) else s2
    if len(longer) == 0:
        return 1.0
    return (len(longer) - levenshtein(longer, shorter)) / len(longer)

def fuzzy_replace(source: str, search: str, replacement: str) -> dict:
    search_trimmed = search.strip()
    if not search_trimmed:
        return {"success": False, "result": source}

    # Level 1 — whitespace-agnostic regex
    flex = re.sub(r'\s+', r'\\s+', re.escape(search_trimmed))
    try:
        m = re.search(flex, source)
        if m:
            return {"success": True, "result": source[:m.start()] + replacement.strip() + source[m.end():]}
    except re.error:
        pass

    # Level 2 — sliding window + Levenshtein
    if len(search_trimmed) > 3000:
        return {"success": False, "result": source}

    source_lines = source.split('\n')
    search_lines = [l.strip() for l in search_trimmed.split('\n') if l.strip()]
    if not search_lines:
        return {"success": False, "result": source}

    search_str = ''.join(search_lines)
    best = {"index": -1, "score": 0.0, "length": 0}
    n = len(search_lines)

    for window_size in [max(1, n - 1), n, n + 1]:
        for i in range(len(source_lines)):
            if i + window_size > len(source_lines):
                continue
            window_str = ''.join(l.strip() for l in source_lines[i:i + window_size])
            if abs(len(window_str) - len(search_str)) > len(search_str) * 0.5:
                continue
            score = calculate_similarity(window_str, search_str)
            if score > best["score"]:
                best = {"index": i, "score": score, "length": window_size}

    if best["score"] > 0.70:
        result_lines = (source_lines[:best["index"]]
                        + [replacement]
                        + source_lines[best["index"] + best["length"]:])
        return {"success": True, "result": '\n'.join(result_lines)}

    return {"success": False, "result": source}


# ─────────────────────────────────────────────
#  PARSE tools_call BLOCKS
# ─────────────────────────────────────────────

def _parse_eof_content(block: str, tag: str) -> str | None:
    """
    Extract content between:
        [tag] (optional text on same line)
        <<EOF >
        ...content...
        EOF
    Returns the content string or None if tag not found.
    """
    pattern = (
        rf'\[{re.escape(tag)}\][^\n]*\n'   # [tag] line
        r'<<EOF\s*>\s*\n'                  # <<EOF > line
        r'([\s\S]*?)'                      # content (captured)
        r'\nEOF(?:\s|$)'                   # EOF terminator
    )
    m = re.search(pattern, block)
    return m.group(1) if m else None


def parse_tools_call_blocks(ai_response: str) -> list[dict]:
    """Parse all ```tools_call ... ``` blocks from AI response."""
    pattern = r'```tools_call\s*\n([\s\S]*?)```'
    raw_blocks = re.findall(pattern, ai_response)
    results = []
    for block in raw_blocks:
        tool: dict = {}

        m = re.search(r'\[name\]\s*\n\s*(\S+)', block)
        if m: tool['name'] = m.group(1).strip()

        m = re.search(r'\[reason\]\s*\n\s*(.+)', block)
        if m: tool['reason'] = m.group(1).strip()

        m = re.search(r'\[path\]\s*\n\s*(\S+)', block)
        if m: tool['path'] = m.group(1).strip()

        for tag in ('old_string', 'new_string', 'content'):
            val = _parse_eof_content(block, tag)
            if val is not None:
                tool[tag] = val

        if tool.get('name') and tool.get('path'):
            results.append(tool)

    return results


# ─────────────────────────────────────────────
#  APPLY tools_call TO FILES
# ─────────────────────────────────────────────

def apply_tools_call(files: dict, ai_response: str) -> dict:
    """
    Parse AI response (tools_call format) dan terapkan ke dict files.
    Return: {files, message, action_label}
    """
    tools = parse_tools_call_blocks(ai_response)
    if not tools:
        raise ValueError(
            "Tidak ada blok ```tools_call``` yang valid ditemukan dalam respons AI. "
            "Gunakan format write_file atau edit_file sesuai instruksi sistem."
        )

    # Ambil kalimat pembuka "Saya akan..." sebagai pesan balasan
    respond_m = re.search(r'Saya akan[^\n]+', ai_response)
    respond_text = respond_m.group(0).strip() if respond_m else "Kode berhasil diperbarui."

    temp_files    = dict(files)
    success_count = 0
    is_fuzzy      = False

    for i, tool in enumerate(tools):
        name = tool.get('name', '')
        path = tool.get('path', '')

        if name == 'write_file':
            content = tool.get('content', '')
            temp_files[path] = content
            success_count += 1

        elif name == 'edit_file':
            old_string = tool.get('old_string', '')
            new_string = tool.get('new_string', '')

            if path not in temp_files:
                raise ValueError(
                    f"[edit_file ke-{i+1}] File '{path}' tidak ditemukan dalam project."
                )

            current = temp_files[path]

            # Exact match
            if old_string in current:
                temp_files[path] = current.replace(old_string, new_string, 1)
                success_count += 1
            # Trimmed exact match
            elif old_string.strip() and old_string.strip() in current:
                temp_files[path] = current.replace(old_string.strip(), new_string.strip(), 1)
                success_count += 1
            else:
                # Similarity fallback
                res = fuzzy_replace(current, old_string, new_string)
                if res['success']:
                    temp_files[path] = res['result']
                    success_count += 1
                    is_fuzzy = True
                else:
                    raise ValueError(
                        f"[edit_file ke-{i+1}, file '{path}'] old_string:\n"
                        f"{old_string}\n\n"
                        "TIDAK DITEMUKAN meskipun Similarity Fallback sudah aktif. "
                        "Salin [old_string] dengan lebih teliti dari isi file yang diberikan!"
                    )
        else:
            raise ValueError(f"Tool tidak dikenal '{name}' pada blok ke-{i+1}. Gunakan write_file atau edit_file.")

    action_label = f"Diperbarui ({success_count} operasi){' ✨ Auto-Fix' if is_fuzzy else ''}"
    reasons = [t.get('reason', '') for t in tools if t.get('reason')]
    return {"files": temp_files, "message": respond_text, "action_label": action_label, "reasons": reasons}


# ─────────────────────────────────────────────
#  BUILD PROMPT
#  Context: system_prompt.txt + semua file + instruksi user + error log (jika loop)
# ─────────────────────────────────────────────

def build_prompt(files: dict, user_instruction: str, error_feedback: str = None) -> str:
    files_context = ""
    for path, content in files.items():
        files_context += f"\n[File: {path}]\n```\n{content}\n```\n"

    prompt = (
        f"{SYSTEM_PROMPT}\n\n"
        f"--- PROJECT FILES ---\n{files_context}"
        f"--- END OF FILES ---\n\n"
        f"Instruksi User: {user_instruction}"
    )

    if error_feedback:
        prompt += (
            f"\n\n[ERROR PADA JAWABANMU SEBELUMNYA]:\n{error_feedback}\n\n"
            "Perbaiki [old_string] agar identik persis dengan isi file di PROJECT FILES. "
            "Jika perlu, salin ulang teks tersebut langsung dari sana."
        )

    return prompt


# ─────────────────────────────────────────────
#  AI CALL
# ─────────────────────────────────────────────
GEMINI_API = "https://puruboy-api.vercel.app/api/ai/gemini-v2"

def call_ai(prompt: str) -> str:
    resp = requests.post(
        GEMINI_API,
        json={"prompt": prompt},
        timeout=60,
        headers={"Content-Type": "application/json"},
    )
    resp.raise_for_status()
    data = resp.json()
    if not data.get("success"):
        raise RuntimeError("Gagal terhubung ke API / Server Error.")
    return data["result"]["answer"]


def run_ai_loop(jid: str, user_instruction: str, files: dict,
                loop: int = 0, error_feedback: str = None, max_loops: int = 10):
    """Self-healing AI loop — rekursif di thread terpisah."""
    if loop >= max_loops:
        update_job(jid,
            status="error",
            error=(
                "Gagal merubah kode setelah 10x loop perbaikan. "
                "AI terus-menerus gagal mencocokkan kode. "
                "Coba beri instruksi yang lebih spesifik."
            ),
            loop_count=loop,
        )
        return

    try:
        prompt  = build_prompt(files, user_instruction, error_feedback)
        ai_text = call_ai(prompt)
        result  = apply_tools_call(files, ai_text)

        update_job(jid, status="done", result=result, loop_count=loop)

    except Exception as exc:
        threading.Thread(
            target=run_ai_loop,
            args=(jid, user_instruction, files, loop + 1, str(exc), max_loops),
            daemon=True,
        ).start()


# ─────────────────────────────────────────────
#  ROUTES
# ─────────────────────────────────────────────

@app.route("/api/chat", methods=["POST"])
def api_chat():
    """Body: { instruction: str, files: {path: content} } → { job_id: str }"""
    body        = request.get_json(silent=True) or {}
    instruction = body.get("instruction", "").strip()
    files       = body.get("files", {})

    if not instruction:
        return jsonify({"error": "instruction wajib diisi"}), 400
    if not isinstance(files, dict):
        return jsonify({"error": "files harus berupa object {path: content}"}), 400

    jid = new_job({"instruction": instruction})
    update_job(jid, status="running", loop_count=0)

    threading.Thread(
        target=run_ai_loop,
        args=(jid, instruction, files),
        daemon=True,
    ).start()

    return jsonify({"job_id": jid}), 202


@app.route("/api/job/<jid>", methods=["GET"])
def api_job_status(jid):
    job = get_job(jid)
    if not job:
        return jsonify({"error": "Job tidak ditemukan atau sudah expired (> 1 hari)"}), 404

    resp = {
        "job_id":     jid,
        "status":     job["status"],
        "loop_count": job.get("loop_count", 0),
    }
    if job["status"] == "done":
        resp["result"] = job["result"]
    if job["status"] == "error":
        resp["error"] = job["error"]

    return jsonify(resp)


@app.route("/api/job/<jid>", methods=["DELETE"])
def api_delete_job(jid):
    with _lock:
        if jid in JOBS:
            del JOBS[jid]
            return jsonify({"deleted": True})
    return jsonify({"error": "Job tidak ditemukan"}), 404


# ─────────────────────────────────────────────
#  UI  (embedded HTML)
# ─────────────────────────────────────────────
HTML = r"""<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI HTML Editor</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        iframe { border: none; width: 100%; height: 100%; }
        @keyframes loadingSlide {
            0%   { transform: translateX(-150%); }
            100% { transform: translateX(300%); }
        }
        .loading-fill {
            width: 45%;
            height: 100%;
            background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5);
            border-radius: 999px;
            animation: loadingSlide 1.1s cubic-bezier(.4,0,.6,1) infinite;
        }
    </style>
</head>
<body class="bg-gray-100 flex justify-center h-[100dvh] overflow-hidden text-gray-800">

    <div x-data="aiEditor()" class="w-full max-w-md h-full bg-white shadow-2xl relative flex flex-col">

        <!-- Header -->
        <header class="flex-shrink-0 bg-indigo-600 text-white px-4 py-3 flex justify-between items-center shadow-md z-10">
            <h1 class="text-lg font-bold flex items-center gap-2">
                <i class="fa-solid fa-wand-magic-sparkles"></i> AI Editor
            </h1>
            <!-- Hamburger Menu -->
            <div class="relative">
                <button @click="showMenu = !showMenu"
                        class="bg-indigo-500 hover:bg-indigo-400 w-9 h-9 rounded flex items-center justify-center transition shadow"
                        :class="showMenu ? 'bg-indigo-400' : ''">
                    <i class="fa-solid fa-bars text-base"></i>
                </button>
                <!-- Dropdown -->
                <div x-show="showMenu"
                     @click.away="showMenu = false"
                     x-transition:enter="transition ease-out duration-100"
                     x-transition:enter-start="opacity-0 scale-95"
                     x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75"
                     x-transition:leave-start="opacity-100 scale-100"
                     x-transition:leave-end="opacity-0 scale-95"
                     class="absolute right-0 top-full mt-2 w-44 bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden z-50 text-gray-700"
                     style="display:none">
                    <button @click="downloadZip(); showMenu=false"
                            class="w-full text-left px-4 py-3 text-sm hover:bg-indigo-50 flex items-center gap-3 transition border-b border-gray-100">
                        <i class="fa-solid fa-file-zipper text-indigo-500 w-4"></i>
                        <span class="font-medium">Download ZIP</span>
                    </button>
                    <button @click="downloadCode(); showMenu=false"
                            class="w-full text-left px-4 py-3 text-sm hover:bg-indigo-50 flex items-center gap-3 transition border-b border-gray-100">
                        <i class="fa-solid fa-file-arrow-down text-emerald-500 w-4"></i>
                        <span class="font-medium">Simpan File</span>
                    </button>
                    <label class="w-full text-left px-4 py-3 text-sm hover:bg-indigo-50 flex items-center gap-3 transition cursor-pointer">
                        <i class="fa-solid fa-file-arrow-up text-orange-500 w-4"></i>
                        <span class="font-medium">Upload File</span>
                        <input type="file" class="hidden" @change="uploadFile($event); showMenu=false">
                    </label>
                </div>
            </div>
        </header>

        <!-- Loading bar (visible on all tabs saat polling) -->
        <div x-show="isProcessing"
             class="flex-shrink-0 h-1 bg-indigo-100 overflow-hidden"
             style="display:none">
            <div class="loading-fill"></div>
        </div>
        <main class="flex-1 min-h-0 relative bg-gray-50 flex flex-col overflow-hidden">

            <!-- ═══ CHAT PAGE ═══ -->
            <div x-show="tab === 'chat'" class="h-full flex flex-col" x-transition.opacity>
                <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-container">
                    <template x-for="(msg, index) in chatHistory" :key="index">
                        <div class="flex flex-col" :class="msg.role === 'user' ? 'items-end' : 'items-start'">
                            <span class="text-[10px] text-gray-400 mb-1 font-semibold uppercase tracking-wider"
                                  x-text="msg.role === 'user' ? 'Kamu' : 'AI'"></span>
                            <div class="max-w-[85%] p-3 rounded-2xl shadow-sm text-sm"
                                 :class="msg.role === 'user'
                                     ? 'bg-indigo-600 text-white rounded-tr-none'
                                     : 'bg-white text-gray-800 border border-gray-200 rounded-tl-none'">
                                <p class="whitespace-pre-wrap leading-relaxed" x-text="msg.content"></p>
                                <!-- Reasons dari tool calls -->
                                <template x-if="msg.reasons && msg.reasons.length">
                                    <div class="mt-2 space-y-1">
                                        <template x-for="(r, ri) in msg.reasons" :key="ri">
                                            <div class="text-xs bg-indigo-50 border border-indigo-100 rounded-lg px-2 py-1.5 text-indigo-700 flex items-start gap-1.5">
                                                <i class="fa-solid fa-pencil text-indigo-400 mt-0.5 flex-shrink-0 text-[10px]"></i>
                                                <span x-text="r" class="leading-snug"></span>
                                            </div>
                                        </template>
                                    </div>
                                </template>
                                <template x-if="msg.action">
                                    <div class="mt-2 pt-2 border-t border-gray-100/30 flex items-center gap-1">
                                        <span class="text-[10px] px-2 py-0.5 rounded-full font-bold flex items-center gap-1 bg-emerald-100 text-emerald-700">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                            <span x-text="msg.action"></span>
                                        </span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>

                    <!-- Loading indicator -->
                    <div x-show="isProcessing" class="flex items-start">
                        <div class="bg-white border border-gray-200 p-3 rounded-2xl rounded-tl-none shadow-sm flex items-center gap-2">
                            <i class="fa-solid fa-circle-notch fa-spin text-indigo-600"></i>
                            <span class="text-sm text-gray-600">
                                AI sedang bekerja...
                                <span x-show="loopCount > 0" class="text-xs font-bold text-red-500 ml-1">
                                    (Self-Healing: <span x-text="loopCount"></span>/10)
                                </span>
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Chat Input -->
                <div class="flex-shrink-0 bg-white border-t p-3 flex gap-2 items-center z-10 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
                    <input type="text" x-model="userInput" @keydown.enter="sendPrompt" :disabled="isProcessing"
                           placeholder="Minta AI ubah kode..."
                           class="flex-1 bg-gray-100 text-sm rounded-full px-4 py-2.5 outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 transition">
                    <button @click="sendPrompt" :disabled="isProcessing || !userInput.trim()"
                            class="bg-indigo-600 text-white h-10 w-10 rounded-full flex justify-center items-center shadow-md disabled:bg-gray-400 transition transform active:scale-95">
                        <i class="fa-solid fa-paper-plane"></i>
                    </button>
                </div>
            </div>

            <!-- ═══ CODE PAGE ═══ -->
            <div x-show="tab === 'code'" class="h-full flex flex-col" x-transition.opacity style="display:none">

                <!-- Code Toolbar -->
                <div class="flex-shrink-0 bg-[#2d2d2d] text-gray-300 text-xs px-3 py-2 flex justify-between items-center border-b border-black">
                    <div class="flex items-center gap-2 min-w-0">
                        <!-- Hamburger -->
                        <button @click="showFileList = !showFileList"
                                class="flex-shrink-0 hover:text-white transition p-1 rounded hover:bg-white/10"
                                :class="showFileList ? 'text-white bg-white/10' : ''">
                            <i class="fa-solid fa-bars text-sm"></i>
                        </button>
                        <!-- Active file name -->
                        <span class="font-mono text-gray-200 truncate" x-text="activeFile"></span>
                    </div>
                    <button @click="copyCode" class="flex-shrink-0 hover:text-white transition flex items-center gap-1 ml-2">
                        <i class="fa-regular fa-copy"></i> Salin
                    </button>
                </div>

                <!-- File List Drawer -->
                <div x-show="showFileList"
                     x-transition:enter="transition ease-out duration-150"
                     x-transition:enter-start="opacity-0 -translate-y-1"
                     x-transition:enter-end="opacity-100 translate-y-0"
                     x-transition:leave="transition ease-in duration-100"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="flex-shrink-0 bg-[#252526] border-b border-black text-gray-300 text-xs z-10">

                    <!-- Drawer header -->
                    <div class="px-3 py-2 flex justify-between items-center border-b border-[#3e3e3e]">
                        <span class="font-semibold text-gray-400 uppercase tracking-widest text-[10px]">
                            <i class="fa-solid fa-folder-open mr-1 text-yellow-500"></i> Project Files
                        </span>
                        <button @click="showNewFileInput = !showNewFileInput"
                                class="flex items-center gap-1 text-gray-400 hover:text-white transition px-2 py-0.5 rounded hover:bg-white/10">
                            <i class="fa-solid fa-plus text-xs"></i> New File
                        </button>
                    </div>

                    <!-- New file input -->
                    <div x-show="showNewFileInput" class="px-3 py-2 border-b border-[#3e3e3e] flex gap-2">
                        <input x-model="newFileName"
                               @keydown.enter="addFile"
                               @keydown.escape="showNewFileInput = false"
                               placeholder="nama-file.html"
                               class="flex-1 bg-[#3c3c3c] text-gray-200 text-xs px-2 py-1.5 rounded outline-none focus:ring-1 focus:ring-indigo-500 placeholder-gray-500">
                        <button @click="addFile"
                                class="bg-indigo-600 hover:bg-indigo-500 text-white px-2.5 py-1 rounded text-xs transition">
                            Tambah
                        </button>
                        <button @click="showNewFileInput = false"
                                class="text-gray-500 hover:text-gray-300 px-1 transition">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <!-- File list -->
                    <div class="max-h-44 overflow-y-auto">
                        <template x-for="fname in Object.keys(files)" :key="fname">
                            <div @click="selectFile(fname)"
                                 class="flex items-center justify-between px-3 py-2 cursor-pointer transition group"
                                 :class="fname === activeFile
                                     ? 'bg-[#094771] text-white'
                                     : 'hover:bg-[#37373d] text-gray-300'">
                                <span class="font-mono flex items-center gap-2 truncate text-xs">
                                    <i class="fa-brands fa-html5 text-orange-400 flex-shrink-0"
                                       x-show="fname.endsWith('.html')"></i>
                                    <i class="fa-brands fa-css3-alt text-blue-400 flex-shrink-0"
                                       x-show="fname.endsWith('.css')"></i>
                                    <i class="fa-brands fa-js text-yellow-400 flex-shrink-0"
                                       x-show="fname.endsWith('.js')"></i>
                                    <i class="fa-solid fa-file-code text-gray-400 flex-shrink-0"
                                       x-show="!fname.endsWith('.html') && !fname.endsWith('.css') && !fname.endsWith('.js')"></i>
                                    <span x-text="fname" class="truncate"></span>
                                </span>
                                <button @click.stop="deleteFile(fname)"
                                        x-show="Object.keys(files).length > 1"
                                        class="flex-shrink-0 ml-2 text-gray-600 group-hover:text-gray-400 hover:!text-red-400 transition">
                                    <i class="fa-solid fa-xmark text-xs"></i>
                                </button>
                            </div>
                        </template>
                    </div>
                </div>

                <!-- Editor Textarea -->
                <textarea :value="files[activeFile] || ''"
                          @input="files[activeFile] = $event.target.value"
                          spellcheck="false"
                          class="flex-1 w-full min-h-0 bg-[#1e1e1e] text-[#d4d4d4] font-mono p-4 text-sm outline-none resize-none leading-relaxed"
                          placeholder="<!-- Tulis atau tempel kode di sini -->"></textarea>
            </div>

            <!-- ═══ PREVIEW PAGE ═══ -->
            <div x-show="tab === 'preview'" class="h-full flex flex-col bg-white" x-transition.opacity style="display:none">
                <div class="flex-shrink-0 bg-gray-100 text-gray-500 px-3 py-1.5 flex justify-between items-center border-b border-gray-200">
                    <span class="text-xs flex items-center gap-1.5">
                        <i class="fa-solid fa-bug text-indigo-400"></i>
                        <span class="text-gray-400">Eruda</span>
                    </span>
                    <button @click="updatePreview" class="text-xs hover:text-indigo-600 transition flex items-center gap-1 px-2 py-1 rounded hover:bg-white">
                        <i class="fa-solid fa-rotate-right"></i>
                    </button>
                </div>
                <div class="flex-1 min-h-0 w-full relative">
                    <iframe id="preview-frame" class="absolute inset-0 w-full h-full"></iframe>
                </div>
            </div>

        </main>

        <!-- Bottom Nav -->
        <nav class="flex-shrink-0 bg-white border-t flex justify-between text-gray-500 text-xs pb-[env(safe-area-inset-bottom)] shadow-[0_-4px_10px_rgba(0,0,0,0.05)] z-20 px-2">
            <button @click="tab='chat'; showFileList=false"
                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                    :class="tab==='chat' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                <i class="fa-solid fa-message text-lg"></i> Chat
            </button>
            <button @click="tab='code'"
                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                    :class="tab==='code' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                <i class="fa-solid fa-code text-lg"></i> Code
                <!-- File count badge -->
                <span x-show="Object.keys(files).length > 1"
                      class="absolute mt-0 ml-5 bg-indigo-500 text-white text-[9px] rounded-full px-1.5 leading-4 font-bold"
                      x-text="Object.keys(files).length"></span>
            </button>
            <button @click="tab='preview'; showFileList=false"
                    class="flex-1 py-3 flex flex-col items-center gap-1.5 transition"
                    :class="tab==='preview' ? 'text-indigo-600 font-bold' : 'hover:text-indigo-400'">
                <i class="fa-solid fa-play text-lg"></i> Preview
            </button>
        </nav>

        <!-- Toast -->
        <div x-show="toastMsg" x-transition.duration.300ms
             class="absolute top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-full text-sm shadow-xl z-50 whitespace-nowrap pointer-events-none">
            <i class="fa-solid fa-circle-check text-green-400 mr-1"></i>
            <span x-text="toastMsg"></span>
        </div>

    </div>

    <script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('aiEditor', () => ({
            tab: 'chat',
            showMenu: false,
            files: {
                'index.html': `<!DOCTYPE html>\n<html>\n<head>\n  <title>Halo Dunia</title>\n</head>\n<body>\n  <h1>Halo Dunia!</h1>\n  <button onclick="showAlert()">Klik Saya</button>\n  <script>\n    function showAlert() {\n      alert('Halo!');\n    }\n  <\/script>\n</body>\n</html>`
            },
            activeFile: 'index.html',
            showFileList: false,
            showNewFileInput: false,
            newFileName: '',
            chatHistory: [{ role: 'ai', content: 'Halo! Saya AI Editor. Minta saya membuat atau mengubah file apa saja di project ini!' }],
            userInput: '',
            isProcessing: false,
            loopCount: 0,
            toastMsg: '',
            _pollTimer: null,
            _blobUrls: [],

            init() {
                this.$watch('tab', val => {
                    if (val === 'preview') this.updatePreview();
                    if (val !== 'code') this.showFileList = false;
                });
            },

            /* ─── File Management ─── */

            selectFile(fname) {
                this.activeFile = fname;
                this.showFileList = false;
            },

            addFile() {
                const name = this.newFileName.trim();
                if (!name) return;
                // Avoid overwriting existing file without confirmation
                if (!this.files[name]) {
                    this.files[name] = '';
                }
                this.activeFile = name;
                this.newFileName = '';
                this.showNewFileInput = false;
                this.showFileList = false;
                this.showToast(`File '${name}' dibuat!`);
            },

            deleteFile(fname) {
                if (Object.keys(this.files).length <= 1) return;
                const newFiles = Object.assign({}, this.files);
                delete newFiles[fname];
                this.files = newFiles;
                if (this.activeFile === fname) {
                    this.activeFile = Object.keys(newFiles)[0];
                }
                this.showToast(`File '${fname}' dihapus.`);
            },

            /* ─── UI Helpers ─── */

            showToast(msg) {
                this.toastMsg = msg;
                setTimeout(() => this.toastMsg = '', 3000);
            },

            scrollToBottom() {
                setTimeout(() => {
                    const c = document.getElementById('chat-container');
                    if (c) c.scrollTop = c.scrollHeight;
                }, 100);
            },

            /* ─── File I/O ─── */

            uploadFile(event) {
                const file = event.target.files[0];
                if (!file) return;
                const reader = new FileReader();
                reader.onload = e => {
                    this.files[file.name] = e.target.result;
                    this.activeFile = file.name;
                    this.showToast(`'${file.name}' berhasil diunggah!`);
                    this.tab = 'code';
                };
                reader.readAsText(file);
                event.target.value = '';
            },

            copyCode() {
                navigator.clipboard.writeText(this.files[this.activeFile] || '');
                this.showToast('Kode berhasil disalin!');
            },

            downloadCode() {
                try {
                    const content = this.files[this.activeFile] || '';
                    const blob = new Blob([content], { type: 'text/plain' });
                    const url  = URL.createObjectURL(blob);
                    const a    = document.createElement('a');
                    a.href = url;
                    a.download = this.activeFile;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    this.showToast(`'${this.activeFile}' berhasil diunduh!`);
                } catch {
                    this.showToast('Gagal mengunduh file.');
                }
            },

            async downloadZip() {
                try {
                    const JSZip = (await import('https://cdn.jsdelivr.net/npm/jszip@3.10.1/+esm')).default;
                    const zip = new JSZip();
                    for (const [fname, content] of Object.entries(this.files)) {
                        zip.file(fname, content);
                    }
                    const blob = await zip.generateAsync({ type: 'blob' });
                    const url  = URL.createObjectURL(blob);
                    const a    = document.createElement('a');
                    a.href = url;
                    a.download = 'project.zip';
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    this.showToast(`ZIP berhasil diunduh (${Object.keys(this.files).length} file)!`);
                } catch (e) {
                    this.showToast('Gagal membuat ZIP.');
                }
            },

            /* ─── Preview (Eruda + Blob URLs for CSS/JS) ─── */

            updatePreview() {
                const iframe = document.getElementById('preview-frame');
                if (!iframe) return;

                // Revoke blob URLs dari render sebelumnya
                this._blobUrls.forEach(u => URL.revokeObjectURL(u));
                this._blobUrls = [];

                // Render index.html first, fallback to first file
                let html = this.files['index.html'] || Object.values(this.files)[0] || '';

                // Buat blob URL untuk setiap file .css dan .js, lalu ganti referensinya di HTML
                for (const [fname, content] of Object.entries(this.files)) {
                    if (fname === 'index.html') continue;
                    let mimeType = null;
                    if (fname.endsWith('.css')) mimeType = 'text/css';
                    else if (fname.endsWith('.js')) mimeType = 'application/javascript';
                    if (!mimeType) continue;

                    const blob = new Blob([content], { type: mimeType });
                    const blobUrl = URL.createObjectURL(blob);
                    this._blobUrls.push(blobUrl);

                    // Escape nama file untuk regex (titik, dll)
                    const escaped = fname.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                    // Ganti href="fname" / href='fname' dan src="fname" / src='fname'
                    html = html.replace(
                        new RegExp(`((?:href|src)=["'])${escaped}(["'])`, 'g'),
                        `$1${blobUrl}$2`
                    );
                }

                // Inject Eruda debugger
                const erudaSnippet = [
                    '<script src="https://cdn.jsdelivr.net/npm/eruda"><\/script>',
                    '<script>eruda.init();<\/script>'
                ].join('');

                html = html.includes('</body>')
                    ? html.replace('</body>', erudaSnippet + '</body>')
                    : html + erudaSnippet;

                iframe.srcdoc = html;
            },

            /* ─── Chat / AI ─── */

            async sendPrompt() {
                if (!this.userInput.trim() || this.isProcessing) return;
                const prompt = this.userInput;
                this.userInput = '';
                this.chatHistory.push({ role: 'user', content: prompt });
                this.scrollToBottom();
                this._submitToServer(prompt);
            },

            async _submitToServer(instruction) {
                this.isProcessing = true;
                this.loopCount    = 0;
                try {
                    const res  = await fetch('/api/chat', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        // Context: only all files + latest user instruction
                        body: JSON.stringify({ instruction, files: this.files }),
                    });
                    const data = await res.json();
                    if (!res.ok) throw new Error(data.error || 'Server error');
                    this._pollJob(data.job_id);
                } catch (err) {
                    this.isProcessing = false;
                    this.chatHistory.push({ role: 'ai', content: '❌ ' + err.message });
                    this.scrollToBottom();
                }
            },

            _pollJob(jobId, interval = 1500) {
                clearTimeout(this._pollTimer);
                this._pollTimer = setTimeout(async () => {
                    try {
                        const res  = await fetch(`/api/job/${jobId}`);
                        const data = await res.json();

                        this.loopCount = data.loop_count || 0;

                        if (data.status === 'running' || data.status === 'pending') {
                            this.isProcessing = true;
                            this._pollJob(jobId, interval);
                            return;
                        }

                        if (data.status === 'done') {
                            this.files = data.result.files;
                            // Ensure activeFile still exists after AI response
                            if (!this.files[this.activeFile]) {
                                this.activeFile = Object.keys(this.files)[0] || 'index.html';
                            }
                            this.chatHistory.push({
                                role:    'ai',
                                content: data.result.message,
                                action:  data.result.action_label,
                                reasons: data.result.reasons || [],
                            });
                        } else {
                            this.chatHistory.push({
                                role:    'ai',
                                content: '❌ ' + (data.error || 'Terjadi kesalahan pada server.'),
                            });
                        }
                    } catch {
                        this.chatHistory.push({ role: 'ai', content: '❌ Gagal membaca status job dari server.' });
                    } finally {
                        this.isProcessing = false;
                        this.scrollToBottom();
                    }
                }, interval);
            },

        }));
    });
    </script>
</body>
</html>"""


@app.route("/")
def index():
    return Response(HTML, mimetype="text/html")


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=7860)