"use client";

import { useActionState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { forceChangePasswordAction } from "./actions";

export function ForceChangeForm() {
  const router = useRouter();
  const [state, formAction, isPending] = useActionState(forceChangePasswordAction, null);

  useEffect(() => {
    if (state && "success" in state && state.success) {
      router.push("/dashboard");
      router.refresh();
    }
  }, [state, router]);

  const inputStyle = {
    width: "100%",
    padding: "0.5rem 0.75rem",
    fontSize: "16px",
    border: "2px solid var(--border)",
    background: "var(--background)",
    outline: "none",
    fontFamily: "inherit",
  } as React.CSSProperties;

  return (
    <form action={formAction} className="space-y-4">
      <div className="space-y-1">
        <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
          Новый пароль
        </label>
        <input type="password" name="newPassword" required minLength={8} style={inputStyle} placeholder="Минимум 8 символов" />
      </div>
      <div className="space-y-1">
        <label className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--muted-foreground)" }}>
          Повторите пароль
        </label>
        <input type="password" name="confirmPassword" required minLength={8} style={inputStyle} placeholder="Ещё раз" />
      </div>
      {state && "error" in state && state.error && (
        <p className="text-xs py-2 px-3" style={{ border: "2px solid oklch(0.577 0.245 27.325)", color: "oklch(0.577 0.245 27.325)" }}>
          {state.error}
        </p>
      )}
      <button type="submit" disabled={isPending} className="btn-aubade btn-aubade-accent w-full py-2 text-sm" style={{ opacity: isPending ? 0.6 : 1 }}>
        {isPending ? "Сохранение..." : "Сохранить и продолжить"}
      </button>
    </form>
  );
}