import { Hono } from "hono";
import Config from "../../../config/peas.config.js";
import type InfoAPI from "../../../types/api/info";
import { Layout } from "./layout.js";
import { Locale } from "../../lib/locale.js";
import Icon from "../../components/iconify.js";
import { getKeys as getTurnstileKeys, isEnabled as TurnstileIsEnabled } from "../../lib/turnstile.js";
import Turnstile from "../../components/turnstile.js";
import { html } from "hono/html";
import { getCookie } from "hono/cookie";
import { isSignin } from "../../lib/token.js";

const MailVerify = new Hono();

MailVerify.get("/", async (c) => {
  if (await isSignin(getCookie(c, "token") ?? "")) {
    return c.redirect("/home");
  }
  
  const InfoReq = await fetch(`${Config.server.origin}/api/info`, {
    method: "POST",
    cache: "no-store",
  });
  if (!InfoReq.ok) {
    return c.status(500);
  }
  
  const InfoRes: InfoAPI = await InfoReq.json();
  
  let code = "";
  if (c.req.query("code") !== undefined) {
    code = c.req.query("code") ?? "";
  }
  
  const TurnstileEnabled = await TurnstileIsEnabled();
  
  let TurnstileKeys: Array<string> = [];
  if (TurnstileEnabled) {
    TurnstileKeys = await getTurnstileKeys();
  }
  
  let error = false;
  let errorMsg = "";
  if (c.req.query("error") !== undefined) {
    error = true;
    errorMsg = Locale({ text: `ERR_${c.req.query("error")}` }, c.get("language"));
  }
  
  return c.html(
    <Layout
      title={`${Locale({ text: "mailVerify" }, c.get("language"))} - ${InfoRes.server.name}`}
      noindex
    >
      <main class="text-center">
        {error && (
          <div
            role="alert"
            class="alert alert-error w-fit m-auto"
          >
            <Icon
              icon="mdi:alert-circle-outline"
              color="#ff0000"
            />
            <span>{errorMsg}</span>
          </div>
        )}
        
        <h1 class={`
          text-3xl
          font-bold
          flex
          items-center
          justify-center
        `}>
          <Icon
            icon="material-symbols:mail-shield"
            class="w-4"
          />
          {Locale({ text: "mailVerify" }, c.get("language"))}
        </h1>
        
        <form
          class={`
            flex
            flex-col
            items-center
            justify-center
          `}
          id="form"
        >
          <div>
            <label class={`
              input
              w-70
              m-3
            `}>
              <span class="label">
                <Icon icon="material-symbols:barcode" />
              </span>
              <input
                type="text"
                placeholder="123456"
                minlength={6}
                maxlength={6}
                value={code}
                name="code"
                required
              />
            </label>
          </div>
          
          {TurnstileEnabled && (
            <Turnstile
              sitekey={TurnstileKeys[0]}
              button={html`[name='submit']`}
            />
          )}
          
          <button
            class={`
              btn
              btn-primary
              m-3
            `}
            type="submit"
            name="submit"
            disabled
          >
            <Icon icon="material-symbols:barcode" />
            {Locale({ text: "submit" }, c.get("language"))}
          </button>
        </form>
      </main>
      
      <script src="/js/mailverify.js" />
    </Layout>
  );
});

export default MailVerify;