import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { resetPassword } from "~/fns/login";
import { useAction } from "~/hooks/use-action";
import { AuthCard } from "~/components/AuthCard";
import { Button } from "~/ui/Button";
import { TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { TextLink } from "~/ui/TextLink";

export const Route = createFileRoute("/reset-password")({
  validateSearch: z.object({ token: z.string().optional() }),
  head: () => ({ meta: [{ title: "Choose a new password · gitfor" }] }),
  component: ResetPasswordPage,
});

function ResetPasswordPage() {
  const { token } = Route.useSearch();
  const navigate = useNavigate();
  const action = useAction(resetPassword);

  if (!token) {
    return (
      <AuthCard title="Invalid link" subtitle="This reset link is missing its token.">
        <TextLink to="/forgot-password" className="text-sm">
          Request a new link
        </TextLink>
      </AuthCard>
    );
  }

  return (
    <AuthCard title="Choose a new password" subtitle="Every other session will be signed out.">
      <form
        method="post"
        className="space-y-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const password = String(new FormData(event.currentTarget).get("password") ?? "");
          const result = await action.run({ data: { token, password } });
          if (result) await navigate({ to: result.signedIn ? "/" : "/login" });
        }}
      >
        <ErrorBanner message={action.error} />
        <TextField
          label="New password"
          name="password"
          type="password"
          autoComplete="new-password"
          minLength={8}
          required
        />
        <Button type="submit" variant="primary" className="w-full" pending={action.pending}>
          Update password
        </Button>
      </form>
    </AuthCard>
  );
}