import { useState } from "react";
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { authClient } from "../lib/auth-client";
import { toast } from "sonner";
import { ResetPasswordSearchSchema } from "@lila/shared";

function ResetPasswordPage() {
  const { token } = Route.useSearch();
  const navigate = useNavigate();
  const [password, setPassword] = useState("");
  const [isPending, setIsPending] = useState(false);

  if (!token) {
    return (
      <div className="flex flex-col items-center justify-center gap-4 p-8 max-w-sm mx-auto text-center">
        <h1 className="text-2xl font-black tracking-tight text-(--color-text)">
          Invalid link
        </h1>
        <p className="text-sm text-(--color-text-muted)">
          This reset link is invalid or has expired.
        </p>
        <Link
          to="/forgot-password"
          className="text-sm text-(--color-primary) hover:underline"
        >
          Request a new one
        </Link>
      </div>
    );
  }

  const handleSubmit = async () => {
    setIsPending(true);
    await authClient.resetPassword(
      { newPassword: password, token },
      {
        onSuccess: () => {
          toast.success("Password updated. You can now sign in.");
          void navigate({ to: "/" });
        },
        onError: (ctx) => {
          toast.error(ctx.error.message ?? "Something went wrong.");
          setIsPending(false);
        },
      },
    );
  };

  return (
    <div className="flex flex-col items-center justify-center gap-6 p-8 max-w-sm mx-auto">
      <div className="w-full text-center">
        <h1 className="text-2xl font-black tracking-tight text-(--color-text)">
          Reset password
        </h1>
        <p className="mt-1 text-sm text-(--color-text-muted)">
          Enter your new password below.
        </p>
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          void handleSubmit();
        }}
        className="w-full flex flex-col gap-3"
      >
        <input
          type="password"
          placeholder="New password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          minLength={8}
          className="w-full rounded-2xl border border-(--color-primary-light) bg-white px-4 py-3 text-sm text-(--color-text) placeholder:text-(--color-text-muted) focus:outline-none focus:ring-2 focus:ring-(--color-primary)"
        />
        <button
          type="submit"
          disabled={isPending}
          className="w-full rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) transition-colors disabled:opacity-50"
        >
          {isPending ? "Updating..." : "Update password"}
        </button>
      </form>
    </div>
  );
}

export const Route = createFileRoute("/reset-password")({
  component: ResetPasswordPage,
  validateSearch: ResetPasswordSearchSchema,
});
