import { type FormEvent, useEffect, useState } from "react";
import { Alert, Button, Loader, PasswordInput, Stack } from "@mantine/core";
import { AlertCircle, KeyRound } from "lucide-react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";

import AuthShell from "@/components/auth/AuthShell";
import PasswordChecklist from "@/components/auth/PasswordChecklist";
import { api } from "@/services/api";
import type { ResetLinkAccount } from "@/types/auth";
import { meetsAllRequirements } from "@/utils/passwordSchema";
import { extractApiError } from "@/utils/result";

/**
 * Lands the password-reset link a staff member sends from the backoffice
 * (`/reset-password?uid=…&token=…`).
 *
 * The link itself is the proof of possession — it was delivered to the address
 * on the account — so there is no code to type. The token is validated before
 * the form appears, which is what lets an expired link say so up front instead
 * of after a password has been chosen.
 */
export default function ResetPasswordLinkPage() {
  const navigate = useNavigate();
  const [params] = useSearchParams();
  const userId = params.get("uid") ?? "";
  const token = params.get("token") ?? "";

  const [account, setAccount] = useState<ResetLinkAccount | null>(null);
  const [checking, setChecking] = useState(true);
  const [linkError, setLinkError] = useState<string | null>(null);

  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!userId || !token) {
      setLinkError(
        "This password-reset link is incomplete. Open the full link from your email or SMS.",
      );
      setChecking(false);
      return;
    }

    let cancelled = false;
    api.auth.resolveResetLink
      .call({ userId, token })
      .then((resolved) => {
        if (!cancelled) setAccount(resolved);
      })
      .catch((err) => {
        if (!cancelled) setLinkError(extractApiError(err).message);
      })
      .finally(() => {
        if (!cancelled) setChecking(false);
      });

    return () => {
      cancelled = true;
    };
  }, [userId, token]);

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError(null);

    if (!account) return;
    if (password !== confirmPassword) {
      setError("Passwords do not match.");
      return;
    }

    setSubmitting(true);
    try {
      await api.auth.resetPassword.call({
        userId: account.userId,
        // Resolved server-side from the token — the account holder never types
        // an identifier, so there is nothing here to get wrong.
        email: account.identifier,
        verificationCode: account.verificationCode,
        newPassword: password,
        confirmPassword,
      });
      navigate("/login", { replace: true, state: { passwordReset: true } });
    } catch (err) {
      setError(extractApiError(err).message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <AuthShell
      tagline="Set a new password"
      taglineBody="Choose a new password for your EDR Freight account."
    >
      <div className="flex w-full flex-col">
        <div className="mb-1 flex justify-center">
          <span className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">
            <KeyRound size={22} />
          </span>
        </div>

        <div className="mb-4 mt-3 space-y-1.5 text-center sm:mb-5">
          <h1 className="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl">
            Choose a new password
          </h1>
          <p className="text-sm leading-relaxed text-gray-500">
            {checking
              ? "Checking your reset link…"
              : account
                ? `Resetting the password for ${account.maskedIdentifier}.`
                : "This link can no longer be used."}
          </p>
        </div>

        {checking ? (
          <div className="flex justify-center py-6">
            <Loader size="sm" />
          </div>
        ) : null}

        {!checking && linkError ? (
          <Stack gap="md">
            <Alert color="red" variant="light" icon={<AlertCircle size={18} />}>
              {linkError}
            </Alert>
            <Button
              color="edr-green"
              fullWidth
              onClick={() => navigate("/forgot-password")}
            >
              Request a new link
            </Button>
            <p className="text-center text-sm text-gray-500">
              Remembered it?{" "}
              <Link
                to="/login"
                className="font-semibold text-primary hover:underline"
              >
                Back to sign in
              </Link>
            </p>
          </Stack>
        ) : null}

        {!checking && account ? (
          <form onSubmit={handleSubmit} className="flex w-full flex-col">
            <Stack gap="md">
              <div>
                <PasswordInput
                  label="New password"
                  placeholder="Create a strong password"
                  autoComplete="new-password"
                  required
                  disabled={submitting}
                  value={password}
                  onChange={(event) => setPassword(event.target.value)}
                />
                <PasswordChecklist value={password} />
              </div>

              <PasswordInput
                label="Confirm new password"
                placeholder="Re-enter your password"
                autoComplete="new-password"
                required
                disabled={submitting}
                error={
                  confirmPassword && confirmPassword !== password
                    ? "Passwords do not match"
                    : undefined
                }
                value={confirmPassword}
                onChange={(event) => setConfirmPassword(event.target.value)}
              />

              {error ? (
                <Alert
                  color="red"
                  variant="light"
                  icon={<AlertCircle size={18} />}
                >
                  {error}
                </Alert>
              ) : null}

              <Button
                type="submit"
                color="edr-green"
                fullWidth
                loading={submitting}
                disabled={
                  submitting ||
                  !meetsAllRequirements(password) ||
                  password !== confirmPassword
                }
              >
                Reset password
              </Button>
            </Stack>
          </form>
        ) : null}
      </div>
    </AuthShell>
  );
}
