auth-yes/ui/components/RecoveryPage.tsx

import { Layout } from "./Layout.tsx";

export const RecoveryPage = () => {
  return (
    <Layout title="Account Recovery">
      <div
        class="card"
        style="max-width: 400px; margin: 4rem auto; text-align: center;"
      >
        <h2>Account Recovery</h2>
        <p style="color: #6c757d; margin-bottom: 2rem;">
          Select your recovery method to reconstruct your master secret and bind
          a new passkey.
        </p>

        <form id="recovery-form">
          <input type="hidden" id="recovery-code" name="code" />

          <div style="margin-bottom: 1rem; text-align: left;">
            <label style="display: block; font-weight: bold; margin-bottom: 0.5rem;">
              Recovery PIN
            </label>
            <input
              type="password"
              id="recovery-pin"
              required
              style="width: 100%; padding: 0.5rem;"
            />
          </div>

          <div style="margin-bottom: 1rem; text-align: left;">
            <label style="display: block; font-weight: bold; margin-bottom: 0.5rem;">
              Recovery Method
            </label>
            <select id="recovery-method" style="width: 100%; padding: 0.5rem;">
              <option value="device">Device Share (Browser PRF)</option>
              <option value="voucher">Cold Voucher (12-Word Mnemonic)</option>
            </select>
          </div>

          <div
            id="voucher-section"
            style="margin-bottom: 1rem; text-align: left; display: none;"
          >
            <label style="display: block; font-weight: bold; margin-bottom: 0.5rem;">
              12-Word Cold Voucher
            </label>
            <textarea
              id="recovery-voucher"
              rows={3}
              style="width: 100%; padding: 0.5rem;"
              placeholder="abandon ability able..."
            >
            </textarea>
          </div>

          <button
            type="submit"
            class="btn-action btn-success"
            style="width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 1rem;"
          >
            Reconstruct & Bind New Passkey
          </button>
        </form>

        <div
          id="error-message"
          style="color: #dc3545; margin-top: 1rem; display: none;"
        >
        </div>
        <div
          id="success-message"
          style="color: #28a745; margin-top: 1rem; display: none;"
        >
          Passkey successfully bound! Redirecting to login...
        </div>
      </div>

      <script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js">
      </script>
      <script
        type="module"
        dangerouslySetInnerHTML={{
          __html: `
        import init, { Share, reconstruct_secret } from '/public/wasm/sss_recovery_bg.wasm.js';
        import { mnemonicToEntropy } from '/public/ui/utils/bip39.ts';

        // Setup UI listeners
        const methodSelect = document.getElementById('recovery-method');
        const voucherSection = document.getElementById('voucher-section');
        methodSelect.addEventListener('change', (e) => {
          if (e.target.value === 'voucher') {
            voucherSection.style.display = 'block';
          } else {
            voucherSection.style.display = 'none';
          }
        });

        const urlParams = new URLSearchParams(window.location.search);
        const code = urlParams.get('code');
        if (!code) {
          document.getElementById('error-message').textContent = 'No recovery code found in the URL.';
          document.getElementById('error-message').style.display = 'block';
          document.getElementById('recovery-form').style.display = 'none';
        } else {
          document.getElementById('recovery-code').value = code;
        }

        async function getDeviceShare() {
          // This is a stub for PRF-derived indexedDB fetching (Story 3.1)
          // As per PRF requirements, if not supported, they must use voucher.
          throw new Error("Device Share PRF retrieval not fully implemented in this block, fallback to Voucher");
        }

        document.getElementById('recovery-form').addEventListener('submit', async (e) => {
          e.preventDefault();
          const btn = e.target.querySelector('button');
          const errorDiv = document.getElementById('error-message');
          btn.disabled = true;
          btn.textContent = 'Processing...';
          errorDiv.style.display = 'none';

          let share1Data, share2Data;
          let share1X = 1, share2X = 2; // Device/Voucher = 1, Server = 2

          try {
            await init('/public/wasm/sss_recovery_bg.wasm');

            const pin = document.getElementById('recovery-pin').value;
            const method = methodSelect.value;

            // 1. Get Client Share
            if (method === 'device') {
               share1Data = await getDeviceShare();
               share1X = 1;
            } else {
               const mnemonic = document.getElementById('recovery-voucher').value;
               share1Data = await mnemonicToEntropy(mnemonic);
               share1X = 3;
            }

            // 2. Get Server Share
            const challengeRes = await fetch('/api/recovery/challenge', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ code, pin })
            });

            if (!challengeRes.ok) {
              const data = await challengeRes.json();
              throw new Error(data.error || 'Failed to get server share');
            }

            const challengeData = await challengeRes.json();
            const { options, serverShareHex } = challengeData;

            // Convert Hex to Uint8Array
            share2Data = new Uint8Array(serverShareHex.match(/.{1,2}/g).map(byte => parseInt(byte, 16)));
            share2X = 2;

            // 3. Reconstruct Secret using Wasm
            const s1 = new Share(share1X, share1Data);
            const s2 = new Share(share2X, share2Data);

            const masterSecret = reconstruct_secret(s1, s2);

            // Generate recovery token signature using reconstructed secret
            const cryptoKey = await crypto.subtle.importKey(
              "raw",
              masterSecret,
              { name: "HMAC", hash: "SHA-256" },
              false,
              ["sign"]
            );

            const enc = new TextEncoder();
            const signatureBuffer = await crypto.subtle.sign("HMAC", cryptoKey, enc.encode(options.challenge));
            const signatureHex = Array.from(new Uint8Array(signatureBuffer)).map(b => b.toString(16).padStart(2, '0')).join('');

            // Zeroize Memory
            masterSecret.fill(0);
            share1Data.fill(0);
            share2Data.fill(0);

            // 4. Register new WebAuthn
            const { startRegistration } = SimpleWebAuthnBrowser;
            const attResp = await startRegistration({ optionsJSON: options });

            const verifyRes = await fetch('/api/recovery/verify', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ code, response: attResp, signature: signatureHex })
            });

            if (!verifyRes.ok) {
              const data = await verifyRes.json();
              throw new Error(data.error || 'Failed to verify passkey');
            }

            document.getElementById('recovery-form').style.display = 'none';
            document.getElementById('success-message').style.display = 'block';

            setTimeout(() => {
              window.location.href = '/login';
            }, 2000);

          } catch (err) {
            errorDiv.textContent = err.message || 'An error occurred during recovery.';
            errorDiv.style.display = 'block';
            btn.disabled = false;
            btn.textContent = 'Reconstruct & Bind New Passkey';

            // Ensure zeroization on error
            if (share1Data && share1Data.fill) share1Data.fill(0);
            if (share2Data && share2Data.fill) share2Data.fill(0);
          }
        });
      `,
        }}
      >
      </script>
    </Layout>
  );
};