"use client";

import { useEffect, useRef, useState } from "react";

import { useUnsavedChanges } from "@/lib/hooks/use-unsaved-changes";

/**
 * Mount this inside a <form> to attach a beforeunload prompt as soon as the
 * user edits any input. Once the form is submitted, the dirty state resets so
 * the prompt does not block the resulting navigation.
 */
export function UnsavedChangesWatcher() {
  const [isDirty, setIsDirty] = useState(false);
  const rootRef = useRef<HTMLSpanElement | null>(null);

  useUnsavedChanges(isDirty);

  useEffect(() => {
    const node = rootRef.current;
    const form = node?.closest("form");
    if (!form) return;

    const handleInput = () => setIsDirty(true);
    const handleSubmit = () => setIsDirty(false);
    const handleReset = () => setIsDirty(false);

    form.addEventListener("input", handleInput);
    form.addEventListener("change", handleInput);
    form.addEventListener("submit", handleSubmit);
    form.addEventListener("reset", handleReset);

    return () => {
      form.removeEventListener("input", handleInput);
      form.removeEventListener("change", handleInput);
      form.removeEventListener("submit", handleSubmit);
      form.removeEventListener("reset", handleReset);
    };
  }, []);

  return <span ref={rootRef} aria-hidden="true" className="hidden" />;
}