"use client"

import * as React from "react"
import { Checkbox } from "@/registry/ui/checkbox"
import { Label } from "@/registry/ui/label"
import {
  UnsavedChangesProvider,
  useUnsavedChangesContext,
} from "@/registry/ui/unsaved-changes-provider"

function DemoForm() {
  const { register } = useUnsavedChangesContext()
  const [dirty, setDirty] = React.useState(false)

  return (
    <div className="flex w-full max-w-sm flex-col gap-4 rounded-xl border p-6">
      <div className="flex items-center gap-2">
        <Checkbox
          id="dirty"
          checked={dirty}
          onCheckedChange={(checked) => {
            const next = checked === true
            setDirty(next)
            register(next)
          }}
        />
        <Label htmlFor="dirty">Mark form as having unsaved changes</Label>
      </div>
      <p className="text-sm text-muted-foreground">
        {dirty
          ? "Try the link below — navigation will be intercepted."
          : "Toggle the checkbox, then try the link."}
      </p>
      {/* Plain anchor (not next/link) to show the provider intercepting raw <a> clicks. */}
      <a
        href="/example-destination"
        className="text-sm font-medium text-primary underline-offset-4 hover:underline"
      >
        Navigate away
      </a>
    </div>
  )
}

export default function UnsavedChangesProviderDemo() {
  return (
    <div className="flex w-full justify-center">
      <UnsavedChangesProvider>
        <DemoForm />
      </UnsavedChangesProvider>
    </div>
  )
}