// Temp Mail Worker + Dashboard + Cron Clean + Gmail-style HTML Render

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);
        const method = request.method;
        const path = url.pathname;
        
        if (path === "/" && method === "GET") {
            return new Response(renderPage(), {
                headers: { "Content-Type": "text/html; charset=UTF-8" }
            });
        }
        
        if (path === "/events" && method === "GET") {
            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();
                    const interval = setInterval(sendEvent, 3000);
                    ctx.waitUntil(new Promise(() => {}));
                }
            });
            
            return new Response(stream, {
                headers: {
                    "Content-Type": "text/event-stream",
                    "Cache-Control": "no-cache",
                    "Connection": "keep-alive"
                }
            });
        }
        
        if (path === "/domains" && method === "GET") {
            const { results } = await env.MAIL_DB.prepare("SELECT * FROM domains WHERE is_active = 1").all();
            return json({"hydra:member": results.map(r => ({domain: r.domain, id: r.id, isActive: true, isPrivate: false, createdAt: r.created_at, updatedAt: r.created_at}))});
        }
        
        if (path === "/accounts" && method === "POST") {
            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"}, 409);
            }
        }
        
        if (path === "/token" && method === "POST") {
            const body = await request.json().catch(() => ({}));
            const address = body.address;
            const password = body.password || "Password123!";
            
            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});
        }
        
        if (path === "/messages" && method === "GET") {
            const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
            const account = verifyToken(token);
            if (!account) return json({error: "Invalid token"}, 401);
            
            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
            });
        }
        
        const msgMatch = path.match(/^\/messages\/([a-zA-Z0-9]+)$/);
        if (msgMatch && method === "GET") {
            const msgId = msgMatch[1];
            const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
            const account = verifyToken(token);
            if (!account) return json({error: "Invalid token"}, 401);
            
            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
            });
        }
        
        if (msgMatch && method === "DELETE") {
            const msgId = msgMatch[1];
            const token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
            const account = verifyToken(token);
            if (!account) return json({error: "Invalid token"}, 401);
            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});
        }
        
        if (path === "/receive" && method === "POST") {
            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 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 token = (request.headers.get("Authorization") || "").replace("Bearer ", "");
            const account = verifyToken(token);
            if (!account) return json({error: "Invalid token"}, 401);
            
            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});
        }
        
        return json({error: "Not found"}, 404);
    },

    // Poin 1: Cron Trigger Auto-Cleanup
    async scheduled(event, env, ctx) {
        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) {
        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"}});
}

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, (match, hex) => String.fromCharCode(parseInt(hex, 16)))
        .replace(/=3D/g, '=')
        .replace(/=20/g, ' ')
        .replace(/=0A/g, '\n')
        .replace(/=C2=A9/g, '©')
        .replace(/=E2=80=99/g, '\'')
        .replace(/=E2=80=9C/g, '"')
        .replace(/=E2=80=9D/g, '"')
        .replace(/=E2=80=93/g, '-')
        .replace(/=E2=80=94/g, '—')
        .replace(/=C2=AB/g, '«')
        .replace(/=C2=BB/g, '»')
        .replace(/=C2=A0/g, ' ')
        .replace(/=C3=A9/g, 'é')
        .replace(/=C3=A8/g, 'è')
        .replace(/=C3=A7/g, 'ç')
        .replace(/=C3=A0/g, 'à')
        .replace(/=C3=B9/g, 'ù')
        .replace(/=C3=A2/g, 'â')
        .replace(/=C3=AA/g, 'ê')
        .replace(/=C3=AE/g, 'î')
        .replace(/=C3=B4/g, 'ô')
        .replace(/=C3=BB/g, 'û');
}

function parseRawEmail(raw) {
    let text = "";
    let html = "";
    
    const textMatch = raw.match(/Content-Type: text\/plain[\s\S]*?(?=--[a-zA-Z0-9]+|Content-Type: text\/html|$)/i);
    if (textMatch) {
        text = textMatch[0]
            .replace(/Content-Type:[^\n]+/gi, '')
            .replace(/Content-Transfer-Encoding:[^\n]+/gi, '')
            .replace(/Content-Disposition:[^\n]+/gi, '')
            .trim();
        text = decodeQuotedPrintable(text);
    }
    
    const htmlMatch = raw.match(/Content-Type: text\/html[\s\S]*?(?=--[a-zA-Z0-9]+|$)/i);
    if (htmlMatch) {
        html = htmlMatch[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 parts = raw.split(/\r?\n\r?\n/);
        text = decodeQuotedPrintable(parts.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();
    
    // Deteksi OTP Presisi
    let otpCode = null;
    const otpPatterns = [
        /(?: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 pattern of otpPatterns) {
        const match = searchContent.match(pattern);
        if (match && match[1]) {
            const code = match[1];
            if (!/^(19|20)\d{2}$/.test(code)) { 
                otpCode = code; 
                break; 
            }
        }
    }
    
    const links = [];
    const linkRegex = /https?:\/\/[^\s"'<>]+/g;
    let linkMatch;
    while ((linkMatch = linkRegex.exec(searchContent)) !== null) {
        const url = linkMatch[0].replace(/[.,;:]+$/, '');
        if (url.length > 20 && url.length < 1000 && /verify|verification|token|confirm|activate|reset|password|email/i.test(url)) {
            links.push(url);
        }
    }
    
    if (decodedHtml) {
        const htmlLinks = decodedHtml.match(/href=["']([^"']+)["']/gi) || [];
        for (const hl of htmlLinks) {
            const url = hl.replace(/href=["']/gi, '').replace(/["']$/g, '');
            if (url.startsWith('http') && /verify|verification|token|confirm|activate|reset|password|email/i.test(url)) {
                if (!links.includes(url)) links.push(url);
            }
        }
    }
    
    return {cleanText, decodedHtml, otpCode, links};
}

async function saveEmail(env, ctx, emailData) {
    const toAddress = emailData.to;
    const fromAddress = emailData.from || "unknown@example.com";
    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};
    
    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();

    // Poin 4: Dynamic Outbound Webhook (Opsional)
    if (emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL) {
        const targetWebhook = emailData.webhookUrl || env.GLOBAL_WEBHOOK_URL;
        ctx.waitUntil(
            fetch(targetWebhook, {
                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
    }};
}

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</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0a15; color: #fff; min-height: 100vh; }
        .navbar { position: fixed; top: 0; left: 0; right: 0; height: 60px; background: #12122a; display: flex; align-items: center; padding: 0 20px; z-index: 100; border-bottom: 1px solid #1e1e3a; }
        .menu-btn { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 8px 12px; border-radius: 8px; }
        .menu-btn:hover { background: #1e1e3a; }
        .navbar-brand { font-weight: bold; font-size: 18px; margin-left: 15px; }
        .dropdown { position: fixed; top: 60px; left: 10px; background: #12122a; border: 1px solid #1e1e3a; border-radius: 12px; padding: 10px; display: none; z-index: 200; min-width: 200px; }
        .dropdown.show { display: block; }
        .dropdown a { display: flex; align-items: center; gap: 12px; padding: 12px 15px; color: #fff; text-decoration: none; border-radius: 8px; font-size: 14px; cursor: pointer; }
        .dropdown a:hover { background: #1e1e3a; }
        .dropdown a.active { background: #e94560; }
        .main { padding: 80px 20px 30px; max-width: 800px; margin: 0 auto; }
        .email-section { background: #12122a; border-radius: 16px; padding: 30px; margin-bottom: 30px; border: 1px solid #1e1e3a; }
        .email-title { font-size: 22px; margin-bottom: 20px; text-align: center; }
        .email-box { display: flex; gap: 10px; margin-bottom: 15px; }
        .email-input { flex: 1; padding: 15px 18px; border: 2px solid #1e1e3a; border-radius: 12px; background: #0a0a15; color: #fff; font-size: 16px; outline: none; }
        .email-input:focus { border-color: #e94560; }
        .domain-select { padding: 15px; background: #1e1e3a; border-radius: 12px; border: 1px solid #2d2d50; color: #00e676; font-size: 15px; font-weight: bold; outline: none; cursor: pointer; }
        .btn { width: 100%; padding: 16px; background: #e94560; color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: bold; cursor: pointer; }
        .btn:hover { background: #c73550; }
        .btn:disabled { background: #444; cursor: not-allowed; }
        .current-email { text-align: center; margin-top: 15px; padding: 12px; background: #0a0a15; border-radius: 10px; color: #00e676; font-weight: bold; display: none; }
        .messages-section { background: #12122a; border-radius: 16px; padding: 30px; border: 1px solid #1e1e3a; }
        .messages-title { font-size: 20px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
        .refresh-btn { padding: 8px 15px; background: #1e1e3a; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; }
        .refresh-btn:hover { background: #2d2d50; }
        .message { background: #1a1a35; border-radius: 12px; padding: 18px; margin-bottom: 12px; cursor: pointer; border: 1px solid #1e1e3a; }
        .message:hover { background: #1e1e40; border-color: #e94560; }
        .message .from { font-weight: bold; margin-bottom: 6px; font-size: 15px; }
        .message .subject { color: #e94560; font-weight: bold; margin-bottom: 6px; }
        .message .preview { color: #777; font-size: 13px; }
        .message .time { color: #555; font-size: 11px; margin-top: 8px; }
        .otp-badge { display: inline-block; background: #00c853; color: #fff; padding: 4px 10px; border-radius: 5px; font-size: 12px; font-weight: bold; margin-top: 8px; }
        .empty { text-align: center; color: #555; padding: 50px 20px; font-size: 16px; }
        .loading { text-align: center; color: #888; padding: 30px; }
        .toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); background: #00c853; color: #fff; padding: 14px 28px; border-radius: 30px; font-weight: bold; display: none; z-index: 500; }
        .api-section { display: none; }
        .api-section.show { display: block; }
        .endpoint { background: #12122a; border-radius: 12px; margin-bottom: 20px; border: 1px solid #1e1e3a; overflow: hidden; }
        .endpoint-header { padding: 15px 20px; background: #1a1a35; display: flex; align-items: center; gap: 10px; }
        .method { padding: 4px 10px; border-radius: 5px; font-weight: bold; font-size: 12px; }
        .method.get { background: #00c853; color: #fff; }
        .method.post { background: #2979ff; color: #fff; }
        .method.delete { background: #ff1744; color: #fff; }
        .path { font-weight: bold; color: #fff; }
        .endpoint-body { padding: 20px; }
        .endpoint-body p { color: #888; margin-bottom: 10px; }
        .code-wrap { position: relative; }
        pre { background: #0a0a15; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 13px; color: #00e676; margin-bottom: 10px; }
        .copy-btn { position: absolute; top: 10px; right: 10px; padding: 5px 10px; background: #e94560; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 11px; }
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); display: none; z-index: 400; justify-content: center; align-items: center; padding: 20px; }
        .modal.show { display: flex; }
        .modal-content { background: #12122a; border-radius: 16px; max-width: 850px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 25px; border: 1px solid #1e1e3a; }
        .modal-close { float: right; background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }
        .modal-close:hover { color: #fff; }
        .tab-btn { padding: 8px 15px; background: #1a1a35; color: #888; border: 1px solid #1e1e3a; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: bold; margin-right: 5px; }
        .tab-btn.active { background: #e94560; color: #fff; border-color: #e94560; }
        .verification-link { background: #1a1a35; padding: 12px; border-radius: 8px; margin: 10px 0; word-break: break-all; font-size: 13px; color: #2979ff; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
        .link-copy-btn { padding: 5px 10px; background: #e94560; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 11px; white-space: nowrap; }
        iframe.gmail-frame { width: 100%; height: 480px; border: none; background: #ffffff; border-radius: 8px; margin-top: 15px; }
        @media (max-width: 768px) { .main { padding: 70px 15px 20px; } .email-box { flex-direction: column; } .domain-select { width: 100%; } }
    </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..." value="">
                    <!-- Poin 6: Dynamic Multi-domain selector -->
                    <select id="domainSelect" class="domain-select">
                        <option value="">⏳ Memuat domain...</option>
                    </select>
                </div>
                <button class="btn" id="createBtn" onclick="createEmail()">Buat Email</button>
                <div class="current-email" id="currentEmail"></div>
            </div>
            <div class="messages-section">
                <div class="messages-title">
                    <span>📥 Email Masuk</span>
                    <button class="refresh-btn" onclick="loadMessages()">🔄 Refresh</button>
                </div>
                <div class="messages" id="messages">
                    <div class="empty">👆 Buat email dulu untuk mulai</div>
                </div>
            </div>
        </div>
        <div class="api-section" id="apiSection">
            <h1 style="text-align:center;margin-bottom:30px;">🔧 Temp Mail API</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 domain</p><div class="code-wrap"><pre>curl -X GET "https://domain.com/domains"</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">/accounts</span></div><div class="endpoint-body"><p>Buat akun</p><div class="code-wrap"><pre>curl -X POST "https://domain.com/accounts" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"nama@domain.com","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 & token</p><div class="code-wrap"><pre>curl -X POST "https://domain.com/token" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"nama@domain.com","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 email</p><div class="code-wrap"><pre>curl -X GET "https://domain.com/messages" \\
  -H "Authorization: Bearer TOKEN"</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/:id</span></div><div class="endpoint-body"><p>Baca email</p><div class="code-wrap"><pre>curl -X GET "https://domain.com/messages/MSG_ID" \\
  -H "Authorization: Bearer TOKEN"</pre><button class="copy-btn" onclick="copyCmd(this)">Copy</button></div></div></div>
        </div>
    </div>

    <div class="modal" id="emailModal" onclick="closeModal()">
        <div class="modal-content" onclick="event.stopPropagation()">
            <button class="modal-close" onclick="closeModal()">✕</button>
            <h2 id="modalSubject"></h2>
            <p style="color:#888;margin:10px 0;" id="modalFrom"></p>
            <div style="display:flex;gap:5px;margin:15px 0;flex-wrap:wrap;" id="modalTabs"></div>
            <!-- Rendered Gmail Style -->
            <div id="tabRendered" style="display:block;"></div>
            <div id="tabOtp" style="display:none;"></div>
            <div id="tabRaw" style="display:none;"></div>
            <!-- Full Source Code Tab -->
            <div id="tabSource" style="display:none;"></div>
        </div>
    </div>
    
    <div class="toast" id="toast"></div>

    <script>
        let currentToken = '';
        let eventSource = null;
        
        window.addEventListener('DOMContentLoaded', () => {
            loadDomains();
            if ("Notification" in window && Notification.permission === "default") {
                Notification.requestPermission();
            }
        });

        // Poin 6: Load Dynamic Domains
        async function loadDomains() {
            const select = document.getElementById('domainSelect');
            try {
                const res = await fetch('/domains');
                const data = await res.json();
                const domains = data['hydra:member'] || [];
                if (domains.length > 0) {
                    select.innerHTML = domains.map(d => '<option value="@' + d.domain + '">@' + d.domain + '</option>').join('');
                } else {
                    select.innerHTML = '<option value="@cair.eu.cc">@cair.eu.cc</option>';
                }
            } catch (e) {
                select.innerHTML = '<option value="@cair.eu.cc">@cair.eu.cc</option>';
            }
        }

        // Poin 5: Audio Notification System (Web Audio API)
        function playNotificationSound() {
            try {
                const ctx = new (window.AudioContext || window.webkitAudioContext)();
                const osc = ctx.createOscillator();
                const gain = ctx.createGain();
                osc.type = 'sine';
                osc.frequency.setValueAtTime(587.33, ctx.currentTime);
                osc.frequency.exponentialRampToValueAtTime(880, ctx.currentTime + 0.15);
                gain.gain.setValueAtTime(0.1, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.3);
                osc.connect(gain);
                gain.connect(ctx.destination);
                osc.start();
                osc.stop(ctx.currentTime + 0.3);
            } catch(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 toast = document.getElementById('toast');
            toast.textContent = msg; toast.style.display = 'block';
            setTimeout(() => { toast.style.display = 'none'; }, 3000);
        }
        function randomName() {
            const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
            let r = '';
            for (let i = 0; i < 10; i++) r += chars[Math.floor(Math.random() * chars.length)];
            return r;
        }

        async function createEmail() {
            const input = document.getElementById('emailInput');
            const domain = document.getElementById('domainSelect').value;
            const name = input.value.trim() || randomName();
            const email = name + domain;
            const btn = document.getElementById('createBtn');
            btn.disabled = true; btn.textContent = 'Membuat...';
            try {
                await fetch('/accounts', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({address: email, password: 'Password123!'})});
                const tokenRes = await fetch('/token', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({address: email, password: 'Password123!'})});
                const tokenData = await tokenRes.json();
                currentToken = tokenData.token;
                input.value = name;
                document.getElementById('currentEmail').textContent = '📧 ' + email;
                document.getElementById('currentEmail').style.display = 'block';
                showToast('✅ Email berhasil dibuat!');
                loadMessages();
                setupSSE();
            } catch (e) { showToast('❌ ' + e.message); }
            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(event) {
                const data = JSON.parse(event.data);
                if (data.count !== undefined) { 
                    loadMessages(); 
                    showToast('📩 Email baru masuk!'); 
                    
                    // Poin 5: Trigger Audio & Push Notification
                    playNotificationSound();
                    if ("Notification" in window && Notification.permission === "granted") {
                        new Notification("📧 Email Baru Masuk!", {
                            body: "Pesan atau Kode OTP baru telah diterima di Temp Mail.",
                            icon: "https://fav.farm/📧"
                        });
                    }
                }
            };
            eventSource.onerror = function() { setTimeout(setupSSE, 5000); };
        }

        async function loadMessages() {
            if (!currentToken) return;
            const container = document.getElementById('messages');
            container.innerHTML = '<div class="loading">⏳ Memuat email...</div>';
            try {
                const res = await fetch('/messages', {headers: {'Authorization': 'Bearer ' + currentToken}});
                const data = await res.json();
                const messages = data['hydra:member'] || [];
                if (messages.length === 0) { container.innerHTML = '<div class="empty">📭 Belum ada email masuk</div>'; return; }
                container.innerHTML = messages.map(m => {
                    const time = new Date(m.createdAt).toLocaleString('id-ID');
                    let otpHtml = '';
                    if (m.otpCode) otpHtml = '<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>' +
                        otpHtml + '<div class="time">🕐 ' + time + '</div></div>';
                }).join('');
            } catch (e) { container.innerHTML = '<div class="empty">❌ Gagal memuat</div>'; }
        }

        async function openMessage(msgId) {
            if (!currentToken) return;
            try {
                const res = await fetch('/messages' + msgId, {headers: {'Authorization': 'Bearer ' + currentToken}});
                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" id="btnRendered" onclick="showTab(event, \\'rendered\\')">📄 Gmail HTML</button>' +
                    '<button class="tab-btn" id="btnOtp" onclick="showTab(event, \\'otp\\')">🔑 OTP</button>' +
                    '<button class="tab-btn" id="btnRaw" onclick="showTab(event, \\'raw\\')">📝 Text</button>' +
                    '<button class="tab-btn" id="btnSource" onclick="showTab(event, \\'source\\')">🔍 Source</button>';
                
                // Tampilan Gmail-style Rendered HTML menggunakan iframe terisolasi
                const renderedContainer = document.getElementById('tabRendered');
                if (msg.html && msg.html.length > 0) {
                    const iframe = document.createElement('iframe');
                    iframe.className = 'gmail-frame';
                    renderedContainer.innerHTML = '';
                    renderedContainer.appendChild(iframe);
                    const iframeDoc = iframe.contentWindow.document;
                    iframeDoc.open();
                    iframeDoc.write(\`<!DOCTYPE html><html><head><meta charset="utf-8"><style>body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;margin:0;padding:20px;color:#222;background:#fff;line-height:1.5;}img{max-width:100%!important;height:auto!important;}table{max-width:100%!important;}a{color:#1a73e8;}</style></head><body>\${msg.html}</body></html>\`);
                    iframeDoc.close();
                } else if (msg.text) {
                    renderedContainer.innerHTML = '<div style="background:#fff;color:#222;padding:20px;border-radius:8px;white-space:pre-wrap;font-family:sans-serif;margin-top:15px;line-height:1.5;">' + escapeHtml(msg.text) + '</div>';
                } else {
                    renderedContainer.innerHTML = '<p style="color:#555;padding:20px;">(Email kosong)</p>';
                }
                
                // Tab OTP
                const otpContainer = document.getElementById('tabOtp');
                let otpHtml = '';
                if (msg.otpCode) {
                    otpHtml = '<div style="text-align:center;padding:20px;">' +
                        '<p style="color:#888;margin-bottom:10px;">Kode OTP Terdeteksi:</p>' +
                        '<div style="font-size:36px;font-weight:bold;color:#00e676;letter-spacing:8px;">' + msg.otpCode + '</div>' +
                        '<button class="btn" style="margin-top:15px;max-width:200px;display:inline-block;" onclick="copyOtp(\\'/' + msg.otpCode + '\\')">Copy OTP</button></div>';
                } else {
                    otpHtml = '<p style="color:#555;text-align:center;padding:30px;">Tidak ada OTP terdeteksi</p>';
                }
                if (msg.verificationLinks && msg.verificationLinks.length > 0) {
                    otpHtml += '<p style="margin:15px 0 5px;color:#888;">🔗 Verification Links:</p>' +
                        msg.verificationLinks.map(link =>
                            '<div class="verification-link"><a href="' + link + '" target="_blank" style="flex:1;word-break:break-all;">' + link + '</a>' +
                            '<button class="link-copy-btn" onclick="copyLink(\\'/' + link + '\\')">Copy</button></div>'
                        ).join('');
                }
                otpContainer.innerHTML = otpHtml;
                
                // Tab Text Raw
                const rawContainer = document.getElementById('tabRaw');
                rawContainer.innerHTML = '<pre style="white-space:pre-wrap;font-family:monospace;font-size:13px;margin-top:15px;">' + escapeHtml(msg.rawText || msg.text || '') + '</pre>';
                
                // Tab Source Code Full
                const sourceContainer = document.getElementById('tabSource');
                const fullSourceCode = msg.rawHtml || msg.html || msg.rawText || msg.text || '';
                sourceContainer.innerHTML = '<div class="code-wrap" style="margin-top:15px;"><pre style="white-space:pre-wrap;font-family:monospace;font-size:12px;max-height:450px;overflow:auto;">' + escapeHtml(fullSourceCode) + '</pre><button class="copy-btn" onclick="copySource(this)">Copy Full Source</button></div>';
                
                showTab(null, 'rendered');
                document.getElementById('emailModal').classList.add('show');
                loadMessages();
            } catch (e) { showToast('❌ Gagal buka email'); }
        }

        function showTab(event, tabName) {
            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
            if (event && event.target) event.target.classList.add('active');
            else {
                const btn = document.getElementById('btn' + tabName.charAt(0).toUpperCase() + tabName.slice(1));
                if (btn) btn.classList.add('active');
            }
            document.getElementById('tabRendered').style.display = tabName === 'rendered' ? 'block' : 'none';
            document.getElementById('tabOtp').style.display = tabName === 'otp' ? 'block' : 'none';
            document.getElementById('tabRaw').style.display = tabName === 'raw' ? 'block' : 'none';
            document.getElementById('tabSource').style.display = tabName === 'source' ? 'block' : 'none';
        }

        function escapeHtml(str) {
            return (str || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
        }
        function copyOtp(code) { navigator.clipboard.writeText(code.replace(/^\\//, '')).then(() => showToast('✅ OTP berhasil disalin!')); }
        function copyLink(link) { navigator.clipboard.writeText(link.replace(/^\\//, '')).then(() => showToast('✅ Link berhasil disalin!')); }
        function copySource(btn) {
            const pre = btn.parentElement.querySelector('pre');
            navigator.clipboard.writeText(pre.textContent).then(() => {
                btn.textContent = '✅ Copied!';
                setTimeout(() => { btn.textContent = 'Copy Full Source'; }, 2000);
            });
        }
        function closeModal() { document.getElementById('emailModal').classList.remove('show'); }
        function copyCmd(btn) {
            const pre = btn.parentElement.querySelector('pre');
            navigator.clipboard.writeText(pre.textContent).then(() => {
                btn.textContent = '✅ Copied!';
                setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
            });
        }
    </script>
</body>
</html>`;
}