---
const postHTMLContents = await Astro.slots.render('default');
import { EncryptedPost } from './EncryptedPost';
import crypto from 'node:crypto'
import buffer from 'node:buffer'
import fs from 'node:fs'
import path from 'node:path'

export interface Props {
  passphrase?: string,
}

export interface EncryptedPost {
  iterations: number,
  salt: string,
  iv: string,
  encryptedData: string,
  tagSizeBytes: number
}

/**
 * Encrypt the post contents using AES-256-CBC with a passphrase
 * @param plainText the plaintext to encrypt (the post contents)
 * @param passphrase the passphrase to encrypt the post contents with
 */
export async function encryptPostContents (plainText: string, passphrase: string): Promise<EncryptedPost> {
  const pbkdf2_iterations = 1_000_000
  const gcm_tag_size_bytes = 16
  const salt = crypto.randomBytes(64); // randomly salt the password with 64 bytes

  // derive key from passphrase using pbkdf2
  const derivedKey : buffer.Buffer = await new Promise((resolve, reject) => {
    // deriving key with 100,000 iterations, 256bit length and sha256 digest
    crypto.pbkdf2(passphrase, salt, pbkdf2_iterations, 256/8, 'sha256', (err, derivedKey) => {
      if (err) reject(err)
      resolve(derivedKey)
    })
  })

  // NOTE: GCM requires (iv, key) pair to be unique for every encryption
  const iv = crypto.randomBytes(12) // 12 bytes is the recommended size for GCM (96 bits)

  // create cipher object
  const cipher = crypto.createCipheriv('aes-256-gcm', derivedKey, iv, {
    authTagLength: gcm_tag_size_bytes
  })

  // encrypt the given text
  let encrypted = cipher.update(plainText)

  // concat the final encrypted data with the auth tag
  encrypted = buffer.Buffer.concat([encrypted, cipher.final(), cipher.getAuthTag()])

  const out = {
    iterations: pbkdf2_iterations,
    salt: salt.toString('base64'),
    iv: iv.toString('base64'),
    encryptedData: encrypted.toString('base64'),
    tagSizeBytes: gcm_tag_size_bytes
  }

  return out
}

const { passphrase: passphrase_override } = Astro.props

// get the password for the post
// this is set in your .env file
let passphrase = import.meta.env.ADMIN_PASSWORD

if (passphrase_override) {
  if (passphrase_override.length < 8) {
    throw new Error('Post passphrase must be at least 8 characters long')
  }

  passphrase = passphrase_override
}

/*
Derive a filename to store the actual encrypted post contents from the passphrase, using pbkdf to prevent brute force attacks.

HMAC would NOT be secure here, since we could guess a passphrase for hmac-sha256(url, password) and, check the post encrypted directory for a match, allowing us to brute force the password without running PBKDF2. With this, it is as difficult to determine where the actual contents are stored as it is to bruteforce the password itself.

We're not publishing the actual ciphertext of the post within the public page, only a pointer to it. A user must enter a valid passphrase to get the link to download ciphertext of the post. As a result, we don't provide any information about the length of the post unless the user enters the correct passphrase.
*/
const storage_filename : buffer.Buffer = await new Promise((resolve, reject) => {
  // deriving key with 100,000 iterations, 256bit length and sha256 digest
  crypto.pbkdf2(passphrase, Astro.url.pathname, 1_000_000, 256/8, 'sha256', (err, derivedKey) => {
    if (err) reject(err)
    resolve(derivedKey)
  })
})

// convert the buffer to a hex string
const output_filename = storage_filename.toString('hex')

// encrypt the post contents
const cipherText = await encryptPostContents(postHTMLContents, passphrase);

// find a place in to store the encrypted post contents
const encryptedFilePath = path.join('/encrypted', output_filename + '.json')

// write the encrypted post contents to a file in /public/encrypted/{{hash}}.json
// NOTE: this works well for Astro in dev mode, but prod mode requires some an extra step to copy the files to the dist directory
console.log(`Encrypted post contents to ${encryptedFilePath}`)
fs.writeFileSync(path.join('./public', encryptedFilePath), JSON.stringify(cipherText, null, 2))

// encrypt a JSON object with the URL of the encrypted post contents
// send the encrypted post contents to the client
const encryptedPostPointer = await encryptPostContents(JSON.stringify({ url: encryptedFilePath }), passphrase)
---

{/* Frontend React component to do decrypt */}
<EncryptedPost cipherText={encryptedPostPointer} client:load />

import * as React from 'react';
import { type EncryptedPost } from '../lib/embedded_crypto';
import { LockClosedIcon } from '@heroicons/react/24/outline';

/**
 * Client side component for rendering encrypted posts
 */
export function EncryptedPost({ cipherText }: { cipherText: EncryptedPost }) {
  const [key, setKey] = React.useState('')
  const [decryptedHTML, setDecryptedHTML] = React.useState<string | null>(null)

  React.useEffect(() => {
    // if the passphrase is stored in sessionStorage, decrypt the post
    const passphrase = sessionStorage.getItem('passphrase')
    if (passphrase) {
      runDecrypt(passphrase)
    }
  }, [])

  // for large strings, use this from https://stackoverflow.com/a/49124600
  const base64_to_buf = (b64: string) =>
    Uint8Array.from(atob(b64), (c) => c.charCodeAt(0))

  /**
   * Derive a decryption key from the given password
   */
  async function deriveEncryptionKey (cipherText: EncryptedPost, password: string): Promise<CryptoKey> {
    const enc = new TextEncoder();
    const passwordKey = window.crypto.subtle.importKey("raw", enc.encode(password), "PBKDF2", false, [
      "deriveKey",
    ])
    return window.crypto.subtle.deriveKey(
      {
        name: "PBKDF2",
        salt: base64_to_buf(cipherText.salt),
        iterations: cipherText.iterations,
        hash: "SHA-256",
      },
      await passwordKey,
      { name: "AES-GCM", length: 256 },
      false,
      ["decrypt"]
    )
  }

  /**
   * Decrypts the encrypted data using the given password
   */
  async function decrypt (cipherText: EncryptedPost, password: string): Promise<string> {
    const key = await deriveEncryptionKey(cipherText, password);
    const tag_size_bits = cipherText.tagSizeBytes * 8;
    const decrypted = await window.crypto.subtle.decrypt(
      {
        name: "AES-GCM",
        iv: base64_to_buf(cipherText.iv),
        tagLength: tag_size_bits,
      },
      key,
      base64_to_buf(cipherText.encryptedData)
    )
    return new TextDecoder().decode(decrypted)
  }

  /**
   * Wrapper function to decrypt the post contents
   * and set the decryptedHTML state
   * Alerts the user if the password is incorrect
   */
  function runDecrypt(key: string) {
    decrypt(cipherText, key)
      .then((decrypted) => {
        console.log('success: decrypted pointer to payload')
        sessionStorage.setItem('passphrase', key)
        return JSON.parse(decrypted)
      })
      .then(pointer => {
        console.log('loading encrypted payload', pointer.url)
        return fetch(pointer.url)
      })
      .then(res => res.json())
      .then(data => {
        console.log('loaded encrypted payload')
        return decrypt(data, key)
      })
      .then(data => {
        console.log('success: decrypted post contents!')
        setDecryptedHTML(data)
      })
      .catch(err => {
        setKey('')
        sessionStorage.removeItem('passphrase')
        console.error('decryption error', err);
        alert('Incorrect password');
        throw err
      })
  }

  return (
    <>
      {/* render password prompt if not decrypted yet */}
      {
        !decryptedHTML
          ? <>
            <div className="flex flex-col items-center gap-4 my-2 card">
              <LockClosedIcon className="w-10 h-10 text-red-500 min-w-10" />
              <div className='flex flex-col items-center gap-1'>
                <div className='text-lg font-bold'>Password Protected</div>
                <div>This post is locked. Enter the password below to view it.</div>
              </div>
              <input
                type="password"
                value={key}
                onChange={e => setKey(e.target.value)}
                onKeyDown={e => {if (e.key === 'Enter') runDecrypt(key)}}
                placeholder='Password'
                className='max-w-full p-2 bg-transparent border border-gray-400 rounded dark:border-gray-700'
              />
              <button className="btn" onClick={() => {
                runDecrypt(key)
              }}>Submit</button>
            </div>
          </>
        : null
      }

      {/* render decrypted post contents */}
      {
        decryptedHTML ? <div className="markdown-container" dangerouslySetInnerHTML={{ __html: decryptedHTML }} />
        : null
      }
    </>
  )
}