import { z } from "zod";
import Headline from "../../components/Headline.tsx";
import PasswordConfirmationFields from "../../islands/PasswordConfirmationFields.tsx";
import { define } from "../../utils.ts";

const signUpSchema = z.object({
  email: z.email("Please enter a valid email address.").trim(),
  firstName: z.string().trim().min(1, "Please enter your first name."),
  lastName: z.string().trim().min(1, "Please enter your last name."),
  password: z.string().min(8, "Password must be at least 8 characters long."),
  passwordConfirm: z.string(),
}).refine((data) => data.password === data.passwordConfirm, {
  message: "Passwords do not match.",
  path: ["passwordConfirm"],
});

const emptyForm = {
  email: "",
  firstName: "",
  lastName: "",
  error: undefined as string | undefined,
};

export const handler = define.handlers({
  GET() {
    return { data: emptyForm };
  },

  async POST(ctx) {
    const formData = await ctx.req.formData();
    const result = signUpSchema.safeParse({
      email: formData.get("email"),
      firstName: formData.get("firstName"),
      lastName: formData.get("lastName"),
      password: formData.get("password"),
      passwordConfirm: formData.get("passwordConfirm"),
    });

    if (!result.success) {
      return {
        data: {
          email: formData.get("email")?.toString() ?? "",
          firstName: formData.get("firstName")?.toString() ?? "",
          lastName: formData.get("lastName")?.toString() ?? "",
          error: result.error.issues[0].message,
        },
      };
    }

    const { passwordConfirm: _passwordConfirm, ...registration } = result.data;
    // Use registration to register user
    void registration;

    return ctx.redirect("/sign-up", 303);
  },
});

export default define.page<typeof handler>(function SignUpPage(ctx) {
  const { email, firstName, lastName, error } = ctx.data;

  return (
    <form method="post" class="container mx-auto p-4 flex flex-col gap-4">
      <Headline>Sign up</Headline>
      {error && <p class="text-error" role="alert">{error}</p>}
      <input
        type="email"
        name="email"
        placeholder="E-Mail"
        class="input w-full"
        value={email}
        required
      />
      <div class="flex flex-row gap-4">
        <input
          type="text"
          name="firstName"
          placeholder="First name"
          class="input min-w-0 flex-1"
          value={firstName}
          required
        />
        <input
          type="text"
          name="lastName"
          placeholder="Last name"
          class="input min-w-0 flex-1"
          value={lastName}
          required
        />
      </div>
      <PasswordConfirmationFields />
      <button type="submit" class="btn btn-primary self-start">
        Sign up
      </button>
    </form>
  );
});