const app = document.getElementById('app');

let pendingMnemonic = null; // held briefly in renderer memory during onboarding only
let accounts = null;

async function boot() {
  const hasKeystore = await window.macu.hasKeystore();
  hasKeystore ? renderUnlock() : renderWelcome();
}

// ---------- Welcome / choose create vs import ----------
function renderWelcome() {
  app.innerHTML = `
    <div class="center-screen">
      <div class="card">
        <h1 class="serif">Welcome to macu</h1>
        <p class="sub">A non-custodial wallet. Your keys are generated and encrypted on this device only — macu never sees them, and there's no account recovery if you lose your recovery phrase and password.</p>
        <button class="btn btn-primary" id="btn-create">Create a new wallet</button>
        <button class="btn btn-ghost" id="btn-import">Import an existing wallet</button>
      </div>
    </div>`;
  document.getElementById('btn-create').onclick = startCreate;
  document.getElementById('btn-import').onclick = renderImport;
}

// ---------- Create: generate + show backup phrase ----------
async function startCreate() {
  pendingMnemonic = await window.macu.generateMnemonic();
  renderBackup();
}

function renderBackup() {
  const words = pendingMnemonic.split(' ');
  app.innerHTML = `
    <div class="center-screen">
      <div class="card" style="max-width:560px;">
        <h1 class="serif">Your recovery phrase</h1>
        <p class="sub">Write these 24 words down in order and store them somewhere safe and offline. Anyone with this phrase can access your funds on every chain — including you, if you lose it.</p>
        <div class="warning">macu cannot recover this for you. There is no "forgot password" for a recovery phrase.</div>
        <div class="mnemonic-grid">
          ${words.map((w, i) => `<div class="mnemonic-word"><span class="idx">${i + 1}</span>${w}</div>`).join('')}
        </div>
        <button class="btn btn-primary" id="btn-saved">I've saved it — continue</button>
      </div>
    </div>`;
  document.getElementById('btn-saved').onclick = renderSetPassword;
}

// ---------- Import: paste existing phrase ----------
function renderImport() {
  app.innerHTML = `
    <div class="center-screen">
      <div class="card">
        <h1 class="serif">Import wallet</h1>
        <p class="sub">Enter your existing 12 or 24-word recovery phrase, separated by spaces.</p>
        <textarea id="mnemonic-input" rows="4" style="width:100%;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg-panel-2);font-family:'Inter',sans-serif;font-size:13px;margin-bottom:8px;"></textarea>
        <div class="error" id="import-error"></div>
        <button class="btn btn-primary" id="btn-continue">Continue</button>
        <button class="link-btn" id="btn-back">Back</button>
      </div>
    </div>`;
  document.getElementById('btn-back').onclick = renderWelcome;
  document.getElementById('btn-continue').onclick = () => {
    const value = document.getElementById('mnemonic-input').value.trim();
    if (value.split(/\s+/).length < 12) {
      document.getElementById('import-error').textContent = 'That phrase looks too short — check the word count.';
      return;
    }
    pendingMnemonic = value;
    renderSetPassword();
  };
}

// ---------- Set a password to encrypt the phrase at rest ----------
function renderSetPassword() {
  app.innerHTML = `
    <div class="center-screen">
      <div class="card">
        <h1 class="serif">Set a password</h1>
        <p class="sub">This encrypts your recovery phrase on this device. You'll need it every time you open macu.</p>
        <input type="password" id="pw1" placeholder="Password (12+ characters recommended)">
        <input type="password" id="pw2" placeholder="Confirm password">
        <div class="error" id="pw-error"></div>
        <button class="btn btn-primary" id="btn-finish">Create wallet</button>
      </div>
    </div>`;
  document.getElementById('btn-finish').onclick = async () => {
    const pw1 = document.getElementById('pw1').value;
    const pw2 = document.getElementById('pw2').value;
    const errEl = document.getElementById('pw-error');
    if (pw1.length < 8) { errEl.textContent = 'Use at least 8 characters.'; return; }
    if (pw1 !== pw2) { errEl.textContent = 'Passwords do not match.'; return; }
    try {
      accounts = await window.macu.createWallet(pendingMnemonic, pw1);
      pendingMnemonic = null; // drop it from renderer memory as soon as we're done with it
      renderDashboard();
    } catch (e) {
      errEl.textContent = e.message;
    }
  };
}

// ---------- Unlock existing keystore ----------
function renderUnlock() {
  app.innerHTML = `
    <div class="center-screen">
      <div class="card">
        <h1 class="serif">Welcome back</h1>
        <p class="sub">Enter your password to unlock macu.</p>
        <input type="password" id="unlock-pw" placeholder="Password">
        <div class="error" id="unlock-error"></div>
        <button class="btn btn-primary" id="btn-unlock">Unlock</button>
      </div>
    </div>`;
  const tryUnlock = async () => {
    const pw = document.getElementById('unlock-pw').value;
    const errEl = document.getElementById('unlock-error');
    try {
      accounts = await window.macu.unlock(pw);
      renderDashboard();
    } catch (e) {
      errEl.textContent = e.message;
    }
  };
  document.getElementById('btn-unlock').onclick = tryUnlock;
  document.getElementById('unlock-pw').addEventListener('keydown', (e) => { if (e.key === 'Enter') tryUnlock(); });
}

// ---------- Dashboard ----------
async function renderDashboard() {
  app.innerHTML = `
    <div class="topbar">
      <div class="brand"><div class="brand-mark"></div><div class="brand-name serif">macu</div></div>
      <button class="btn btn-ghost" style="width:auto;margin:0;" id="btn-lock">Lock</button>
    </div>

    <div class="grid3" id="chain-cards">
      ${chainCard('Ethereum', accounts.ethereum.address)}
      ${chainCard('Bitcoin', accounts.bitcoin.address)}
      ${chainCard('Solana', accounts.solana.address)}
    </div>

    <div class="panel">
      <h2>Send ETH</h2>
      <div class="row">
        <input type="text" id="send-to" placeholder="Recipient address (0x...)">
      </div>
      <div class="row">
        <input type="text" id="send-amt" placeholder="Amount in ETH">
      </div>
      <button class="btn btn-primary" id="btn-send" style="width:auto;">Send</button>
      <div class="status-msg" id="send-status"></div>
    </div>`;

  document.getElementById('btn-lock').onclick = async () => {
    await window.macu.lock();
    accounts = null;
    renderUnlock();
  };

  document.querySelectorAll('.address').forEach((el) => {
    el.onclick = () => navigator.clipboard.writeText(el.dataset.full);
  });

  document.getElementById('btn-send').onclick = async () => {
    const to = document.getElementById('send-to').value.trim();
    const amt = document.getElementById('send-amt').value.trim();
    const statusEl = document.getElementById('send-status');
    statusEl.className = 'status-msg';
    statusEl.textContent = 'Sending…';
    try {
      const { hash } = await window.macu.sendEth(to, amt);
      statusEl.className = 'status-msg ok';
      statusEl.textContent = `Sent. Tx hash: ${hash}`;
    } catch (e) {
      statusEl.className = 'status-msg err';
      statusEl.textContent = e.message;
    }
  };

  loadBalances();
}

function chainCard(label, address) {
  const short = address.length > 14 ? `${address.slice(0, 8)}…${address.slice(-6)}` : address;
  return `
    <div class="chain-card">
      <div class="chain-label">${label}</div>
      <div class="balance" data-balance="${label.toLowerCase()}">…</div>
      <div class="address" data-full="${address}" title="Click to copy full address">${short}</div>
    </div>`;
}

async function loadBalances() {
  try {
    const bal = await window.macu.getBalances();
    setBalance('ethereum', bal.ethereum, 'ETH');
    setBalance('bitcoin', bal.bitcoin, 'BTC');
    setBalance('solana', bal.solana, 'SOL');
  } catch (e) {
    console.error(e);
  }
}

function setBalance(chain, value, symbol) {
  const el = document.querySelector(`[data-balance="${chain}"]`);
  if (!el) return;
  el.textContent = value === null ? 'Unavailable' : `${Number(value).toFixed(4)} ${symbol}`;
}

boot();