import * as React from "react"
 
import { usePayloadDiffGuard } from "@/hooks/use-payload-diff-guard"
 
interface UserPayload {
  id: string
  name: string
  email: string
  role: string
  profile: {
    bio: string
    location: string
  }
}
 
const dbUser: UserPayload = {
  id: "user_123",
  name: "Ada Lovelace",
  email: "ada@example.com",
  role: "admin",
  profile: {
    bio: "First computer programmer.",
    location: "London",
  },
}
 
export function UserSettingsForm() {
  const [formUser, setFormUser] = React.useState<UserPayload>(dbUser)
  const [status, setStatus] = React.useState("Idle")
 
  const { hasChanges, isPristine, diffs, preventSubmit } =
    usePayloadDiffGuard<UserPayload>(dbUser, formUser, {
      ignorePath: (path) =>
        // path is strongly typed as: "id" | "name" | "email" | "role" | "profile" | "profile.bio" | "profile.location"
        path === "profile.bio",
    })
 
  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    const didSubmit = await preventSubmit(async () => {
      // Only called when there are actual changes
      await saveUserToServer(formUser)
      setStatus("Saved changes to server")
    })
 
    if (!didSubmit) {
      setStatus("Skipped submit – no changes detected")
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      {/* your form fields here, wired to formUser + setFormUser */}
      <button type="submit" disabled={isPristine}>
        {isPristine ? "Nothing to submit" : "Save changes"}
      </button>
      <p>{status}</p>
      <p>Changed paths: {diffs.map((d) => d.path).join(", ")}</p>
    </form>
  )
}

type PayloadPath<T> = /* derived string-union of JSON-style paths */
 
interface PayloadDiffEntry<T> {
  path: PayloadPath<T>
  dbValue: unknown
  inputValue: unknown
  type: "added" | "removed" | "changed"
}
 
interface UsePayloadDiffGuardOptions<T> {
  ignorePath?: (path: PayloadPath<T>, entry: PayloadDiffEntry<T>) => boolean
}

interface UsePayloadDiffGuardResult<T> {
  hasChanges: boolean
  isPristine: boolean
  diffs: PayloadDiffEntry<T>[]
  changedPaths: PayloadPath<T>[]
  added: PayloadDiffEntry<T>[]
  removed: PayloadDiffEntry<T>[]
  changed: PayloadDiffEntry<T>[]
  preventSubmit: (onSubmit: () => void | Promise<void>) => Promise<boolean>
}

const ignored: PayloadPath<UserPayload>[] = [
  "profile.bio",
  "profile.location",
  "email",
]
 
const result = usePayloadDiffGuard<UserPayload>(dbUser, formUser, {
  ignorePath: (path) => ignored.includes(path),
})

const result = usePayloadDiffGuard<UserPayload>(dbUser, formUser, {
  ignorePath: (path) => path === "profile" || path.startsWith("profile."),
})

const { isPristine, preventSubmit } = usePayloadDiffGuard<UserPayload>(
  dbUser,
  formUser
)
 
async function handleSubmit(event: React.FormEvent) {
  event.preventDefault()
 
  const didSubmit = await preventSubmit(async () => {
    await saveUserToServer(formUser)
  })
 
  if (!didSubmit) {
    toast("Nothing changed, skipping request.")
  }
}
 
return (
  <form onSubmit={handleSubmit}>
    {/* fields ... */}
    <button type="submit" disabled={isPristine}>
      {isPristine ? "Nothing to submit" : "Save changes"}
    </button>
  </form>
)