/* Copyright 2026 Rhett Creighton - Apache License 2.0
 *
 * Explorer "main" view: the self-contained /wallet HTML page. The controller
 * routes the request; this file owns the page HTML, CSS, and JS that fetches
 * /api/wallet client-side. */

#include "views/explorer_main_view.h"
#include "controllers/explorer_internal.h"

#include <stddef.h>
#include <stdint.h>

size_t explorer_view_wallet_page(uint8_t *r, size_t max)
{
    size_t off = 0;
    APPEND(off, r, max,
        "HTTP/1.1 200 OK\r\n"
        "Content-Type: text/html; charset=utf-8\r\n"
        "Connection: close\r\n\r\n"
        "<!DOCTYPE html><html><head><meta charset='utf-8'>"
        "<meta name='viewport' content='width=device-width,initial-scale=1'>"
        "<title>ZClassic23 Wallet</title>"
        "<style>"
        "*{margin:0;padding:0;box-sizing:border-box}"
        "body{background:#0d1117;color:#e6edf3;font-family:Inter,-apple-system,sans-serif;"
        "max-width:520px;margin:0 auto;padding:32px 24px;min-height:100vh}"
        ".hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}"
        ".hdr h1{font-size:14px;font-weight:600;color:#8b949e}"
        ".sync{font-size:12px;color:#3fb950}"
        ".sync.warn{color:#d29922}"
        ".balance{text-align:center;margin:24px 0 16px}"
        ".balance .amount{font-size:42px;font-weight:700;letter-spacing:-1px}"
        ".balance .amount:hover{cursor:help}"
        ".subs{display:flex;justify-content:center;gap:48px;margin-bottom:20px}"
        ".sub{text-align:center}"
        ".sub .label{font-size:12px;color:#8b949e;margin-bottom:2px}"
        ".sub .val{font-size:16px;font-weight:500}"
        ".actions{display:flex;justify-content:center;gap:12px;margin-bottom:16px}"
        "button{background:#21262d;color:#c9d1d9;border:1px solid #30363d;"
        "border-radius:6px;padding:8px 28px;font-size:14px;cursor:pointer}"
        "button:hover{background:#30363d}"
        ".panel{background:#161b22;border:1px solid #21262d;border-radius:8px;"
        "padding:16px;margin-bottom:16px;display:none}"
        ".panel.show{display:block}"
        ".panel label{font-size:12px;color:#8b949e;display:block;margin-bottom:4px}"
        ".addr{font-size:15px;font-family:monospace;color:#58a6ff;"
        "word-break:break-all;user-select:all;margin:8px 0}"
        "input{width:100%%;background:#0d1117;color:#c9d1d9;border:1px solid #30363d;"
        "border-radius:6px;padding:8px 12px;font-family:monospace;font-size:14px;"
        "margin-bottom:8px}"
        "hr{border:none;border-top:1px solid #21262d;margin:16px 0}"
        ".activity h2{font-size:14px;font-weight:600;color:#8b949e;margin-bottom:12px}"
        ".tx{padding:12px 0;border-bottom:1px solid #161b22}"
        ".tx:last-child{border:none}"
        ".tx .line1{display:flex;justify-content:space-between;align-items:baseline}"
        ".tx .amt{font-size:14px;font-weight:600;color:#3fb950}"
        ".tx .ago{font-size:12px;color:#484f58}"
        ".tx .detail{font-size:11px;color:#30363d;margin-top:2px}"
        ".empty{text-align:center;color:#484f58;font-size:13px;padding:24px 0}"
        ".status{font-size:11px;color:#484f58;font-family:monospace;"
        "margin-top:16px;text-align:center}"
        ".copied{color:#3fb950;font-size:12px;margin-left:8px}"
        "</style></head><body>");
    APPEND(off, r, max,
        "<div class='hdr'><h1>ZClassic23</h1><span class='sync' id='sync'>Loading...</span></div>"
        "<div class='balance'>"
        "<div class='amount' id='bal' title='Hover for full precision'>—</div>"
        "</div>"
        "<div class='subs'>"
        "<div class='sub'><div class='label'>Transparent</div><div class='val' id='tbal'>—</div></div>"
        "<div class='sub'><div class='label'>Shielded</div><div class='val' id='sbal'>—</div></div>"
        "</div>"
        "<div class='actions'>"
        "<button onclick='togglePanel(\"recv\")'>Receive</button>"
        "<button onclick='togglePanel(\"send\")'>Send</button>"
        "</div>"
        "<div class='panel' id='recv'>"
        "<label>Your Address</label>"
        "<div class='addr' id='addr'>—</div>"
        "<button onclick='copyAddr()'>Copy</button><span class='copied' id='copied'></span>"
        "</div>"
        "<div class='panel' id='send'>"
        "<label>Recipient</label>"
        "<input id='to' placeholder='t1... address'>"
        "<label>Amount</label>"
        "<input id='amt' placeholder='0.00' type='number' step='0.001'>"
        "<button onclick='doSend()'>Send</button>"
        "<div id='sendmsg' style='font-size:12px;color:#484f58;margin-top:8px'></div>"
        "</div>"
        "<hr>"
        "<div class='activity'>"
        "<h2>Activity</h2>"
        "<div id='txlist'><div class='empty'>Loading...</div></div>"
        "</div>"
        "<div class='status' id='status'></div>"
        "<script>");
    APPEND(off, r, max,
        "function fmt(z,d){var w=Math.floor(z/1e8),f=Math.abs(z%%1e8);"
        "if(d===3)return w+'.'+String(Math.floor(f/1e5)).padStart(3,'0');"
        "var s=w+'.'+String(f).padStart(8,'0');return s.replace(/0+$/,'').replace(/\\.$/,'.0')}"
        "function ago(t,now){var d=now-t;if(d<60)return'just now';"
        "if(d<3600)return Math.floor(d/60)+' min ago';"
        "if(d<86400)return Math.floor(d/3600)+' hours ago';"
        "return Math.floor(d/86400)+' days ago'}"
        "function togglePanel(id){var p=document.getElementById(id);"
        "var other=id==='recv'?'send':'recv';"
        "document.getElementById(other).classList.remove('show');"
        "p.classList.toggle('show')}"
        "function copyAddr(){var a=document.getElementById('addr').textContent;"
        "navigator.clipboard.writeText(a).then(function(){"
        "document.getElementById('copied').textContent='\\u2713 Copied';"
        "setTimeout(function(){document.getElementById('copied').textContent=''},2000)})}"
        "function doSend(){document.getElementById('sendmsg').textContent="
        "'Sending requires the node to be running with RPC enabled'}"
        "function update(){fetch('/api/wallet').then(r=>r.json()).then(function(d){"
        "var total=d.transparent+d.shielded;"
        "document.getElementById('bal').textContent=fmt(total,3)+' ZCL';"
        "document.getElementById('bal').title=fmt(total,8)+' ZCL (exact)';"
        "document.getElementById('tbal').textContent=fmt(d.transparent,3)+' ZCL';"
        "document.getElementById('sbal').textContent=d.shielded>0?fmt(d.shielded,3)+' ZCL':'\\u2014';"
        "document.getElementById('addr').textContent=d.address||'No wallet keys';"
        "var age=d.now-d.block_time;"
        "var sy=document.getElementById('sync');"
        "if(d.block_time===0){sy.textContent='\\u25cf No blocks';sy.className='sync warn'}"
        "else if(age<300){sy.textContent='\\u25cf Synced';sy.className='sync'}"
        "else if(age<3600){sy.textContent='\\u25cf '+Math.floor(age/60)+' min behind';sy.className='sync warn'}"
        "else{sy.textContent='\\u25cf '+Math.floor(age/3600)+' hours behind';sy.className='sync warn'}"
        "document.getElementById('status').textContent='Block '+d.height;"
        "var h='';"
        "if(d.activity.length===0)h='<div class=\"empty\">No transactions yet</div>';"
        "d.activity.forEach(function(tx){"
        "h+='<div class=\"tx\"><div class=\"line1\">';"
        "h+='<span class=\"amt\">\\u2193 Received '+fmt(tx.value,3)+' ZCL</span>';"
        "h+='<span class=\"ago\">'+ago(tx.time,d.now)+'</span></div>';"
        "h+='<div class=\"detail\">Block '+tx.height+' \\u00b7 confirmed</div></div>'});"
        "document.getElementById('txlist').innerHTML=h"
        "}).catch(function(){document.getElementById('sync').textContent='\\u25cf Offline';"
        "document.getElementById('sync').className='sync warn'})}"
        "update();setInterval(update,3000)");
    APPEND(off, r, max,
        "</script></body></html>");
    return off;
}
