"use client";

import * as React from "react";
import Link from "next/link";
import { useActionState } from "react";
import { CheckCircle2 } from "lucide-react";
import { resetPasswordAction } from "@/lib/actions/auth";
import { authTexts } from "@/lib/i18n/auth";
import type { AuthActionState } from "@/lib/validation/auth";
import { FormAlert } from "../_components/form-alert";
import { SubmitButton } from "../_components/submit-button";
import { TextField } from "../_components/text-field";

export function ResetPasswordForm({ token }: { token: string }) {
  const [state, formAction, pending] = useActionState<AuthActionState, FormData>(
    resetPasswordAction,
    null,
  );
  const [password, setPassword] = React.useState("");
  const [confirmPassword, setConfirmPassword] = React.useState("");

  const failure = state && state.ok === false ? state : null;
  const done = Boolean(state && state.ok === true);

  if (done) {
    return (
      <div className="space-y-5">
        <div className="flex size-11 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400">
          <CheckCircle2 className="size-5" />
        </div>
        <p className="text-sm leading-relaxed text-foreground">{authTexts.resetDone}</p>
        <Link
          href="/signin?reset=1"
          className="inline-flex h-11 w-full items-center justify-center rounded-lg bg-primary px-4 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
        >
          {authTexts.signInSubmit}
        </Link>
      </div>
    );
  }

  return (
    <form action={formAction} className="space-y-5">
      <input type="hidden" name="token" value={token} />

      {failure ? <FormAlert tone="error">{failure.error}</FormAlert> : null}

      <TextField
        id="password"
        name="password"
        type="password"
        label={authTexts.newPasswordLabel}
        placeholder={authTexts.passwordPlaceholder}
        autoComplete="new-password"
        value={password}
        onChange={setPassword}
        error={failure?.fieldErrors?.password}
        hint={authTexts.passwordHint}
        disabled={pending}
        autoFocus
        required
      />

      <TextField
        id="confirmPassword"
        name="confirmPassword"
        type="password"
        label={authTexts.confirmPasswordLabel}
        placeholder={authTexts.passwordPlaceholder}
        autoComplete="new-password"
        value={confirmPassword}
        onChange={setConfirmPassword}
        error={failure?.fieldErrors?.confirmPassword}
        disabled={pending}
        required
      />

      <SubmitButton
        pending={pending}
        label={authTexts.resetSubmit}
        pendingLabel={authTexts.resetSubmitting}
      />
    </form>
  );
}

export default ResetPasswordForm;