import { z } from "zod";
import { backendSignIn } from "../../backend/sign-in.ts";
import Headline from "../../components/Headline.tsx";
import { SignInForm } from "../../components/SignInForm.tsx";
import { setAuthCookie } from "../../lib/auth.ts";
import { define } from "../../utils.ts";

const loginSchema = z.object({
  email: z.string(),
  password: z.string().min(8),
});

export const handler = define.handlers({
  GET(_ctx) {
    return {
      data: {
        email: "",
        error: undefined,
      },
    };
  },

  async POST(ctx) {
    const formData = await ctx.req.formData();
    const request = loginSchema.safeParse({
      email: formData.get("email"),
      password: formData.get("password"),
    });

    if (!request.success) {
      return {
        data: {
          email: formData.get("email") as string,
          error: request.error.issues[0].message,
        },
      };
    }
    const { email, password } = request.data;

    // Super secure authorization method
    if (!await backendSignIn(email, password)) {
      return {
        data: {
          email,
        },
      };
    }

    const headers = new Headers();
    setAuthCookie(headers);

    const url = new URL(ctx.req.url);
    url.pathname = "/dashboard";
    headers.set("location", url.toString());
    return new Response(null, {
      status: 303,
      headers,
    });
  },
});

export default define.page<typeof handler>(function SignInPage(ctx) {
  const email = ctx.data.email || "";
  const error = ctx.data.error;

  return (
    <div class="p-4">
      <div class="max-w-96 mx-auto p-4 flex flex-col gap-4 border rounded">
        <Headline>Sign in</Headline>
        <SignInForm email={email} error={error} />
      </div>
    </div>
  );
});