defmodule DexiWeb.LoginLive do
  use DexiWeb, :live_view

  alias Dexi.GridsLoginHandler

  @impl true
  def mount(_params, %{"session_id" => session_id}, socket) do
    if connected?(socket), do: Phoenix.PubSub.subscribe(Dexi.PubSub, session_id)

    grids_url = GridsLoginHandler.get_signature_url(session_id)

    socket =
      socket
      |> assign(:page_title, "Log in")
      |> assign(:session_id, session_id)
      |> assign_grids_url(grids_url)
      |> schedule_refresh()

    {:ok, socket}
  end

  @impl true
  def handle_info({:pubkey_added, message_id}, socket) do
    {:noreply, redirect(socket, to: ~p"/session/#{message_id}")}
  end

  def handle_info(:refresh_grids_url, socket) do
    grids_url = GridsLoginHandler.get_signature_url(socket.assigns.session_id)

    {:noreply,
     socket
     |> assign_grids_url(grids_url)
     |> schedule_refresh()}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <Layouts.app flash={@flash} current_scope={@current_scope}>
      <section class={["mx-auto flex max-w-3xl flex-col items-center px-5 py-16 text-center sm:py-24"]}>
        <p class={[
          "text-xs font-black uppercase tracking-[0.28em] text-blue-grey"
        ]}>
          Wallet authentication
        </p>
        <h1 class={["mt-4 text-4xl font-black tracking-[-0.05em] sm:text-6xl"]}>
          Log in to Dexi
        </h1>
        <p class={["mt-5 max-w-xl text-base leading-7 text-blue-grey"]}>
          Sign this one-time message with the account key you want to use. A new key creates a new user account.
        </p>

        <div
          id="grids-login"
          class={[
            "mt-10 w-full rounded-3xl border border-muted-steel bg-slate-blue p-5 shadow-cyan-glow backdrop-blur sm:p-8"
          ]}
        >
          <div
            id="grids-qr-code"
            class={["mx-auto mb-7 w-fit rounded-2xl bg-cool-white p-4 shadow-sm"]}
          >
            {raw(@qr_code)}
          </div>
          <label
            for="grids-url"
            class={["block text-left text-xs font-black uppercase tracking-[0.18em]"]}
          >
            GRIDS URL
          </label>
          <input
            id="grids-url"
            name="grids-url"
            type="text"
            readonly
            value={@grids_url}
            class={[
              "mt-3 w-full rounded-xl border border-muted-steel bg-deep-slate px-4 py-3 font-mono text-xs text-cool-white outline-none selection:bg-soft-violet"
            ]}
          />
          <button
            id="copy-grids-url"
            type="button"
            phx-hook="CopyToClipboard"
            phx-update="ignore"
            data-copy-target="#grids-url"
            class={[
              "mt-4 inline-flex w-full items-center justify-center rounded-xl bg-electric-cyan px-5 py-3 font-bold text-midnight transition hover:-translate-y-0.5 hover:bg-bright-cyan"
            ]}
          >
            Copy GRIDS URL
          </button>
        </div>

        <ol class={[
          "mt-9 grid w-full gap-3 text-left text-sm leading-6 text-blue-grey sm:grid-cols-3"
        ]}>
          <li class={["rounded-2xl border border-muted-steel p-4"]}>
            1. Open your wallet and select an account.
          </li>
          <li class={["rounded-2xl border border-muted-steel p-4"]}>
            2. Open GRIDS URL and paste the code if needed.
          </li>
          <li class={["rounded-2xl border border-muted-steel p-4"]}>
            3. Approve the message signature.
          </li>
        </ol>
      </section>
    </Layouts.app>
    """
  end

  defp schedule_refresh(socket) do
    if connected?(socket) do
      Process.send_after(
        self(),
        :refresh_grids_url,
        Application.fetch_env!(:dexi, :login_url_refresh_interval_in_milliseconds)
      )
    end

    socket
  end

  defp assign_grids_url(socket, grids_url) do
    qr_code =
      grids_url
      |> EQRCode.encode()
      |> EQRCode.svg(%{color: "var(--color-electric-cyan)", width: 256})

    socket
    |> assign(:grids_url, grids_url)
    |> assign(:qr_code, qr_code)
  end
end