import type { Actions, PageServerLoad } from "./$types";
import { fail, redirect } from "@sveltejs/kit";

export const load: PageServerLoad = async ({ locals }) => {
  const session = await locals.getSession();
  if (session) {
    throw redirect(302, `/user/${session.user.user_metadata.username}`);
  }
  return {
    session: null,
  };
};

export const actions: Actions = {
  default: async ({ request, locals }) => {
    const formData = await request.formData();
    const email = formData.get("email");
    const password = formData.get("password");

    if (typeof email !== "string" || typeof password !== "string") {
      return fail(400, { error: "Invalid form data" });
    }

    const { data, error: signinError } =
      await locals.supabase.auth.signInWithPassword({
        email,
        password,
      });

    if (signinError) {
      console.error("Signin error:", signinError);
      return fail(400, { error: signinError.message });
    }

    if (!data.user) {
      return fail(400, { error: "No user returned after signin" });
    }

    // Fetch user data from the users table
    const { data: userData, error: userError } = await locals.supabase
      .from("users")
      .select("username")
      .eq("id", data.user.id)
      .single();

    if (userError) {
      console.error("Error fetching user data:", userError);
      return fail(500, {
        error: "Error fetching user data. Please try again.",
      });
    }

    throw redirect(302, `/user/${userData.username}`);
  },
};

import type { Actions, PageServerLoad } from "./$types";
import { fail, redirect } from "@sveltejs/kit";

export const load: PageServerLoad = async ({ locals }) => {
  const session = await locals.getSession();
  if (session) {
    throw redirect(302, `/user/${session.user.user_metadata.username}`);
  }
  return {
    session: null,
  };
};

export const actions: Actions = {
  default: async ({ request, locals }) => {
    const formData = await request.formData();
    const email = formData.get("email");
    const password = formData.get("password");

    if (typeof email !== "string" || typeof password !== "string") {
      return fail(400, { error: "Invalid form data" });
    }

    const { data, error: signinError } =
      await locals.supabase.auth.signInWithPassword({
        email,
        password,
      });

    if (signinError) {
      console.error("Signin error:", signinError);
      return fail(400, { error: signinError.message });
    }

    if (!data.user) {
      return fail(400, { error: "No user returned after signin" });
    }

    // Fetch user data from the users table
    const { data: userData, error: userError } = await locals.supabase
      .from("users")
      .select("username")
      .eq("id", data.user.id)
      .single();

    if (userError) {
      console.error("Error fetching user data:", userError);
      return fail(500, {
        error: "Error fetching user data. Please try again.",
      });
    }

    throw redirect(302, `/user/${userData.username}`);
  },
};

<script lang="ts">
  import type { SubmitFunction } from "@sveltejs/kit";
  import { enhance } from "$app/forms";
  import { Input } from "$lib/components/ui/input";
  import { Button } from "$lib/components/ui/button";
  import { LoaderCircle } from "lucide-svelte";
  import { PUBLIC_TURNSTILE_SITE_KEY } from "$env/static/public";

  let email = "";
  let password = "";
  let error: string = "";
  let isLoading = false;

  const handleEnhance: SubmitFunction = () => {
    isLoading = true;
    error = "";
    return async ({ result, update }) => {
      if (result.type === "failure") {
        error = result.data?.error || "An unknown error occurred";
        console.error("Sign-in failure:", result);
      } else if (result.type === "redirect") {
        return;
      } else if (result.type === "success") {
        console.log("Sign-in success:", result);
      }
      await update();
      isLoading = false;
    };
  };
</script>

<svelte:head>
  <title>Sign in</title>
  <link rel="icon" href="/favicon.png" />
  <script
    src="https://challenges.cloudflare.com/turnstile/v0/api.js"
    async
    defer
  ></script>
</svelte:head>

//...
    <form method="POST" class="mt-8 space-y-6" use:enhance={handleEnhance}>
      //input fields here
      {#if error}
        <p class="text-red-500">{error}</p>
      {/if}
      <div
        class="cf-turnstile"
        data-sitekey={PUBLIC_TURNSTILE_SITE_KEY}
        data-callback="javascriptCallback"
      ></div>
      <Button type="submit" class="w-full bg-teal-400" disabled={isLoading}>
        {#if isLoading}
          <LoaderCircle class="animate-spin mr-2 h-4 w-4" />
          Signing in...
        {:else}
          Sign in
        {/if}
      </Button>
    </form>
   //...

<script lang="ts">
  import type { SubmitFunction } from "@sveltejs/kit";
  import { enhance } from "$app/forms";
  import { Input } from "$lib/components/ui/input";
  import { Button } from "$lib/components/ui/button";
  import { LoaderCircle } from "lucide-svelte";
  import { PUBLIC_TURNSTILE_SITE_KEY } from "$env/static/public";

  let email = "";
  let password = "";
  let error: string = "";
  let isLoading = false;

  const handleEnhance: SubmitFunction = () => {
    isLoading = true;
    error = "";
    return async ({ result, update }) => {
      if (result.type === "failure") {
        error = result.data?.error || "An unknown error occurred";
        console.error("Sign-in failure:", result);
      } else if (result.type === "redirect") {
        return;
      } else if (result.type === "success") {
        console.log("Sign-in success:", result);
      }
      await update();
      isLoading = false;
    };
  };
</script>

<svelte:head>
  <title>Sign in</title>
  <link rel="icon" href="/favicon.png" />
  <script
    src="https://challenges.cloudflare.com/turnstile/v0/api.js"
    async
    defer
  ></script>
</svelte:head>

//...
    <form method="POST" class="mt-8 space-y-6" use:enhance={handleEnhance}>
      //input fields here
      {#if error}
        <p class="text-red-500">{error}</p>
      {/if}
      <div
        class="cf-turnstile"
        data-sitekey={PUBLIC_TURNSTILE_SITE_KEY}
        data-callback="javascriptCallback"
      ></div>
      <Button type="submit" class="w-full bg-teal-400" disabled={isLoading}>
        {#if isLoading}
          <LoaderCircle class="animate-spin mr-2 h-4 w-4" />
          Signing in...
        {:else}
          Sign in
        {/if}
      </Button>
    </form>
   //...