<script lang="ts">
  import { commands } from "$lib/bindings";
  import DollPreview from "../app-menu/components/doll-preview.svelte";
  import ExternalLink from "../../assets/icons/external-link.svelte";

  let loadingProvider: "google" | "discord" | null = null;
  let errorMessage = "";

  const normalizeError = (value: unknown) => {
    if (value instanceof Error) {
      return value.message;
    }

    return typeof value === "string" ? value : "Something went wrong";
  };

  const startAuth = async (provider: "google" | "discord") => {
    if (loadingProvider) return;

    loadingProvider = provider;
    errorMessage = "";

    try {
      if (provider === "google") {
        await commands.startGoogleAuth();
      } else {
        await commands.startDiscordAuth();
      }
    } catch (error) {
      console.error(`Failed to start ${provider} auth`, error);
      errorMessage = normalizeError(error);
      loadingProvider = null;
    }
  };

  const openClientConfig = async () => {
    try {
      await commands.openClientConfig();
    } catch (error) {
      console.error("Failed to open client config", error);
    }
  };
</script>

<div
  class="size-full max-w-full max-h-full overflow-hidden relative bg-linear-to-br from-base-100 to-[#b7f2ff77]"
>
  <div class="flex flex-row gap-2 justify-between size-full p-6">
    <div class="flex flex-col justify-between">
      <div class="flex flex-col gap-2 h-full">
        <div class="flex flex-col gap-6">
          <div class="flex flex-col gap-2">
            <div class="flex flex-row gap-2">
              <p class="text-xl font-light">meow? nyaaa!!</p>
            </div>
            <p class="opacity-70 text-3xl font-bold">
              a cute passive socialization layer!
            </p>
          </div>
          <div class="flex flex-col gap-3 max-w-80">
            <button
              class="btn btn-primary btn-xl justify-between"
              onclick={() => startAuth("google")}
              disabled={loadingProvider !== null}
            >
              <span>{loadingProvider === "google" ? "Opening Google..." : "Continue with Google"}</span>
              <div class="scale-70">
                <ExternalLink />
              </div>
            </button>
            <button
              class="btn btn-outline btn-xl justify-between"
              onclick={() => startAuth("discord")}
              disabled={loadingProvider !== null}
            >
              <span>{loadingProvider === "discord" ? "Opening Discord..." : "Continue with Discord"}</span>
              <div class="scale-70">
                <ExternalLink />
              </div>
            </button>
            <button
              class="btn btn-link p-0 btn-sm text-base-content w-max"
              onclick={openClientConfig}
            >
              Advanced options
            </button>
          </div>

          {#if errorMessage}
            <p class="text-xs text-error max-w-72">{errorMessage}</p>
          {:else}
            <p class="text-xs opacity-50 max-w-72">
              Sign in in your browser, then return here once Friendolls finishes the handshake.
            </p>
          {/if}
        </div>
      </div>
      <div>
        <p class="uppercase">Pre-release</p>
      </div>
    </div>
  </div>
  <div
    class="absolute pointer-events-none bottom-6 right-6 flex flex-col gap-1 justify-between"
  >
    <div></div>
    <div class="flex flex-col scale-200 origin-bottom-right">
      <DollPreview dollColorScheme={{ body: "b7f2ff", outline: "496065" }} />
    </div>
  </div>
</div>
