import {html, raw} from 'hono/html'
import type {HtmlEscapedString} from 'hono/utils/html'

import {sha256base64} from './hash'

// kept as a constant so the csp hash can never drift from the markup
const REDIRECT_SCRIPT =
  "window.location.href = document.getElementById('open').href"

export const REDIRECT_SCRIPT_CSP_HASH = `'sha256-${sha256base64(REDIRECT_SCRIPT)}'`

const page = (
  title: string,
  body: HtmlEscapedString | Promise<HtmlEscapedString>,
) =>
  html`<!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1"
        />
        <meta name="referrer" content="no-referrer" />
        <title>${title}</title>
        <style>
          body {
            font-family: -apple-system, system-ui, sans-serif;
            display: flex;
            min-height: 100dvh;
            align-items: center;
            justify-content: center;
            margin: 0;
            background: #d3d3d3;
            color: #111;
          }
          main {
            max-width: 24rem;
            padding: 2rem;
            text-align: center;
          }
          h1 {
            font-size: 1.5rem;
          }
          p {
            color: #444;
            line-height: 1.5;
          }
          .button {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.875rem 2.5rem;
            border: 0;
            border-radius: 0.75rem;
            background: #111;
            color: #fff;
            font-size: 1rem;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
          }
          .cover {
            width: 100%;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 1rem;
          }
        </style>
      </head>
      <body>
        <main>${body}</main>
      </body>
    </html>`

export const confirmPage = (token: string) =>
  page(
    'Sign in to crumbs',
    html`<h1>Sign in to crumbs</h1>
      <p>Tap the button below to finish signing in.</p>
      <form method="post" action="/auth/verify">
        <input type="hidden" name="token" value="${token}" />
        <button type="submit" class="button">Sign in</button>
      </form>`,
  )

export const successPage = (deepLink: string) =>
  page(
    'Signed in',
    html`<h1>You're signed in</h1>
      <p>Opening crumbs… if nothing happens, tap below.</p>
      <a id="open" href="${deepLink}" class="button">Open crumbs</a>
      ${raw(`<script>${REDIRECT_SCRIPT}</script>`)}`,
  )

export const expiredPage = () =>
  page(
    'Link expired',
    html`<h1>Link expired</h1>
      <p>
        This link is invalid or has expired. Request a new one in the
        app.
      </p>`,
  )

// previews the trail to token holders only — possession of the token
// already grants join, so nothing leaks beyond that capability. an
// unknown token renders the generic variant
export const joinTrailPage = (
  deepLink: string,
  trail?: {
    name: string
    description: string | null
    coverImageUrl: string | null
  },
) =>
  page(
    'Join a trail',
    html`${trail?.coverImageUrl
        ? html`<img
            class="cover"
            src="${trail.coverImageUrl}"
            alt=""
          />`
        : ''}
      <h1>${trail ? trail.name : "You're invited to a trail"}</h1>
      ${trail?.description ? html`<p>${trail.description}</p>` : ''}
      <p>Open this link in the crumbs app to join.</p>
      <a href="${deepLink}" class="button">Open crumbs</a>`,
  )
