import { createFileRoute } from "@tanstack/react-router";
import { redirectSignedIn } from "~/lib/route-guards";
import { useState } from "react";
import { requestPasswordResetEmail } 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("/forgot-password")({
  beforeLoad: redirectSignedIn,
  head: () => ({ meta: [{ title: "Reset your password · gitfor" }] }),
  component: ForgotPasswordPage,
});

function ForgotPasswordPage() {
  const action = useAction(requestPasswordResetEmail, { invalidate: false });
  const [sent, setSent] = useState(false);

  return (
    <AuthCard title="Reset your password" subtitle="We'll email you a link to choose a new one.">
      {sent ? (
        <p className="text-sm text-kumo-default">
          If an account uses that address, a reset link is on its way. It expires in one hour.
        </p>
      ) : (
        <form
          className="space-y-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const email = String(new FormData(event.currentTarget).get("email") ?? "");
            if (await action.run({ data: { email } })) setSent(true);
          }}
        >
          <ErrorBanner message={action.error} />
          <TextField label="Email" name="email" type="email" autoComplete="email" required />
          <Button type="submit" variant="primary" className="w-full" pending={action.pending}>
            Send reset link
          </Button>
        </form>
      )}
      <p className="mt-4 text-center text-xs text-kumo-subtle">
        <TextLink to="/login">Back to sign in</TextLink>
      </p>
    </AuthCard>
  );
}