╔══════════════════════════════════════════════════╗
║                CODE REPOSITORY ARCHIVE           ║
╠══════════════════════════════════════════════════╣
║ Repository: Mail-pro                             ║
║ Generated: 10/29/2026, 2:01:04 PM                ║
║ Files: 3                                        ║
║ Description: Temp mail                           ║
╚══════════════════════════════════════════════════╝

FILE SUMMARY
────────────────────────────────────────────────────
Total files: 3
Total size: 127700 characters
Folder structure: Mail-pro/

Languages:
  - javascript: 2 files
  - Update temp mail bagian randome name: 1 files

FILE CONTENTS
════════════════════════════════════════════════════

┌── FILE 01: Mail-pro/Mail_pro.js
│   Size: 42434 characters
│   Language: javascript
│   Created: 10/8/2026
└────────────────────────────────────────────────────

// Temp Mail Worker - FINAL FULL API DOCS + Aesthetic 100/10 + MAIL_DB Fix + Login Fix + Human Random Name (No Numbers)

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const method = request.method;
        const path = url.pathname;

        const checkDB = () => {
            if (!env.MAIL_DB) {
                return json({ error: "MAIL_DB not bound. Cek wrangler.toml [[d1_databases]] binding = MAIL_DB" }, 500);
            }
            return null;
        };

        try {
            if (path === "/" && method === "GET") {
                return new Response(renderPage(), {
                    headers: { "Content-Type": "text/html; charset=UTF-8" }
                });
            }

            if (path === "/events" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = url.searchParams.get("token") || "";
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);

                const stream = new ReadableStream({
                    async start(controller) {
                        const encoder = new TextEncoder();
                        let lastCount = 0;
                        const sendEvent = async () => {
                            try {
                                const { results } = await env.MAIL_DB.prepare(
                                    "SELECT COUNT(*) as count FROM messages WHERE account_id = ? AND is_deleted = 0"
                                ).bind(account.id).all();
                                const currentCount = results[0]?.count || 0;
                                if (currentCount !== lastCount) {
                                    lastCount = currentCount;
                                    controller.enqueue(encoder.encode(`data: ${JSON.stringify({ count: currentCount })}\n\n`));
                                }
                            } catch (e) {}
                        };
                        await sendEvent();
                        setInterval(sendEvent, 3000);
                    }
                });

                return new Response(stream, {
                    headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", "Connection": "keep-alive" }
                });
            }

            if (path === "/domains" && method === "GET") {
                if (!env.MAIL_DB) {
                    return json({ "hydra:member": [{ domain: "badut.biz.id", id: "default-1", isActive: true, isPrivate: false, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }] });
                }
                let results = [];
                try {
                    const res = await env.MAIL_DB.prepare("SELECT * FROM domains WHERE is_active = 1").all();
                    results = res.results || [];
                } catch (e) {}
                if (results.length === 0) results = [{ id: "default-1", domain: "badut.biz.id", created_at: new Date().toISOString() }];
                return json({ "hydra:member": results.map(r => ({ domain: r.domain, id: r.id, isActive: true, isPrivate: false, createdAt: r.created_at || new Date().toISOString(), updatedAt: r.created_at || new Date().toISOString() })) });
            }

            if (path === "/accounts" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                if (!address) return json({ error: "Address required" }, 400);
                const accountId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
                const now = new Date().toISOString();
                const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
                try {
                    await env.MAIL_DB.prepare("INSERT INTO accounts (id, address, password, created_at, updated_at, expires_at) VALUES (?, ?, ?, ?, ?, ?)")
                        .bind(accountId, address, password, now, now, expires).run();
                    return json({ id: accountId, address, quota: 40000000, used: 0, createdAt: now, expiresAt: expires }, 201);
                } catch (e) {
                    return json({ error: "Address already exists: " + e.message }, 409);
                }
            }

            if (path === "/token" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address = ?").bind(address).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const account = results[0];
                    if (account.password !== password) return json({ error: "Invalid password" }, 401);
                    const token = btoa(JSON.stringify({ accountId: account.id, address: account.address, createdAt: Date.now() }));
                    return json({ token, id: account.id });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (path === "/messages" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE account_id = ? AND is_deleted = 0 ORDER BY created_at DESC LIMIT 20").bind(account.id).all();
                    return json({
                        "hydra:member": results.map(m => {
                            const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                            return {
                                id: m.id, accountId: m.account_id,
                                from: { address: m.from_address, name: m.from_name },
                                to: [{ address: m.to_address, name: "" }],
                                subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                                seen: m.seen === 1, isDeleted: false,
                                hasAttachments: m.has_attachments === 1, size: m.size,
                                createdAt: m.created_at, updatedAt: m.updated_at,
                                otpCode: parsed.otpCode
                            };
                        }),
                        "hydra:totalItems": results.length
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message, "hydra:member": [] }, 500);
                }
            }

            const msgMatch = path.match(/^\/messages\/([a-zA-Z0-9]+)$/);
            if (msgMatch && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE id = ? AND account_id = ?").bind(msgId, account.id).all();
                    if (results.length === 0) return json({ error: "Message not found" }, 404);
                    const m = results[0];
                    await env.MAIL_DB.prepare("UPDATE messages SET seen = 1, updated_at = ? WHERE id = ?").bind(new Date().toISOString(), msgId).run();
                    const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                    return json({
                        id: m.id, accountId: m.account_id,
                        from: { address: m.from_address, name: m.from_name },
                        to: [{ address: m.to_address, name: "" }],
                        subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                        text: parsed.cleanText,
                        html: parsed.decodedHtml || m.html_content || "",
                        rawText: m.text_content || "",
                        rawHtml: m.html_content || "",
                        seen: true, isDeleted: false,
                        hasAttachments: m.has_attachments === 1, size: m.size,
                        createdAt: m.created_at, updatedAt: m.updated_at,
                        otpCode: parsed.otpCode, verificationLinks: parsed.links
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (msgMatch && method === "DELETE") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    await env.MAIL_DB.prepare("UPDATE messages SET is_deleted = 1 WHERE id = ? AND account_id = ?").bind(msgId, account.id).run();
                    return json({ success: true });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            if (path === "/receive" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, body);
                if (!result.success) return json({ error: result.error }, result.status);
                return json(result.message, 201);
            }

            if (path === "/webhook" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, { to: body.to, from: body.from, fromName: body.from_name || body.fromName, subject: body.subject, text: body.text, html: body.html, webhookUrl: body.webhook_url });
                if (!result.success) return json({ error: result.error }, result.status);
                return json({ success: true });
            }

            if (path === "/me" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE id = ?").bind(account.id).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const a = results[0];
                    return json({ id: a.id, address: a.address, quota: a.quota, used: a.used, createdAt: a.created_at, expiresAt: a.expires_at });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            return json({ error: "Not found: " + path }, 404);
        } catch (err) {
            console.error("GLOBAL_WORKER_ERROR", err);
            return json({ error: "Worker exception: " + err.message }, 500);
        }
    },

    async scheduled(event, env, ctx) {
        if (!env.MAIL_DB) return;
        const now = new Date().toISOString();
        ctx.waitUntil(Promise.all([
            env.MAIL_DB.prepare("DELETE FROM messages WHERE expires_at < ? OR is_deleted = 1").bind(now).run(),
            env.MAIL_DB.prepare("DELETE FROM accounts WHERE expires_at < ?").bind(now).run()
        ]));
    },

    async email(message, env, ctx) {
        if (!env.MAIL_DB) return;
        try {
            const from = message.from;
            const to = message.to;
            const subject = message.headers.get("subject") || "";
            const rawEmail = await new Response(message.raw).text();
            const parsed = parseRawEmail(rawEmail);
            await saveEmail(env, ctx, { to, from, fromName: "", subject, text: parsed.text, html: parsed.html });
        } catch (e) {}
    }
};

function json(data, status = 200) {
    return new Response(JSON.stringify(data), { status, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type, Authorization" } });
}
function verifyToken(token) {
    try { const d = JSON.parse(atob(token)); return { id: d.accountId, address: d.address }; } catch (e) { return null; }
}
function decodeQuotedPrintable(str) {
    if (!str) return "";
    return str.replace(/=\r?\n/g, '').replace(/=([0-9A-Fa-f]{2})/g, (m, h) => String.fromCharCode(parseInt(h, 16)));
}
function parseRawEmail(raw) {
    let text = ""; let html = "";
    const tm = raw.match(/Content-Type: text\/plain[\s\S]*?(?=--[a-zA-Z0-9]+|Content-Type: text\/html|$)/i);
    if (tm) { text = tm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); text = decodeQuotedPrintable(text); }
    const hm = raw.match(/Content-Type: text\/html[\s\S]*?(?=--[a-zA-Z0-9]+|$)/i);
    if (hm) { html = hm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); html = decodeQuotedPrintable(html); }
    if (!text && !html) { const p = raw.split(/\r?\n\r?\n/); text = decodeQuotedPrintable(p.slice(1).join('\n\n').trim()); }
    return { text, html };
}
function parseEmailContent(text, html) {
    let cleanText = decodeQuotedPrintable(text || "");
    let decodedHtml = decodeQuotedPrintable(html || "");
    let searchContent = cleanText;
    if (!searchContent && decodedHtml) searchContent = decodedHtml.replace(/<[^>]+>/g, ' ');
    searchContent = searchContent.replace(/--[a-zA-Z0-9]+/g, '').replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').trim();
    let otpCode = null;
    const patterns = [/(?:OTP|One.?Time.?Password|verifikas?i|verification|verify|code|kode|pin|token)[:\s-]*([0-9]{4,8})/i, /(?:kode|code|otp|pin)\s*(?:is|adalah)?[:\s-]*([A-Z0-9]{4,8})/i, /\b([0-9]{4,8})\b/];
    for (const pat of patterns) {
        const m = searchContent.match(pat);
        if (m && m[1]) { const c = m[1]; if (!/^(19|20)\d{2}$/.test(c)) { otpCode = c; break; } }
    }
    const links = []; const re = /https?:\/\/[^\s"'<>]+/g; let lm;
    while ((lm = re.exec(searchContent)) !== null) {
        const u = lm[0].replace(/[.,;:]+$/, '');
        if (u.length > 20 && u.length < 1000 && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) links.push(u);
    }
    if (decodedHtml) {
        const hls = decodedHtml.match(/href=["']([^"']+)["']/gi) || [];
        for (const hl of hls) {
            const u = hl.replace(/href=["']/gi, '').replace(/["']$/g, '');
            if (u.startsWith('http') && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) if (!links.includes(u)) links.push(u);
        }
    }
    return { cleanText, decodedHtml, otpCode, links };
}
async function saveEmail(env, ctx, emailData) {
    const toAddress = emailData.to;
    const fromAddress = emailData.from || "unknown@badut.biz.id";
    const fromName = emailData.fromName || "";
    const subject = emailData.subject || "";
    const text = emailData.text || "";
    const html = emailData.html || "";
    if (!toAddress) return { success: false, error: "To address required", status: 400 };
    try {
        const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address = ?").bind(toAddress).all();
        if (results.length === 0) return { success: false, error: "Account not found", status: 404 };
        const account = results[0];
        const msgId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
        const now = new Date().toISOString();
        const expires = new Date(Date.now() + 60 * 60 * 1000).toISOString();
        const parsed = parseEmailContent(text, html);
        await env.MAIL_DB.prepare(`INSERT INTO messages (id, account_id, from_address, from_name, to_address, subject, text_content, html_content, intro, size, created_at, updated_at, expires_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`)
            .bind(msgId, account.id, fromAddress, fromName, toAddress, subject, text, html, parsed.cleanText.substring(0, 100), text.length + html.length, now, now, expires).run();
        if (emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL) {
            const wh = emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL;
            ctx.waitUntil(fetch(wh, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: msgId, to: toAddress, from: fromAddress, subject, otpCode: parsed.otpCode, links: parsed.links }) }).catch(() => {}));
        }
        return { success: true, message: { id: msgId, accountId: account.id, from: { address: fromAddress, name: fromName }, to: [{ address: toAddress, name: "" }], subject, intro: parsed.cleanText.substring(0, 100), text, html, seen: false, isDeleted: false, hasAttachments: false, size: text.length + html.length, createdAt: now, updatedAt: now, otpCode: parsed.otpCode, verificationLinks: parsed.links } };
    } catch (e) {
        return { success: false, error: "DB Error: " + e.message, status: 500 };
    }
}

function renderPage() {
    return `<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📧 Temp Mail Pro - badut.biz.id</title>
<style>
:root{--bg:#070a14;--card:#11142a;--card-2:#161a36;--border:#23284d;--text:#eef0ff;--muted:#8a8fb8;--primary:#ff4d6d;--primary-2:#ff2d55;--green:#00e676;--blue:#4c8aff}
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html,body{width:100%;overflow-x:hidden}
body{font-family:Inter,-apple-system,sans-serif;background:radial-gradient(1200px 600px at 10% -10%, #1a1e4a 0%, transparent 60%),radial-gradient(1000px 500px at 90% 0%, #2a124a 0%, transparent 60%),var(--bg);color:var(--text);min-height:100vh;line-height:1.5}
.navbar{position:fixed;top:0;left:0;right:0;height:64px;background:rgba(17,20,42,0.85);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 16px;z-index:100;border-bottom:1px solid var(--border)}
.menu-btn{background:var(--card-2);border:1px solid var(--border);color:#fff;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer}
.navbar-brand{margin-left:12px;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown{position:fixed;top:72px;left:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;display:none;z-index:200;min-width:220px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.dropdown.show{display:block}
.dropdown a{display:flex;gap:12px;padding:12px 14px;color:var(--text);text-decoration:none;border-radius:10px;font-weight:600;cursor:pointer}
.dropdown a.active{background:var(--primary);color:#fff}
.main{padding:84px 16px 40px;max-width:820px;margin:0 auto;width:100%}
.email-section,.messages-section{background:linear-gradient(180deg,var(--card) 0%,#0f1230 100%);border-radius:24px;padding:22px;border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.05);margin-bottom:20px;width:100%;overflow:hidden}
.email-title{font-size:20px;font-weight:700;margin-bottom:18px;text-align:center}
.email-box{display:flex;gap:10px;margin-bottom:14px;width:100%}
.email-input{flex:1 1 0%;min-width:0;padding:14px 16px;border:2px solid var(--border);border-radius:14px;background:#080a1a;color:#fff;font-size:15px;outline:none}
.email-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,77,109,0.15)}
.domain-select{flex:0 0 auto;max-width:42%;padding:14px 12px;background:var(--card-2);border-radius:14px;border:1px solid var(--border);color:var(--green);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none;border-radius:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(255,77,109,0.35)}
.current-email{text-align:left;margin-top:14px;padding:14px 16px;background:rgba(0,230,118,0.08);border:1px dashed rgba(0,230,118,0.4);border-radius:14px;color:var(--green);font-weight:700;display:none;cursor:pointer;word-break:break-all;overflow-wrap:anywhere;font-size:14px}
.messages-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.refresh-btn{padding:8px 14px;background:var(--card-2);color:var(--text);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:12px;font-weight:600}
.message{background:var(--card-2);border-radius:16px;padding:16px;margin-bottom:10px;cursor:pointer;border:1px solid var(--border);width:100%;overflow:hidden}
.message:hover{border-color:var(--primary)}
.message .from{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message .subject{color:var(--primary);font-weight:700;font-size:14px;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.message .preview{color:var(--muted);font-size:12.5px;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.otp-badge{display:inline-flex;background:var(--green);color:#000;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:800;margin-top:8px}
.empty,.loading{text-align:center;color:var(--muted);padding:40px 16px;font-size:14px}
.toast{position:fixed;bottom:24px;left:16px;right:16px;max-width:360px;margin:0 auto;background:#0f1f14;color:#fff;padding:14px 18px;border-radius:999px;font-weight:700;display:none;z-index:500;text-align:center;font-size:13px;word-break:break-word}
.api-section{display:none}.api-section.show{display:block}
.endpoint{background:var(--card);border-radius:16px;margin-bottom:16px;border:1px solid var(--border);overflow:hidden;width:100%}
.endpoint-header{padding:14px 16px;background:var(--card-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.method{padding:4px 10px;border-radius:999px;font-weight:800;font-size:11px}.method.get{background:#00c853;color:#fff}.method.post{background:var(--blue);color:#fff}.method.delete{background:#ff1744;color:#fff}
.path{font-weight:700;font-family:monospace;font-size:13px;word-break:break-all}
.endpoint-body{padding:16px}.endpoint-body p{color:var(--muted);margin-bottom:10px;font-size:13px}
.code-wrap{position:relative;width:100%;overflow:hidden}pre{background:#080a1a;padding:14px 44px 14px 14px;border-radius:12px;overflow-x:auto;font-size:12px;color:var(--green);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;border:1px solid var(--border);line-height:1.5}
.copy-btn{position:absolute;top:8px;right:8px;padding:6px 10px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:11px;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(3,5,14,0.78);backdrop-filter:blur(12px);display:none;z-index:400;justify-content:center;align-items:flex-start;padding:12px;overflow-y:auto}
.modal.show{display:flex}.modal-content{background:var(--card);border-radius:20px;width:100%;max-width:860px;margin:40px auto;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}
.modal-head h2{font-size:16px;word-break:break-word;flex:1;min-width:0}.modal-close{background:var(--card-2);border:1px solid var(--border);color:var(--muted);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}.tab-row{display:flex;gap:6px;margin:14px 0;overflow-x:auto;padding-bottom:4px}.tab-btn{padding:8px 14px;background:var(--card-2);color:var(--muted);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap;flex:0 0 auto}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.verification-link{background:var(--card-2);padding:12px;border-radius:12px;margin:10px 0;word-break:break-all;font-size:12px;color:var(--blue);display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);overflow:hidden}.verification-link a{color:var(--blue);word-break:break-all}.link-copy-btn{align-self:flex-start;padding:6px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:11px}
iframe.gmail-frame{width:100%;min-height:420px;height:60vh;max-height:640px;border:1px solid var(--border);background:#fff;border-radius:12px;margin-top:12px;display:block}
@media(max-width:640px){.main{padding:76px 12px 28px}.email-section,.messages-section{padding:16px;border-radius:20px}.email-box{flex-direction:column}.domain-select{max-width:100%;width:100%}.modal{padding:8px}.modal-content{margin:12px auto;max-height:94vh}iframe.gmail-frame{min-height:380px;height:55vh}}
</style>
</head>
<body>
<div class="navbar"><button class="menu-btn" onclick="toggleMenu()">☰</button><span class="navbar-brand">📧 Temp Mail Pro</span></div>
<div class="dropdown" id="dropdown"><a onclick="showDashboard()" class="active" id="menuDashboard">📥 Dashboard</a><a onclick="showApi()" id="menuApi">🔧 API Docs</a></div>
<div class="main">
<div id="dashboardSection">
<div class="email-section"><div class="email-title">Buat Email Sementara</div><div class="email-box"><input type="text" class="email-input" id="emailInput" placeholder="ketik nama email..."><select id="domainSelect" class="domain-select"><option value="@badut.biz.id">@badut.biz.id</option></select></div><button class="btn" id="createBtn" onclick="createEmail()">Buat Email</button><div class="current-email" id="currentEmail" onclick="copyCurrentEmail()"></div></div>
<div class="messages-section"><div class="messages-title"><span>📥 Email Masuk</span><button class="refresh-btn" onclick="loadMessages()">🔄 Refresh</button></div><div id="messages"><div class="empty">👆 Buat email dulu untuk mulai<br><span style="font-size:12px;opacity:0.7">Email akan muncul otomatis</span></div></div></div>
</div>
<div class="api-section" id="apiSection">
<h1 style="text-align:center;margin-bottom:24px;font-size:22px">🔧 Temp Mail API - Full Docs</h1>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/domains</span></div><div class="endpoint-body"><p>List semua domain aktif. Dipakai untuk dropdown di dashboard.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/domains"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:12px;color:#8a8fb8;font-size:12px">Response: hydra:member array {domain, id, isActive}</p></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/accounts</span></div><div class="endpoint-body"><p>Buat akun / email baru. Harus unik, kalau sudah ada return 409.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/accounts" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/token</span></div><div class="endpoint-body"><p>Login & dapatkan Bearer token. Token dipakai untuk akses /messages.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/token" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages</span></div><div class="endpoint-body"><p>List 20 email masuk terbaru. Butuh header Authorization.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:10px;font-size:12px;color:#8a8fb8">Field penting: otpCode (auto deteksi), intro, seen</p></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Baca 1 email lengkap + HTML + OTP + verificationLinks. Auto mark seen=1.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method delete">DELETE</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Hapus email (soft delete, is_deleted=1).</p><div class="code-wrap"><pre class="curl-code">curl -X DELETE "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/me</span></div><div class="endpoint-body"><p>Cek info akun sendiri, quota & expiry.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/me" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/receive</span></div><div class="endpoint-body"><p>Endpoint untuk forward email masuk dari Email Routing / webhook. Format: {"to","from","subject","text","html"}</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/receive" \\
  -H "Content-Type: application/json" \\
  -d '{"to":"test@badut.biz.id","from":"noreply@google.com","subject":"OTP","text":"Your code is 123456"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/events</span></div><div class="endpoint-body"><p>Server-Sent Events (SSE) untuk notifikasi realtime. Dipakai dashboard untuk auto-refresh.</p><div class="code-wrap"><pre>GET /events?token=xxx  (EventStream)</pre></div></div></div>

</div>
</div>

<div class="modal" id="emailModal" onclick="closeModal()"><div class="modal-content" onclick="event.stopPropagation()"><div class="modal-head"><div style="min-width:0;flex:1"><h2 id="modalSubject"></h2><p id="modalFrom" style="color:#8a8fb8;font-size:12px;margin-top:4px;word-break:break-all"></p></div><button class="modal-close" onclick="closeModal()">✕</button></div><div class="modal-body"><div class="tab-row" id="modalTabs"></div><div id="tabRendered"></div><div id="tabOtp" style="display:none"></div><div id="tabRaw" style="display:none"></div><div id="tabSource" style="display:none"></div></div></div></div>
<div class="toast" id="toast"></div>

<script>
let currentToken='',currentEmailAddress='',eventSource=null;
window.addEventListener('DOMContentLoaded',()=>{updateApiDocsHost();loadDomains();});
function updateApiDocsHost(){const host=window.location.origin;document.querySelectorAll('.curl-code').forEach(el=>{el.textContent=el.textContent.replace(/{HOST}/g,host)});}
async function loadDomains(){try{const res=await fetch('/domains');if(!res.ok)throw new Error('HTTP '+res.status);const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();console.error('domains not JSON',t.slice(0,200));return;}const data=await res.json();const domains=data['hydra:member']||[];if(domains.length>0){document.getElementById('domainSelect').innerHTML=domains.map(d=>'<option value="@'+d.domain+'">@'+d.domain+'</option>').join('');}}catch(e){console.error(e);}}
function toggleMenu(){document.getElementById('dropdown').classList.toggle('show');}
function showDashboard(){document.getElementById('dashboardSection').style.display='block';document.getElementById('apiSection').classList.remove('show');document.getElementById('menuDashboard').classList.add('active');document.getElementById('menuApi').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showApi(){document.getElementById('dashboardSection').style.display='none';document.getElementById('apiSection').classList.add('show');document.getElementById('menuApi').classList.add('active');document.getElementById('menuDashboard').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.style.display='block';setTimeout(()=>t.style.display='none',3000);}
function randomName(){const n=['agus','budi','siti','ayu','dimas','putri','joko','ratna','doni','sari','ari','eka','dwi','tri','indah','bagus','dian','novi','hendra','maya','reza','dina'];return n[Math.floor(Math.random()*n.length)];}
function copyTextToClipboard(text,msg){if(!text)return;navigator.clipboard.writeText(text).then(()=>showToast(msg||'📋 Disalin!')).catch(()=>showToast('❌ Gagal menyalin'));}
function copyCurrentEmail(){if(currentEmailAddress)copyTextToClipboard(currentEmailAddress,'📋 Email disalin!');}
async function createEmail(){
 const input=document.getElementById('emailInput');const domain=document.getElementById('domainSelect').value||'@badut.biz.id';const name=input.value.trim()||randomName();const email=name+domain;
 const btn=document.getElementById('createBtn');btn.disabled=true;btn.textContent='Membuat...';
 try{
  const r1=await fetch('/accounts',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct1=r1.headers.get('content-type')||'';if(!ct1.includes('json')){const t=await r1.text();throw new Error('accounts returned HTML: '+t.slice(0,100));}
  const j1=await r1.json();if(!r1.ok && r1.status !== 409)throw new Error(j1.error||'Gagal buat akun');
  const r2=await fetch('/token',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct2=r2.headers.get('content-type')||'';if(!ct2.includes('json')){const t=await r2.text();throw new Error('token returned HTML: '+t.slice(0,100));}
  const tokenData=await r2.json();
  currentToken=tokenData.token;currentEmailAddress=email;input.value=name;
  document.getElementById('currentEmail').innerHTML='📧 '+email+' <span style="opacity:.7">(Klik salin)</span>';document.getElementById('currentEmail').style.display='block';
  copyTextToClipboard(email,'✅ Email aktif & disalin!');loadMessages();setupSSE();
 }catch(e){showToast('❌ '+e.message);console.error(e);}btn.disabled=false;btn.textContent='Buat Email';
}
function setupSSE(){if(eventSource)eventSource.close();if(!currentToken)return;eventSource=new EventSource('/events?token='+encodeURIComponent(currentToken));eventSource.onmessage=function(ev){try{const d=JSON.parse(ev.data);if(d.count!==undefined){loadMessages();showToast('📩 Email baru!');}}catch{}};eventSource.onerror=function(){setTimeout(setupSSE,5000);};}
async function loadMessages(){
 if(!currentToken)return;const c=document.getElementById('messages');c.innerHTML='<div class="loading">⏳ Memuat...</div>';
 try{
  const res=await fetch('/messages',{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('messages HTML: '+t.slice(0,120));}
  const data=await res.json();const msgs=data['hydra:member']||[];if(msgs.length===0){c.innerHTML='<div class="empty">📭 Belum ada email</div>';return;}
  c.innerHTML=msgs.map(m=>{const time=new Date(m.createdAt).toLocaleString('id-ID');let otp=m.otpCode?'<div class="otp-badge">🔑 OTP: '+m.otpCode+'</div>':'';return '<div class="message" onclick="openMessage(\\'/'+m.id+'\\')"><div class="from">👤 '+(m.from.name||m.from.address)+'</div><div class="subject">📌 '+(m.subject||'(Tanpa Subjek)')+'</div><div class="preview">'+(m.intro||'').substring(0,100)+'...</div>'+otp+'<div class="time">🕐 '+time+'</div></div>';}).join('');
 }catch(e){c.innerHTML='<div class="empty">❌ Gagal: '+e.message+'</div>';}
}
async function openMessage(msgId){
 if(!currentToken)return;
 try{
  const res=await fetch('/messages'+msgId,{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('message HTML: '+t.slice(0,120));}
  const msg=await res.json();
  document.getElementById('modalSubject').textContent='📧 '+(msg.subject||'(Tanpa Subjek)');document.getElementById('modalFrom').textContent='Dari: '+(msg.from.name||msg.from.address);
  document.getElementById('modalTabs').innerHTML='<button class="tab-btn active" onclick="showTab(event,\\'rendered\\')">📄 Gmail HTML</button><button class="tab-btn" onclick="showTab(event,\\'otp\\')">🔑 OTP</button><button class="tab-btn" onclick="showTab(event,\\'raw\\')">📝 Text</button><button class="tab-btn" onclick="showTab(event,\\'source\\')">🔍 Source</button>';
  const rc=document.getElementById('tabRendered');
  if(msg.html){const ifr=document.createElement('iframe');ifr.className='gmail-frame';rc.innerHTML='';rc.appendChild(ifr);const d=ifr.contentWindow.document;d.open();d.write('<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width,initial-scale=1><style>body{font-family:sans-serif;padding:16px;color:#222;background:#fff;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}img{max-width:100%;height:auto}table{max-width:100%;overflow-x:auto;display:block}a{word-break:break-all}</style></head><body>'+msg.html+'</body></html>');d.close();}
  else{rc.innerHTML='<div style="background:#fff;color:#222;padding:16px;border-radius:12px;white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.text||'')+'</div>';}
  const oc=document.getElementById('tabOtp');let oh='';if(msg.otpCode){oh='<div style="text-align:center;padding:20px;background:rgba(0,230,118,0.1);border-radius:16px;border:1px dashed rgba(0,230,118,0.3)"><p style="color:#8a8fb8;font-size:13px">Kode OTP:</p><div style="font-size:34px;font-weight:800;color:#00e676;letter-spacing:6px;word-break:break-all">'+msg.otpCode+'</div><button class="btn" style="max-width:220px;margin-top:16px" onclick="copyTextToClipboard(\\''+msg.otpCode+'\\',\\'✅ OTP disalin!\\')">Copy OTP</button></div>';}else{oh='<p style="text-align:center;padding:28px;color:#8a8fb8">Tidak ada OTP</p>';}
  if(msg.verificationLinks&&msg.verificationLinks.length>0){oh+='<p style="margin:18px 0 8px;color:#8a8fb8;font-size:12px">🔗 Verification Links:</p>'+msg.verificationLinks.map(l=>'<div class="verification-link"><a href="'+l+'" target="_blank">'+l+'</a><button class="link-copy-btn" onclick="copyTextToClipboard(\\''+l+'\\',\\'✅ Link disalin!\\')">Copy</button></div>').join('');}
  oc.innerHTML=oh;
  document.getElementById('tabRaw').innerHTML='<pre style="white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.rawText||msg.text||'')+'</pre>';
  document.getElementById('tabSource').innerHTML='<div style="position:relative"><pre style="white-space:pre-wrap;word-break:break-all;max-height:460px;overflow:auto">'+escapeHtml(msg.rawHtml||msg.html||'')+'</pre><button class="copy-btn" onclick="copyTextToClipboard(this.parentElement.querySelector(\\'pre\\').textContent,\\'✅ Source disalin!\\')">Copy</button></div>';
  showTab(null,'rendered');document.getElementById('emailModal').classList.add('show');loadMessages();
 }catch(e){showToast('❌ '+e.message);}
}
function showTab(ev,name){document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));if(ev&&ev.target)ev.target.classList.add('active');else{const m={rendered:0,otp:1,raw:2,source:3}[name];const btn=document.querySelectorAll('.tab-btn')[m];if(btn)btn.classList.add('active');}document.getElementById('tabRendered').style.display=name==='rendered'?'block':'none';document.getElementById('tabOtp').style.display=name==='otp'?'block':'none';document.getElementById('tabRaw').style.display=name==='raw'?'block':'none';document.getElementById('tabSource').style.display=name==='source'?'block':'none';}
function escapeHtml(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function closeModal(){document.getElementById('emailModal').classList.remove('show');}
function copyCmd(btn){copyTextToClipboard(btn.parentElement.querySelector('pre').textContent,'✅ Command disalin!');}
document.addEventListener('click',(e)=>{const dd=document.getElementById('dropdown');const mb=document.querySelector('.menu-btn');if(!dd.contains(e.target)&&!mb.contains(e.target))dd.classList.remove('show');});
</script>
</body>
</html>


────────────────────────────────────────────────────────────

┌── FILE 02: Mail-pro/Mail_pro.v2.js
│   Size: 42950 characters
│   Language: Update temp mail bagian randome name
│   Created: 10/8/2026
└────────────────────────────────────────────────────

// Temp Mail Worker - FINAL FULL API DOCS + Aesthetic 100/10 + MAIL_DB Fix + Login Fix + Human Random Name Auto No Dot No Number

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const method = request.method;
        const path = url.pathname;

        const checkDB = () => {
            if (!env.MAIL_DB) {
                return json({ error: "MAIL_DB not bound. Cek wrangler.toml [[d1_databases]] binding = MAIL_DB" }, 500);
            }
            return null;
        };

        try {
            if (path === "/" && method === "GET") {
                return new Response(renderPage(), {
                    headers: { "Content-Type": "text/html; charset=UTF-8" }
                });
            }

            if (path === "/events" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = url.searchParams.get("token") || "";
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);

                const stream = new ReadableStream({
                    async start(controller) {
                        const encoder = new TextEncoder();
                        let lastCount = 0;
                        const sendEvent = async () => {
                            try {
                                const { results } = await env.MAIL_DB.prepare(
                                    "SELECT COUNT(*) as count FROM messages WHERE account_id =? AND is_deleted = 0"
                                ).bind(account.id).all();
                                const currentCount = results[0]?.count || 0;
                                if (currentCount!== lastCount) {
                                    lastCount = currentCount;
                                    controller.enqueue(encoder.encode(`data: ${JSON.stringify({ count: currentCount })}\n\n`));
                                }
                            } catch (e) {}
                        };
                        await sendEvent();
                        setInterval(sendEvent, 3000);
                    }
                });

                return new Response(stream, {
                    headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", "Connection": "keep-alive" }
                });
            }

            if (path === "/domains" && method === "GET") {
                if (!env.MAIL_DB) {
                    return json({ "hydra:member": [{ domain: "badut.biz.id", id: "default-1", isActive: true, isPrivate: false, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }] });
                }
                let results = [];
                try {
                    const res = await env.MAIL_DB.prepare("SELECT * FROM domains WHERE is_active = 1").all();
                    results = res.results || [];
                } catch (e) {}
                if (results.length === 0) results = [{ id: "default-1", domain: "badut.biz.id", created_at: new Date().toISOString() }];
                return json({ "hydra:member": results.map(r => ({ domain: r.domain, id: r.id, isActive: true, isPrivate: false, createdAt: r.created_at || new Date().toISOString(), updatedAt: r.created_at || new Date().toISOString() })) });
            }

            if (path === "/accounts" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                if (!address) return json({ error: "Address required" }, 400);
                const accountId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
                const now = new Date().toISOString();
                const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
                try {
                    await env.MAIL_DB.prepare("INSERT INTO accounts (id, address, password, created_at, updated_at, expires_at) VALUES (?,?,?,?,?,?)")
                       .bind(accountId, address, password, now, now, expires).run();
                    return json({ id: accountId, address, quota: 40000000, used: 0, createdAt: now, expiresAt: expires }, 201);
                } catch (e) {
                    return json({ error: "Address already exists: " + e.message }, 409);
                }
            }

            if (path === "/token" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address =?").bind(address).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const account = results[0];
                    if (account.password!== password) return json({ error: "Invalid password" }, 401);
                    const token = btoa(JSON.stringify({ accountId: account.id, address: account.address, createdAt: Date.now() }));
                    return json({ token, id: account.id });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (path === "/messages" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE account_id =? AND is_deleted = 0 ORDER BY created_at DESC LIMIT 20").bind(account.id).all();
                    return json({
                        "hydra:member": results.map(m => {
                            const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                            return {
                                id: m.id, accountId: m.account_id,
                                from: { address: m.from_address, name: m.from_name },
                                to: [{ address: m.to_address, name: "" }],
                                subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                                seen: m.seen === 1, isDeleted: false,
                                hasAttachments: m.has_attachments === 1, size: m.size,
                                createdAt: m.created_at, updatedAt: m.updated_at,
                                otpCode: parsed.otpCode
                            };
                        }),
                        "hydra:totalItems": results.length
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message, "hydra:member": [] }, 500);
                }
            }

            const msgMatch = path.match(/^\/messages\/([a-zA-Z0-9]+)$/);
            if (msgMatch && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE id =? AND account_id =?").bind(msgId, account.id).all();
                    if (results.length === 0) return json({ error: "Message not found" }, 404);
                    const m = results[0];
                    await env.MAIL_DB.prepare("UPDATE messages SET seen = 1, updated_at =? WHERE id =?").bind(new Date().toISOString(), msgId).run();
                    const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                    return json({
                        id: m.id, accountId: m.account_id,
                        from: { address: m.from_address, name: m.from_name },
                        to: [{ address: m.to_address, name: "" }],
                        subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                        text: parsed.cleanText,
                        html: parsed.decodedHtml || m.html_content || "",
                        rawText: m.text_content || "",
                        rawHtml: m.html_content || "",
                        seen: true, isDeleted: false,
                        hasAttachments: m.has_attachments === 1, size: m.size,
                        createdAt: m.created_at, updatedAt: m.updated_at,
                        otpCode: parsed.otpCode, verificationLinks: parsed.links
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (msgMatch && method === "DELETE") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    await env.MAIL_DB.prepare("UPDATE messages SET is_deleted = 1 WHERE id =? AND account_id =?").bind(msgId, account.id).run();
                    return json({ success: true });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            if (path === "/receive" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, body);
                if (!result.success) return json({ error: result.error }, result.status);
                return json(result.message, 201);
            }

            if (path === "/webhook" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, { to: body.to, from: body.from, fromName: body.from_name || body.fromName, subject: body.subject, text: body.text, html: body.html, webhookUrl: body.webhook_url });
                if (!result.success) return json({ error: result.error }, result.status);
                return json({ success: true });
            }

            if (path === "/me" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE id =?").bind(account.id).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const a = results[0];
                    return json({ id: a.id, address: a.address, quota: a.quota, used: a.used, createdAt: a.created_at, expiresAt: a.expires_at });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            return json({ error: "Not found: " + path }, 404);
        } catch (err) {
            console.error("GLOBAL_WORKER_ERROR", err);
            return json({ error: "Worker exception: " + err.message }, 500);
        }
    },

    async scheduled(event, env, ctx) {
        if (!env.MAIL_DB) return;
        const now = new Date().toISOString();
        ctx.waitUntil(Promise.all([
            env.MAIL_DB.prepare("DELETE FROM messages WHERE expires_at <? OR is_deleted = 1").bind(now).run(),
            env.MAIL_DB.prepare("DELETE FROM accounts WHERE expires_at <?").bind(now).run()
        ]));
    },

    async email(message, env, ctx) {
        if (!env.MAIL_DB) return;
        try {
            const from = message.from;
            const to = message.to;
            const subject = message.headers.get("subject") || "";
            const rawEmail = await new Response(message.raw).text();
            const parsed = parseRawEmail(rawEmail);
            await saveEmail(env, ctx, { to, from, fromName: "", subject, text: parsed.text, html: parsed.html });
        } catch (e) {}
    }
};

function json(data, status = 200) {
    return new Response(JSON.stringify(data), { status, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type, Authorization" } });
}
function verifyToken(token) {
    try { const d = JSON.parse(atob(token)); return { id: d.accountId, address: d.address }; } catch (e) { return null; }
}
function decodeQuotedPrintable(str) {
    if (!str) return "";
    return str.replace(/=\r?\n/g, '').replace(/=([0-9A-Fa-f]{2})/g, (m, h) => String.fromCharCode(parseInt(h, 16)));
}
function parseRawEmail(raw) {
    let text = ""; let html = "";
    const tm = raw.match(/Content-Type: text\/plain[\s\S]*?(?=--[a-zA-Z0-9]+|Content-Type: text\/html|$)/i);
    if (tm) { text = tm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); text = decodeQuotedPrintable(text); }
    const hm = raw.match(/Content-Type: text\/html[\s\S]*?(?=--[a-zA-Z0-9]+|$)/i);
    if (hm) { html = hm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); html = decodeQuotedPrintable(html); }
    if (!text &&!html) { const p = raw.split(/\r?\n\r?\n/); text = decodeQuotedPrintable(p.slice(1).join('\n\n').trim()); }
    return { text, html };
}
function parseEmailContent(text, html) {
    let cleanText = decodeQuotedPrintable(text || "");
    let decodedHtml = decodeQuotedPrintable(html || "");
    let searchContent = cleanText;
    if (!searchContent && decodedHtml) searchContent = decodedHtml.replace(/<[^>]+>/g, ' ');
    searchContent = searchContent.replace(/--[a-zA-Z0-9]+/g, '').replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').trim();
    let otpCode = null;
    const patterns = [/(?:OTP|One.?Time.?Password|verifikas?i|verification|verify|code|kode|pin|token)[:\s-]*([0-9]{4,8})/i, /(?:kode|code|otp|pin)\s*(?:is|adalah)?[:\s-]*([A-Z0-9]{4,8})/i, /\b([0-9]{4,8})\b/];
    for (const pat of patterns) {
        const m = searchContent.match(pat);
        if (m && m[1]) { const c = m[1]; if (!/^(19|20)\d{2}$/.test(c)) { otpCode = c; break; } }
    }
    const links = []; const re = /https?:\/\/[^\s"'<>]+/g; let lm;
    while ((lm = re.exec(searchContent))!== null) {
        const u = lm[0].replace(/[.,;:]+$/, '');
        if (u.length > 20 && u.length < 1000 && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) links.push(u);
    }
    if (decodedHtml) {
        const hls = decodedHtml.match(/href=["']([^"']+)["']/gi) || [];
        for (const hl of hls) {
            const u = hl.replace(/href=["']/gi, '').replace(/["']$/g, '');
            if (u.startsWith('http') && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) if (!links.includes(u)) links.push(u);
        }
    }
    return { cleanText, decodedHtml, otpCode, links };
}
async function saveEmail(env, ctx, emailData) {
    const toAddress = emailData.to;
    const fromAddress = emailData.from || "unknown@badut.biz.id";
    const fromName = emailData.fromName || "";
    const subject = emailData.subject || "";
    const text = emailData.text || "";
    const html = emailData.html || "";
    if (!toAddress) return { success: false, error: "To address required", status: 400 };
    try {
        const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address =?").bind(toAddress).all();
        if (results.length === 0) return { success: false, error: "Account not found", status: 404 };
        const account = results[0];
        const msgId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
        const now = new Date().toISOString();
        const expires = new Date(Date.now() + 60 * 60 * 1000).toISOString();
        const parsed = parseEmailContent(text, html);
        await env.MAIL_DB.prepare(`INSERT INTO messages (id, account_id, from_address, from_name, to_address, subject, text_content, html_content, intro, size, created_at, updated_at, expires_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)`)
           .bind(msgId, account.id, fromAddress, fromName, toAddress, subject, text, html, parsed.cleanText.substring(0, 100), text.length + html.length, now, now, expires).run();
        if (emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL) {
            const wh = emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL;
            ctx.waitUntil(fetch(wh, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: msgId, to: toAddress, from: fromAddress, subject, otpCode: parsed.otpCode, links: parsed.links }) }).catch(() => {}));
        }
        return { success: true, message: { id: msgId, accountId: account.id, from: { address: fromAddress, name: fromName }, to: [{ address: toAddress, name: "" }], subject, intro: parsed.cleanText.substring(0, 100), text, html, seen: false, isDeleted: false, hasAttachments: false, size: text.length + html.length, createdAt: now, updatedAt: now, otpCode: parsed.otpCode, verificationLinks: parsed.links } };
    } catch (e) {
        return { success: false, error: "DB Error: " + e.message, status: 500 };
    }
}

function renderPage() {
    return `<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📧 Temp Mail Pro - badut.biz.id</title>
<style>
:root{--bg:#070a14;--card:#11142a;--card-2:#161a36;--border:#23284d;--text:#eef0ff;--muted:#8a8fb8;--primary:#ff4d6d;--primary-2:#ff2d55;--green:#00e676;--blue:#4c8aff}
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html,body{width:100%;overflow-x:hidden}
body{font-family:Inter,-apple-system,sans-serif;background:radial-gradient(1200px 600px at 10% -10%, #1a1e4a 0%, transparent 60%),radial-gradient(1000px 500px at 90% 0%, #2a124a 0%, transparent 60%),var(--bg);color:var(--text);min-height:100vh;line-height:1.5}
.navbar{position:fixed;top:0;left:0;right:0;height:64px;background:rgba(17,20,42,0.85);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 16px;z-index:100;border-bottom:1px solid var(--border)}
.menu-btn{background:var(--card-2);border:1px solid var(--border);color:#fff;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer}
.navbar-brand{margin-left:12px;font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dropdown{position:fixed;top:72px;left:12px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;display:none;z-index:200;min-width:220px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.dropdown.show{display:block}
.dropdown a{display:flex;gap:12px;padding:12px 14px;color:var(--text);text-decoration:none;border-radius:10px;font-weight:600;cursor:pointer}
.dropdown a.active{background:var(--primary);color:#fff}
.main{padding:84px 16px 40px;max-width:820px;margin:0 auto;width:100%}
.email-section,.messages-section{background:linear-gradient(180deg,var(--card) 0%,#0f1230 100%);border-radius:24px;padding:22px;border:1px solid var(--border);box-shadow:0 10px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.05);margin-bottom:20px;width:100%;overflow:hidden}
.email-title{font-size:20px;font-weight:700;margin-bottom:18px;text-align:center}
.email-box{display:flex;gap:10px;margin-bottom:14px;width:100%}
.email-input{flex:1 1 0%;min-width:0;padding:14px 16px;border:2px solid var(--border);border-radius:14px;background:#080a1a;color:#fff;font-size:15px;outline:none}
.email-input:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(255,77,109,0.15)}
.domain-select{flex:0 0 auto;max-width:42%;padding:14px 12px;background:var(--card-2);border-radius:14px;border:1px solid var(--border);color:var(--green);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn{width:100%;padding:15px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none;border-radius:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(255,77,109,0.35)}
.current-email{text-align:left;margin-top:14px;padding:14px 16px;background:rgba(0,230,118,0.08);border:1px dashed rgba(0,230,118,0.4);border-radius:14px;color:var(--green);font-weight:700;display:none;cursor:pointer;word-break:break-all;overflow-wrap:anywhere;font-size:14px}
.messages-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.refresh-btn{padding:8px 14px;background:var(--card-2);color:var(--text);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:12px;font-weight:600}
.message{background:var(--card-2);border-radius:16px;padding:16px;margin-bottom:10px;cursor:pointer;border:1px solid var(--border);width:100%;overflow:hidden}
.message:hover{border-color:var(--primary)}
.message.from{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.message.subject{color:var(--primary);font-weight:700;font-size:14px;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.message.preview{color:var(--muted);font-size:12.5px;word-break:break-word;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.otp-badge{display:inline-flex;background:var(--green);color:#000;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:800;margin-top:8px}
.empty,.loading{text-align:center;color:var(--muted);padding:40px 16px;font-size:14px}
.toast{position:fixed;bottom:24px;left:16px;right:16px;max-width:360px;margin:0 auto;background:#0f1f14;color:#fff;padding:14px 18px;border-radius:999px;font-weight:700;display:none;z-index:500;text-align:center;font-size:13px;word-break:break-word}
.api-section{display:none}.api-section.show{display:block}
.endpoint{background:var(--card);border-radius:16px;margin-bottom:16px;border:1px solid var(--border);overflow:hidden;width:100%}
.endpoint-header{padding:14px 16px;background:var(--card-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.method{padding:4px 10px;border-radius:999px;font-weight:800;font-size:11px}.method.get{background:#00c853;color:#fff}.method.post{background:var(--blue);color:#fff}.method.delete{background:#ff1744;color:#fff}
.path{font-weight:700;font-family:monospace;font-size:13px;word-break:break-all}
.endpoint-body{padding:16px}.endpoint-body p{color:var(--muted);margin-bottom:10px;font-size:13px}
.code-wrap{position:relative;width:100%;overflow:hidden}pre{background:#080a1a;padding:14px 44px 14px 14px;border-radius:12px;overflow-x:auto;font-size:12px;color:var(--green);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;border:1px solid var(--border);line-height:1.5}
.copy-btn{position:absolute;top:8px;right:8px;padding:6px 10px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:11px;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(3,5,14,0.78);backdrop-filter:blur(12px);display:none;z-index:400;justify-content:center;align-items:flex-start;padding:12px;overflow-y:auto}
.modal.show{display:flex}.modal-content{background:var(--card);border-radius:20px;width:100%;max-width:860px;margin:40px auto;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.modal-head{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:12px}
.modal-head h2{font-size:16px;word-break:break-word;flex:1;min-width:0}.modal-close{background:var(--card-2);border:1px solid var(--border);color:var(--muted);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.modal-body{padding:16px 20px;overflow-y:auto;flex:1}.tab-row{display:flex;gap:6px;margin:14px 0;overflow-x:auto;padding-bottom:4px}.tab-btn{padding:8px 14px;background:var(--card-2);color:var(--muted);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap;flex:0 0 auto}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.verification-link{background:var(--card-2);padding:12px;border-radius:12px;margin:10px 0;word-break:break-all;font-size:12px;color:var(--blue);display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);overflow:hidden}.verification-link a{color:var(--blue);word-break:break-all}.link-copy-btn{align-self:flex-start;padding:6px 12px;background:var(--primary);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:11px}
iframe.gmail-frame{width:100%;min-height:420px;height:60vh;max-height:640px;border:1px solid var(--border);background:#fff;border-radius:12px;margin-top:12px;display:block}
@media(max-width:640px){.main{padding:76px 12px 28px}.email-section,.messages-section{padding:16px;border-radius:20px}.email-box{flex-direction:column}.domain-select{max-width:100%;width:100%}.modal{padding:8px}.modal-content{margin:12px auto;max-height:94vh}iframe.gmail-frame{min-height:380px;height:55vh}}
</style>
</head>
<body>
<div class="navbar"><button class="menu-btn" onclick="toggleMenu()">☰</button><span class="navbar-brand">📧 Temp Mail Pro</span></div>
<div class="dropdown" id="dropdown"><a onclick="showDashboard()" class="active" id="menuDashboard">📥 Dashboard</a><a onclick="showApi()" id="menuApi">🔧 API Docs</a></div>
<div class="main">
<div id="dashboardSection">
<div class="email-section"><div class="email-title">Buat Email Sementara</div><div class="email-box"><input type="text" class="email-input" id="emailInput" placeholder="ketik nama email..."><select id="domainSelect" class="domain-select"><option value="@badut.biz.id">@badut.biz.id</option></select></div><button class="btn" id="createBtn" onclick="createEmail()">Buat Email</button><div class="current-email" id="currentEmail" onclick="copyCurrentEmail()"></div></div>
<div class="messages-section"><div class="messages-title"><span>📥 Email Masuk</span><button class="refresh-btn" onclick="loadMessages()">🔄 Refresh</button></div><div id="messages"><div class="empty">👆 Buat email dulu untuk mulai<br><span style="font-size:12px;opacity:0.7">Email akan muncul otomatis</span></div></div></div>
</div>
<div class="api-section" id="apiSection">
<h1 style="text-align:center;margin-bottom:24px;font-size:22px">🔧 Temp Mail API - Full Docs</h1>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/domains</span></div><div class="endpoint-body"><p>List semua domain aktif. Dipakai untuk dropdown di dashboard.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/domains"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:12px;color:#8a8fb8;font-size:12px">Response: hydra:member array {domain, id, isActive}</p></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/accounts</span></div><div class="endpoint-body"><p>Buat akun / email baru. Harus unik, kalau sudah ada return 409.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/accounts" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/token</span></div><div class="endpoint-body"><p>Login & dapatkan Bearer token. Token dipakai untuk akses /messages.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/token" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages</span></div><div class="endpoint-body"><p>List 20 email masuk terbaru. Butuh header Authorization.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:10px;font-size:12px;color:#8a8fb8">Field penting: otpCode (auto deteksi), intro, seen</p></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Baca 1 email lengkap + HTML + OTP + verificationLinks. Auto mark seen=1.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method delete">DELETE</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Hapus email (soft delete, is_deleted=1).</p><div class="code-wrap"><pre class="curl-code">curl -X DELETE "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/me</span></div><div class="endpoint-body"><p>Cek info akun sendiri, quota & expiry.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/me" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/receive</span></div><div class="endpoint-body"><p>Endpoint untuk forward email masuk dari Email Routing / webhook. Format: {"to","from","subject","text","html"}</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/receive" \\
  -H "Content-Type: application/json" \\
  -d '{"to":"test@badut.biz.id","from":"noreply@google.com","subject":"OTP","text":"Your code is 123456"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>

<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/events</span></div><div class="endpoint-body"><p>Server-Sent Events (SSE) untuk notifikasi realtime. Dipakai dashboard untuk auto-refresh.</p><div class="code-wrap"><pre>GET /events?token=xxx (EventStream)</pre></div></div></div>

</div>
</div>

<div class="modal" id="emailModal" onclick="closeModal()"><div class="modal-content" onclick="event.stopPropagation()"><div class="modal-head"><div style="min-width:0;flex:1"><h2 id="modalSubject"></h2><p id="modalFrom" style="color:#8a8fb8;font-size:12px;margin-top:4px;word-break:break-all"></p></div><button class="modal-close" onclick="closeModal()">✕</button></div><div class="modal-body"><div class="tab-row" id="modalTabs"></div><div id="tabRendered"></div><div id="tabOtp" style="display:none"></div><div id="tabRaw" style="display:none"></div><div id="tabSource" style="display:none"></div></div></div></div>
<div class="toast" id="toast"></div>

<script>
let currentToken='',currentEmailAddress='',eventSource=null;
window.addEventListener('DOMContentLoaded',()=>{updateApiDocsHost();loadDomains();});
function updateApiDocsHost(){const host=window.location.origin;document.querySelectorAll('.curl-code').forEach(el=>{el.textContent=el.textContent.replace(/{HOST}/g,host)});}
async function loadDomains(){try{const res=await fetch('/domains');if(!res.ok)throw new Error('HTTP '+res.status);const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();console.error('domains not JSON',t.slice(0,200));return;}const data=await res.json();const domains=data['hydra:member']||[];if(domains.length>0){document.getElementById('domainSelect').innerHTML=domains.map(d=>'<option value="@'+d.domain+'">@'+d.domain+'</option>').join('');}}catch(e){console.error(e);}}
function toggleMenu(){document.getElementById('dropdown').classList.toggle('show');}
function showDashboard(){document.getElementById('dashboardSection').style.display='block';document.getElementById('apiSection').classList.remove('show');document.getElementById('menuDashboard').classList.add('active');document.getElementById('menuApi').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showApi(){document.getElementById('dashboardSection').style.display='none';document.getElementById('apiSection').classList.add('show');document.getElementById('menuApi').classList.add('active');document.getElementById('menuDashboard').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.style.display='block';setTimeout(()=>t.style.display='none',3000);}

// === RANDOM NAMA MANUSIA OTOMATIS - TANPA HARDCODE LIST NAMA, TANPA ANGKA, TANPA TITIK ===
function randomName(){
  const V = ["a","i","u","e","o"];
  const C = ["b","d","f","g","h","j","k","l","m","n","p","r","s","t","w","y","ng","ny"];
  function syl(){
    const c = C[Math.floor(Math.random()*C.length)];
    const v = V[Math.floor(Math.random()*V.length)];
    let s = c + v;
    if(Math.random() > 0.7) s += "n";
    return s;
  }
  function word(min, max){
    const n = min + Math.floor(Math.random() * (max - min + 1));
    let w = "";
    for(let i=0;i<n;i++) w += syl();
    return w.replace(/ngng/g,"ng").replace(/nyny/g,"ny");
  }
  const first = word(2,2);
  const last = word(2,3);
  return first + last;
}

function copyTextToClipboard(text,msg){if(!text)return;navigator.clipboard.writeText(text).then(()=>showToast(msg||'📋 Disalin!')).catch(()=>showToast('❌ Gagal menyalin'));}
function copyCurrentEmail(){if(currentEmailAddress)copyTextToClipboard(currentEmailAddress,'📋 Email disalin!');}
async function createEmail(){
 const input=document.getElementById('emailInput');const domain=document.getElementById('domainSelect').value||'@badut.biz.id';
 let name=input.value.trim().toLowerCase().replace(/[^a-z]/g,"");
 if(!name) name=randomName();
 const email=name+domain;
 const btn=document.getElementById('createBtn');btn.disabled=true;btn.textContent='Membuat...';
 try{
  const r1=await fetch('/accounts',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct1=r1.headers.get('content-type')||'';if(!ct1.includes('json')){const t=await r1.text();throw new Error('accounts returned HTML: '+t.slice(0,100));}
  const j1=await r1.json();if(!r1.ok && r1.status!== 409)throw new Error(j1.error||'Gagal buat akun');
  const r2=await fetch('/token',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct2=r2.headers.get('content-type')||'';if(!ct2.includes('json')){const t=await r2.text();throw new Error('token returned HTML: '+t.slice(0,100));}
  const tokenData=await r2.json();
  currentToken=tokenData.token;currentEmailAddress=email;input.value=name;
  document.getElementById('currentEmail').innerHTML='📧 '+email+' <span style="opacity:.7">(Klik salin)</span>';document.getElementById('currentEmail').style.display='block';
  copyTextToClipboard(email,'✅ Email aktif & disalin!');loadMessages();setupSSE();
 }catch(e){showToast('❌ '+e.message);console.error(e);}btn.disabled=false;btn.textContent='Buat Email';
}
function setupSSE(){if(eventSource)eventSource.close();if(!currentToken)return;eventSource=new EventSource('/events?token='+encodeURIComponent(currentToken));eventSource.onmessage=function(ev){try{const d=JSON.parse(ev.data);if(d.count!==undefined){loadMessages();showToast('📩 Email baru!');}}catch{}};eventSource.onerror=function(){setTimeout(setupSSE,5000);};}
async function loadMessages(){
 if(!currentToken)return;const c=document.getElementById('messages');c.innerHTML='<div class="loading">⏳ Memuat...</div>';
 try{
  const res=await fetch('/messages',{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('messages HTML: '+t.slice(0,120));}
  const data=await res.json();const msgs=data['hydra:member']||[];if(msgs.length===0){c.innerHTML='<div class="empty">📭 Belum ada email</div>';return;}
  c.innerHTML=msgs.map(m=>{const time=new Date(m.createdAt).toLocaleString('id-ID');let otp=m.otpCode?'<div class="otp-badge">🔑 OTP: '+m.otpCode+'</div>':'';return '<div class="message" onclick="openMessage(\\'/'+m.id+'\\')"><div class="from">👤 '+(m.from.name||m.from.address)+'</div><div class="subject">📌 '+(m.subject||'(Tanpa Subjek)')+'</div><div class="preview">'+(m.intro||'').substring(0,100)+'...</div>'+otp+'<div class="time">🕐 '+time+'</div></div>';}).join('');
 }catch(e){c.innerHTML='<div class="empty">❌ Gagal: '+e.message+'</div>';}
}
async function openMessage(msgId){
 if(!currentToken)return;
 try{
  const res=await fetch('/messages'+msgId,{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('message HTML: '+t.slice(0,120));}
  const msg=await res.json();
  document.getElementById('modalSubject').textContent='📧 '+(msg.subject||'(Tanpa Subjek)');document.getElementById('modalFrom').textContent='Dari: '+(msg.from.name||msg.from.address);
  document.getElementById('modalTabs').innerHTML='<button class="tab-btn active" onclick="showTab(event,\\'rendered\\')">📄 Gmail HTML</button><button class="tab-btn" onclick="showTab(event,\\'otp\\')">🔑 OTP</button><button class="tab-btn" onclick="showTab(event,\\'raw\\')">📝 Text</button><button class="tab-btn" onclick="showTab(event,\\'source\\')">🔍 Source</button>';
  const rc=document.getElementById('tabRendered');
  if(msg.html){const ifr=document.createElement('iframe');ifr.className='gmail-frame';rc.innerHTML='';rc.appendChild(ifr);const d=ifr.contentWindow.document;d.open();d.write('<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width,initial-scale=1><style>body{font-family:sans-serif;padding:16px;color:#222;background:#fff;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}img{max-width:100%;height:auto}table{max-width:100%;overflow-x:auto;display:block}a{word-break:break-all}</style></head><body>'+msg.html+'</body></html>');d.close();}
  else{rc.innerHTML='<div style="background:#fff;color:#222;padding:16px;border-radius:12px;white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.text||'')+'</div>';}
  const oc=document.getElementById('tabOtp');let oh='';if(msg.otpCode){oh='<div style="text-align:center;padding:20px;background:rgba(0,230,118,0.1);border-radius:16px;border:1px dashed rgba(0,230,118,0.3)"><p style="color:#8a8fb8;font-size:13px">Kode OTP:</p><div style="font-size:34px;font-weight:800;color:#00e676;letter-spacing:6px;word-break:break-all">'+msg.otpCode+'</div><button class="btn" style="max-width:220px;margin-top:16px" onclick="copyTextToClipboard(\\''+msg.otpCode+'\\',\\'✅ OTP disalin!\\')">Copy OTP</button></div>';}else{oh='<p style="text-align:center;padding:28px;color:#8a8fb8">Tidak ada OTP</p>';}
  if(msg.verificationLinks&&msg.verificationLinks.length>0){oh+='<p style="margin:18px 0 8px;color:#8a8fb8;font-size:12px">🔗 Verification Links:</p>'+msg.verificationLinks.map(l=>'<div class="verification-link"><a href="'+l+'" target="_blank">'+l+'</a><button class="link-copy-btn" onclick="copyTextToClipboard(\\''+l+'\\',\\'✅ Link disalin!\\')">Copy</button></div>').join('');}
  oc.innerHTML=oh;
  document.getElementById('tabRaw').innerHTML='<pre style="white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.rawText||msg.text||'')+'</pre>';
  document.getElementById('tabSource').innerHTML='<div style="position:relative"><pre style="white-space:pre-wrap;word-break:break-all;max-height:460px;overflow:auto">'+escapeHtml(msg.rawHtml||msg.html||'')+'</pre><button class="copy-btn" onclick="copyTextToClipboard(this.parentElement.querySelector(\\'pre\\').textContent,\\'✅ Source disalin!\\')">Copy</button></div>';
  showTab(null,'rendered');document.getElementById('emailModal').classList.add('show');loadMessages();
 }catch(e){showToast('❌ '+e.message);}
}
function showTab(ev,name){document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));if(ev&&ev.target)ev.target.classList.add('active');else{const m={rendered:0,otp:1,raw:2,source:3}[name];const btn=document.querySelectorAll('.tab-btn')[m];if(btn)btn.classList.add('active');}document.getElementById('tabRendered').style.display=name==='rendered'?'block':'none';document.getElementById('tabOtp').style.display=name==='otp'?'block':'none';document.getElementById('tabRaw').style.display=name==='raw'?'block':'none';document.getElementById('tabSource').style.display=name==='source'?'block':'none';}
function escapeHtml(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function closeModal(){document.getElementById('emailModal').classList.remove('show');}
function copyCmd(btn){copyTextToClipboard(btn.parentElement.querySelector('pre').textContent,'✅ Command disalin!');}
document.addEventListener('click',(e)=>{const dd=document.getElementById('dropdown');const mb=document.querySelector('.menu-btn');if(!dd.contains(e.target)&&!mb.contains(e.target))dd.classList.remove('show');});
</script>
</body>
</html>`;
}

────────────────────────────────────────────────────────────

┌── FILE 03: Mail-pro/Mail_pro.v3.js
│   Size: 42316 characters
│   Language: javascript
│   Created: 10/10/2026
└────────────────────────────────────────────────────

// Temp Mail Worker - FINAL FULL API DOCS + Aesthetic 100/10 + MAIL_DB Fix + Random 4huruf+angka

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const method = request.method;
        const path = url.pathname;

        const checkDB = () => {
            if (!env.MAIL_DB) {
                return json({ error: "MAIL_DB not bound. Cek wrangler.toml [[d1_databases]] binding = MAIL_DB" }, 500);
            }
            return null;
        };

        try {
            if (path === "/" && method === "GET") {
                return new Response(renderPage(), {
                    headers: { "Content-Type": "text/html; charset=UTF-8" }
                });
            }

            if (path === "/events" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = url.searchParams.get("token") || "";
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                const stream = new ReadableStream({
                    async start(controller) {
                        const encoder = new TextEncoder();
                        let lastCount = 0;
                        const sendEvent = async () => {
                            try {
                                const { results } = await env.MAIL_DB.prepare(
                                    "SELECT COUNT(*) as count FROM messages WHERE account_id =? AND is_deleted = 0"
                                ).bind(account.id).all();
                                const currentCount = results[0]?.count || 0;
                                if (currentCount!== lastCount) {
                                    lastCount = currentCount;
                                    controller.enqueue(encoder.encode(`data: ${JSON.stringify({ count: currentCount })}\n\n`));
                                }
                            } catch (e) {}
                        };
                        await sendEvent();
                        setInterval(sendEvent, 3000);
                    }
                });
                return new Response(stream, {
                    headers: { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", "Connection": "keep-alive" }
                });
            }

            if (path === "/domains" && method === "GET") {
                if (!env.MAIL_DB) {
                    return json({ "hydra:member": [{ domain: "badut.biz.id", id: "default-1", isActive: true, isPrivate: false, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }] });
                }
                let results = [];
                try {
                    const res = await env.MAIL_DB.prepare("SELECT * FROM domains WHERE is_active = 1").all();
                    results = res.results || [];
                } catch (e) {}
                if (results.length === 0) results = [{ id: "default-1", domain: "badut.biz.id", created_at: new Date().toISOString() }];
                return json({ "hydra:member": results.map(r => ({ domain: r.domain, id: r.id, isActive: true, isPrivate: false, createdAt: r.created_at || new Date().toISOString(), updatedAt: r.created_at || new Date().toISOString() })) });
            }

            if (path === "/accounts" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                if (!address) return json({ error: "Address required" }, 400);
                const accountId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
                const now = new Date().toISOString();
                const expires = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString();
                try {
                    await env.MAIL_DB.prepare("INSERT INTO accounts (id, address, password, created_at, updated_at, expires_at) VALUES (?,?,?,?,?,?)")
                      .bind(accountId, address, password, now, now, expires).run();
                    return json({ id: accountId, address, quota: 40000000, used: 0, createdAt: now, expiresAt: expires }, 201);
                } catch (e) {
                    return json({ error: "Address already exists: " + e.message }, 409);
                }
            }

            if (path === "/token" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const address = body.address;
                const password = body.password || "Password123!";
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address =?").bind(address).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const account = results[0];
                    if (account.password!== password) return json({ error: "Invalid password" }, 401);
                    const token = btoa(JSON.stringify({ accountId: account.id, address: account.address, createdAt: Date.now() }));
                    return json({ token, id: account.id });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (path === "/messages" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE account_id =? AND is_deleted = 0 ORDER BY created_at DESC LIMIT 20").bind(account.id).all();
                    return json({
                        "hydra:member": results.map(m => {
                            const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                            return {
                                id: m.id, accountId: m.account_id,
                                from: { address: m.from_address, name: m.from_name },
                                to: [{ address: m.to_address, name: "" }],
                                subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                                seen: m.seen === 1, isDeleted: false,
                                hasAttachments: m.has_attachments === 1, size: m.size,
                                createdAt: m.created_at, updatedAt: m.updated_at,
                                otpCode: parsed.otpCode
                            };
                        }),
                        "hydra:totalItems": results.length
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message, "hydra:member": [] }, 500);
                }
            }

            const msgMatch = path.match(/^\/messages\/([a-zA-Z0-9]+)$/);
            if (msgMatch && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM messages WHERE id =? AND account_id =?").bind(msgId, account.id).all();
                    if (results.length === 0) return json({ error: "Message not found" }, 404);
                    const m = results[0];
                    await env.MAIL_DB.prepare("UPDATE messages SET seen = 1, updated_at =? WHERE id =?").bind(new Date().toISOString(), msgId).run();
                    const parsed = parseEmailContent(m.text_content || "", m.html_content || "");
                    return json({
                        id: m.id, accountId: m.account_id,
                        from: { address: m.from_address, name: m.from_name },
                        to: [{ address: m.to_address, name: "" }],
                        subject: m.subject, intro: parsed.cleanText.substring(0, 100),
                        text: parsed.cleanText,
                        html: parsed.decodedHtml || m.html_content || "",
                        rawText: m.text_content || "",
                        rawHtml: m.html_content || "",
                        seen: true, isDeleted: false,
                        hasAttachments: m.has_attachments === 1, size: m.size,
                        createdAt: m.created_at, updatedAt: m.updated_at,
                        otpCode: parsed.otpCode, verificationLinks: parsed.links
                    });
                } catch (e) {
                    return json({ error: "DB Error: " + e.message }, 500);
                }
            }

            if (msgMatch && method === "DELETE") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const msgId = msgMatch[1];
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    await env.MAIL_DB.prepare("UPDATE messages SET is_deleted = 1 WHERE id =? AND account_id =?").bind(msgId, account.id).run();
                    return json({ success: true });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            if (path === "/receive" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, body);
                if (!result.success) return json({ error: result.error }, result.status);
                return json(result.message, 201);
            }

            if (path === "/webhook" && method === "POST") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const body = await request.json().catch(() => ({}));
                const result = await saveEmail(env, ctx, { to: body.to, from: body.from, fromName: body.from_name || body.fromName, subject: body.subject, text: body.text, html: body.html, webhookUrl: body.webhook_url });
                if (!result.success) return json({ error: result.error }, result.status);
                return json({ success: true });
            }

            if (path === "/me" && method === "GET") {
                const dbErr = checkDB(); if (dbErr) return dbErr;
                const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
                const account = verifyToken(token);
                if (!account) return json({ error: "Invalid token" }, 401);
                try {
                    const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE id =?").bind(account.id).all();
                    if (results.length === 0) return json({ error: "Account not found" }, 404);
                    const a = results[0];
                    return json({ id: a.id, address: a.address, quota: a.quota, used: a.used, createdAt: a.created_at, expiresAt: a.expires_at });
                } catch (e) {
                    return json({ error: e.message }, 500);
                }
            }

            return json({ error: "Not found: " + path }, 404);
        } catch (err) {
            console.error("GLOBAL_WORKER_ERROR", err);
            return json({ error: "Worker exception: " + err.message }, 500);
        }
    },
    async scheduled(event, env, ctx) {
        if (!env.MAIL_DB) return;
        const now = new Date().toISOString();
        ctx.waitUntil(Promise.all([
            env.MAIL_DB.prepare("DELETE FROM messages WHERE expires_at <? OR is_deleted = 1").bind(now).run(),
            env.MAIL_DB.prepare("DELETE FROM accounts WHERE expires_at <?").bind(now).run()
        ]));
    },
    async email(message, env, ctx) {
        if (!env.MAIL_DB) return;
        try {
            const from = message.from;
            const to = message.to;
            const subject = message.headers.get("subject") || "";
            const rawEmail = await new Response(message.raw).text();
            const parsed = parseRawEmail(rawEmail);
            await saveEmail(env, ctx, { to, from, fromName: "", subject, text: parsed.text, html: parsed.html });
        } catch (e) {}
    }
};

function json(data, status = 200) {
    return new Response(JSON.stringify(data), { status, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Headers": "Content-Type, Authorization" } });
}
function verifyToken(token) {
    try { const d = JSON.parse(atob(token)); return { id: d.accountId, address: d.address }; } catch (e) { return null; }
}
function decodeQuotedPrintable(str) {
    if (!str) return "";
    return str.replace(/=\r?\n/g, '').replace(/=([0-9A-Fa-f]{2})/g, (m, h) => String.fromCharCode(parseInt(h, 16)));
}
function parseRawEmail(raw) {
    let text = ""; let html = "";
    const tm = raw.match(/Content-Type: text\/plain[\s\S]*?(?=--[a-zA-Z0-9]+|Content-Type: text\/html|$)/i);
    if (tm) { text = tm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); text = decodeQuotedPrintable(text); }
    const hm = raw.match(/Content-Type: text\/html[\s\S]*?(?=--[a-zA-Z0-9]+|$)/i);
    if (hm) { html = hm[0].replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').replace(/Content-Disposition:[^\n]+/gi, '').trim(); html = decodeQuotedPrintable(html); }
    if (!text &&!html) { const p = raw.split(/\r?\n\r?\n/); text = decodeQuotedPrintable(p.slice(1).join('\n\n').trim()); }
    return { text, html };
}
function parseEmailContent(text, html) {
    let cleanText = decodeQuotedPrintable(text || "");
    let decodedHtml = decodeQuotedPrintable(html || "");
    let searchContent = cleanText;
    if (!searchContent && decodedHtml) searchContent = decodedHtml.replace(/<[^>]+>/g, ' ');
    searchContent = searchContent.replace(/--[a-zA-Z0-9]+/g, '').replace(/Content-Type:[^\n]+/gi, '').replace(/Content-Transfer-Encoding:[^\n]+/gi, '').trim();
    let otpCode = null;
    const patterns = [/(?:OTP|One.?Time.?Password|verifikas?i|verification|verify|code|kode|pin|token)[:\s-]*([0-9]{4,8})/i, /(?:kode|code|otp|pin)\s*(?:is|adalah)?[:\s-]*([A-Z0-9]{4,8})/i, /\b([0-9]{4,8})\b/];
    for (const pat of patterns) {
        const m = searchContent.match(pat);
        if (m && m[1]) { const c = m[1]; if (!/^(19|20)\d{2}$/.test(c)) { otpCode = c; break; } }
    }
    const links = []; const re = /https?:\/\/[^\s"'<>]+/g; let lm;
    while ((lm = re.exec(searchContent))!== null) {
        const u = lm[0].replace(/[.,;:]+$/, '');
        if (u.length > 20 && u.length < 1000 && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) links.push(u);
    }
    if (decodedHtml) {
        const hls = decodedHtml.match(/href=["']([^"']+)["']/gi) || [];
        for (const hl of hls) {
            const u = hl.replace(/href=["']/gi, '').replace(/["']$/g, '');
            if (u.startsWith('http') && /verify|verification|token|confirm|activate|reset|password|email/i.test(u)) if (!links.includes(u)) links.push(u);
        }
    }
    return { cleanText, decodedHtml, otpCode, links };
}
async function saveEmail(env, ctx, emailData) {
    const toAddress = emailData.to;
    const fromAddress = emailData.from || "unknown@badut.biz.id";
    const fromName = emailData.fromName || "";
    const subject = emailData.subject || "";
    const text = emailData.text || "";
    const html = emailData.html || "";
    if (!toAddress) return { success: false, error: "To address required", status: 400 };
    try {
        const { results } = await env.MAIL_DB.prepare("SELECT * FROM accounts WHERE address =?").bind(toAddress).all();
        if (results.length === 0) return { success: false, error: "Account not found", status: 404 };
        const account = results[0];
        const msgId = crypto.randomUUID().replace(/-/g, '').substring(0, 24);
        const now = new Date().toISOString();
        const expires = new Date(Date.now() + 60 * 60 * 1000).toISOString();
        const parsed = parseEmailContent(text, html);
        await env.MAIL_DB.prepare(`INSERT INTO messages (id, account_id, from_address, from_name, to_address, subject, text_content, html_content, intro, size, created_at, updated_at, expires_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)`)
          .bind(msgId, account.id, fromAddress, fromName, toAddress, subject, text, html, parsed.cleanText.substring(0, 100), text.length + html.length, now, now, expires).run();
        if (emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL) {
            const wh = emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL;
            ctx.waitUntil(fetch(wh, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: msgId, to: toAddress, from: fromAddress, subject, otpCode: parsed.otpCode, links: parsed.links }) }).catch(() => {}));
        }
        return { success: true, message: { id: msgId, accountId: account.id, from: { address: fromAddress, name: fromName }, to: [{ address: toAddress, name: "" }], subject, intro: parsed.cleanText.substring(0, 100), text, html, seen: false, isDeleted: false, hasAttachments: false, size: text.length + html.length, createdAt: now, updatedAt: now, otpCode: parsed.otpCode, verificationLinks: parsed.links } };
    } catch (e) {
        return { success: false, error: "DB Error: " + e.message, status: 500 };
    }
}

function renderPage() {
    return `<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=5">
<title>📧 Temp Mail Pro - badut.biz.id</title>
<style>
:root{--bg:#070a14;--card:#11142a;--card-2:#161a36;--border:#23284d;--text:#eef0ff;--muted:#8a8fb8;--primary:#ff4d6d;--primary-2:#ff2d55;--green:#00e676;--blue:#4c8aff}
*{margin:0;padding:0;box-sizing:border-box;min-width:0;max-width:100%}
html{ -webkit-text-size-adjust:100%; width:100%; overflow-x:hidden; }
body{font-family:Inter,-apple-system,sans-serif;background:radial-gradient(1200px 600px at 10% -10%, #1a1e4a 0%, transparent 60%),radial-gradient(1000px 500px at 90% 0%, #2a124a 0%, transparent 60%),var(--bg);color:var(--text);min-height:100vh;line-height:1.5;width:100%;overflow-x:hidden;touch-action:manipulation}
.navbar{position:fixed;top:0;left:0;right:0;height:64px;background:rgba(17,20,42,0.95);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 12px;z-index:100;border-bottom:1px solid var(--border)}
.menu-btn{background:var(--card-2);border:1px solid var(--border);color:#fff;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.navbar-brand{margin-left:10px;font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.dropdown{position:fixed;top:70px;left:10px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;display:none;z-index:200;min-width:200px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.dropdown.show{display:block}
.dropdown a{display:flex;gap:10px;padding:12px 14px;color:var(--text);text-decoration:none;border-radius:10px;font-weight:600;cursor:pointer}
.dropdown a.active{background:var(--primary);color:#fff}
.main{padding:80px 14px 32px;max-width:820px;margin:0 auto;width:100%;overflow-x:hidden}
.email-section,.messages-section{background:linear-gradient(180deg,var(--card) 0%,#0f1230 100%);border-radius:20px;padding:18px;border:1px solid var(--border);margin-bottom:16px;width:100%;overflow:hidden}
.email-title{font-size:18px;font-weight:700;margin-bottom:14px;text-align:center}
.email-box{display:flex;gap:8px;margin-bottom:12px;width:100%}
.email-input{flex:1 1 0%;min-width:0;padding:13px 14px;border:2px solid var(--border);border-radius:12px;background:#080a1a;color:#fff;font-size:15px;outline:none}
.domain-select{flex:0 0 38%;max-width:38%;padding:13px 10px;background:var(--card-2);border-radius:12px;border:1px solid var(--border);color:var(--green);font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border:none;border-radius:12px;font-weight:700;cursor:pointer}
.current-email{text-align:left;margin-top:12px;padding:12px 14px;background:rgba(0,230,118,0.08);border:1px dashed rgba(0,230,118,0.4);border-radius:12px;color:var(--green);font-weight:700;display:none;cursor:pointer;word-break:break-all;font-size:13px}
.messages-title{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.refresh-btn{padding:7px 12px;background:var(--card-2);color:var(--text);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:11px;font-weight:600}
.message{background:var(--card-2);border-radius:14px;padding:14px;margin-bottom:8px;cursor:pointer;border:1px solid var(--border);width:100%;overflow:hidden}
.message:hover{border-color:var(--primary)}
.otp-badge{display:inline-flex;background:var(--green);color:#000;padding:5px 10px;border-radius:8px;font-size:11px;font-weight:800;margin-top:8px}
.empty,.loading{text-align:center;color:var(--muted);padding:32px 12px;font-size:13px}
.toast{position:fixed;bottom:20px;left:12px;right:12px;max-width:360px;margin:0 auto;background:#0f1f14;color:#fff;padding:12px 16px;border-radius:999px;font-weight:700;display:none;z-index:500;text-align:center;font-size:12px;word-break:break-word}
.api-section{display:none}.api-section.show{display:block}
.endpoint{background:var(--card);border-radius:14px;margin-bottom:14px;border:1px solid var(--border);overflow:hidden;width:100%}
.endpoint-header{padding:12px 14px;background:var(--card-2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.method{padding:3px 8px;border-radius:999px;font-weight:800;font-size:10px}.method.get{background:#00c853;color:#fff}.method.post{background:var(--blue);color:#fff}.method.delete{background:#ff1744;color:#fff}
.path{font-weight:700;font-family:monospace;font-size:12px;word-break:break-all;overflow-wrap:anywhere}
.endpoint-body{padding:14px}.endpoint-body p{color:var(--muted);margin-bottom:8px;font-size:12px}
.code-wrap{position:relative;width:100%;overflow:hidden}pre{background:#080a1a;padding:12px 40px 12px 12px;border-radius:10px;overflow-x:auto;font-size:11px;color:var(--green);white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;border:1px solid var(--border);line-height:1.5}
.copy-btn{position:absolute;top:6px;right:6px;padding:5px 9px;background:var(--primary);color:#fff;border:none;border-radius:7px;cursor:pointer;font-size:10px;font-weight:700}
.modal{position:fixed;inset:0;background:rgba(3,5,14,0.78);backdrop-filter:blur(12px);display:none;z-index:400;justify-content:center;align-items:flex-start;padding:10px;overflow-y:auto}
.modal.show{display:flex}.modal-content{background:var(--card);border-radius:18px;width:100%;max-width:860px;margin:20px auto;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border)}
.modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;gap:10px}
.modal-head h2{font-size:15px;word-break:break-word;flex:1;min-width:0}.modal-close{background:var(--card-2);border:1px solid var(--border);color:var(--muted);width:34px;height:34px;border-radius:10px;display:grid;place-items:center;cursor:pointer}
.modal-body{padding:14px 16px;overflow-y:auto;flex:1}.tab-row{display:flex;gap:6px;margin:12px 0;overflow-x:auto;padding-bottom:4px}.tab-btn{padding:7px 12px;background:var(--card-2);color:var(--muted);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:11px;font-weight:700;white-space:nowrap}.tab-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.verification-link{background:var(--card-2);padding:10px;border-radius:10px;margin:8px 0;word-break:break-all;font-size:11px;color:var(--blue);display:flex;flex-direction:column;gap:6px;border:1px solid var(--border)}.verification-link a{color:var(--blue);word-break:break-all;overflow-wrap:anywhere}.link-copy-btn{align-self:flex-start;padding:5px 10px;background:var(--primary);color:#fff;border:none;border-radius:7px;cursor:pointer;font-size:10px}
iframe.gmail-frame{width:100%;min-height:380px;height:55vh;max-height:600px;border:1px solid var(--border);background:#fff;border-radius:10px;margin-top:10px;display:block}
@media(max-width:640px){
  .main{padding:70px 10px 20px}
  .email-box{flex-direction:column}
  .domain-select{max-width:100%;width:100%;flex:1 1 100%}
  .navbar{height:56px}
  .email-section,.messages-section{padding:14px;border-radius:16px}
  .modal{padding:6px}
  .modal-content{margin:10px auto;max-height:94vh}
  iframe.gmail-frame{min-height:360px;height:50vh}
}
</style>
</head>
<body>
<div class="navbar"><button class="menu-btn" onclick="toggleMenu()">☰</button><span class="navbar-brand">📧 Temp Mail Pro</span></div>
<div class="dropdown" id="dropdown"><a onclick="showDashboard()" class="active" id="menuDashboard">📥 Dashboard</a><a onclick="showApi()" id="menuApi">🔧 API Docs</a></div>
<div class="main">
<div id="dashboardSection">
<div class="email-section"><div class="email-title">Buat Email Sementara</div><div class="email-box"><input type="text" class="email-input" id="emailInput" placeholder="ketik nama email..."><select id="domainSelect" class="domain-select"><option value="@badut.biz.id">@badut.biz.id</option></select></div><button class="btn" id="createBtn" onclick="createEmail()">Buat Email</button><div class="current-email" id="currentEmail" onclick="copyCurrentEmail()"></div></div>
<div class="messages-section"><div class="messages-title"><span>📥 Email Masuk</span><button class="refresh-btn" onclick="loadMessages()">🔄 Refresh</button></div><div id="messages"><div class="empty">👆 Buat email dulu untuk mulai<br><span style="font-size:12px;opacity:0.7">Email akan muncul otomatis</span></div></div></div>
</div>
<div class="api-section" id="apiSection">
<h1 style="text-align:center;margin-bottom:24px;font-size:22px">🔧 Temp Mail API - Full Docs</h1>
<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/domains</span></div><div class="endpoint-body"><p>List semua domain aktif. Dipakai untuk dropdown di dashboard.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/domains"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:12px;color:#8a8fb8;font-size:12px">Response: hydra:member array {domain, id, isActive}</p></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/accounts</span></div><div class="endpoint-body"><p>Buat akun / email baru. Harus unik, kalau sudah ada return 409.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/accounts" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/token</span></div><div class="endpoint-body"><p>Login & dapatkan Bearer token. Token dipakai untuk akses /messages.</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/token" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"test123@badut.biz.id","password":"Password123!"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages</span></div><div class="endpoint-body"><p>List 20 email masuk terbaru. Butuh header Authorization.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div><p style="margin-top:10px;font-size:12px;color:#8a8fb8">Field penting: otpCode (auto deteksi), intro, seen</p></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Baca 1 email lengkap + HTML + OTP + verificationLinks. Auto mark seen=1.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method delete">DELETE</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Hapus email (soft delete, is_deleted=1).</p><div class="code-wrap"><pre class="curl-code">curl -X DELETE "{HOST}/messages/abc123def456" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/me</span></div><div class="endpoint-body"><p>Cek info akun sendiri, quota & expiry.</p><div class="code-wrap"><pre class="curl-code">curl -X GET "{HOST}/me" \\
  -H "Authorization: Bearer TOKEN_KAMU"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method post">POST</span><span class="path">/receive</span></div><div class="endpoint-body"><p>Endpoint untuk forward email masuk dari Email Routing / webhook. Format: {"to","from","subject","text","html"}</p><div class="code-wrap"><pre class="curl-code">curl -X POST "{HOST}/receive" \\
  -H "Content-Type: application/json" \\
  -d '{"to":"test@badut.biz.id","from":"noreply@google.com","subject":"OTP","text":"Your code is 123456"}'</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
<div class="endpoint"><div class="endpoint-header"><span class="method get">GET</span><span class="path">/events</span></div><div class="endpoint-body"><p>Server-Sent Events (SSE) untuk notifikasi realtime. Dipakai dashboard untuk auto-refresh.</p><div class="code-wrap"><pre>GET /events?token=xxx (EventStream)</pre></div></div></div>
</div>
</div>
<div class="modal" id="emailModal" onclick="closeModal()"><div class="modal-content" onclick="event.stopPropagation()"><div class="modal-head"><div style="min-width:0;flex:1"><h2 id="modalSubject"></h2><p id="modalFrom" style="color:#8a8fb8;font-size:12px;margin-top:4px;word-break:break-all"></p></div><button class="modal-close" onclick="closeModal()">✕</button></div><div class="modal-body"><div class="tab-row" id="modalTabs"></div><div id="tabRendered"></div><div id="tabOtp" style="display:none"></div><div id="tabRaw" style="display:none"></div><div id="tabSource" style="display:none"></div></div></div></div>
<div class="toast" id="toast"></div>
<script>
let currentToken='',currentEmailAddress='',eventSource=null;
window.addEventListener('DOMContentLoaded',()=>{updateApiDocsHost();loadDomains();});
function updateApiDocsHost(){const host=window.location.origin;document.querySelectorAll('.curl-code').forEach(el=>{el.textContent=el.textContent.replace(/{HOST}/g,host)});}
async function loadDomains(){try{const res=await fetch('/domains');if(!res.ok)throw new Error('HTTP '+res.status);const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();console.error('domains not JSON',t.slice(0,200));return;}const data=await res.json();const domains=data['hydra:member']||[];if(domains.length>0){document.getElementById('domainSelect').innerHTML=domains.map(d=>'<option value="@'+d.domain+'">@'+d.domain+'</option>').join('');}}catch(e){console.error(e);}}
function toggleMenu(){document.getElementById('dropdown').classList.toggle('show');}
function showDashboard(){document.getElementById('dashboardSection').style.display='block';document.getElementById('apiSection').classList.remove('show');document.getElementById('menuDashboard').classList.add('active');document.getElementById('menuApi').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showApi(){document.getElementById('dashboardSection').style.display='none';document.getElementById('apiSection').classList.add('show');document.getElementById('menuApi').classList.add('active');document.getElementById('menuDashboard').classList.remove('active');document.getElementById('dropdown').classList.remove('show');}
function showToast(msg){const t=document.getElementById('toast');t.textContent=msg;t.style.display='block';setTimeout(()=>t.style.display='none',3000);}

// RANDOM KHUSUS: 4 HURUF + 1/2 ANGKA -> kiki23, puji4, sari7
function randomName(){
  // Pola CV biar kayak nama orang: budi, sari, rina, agus, rendi, santi
  const V=["a","i","u","e","o"];
  const C=["b","c","d","f","g","h","j","k","l","m","n","p","r","s","t","w","y","m","n","r"];
  let name="";
  const sylCount = Math.random() > 0.5 ? 2 : 3; // 2 syl = 4 huruf, 3 syl = 6 huruf
  for(let i=0;i<sylCount;i++){
    const c=C[Math.floor(Math.random()*C.length)];
    const v=V[Math.floor(Math.random()*V.length)];
    name+=c+v;
  }
  return name; // contoh: budi, sari, nuri, roni, santi, rendi
}


function copyTextToClipboard(text,msg){if(!text)return;navigator.clipboard.writeText(text).then(()=>showToast(msg||'📋 Disalin!')).catch(()=>showToast('❌ Gagal menyalin'));}
function copyCurrentEmail(){if(currentEmailAddress)copyTextToClipboard(currentEmailAddress,'📋 Email disalin!');}
async function createEmail(){
 const input=document.getElementById('emailInput');const domain=document.getElementById('domainSelect').value||'@badut.biz.id';
 // Kalo ketik ikuti ketikan, kalo kosong baru random
 let name=input.value.trim().toLowerCase().replace(/[^a-z0-9]/g,"");
 if(!name) name=randomName();
 const email=name+domain;
 const btn=document.getElementById('createBtn');btn.disabled=true;btn.textContent='Membuat...';
 try{
  const r1=await fetch('/accounts',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct1=r1.headers.get('content-type')||'';if(!ct1.includes('json')){const t=await r1.text();throw new Error('accounts returned HTML: '+t.slice(0,100));}
  const j1=await r1.json();if(!r1.ok && r1.status!== 409)throw new Error(j1.error||'Gagal buat akun');
  const r2=await fetch('/token',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({address:email,password:'Password123!'})});
  const ct2=r2.headers.get('content-type')||'';if(!ct2.includes('json')){const t=await r2.text();throw new Error('token returned HTML: '+t.slice(0,100));}
  const tokenData=await r2.json();
  currentToken=tokenData.token;currentEmailAddress=email;input.value=name;
  document.getElementById('currentEmail').innerHTML='📧 '+email+' <span style="opacity:.7">(Klik salin)</span>';document.getElementById('currentEmail').style.display='block';
  copyTextToClipboard(email,'✅ Email aktif & disalin!');loadMessages();setupSSE();
 }catch(e){showToast('❌ '+e.message);console.error(e);}btn.disabled=false;btn.textContent='Buat Email';
}
function setupSSE(){if(eventSource)eventSource.close();if(!currentToken)return;eventSource=new EventSource('/events?token='+encodeURIComponent(currentToken));eventSource.onmessage=function(ev){try{const d=JSON.parse(ev.data);if(d.count!==undefined){loadMessages();showToast('📩 Email baru!');}}catch{}};eventSource.onerror=function(){setTimeout(setupSSE,5000);};}
async function loadMessages(){
 if(!currentToken)return;const c=document.getElementById('messages');c.innerHTML='<div class="loading">⏳ Memuat...</div>';
 try{
  const res=await fetch('/messages',{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('messages HTML: '+t.slice(0,120));}
  const data=await res.json();const msgs=data['hydra:member']||[];if(msgs.length===0){c.innerHTML='<div class="empty">📭 Belum ada email</div>';return;}
  c.innerHTML=msgs.map(m=>{const time=new Date(m.createdAt).toLocaleString('id-ID');let otp=m.otpCode?'<div class="otp-badge">🔑 OTP: '+m.otpCode+'</div>':'';return '<div class="message" onclick="openMessage(\\'/'+m.id+'\\')"><div class="from">👤 '+(m.from.name||m.from.address)+'</div><div class="subject">📌 '+(m.subject||'(Tanpa Subjek)')+'</div><div class="preview">'+(m.intro||'').substring(0,100)+'...</div>'+otp+'<div class="time">🕐 '+time+'</div></div>';}).join('');
 }catch(e){c.innerHTML='<div class="empty">❌ Gagal: '+e.message+'</div>';}
}
async function openMessage(msgId){
 if(!currentToken)return;
 try{
  const res=await fetch('/messages'+msgId,{headers:{'Authorization':'Bearer '+currentToken}});
  const ct=res.headers.get('content-type')||'';if(!ct.includes('json')){const t=await res.text();throw new Error('message HTML: '+t.slice(0,120));}
  const msg=await res.json();
  document.getElementById('modalSubject').textContent='📧 '+(msg.subject||'(Tanpa Subjek)');document.getElementById('modalFrom').textContent='Dari: '+(msg.from.name||msg.from.address);
  document.getElementById('modalTabs').innerHTML='<button class="tab-btn active" onclick="showTab(event,\\'rendered\\')">📄 Gmail HTML</button><button class="tab-btn" onclick="showTab(event,\\'otp\\')">🔑 OTP</button><button class="tab-btn" onclick="showTab(event,\\'raw\\')">📝 Text</button><button class="tab-btn" onclick="showTab(event,\\'source\\')">🔍 Source</button>';
  const rc=document.getElementById('tabRendered');
  if(msg.html){const ifr=document.createElement('iframe');ifr.className='gmail-frame';rc.innerHTML='';rc.appendChild(ifr);const d=ifr.contentWindow.document;d.open();d.write('<!DOCTYPE html><html><head><meta charset=utf-8><meta name=viewport content=width=device-width,initial-scale=1><style>body{font-family:sans-serif;padding:16px;color:#222;background:#fff;line-height:1.6;word-break:break-word;overflow-wrap:anywhere}img{max-width:100%;height:auto}table{max-width:100%;overflow-x:auto;display:block}a{word-break:break-all}</style></head><body>'+msg.html+'</body></html>');d.close();}
  else{rc.innerHTML='<div style="background:#fff;color:#222;padding:16px;border-radius:12px;white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.text||'')+'</div>';}
  const oc=document.getElementById('tabOtp');let oh='';if(msg.otpCode){oh='<div style="text-align:center;padding:20px;background:rgba(0,230,118,0.1);border-radius:16px;border:1px dashed rgba(0,230,118,0.3)"><p style="color:#8a8fb8;font-size:13px">Kode OTP:</p><div style="font-size:34px;font-weight:800;color:#00e676;letter-spacing:6px;word-break:break-all">'+msg.otpCode+'</div><button class="btn" style="max-width:220px;margin-top:16px" onclick="copyTextToClipboard(\\''+msg.otpCode+'\\',\\'✅ OTP disalin!\\')">Copy OTP</button></div>';}else{oh='<p style="text-align:center;padding:28px;color:#8a8fb8">Tidak ada OTP</p>';}
  if(msg.verificationLinks&&msg.verificationLinks.length>0){oh+='<p style="margin:18px 0 8px;color:#8a8fb8;font-size:12px">🔗 Verification Links:</p>'+msg.verificationLinks.map(l=>'<div class="verification-link"><a href="'+l+'" target="_blank">'+l+'</a><button class="link-copy-btn" onclick="copyTextToClipboard(\\''+l+'\\',\\'✅ Link disalin!\\')">Copy</button></div>').join('');}
  oc.innerHTML=oh;
  document.getElementById('tabRaw').innerHTML='<pre style="white-space:pre-wrap;word-break:break-word">'+escapeHtml(msg.rawText||msg.text||'')+'</pre>';
  document.getElementById('tabSource').innerHTML='<div style="position:relative"><pre style="white-space:pre-wrap;word-break:break-all;max-height:460px;overflow:auto">'+escapeHtml(msg.rawHtml||msg.html||'')+'</pre><button class="copy-btn" onclick="copyTextToClipboard(this.parentElement.querySelector(\\'pre\\').textContent,\\'✅ Source disalin!\\')">Copy</button></div>';
  showTab(null,'rendered');document.getElementById('emailModal').classList.add('show');loadMessages();
 }catch(e){showToast('❌ '+e.message);}
}
function showTab(ev,name){document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));if(ev&&ev.target)ev.target.classList.add('active');else{const m={rendered:0,otp:1,raw:2,source:3}[name];const btn=document.querySelectorAll('.tab-btn')[m];if(btn)btn.classList.add('active');}document.getElementById('tabRendered').style.display=name==='rendered'?'block':'none';document.getElementById('tabOtp').style.display=name==='otp'?'block':'none';document.getElementById('tabRaw').style.display=name==='raw'?'block':'none';document.getElementById('tabSource').style.display=name==='source'?'block':'none';}
function escapeHtml(s){return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
function closeModal(){document.getElementById('emailModal').classList.remove('show');}
function copyCmd(btn){copyTextToClipboard(btn.parentElement.querySelector('pre').textContent,'✅ Command disalin!');}
document.addEventListener('click',(e)=>{const dd=document.getElementById('dropdown');const mb=document.querySelector('.menu-btn');if(!dd.contains(e.target)&&!mb.contains(e.target))dd.classList.remove('show');});
</script>
</body>
</html>`;
}


════════════════════════════════════════════════════════════
ARCHIVE COMPLETE - 3 files exported
Location: Mail-pro/
Exported: 10/29/2026, 2:01:04 PM
Source: CodeHub Repository
════════════════════════════════════════════════════════════