"use client";
import * as React from "react";
import { authClient } from "@/lib/auth-client";
import { recordAuditFromClient } from "@/actions/account";
import { PasswordInput, PasswordRequirements, passwordStrong } from "@/components/auth/password-input";
import { Button } from "@/components/ui/button";
import { Field, FieldError, Hint, Label } from "@/components/ui/label";
import { Alert } from "@/components/ui/alert";

export function ChangePasswordForm() {
  const [current, setCurrent] = React.useState("");
  const [next, setNext] = React.useState("");
  const [confirm, setConfirm] = React.useState("");
  const [revokeOthers, setRevokeOthers] = React.useState(true);
  const [error, setError] = React.useState<string | null>(null);
  const [done, setDone] = React.useState(false);
  const [loading, setLoading] = React.useState(false);

  const mismatch = confirm.length > 0 && confirm !== next;
  const canSubmit = current.length > 0 && passwordStrong(next) && next === confirm && next !== current;

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    setDone(false);
    setLoading(true);
    const { error } = await authClient.changePassword({ currentPassword: current, newPassword: next, revokeOtherSessions: revokeOthers });
    if (error) {
      setLoading(false);
      setError(error.status === 400 || error.status === 401 ? "Your current password is incorrect." : error.message ?? "Could not change the password. Try again.");
      return;
    }
    await recordAuditFromClient("password.changed", { revokedOtherSessions: revokeOthers }).catch(() => {});
    setLoading(false);
    setDone(true);
    setCurrent("");
    setNext("");
    setConfirm("");
  }

  return (
    <form onSubmit={submit} className="grid gap-4 sm:max-w-md" noValidate>
      {error ? <Alert variant="danger">{error}</Alert> : null}
      {done ? <Alert variant="success">Password changed.{revokeOthers ? " Other devices have been signed out." : ""}</Alert> : null}
      <Field>
        <Label htmlFor="pw-current">Current password</Label>
        <PasswordInput id="pw-current" autoComplete="current-password" value={current} onChange={(e) => setCurrent(e.target.value)} required />
      </Field>
      <Field>
        <Label htmlFor="pw-new">New password</Label>
        <PasswordInput id="pw-new" autoComplete="new-password" value={next} onChange={(e) => setNext(e.target.value)} required />
        <PasswordRequirements password={next} />
        {next && current && next === current ? <FieldError>Choose a password different from the current one.</FieldError> : null}
      </Field>
      <Field>
        <Label htmlFor="pw-confirm">Confirm new password</Label>
        <PasswordInput id="pw-confirm" autoComplete="new-password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required aria-invalid={mismatch} />
        <FieldError>{mismatch ? "Passwords do not match." : null}</FieldError>
      </Field>
      <label className="flex items-start gap-2 text-[13px] text-fg-muted">
        <input type="checkbox" checked={revokeOthers} onChange={(e) => setRevokeOthers(e.target.checked)} className="mt-0.5 size-4 rounded border-border accent-[var(--accent)]" />
        <span>
          Sign out all other devices
          <Hint>Recommended if you suspect your password leaked. This session stays active.</Hint>
        </span>
      </label>
      <div>
        <Button type="submit" variant="primary" loading={loading} disabled={!canSubmit}>
          Update password
        </Button>
      </div>
    </form>
  );
}