// Temp Mail API + Dashboard + API Docs
// Quoted-printable decoder + HTML rendering + OTP detection

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, 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, {to: body.to, from: body.from, fromName: body.from_name || body.fromName, subject: body.subject, text: body.text, html: body.html});
            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);
    },
    
    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, {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 = "";
    
    // Cari text/plain section
    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);
    }
    
    // Cari text/html section
    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 || "");
    
    cleanText = cleanText.replace(/--[a-zA-Z0-9]+/g, '');
    cleanText = cleanText.replace(/Content-Type:[^\n]+/gi, '');
    cleanText = cleanText.replace(/Content-Transfer-Encoding:[^\n]+/gi, '');
    cleanText = cleanText.trim();
    
    let otpCode = null;
    const otpPatterns = [
        /(?:OTP|otp|One.?Time.?Password|verification code|verify code|kode verifikasi|kode OTP|kode otp|verification token)[:\s]*([0-9]{4,8})/i,
        /(?:verification|verify|otp|code)[:\s]*([0-9]{4,8})/i,
        /(?:kode|code|otp)[:\s]*([A-Z0-9]{4,8})/i
    ];
    
    for (const pattern of otpPatterns) {
        const match = cleanText.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(cleanText)) !== 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, 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();
    
    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</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 { padding: 15px 18px; background: #1e1e3a; border-radius: 12px; display: flex; align-items: center; color: #888; font-size: 14px; white-space: nowrap; }
        .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: 800px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 30px; 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; }
        .email-body { margin-top: 20px; line-height: 1.6; }
        .email-body img { max-width: 100%; height: auto; }
        .email-body a { color: #2979ff; word-break: break-all; }
        .email-body table { max-width: 100%; }
        @media (max-width: 768px) { .main { padding: 70px 15px 20px; } .email-box { flex-direction: column; } .domain { justify-content: center; } }
    </style>
</head>
<body>
    <div class="navbar">
        <button class="menu-btn" onclick="toggleMenu()">☰</button>
        <span class="navbar-brand">📧 Temp Mail</span>
    </div>
    <div class="dropdown" id="dropdown">
        <a onclick="showDashboard()" class="active" id="menuDashboard">📥 Dashboard</a>
        <a onclick="showApi()" id="menuApi">🔧 API</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="">
                    <span class="domain">@cair.eu.cc</span>
                </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://cair.eu.cc/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://cair.eu.cc/accounts" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"nama@cair.eu.cc","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://cair.eu.cc/token" \\
  -H "Content-Type: application/json" \\
  -d '{"address":"nama@cair.eu.cc","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://cair.eu.cc/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://cair.eu.cc/messages/MSG_ID" \\
  -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 delete">DELETE</span><span class="path">/messages/:id</span></div><div class="endpoint-body"><p>Hapus email</p><div class="code-wrap"><pre>curl -X DELETE "https://cair.eu.cc/messages/MSG_ID" \\
  -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">/me</span></div><div class="endpoint-body"><p>Info akun</p><div class="code-wrap"><pre>curl -X GET "https://cair.eu.cc/me" \\
  -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 post">POST</span><span class="path">/receive</span></div><div class="endpoint-body"><p>Kirim email</p><div class="code-wrap"><pre>curl -X POST "https://cair.eu.cc/receive" \\
  -H "Content-Type: application/json" \\
  -d '{"to":"nama@cair.eu.cc","from":"sender@gmail.com","subject":"Test","text":"Hello"}'</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>
            <div id="tabRendered" style="display:block;"></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 class="toast" id="toast"></div>
    <script>
        let currentToken = '';
        let eventSource = null;
        
        function toggleMenu() { document.getElementById('dropdown').classList.toggle('show'); }
        document.addEventListener('click', function(e) {
            const dropdown = document.getElementById('dropdown');
            const menuBtn = document.querySelector('.menu-btn');
            if (!dropdown.contains(e.target) && !menuBtn.contains(e.target)) dropdown.classList.remove('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 name = input.value.trim() || randomName();
            const email = name + '@cair.eu.cc';
            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!'); }
            };
            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\\')">📄 Rendered</button>' +
                    '<button class="tab-btn" id="btnOtp" onclick="showTab(event, \\'otp\\')">🔑 OTP</button>' +
                    '<button class="tab-btn" id="btnRaw" onclick="showTab(event, \\'raw\\')">📝 Raw</button>' +
                    '<button class="tab-btn" id="btnSource" onclick="showTab(event, \\'source\\')">🔍 Source</button>';
                
                // Rendered HTML (seperti di Gmail)
                const renderedContainer = document.getElementById('tabRendered');
                if (msg.html && msg.html.length > 0) {
                    renderedContainer.innerHTML = '<div class="email-body">' + msg.html + '</div>';
                } else if (msg.text) {
                    renderedContainer.innerHTML = '<pre class="email-body" style="white-space:pre-wrap;font-family:inherit;">' + msg.text.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
                } else {
                    renderedContainer.innerHTML = '<p style="color:#555;">(Email kosong)</p>';
                }
                
                // OTP Tab
                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.substring(0, 100) + '...</a>' +
                            '<button class="link-copy-btn" onclick="copyLink(\\'' + link + '\\')">Copy</button></div>'
                        ).join('');
                }
                otpContainer.innerHTML = otpHtml;
                
                // Raw Tab (text mentah)
                const rawContainer = document.getElementById('tabRaw');
                rawContainer.innerHTML = '<pre style="white-space:pre-wrap;font-family:monospace;font-size:13px;">' + 
                    (msg.rawText || msg.text || '').replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
                
                // Source Tab (HTML lengkap)
                const sourceContainer = document.getElementById('tabSource');
                if (msg.rawHtml) {
                    sourceContainer.innerHTML = '<pre style="white-space:pre-wrap;font-family:monospace;font-size:12px;max-height:400px;overflow:auto;">' + 
                        msg.rawHtml.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
                } else if (msg.html) {
                    sourceContainer.innerHTML = '<pre style="white-space:pre-wrap;font-family:monospace;font-size:12px;max-height:400px;overflow:auto;">' + 
                        msg.html.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
                } else {
                    sourceContainer.innerHTML = '<p style="color:#555;">Tidak ada HTML source</p>';
                }
                
                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 copyOtp(code) { navigator.clipboard.writeText(code).then(() => showToast('✅ OTP berhasil disalin!')); }
        function copyLink(link) { navigator.clipboard.writeText(link).then(() => showToast('✅ Link berhasil disalin!')); }
        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>`;
}