import * as React from "react"
 
import { useFormAutosave } from "@/hooks/use-form-autosave"
 
interface ApplicationForm {
  applicant: { name: string; email: string }
  summary: string
  sections: Array<{ id: string; text: string }>
}
 
const INITIAL_VALUES: ApplicationForm = {
  applicant: { name: "", email: "" },
  summary: "",
  sections: [],
}
 
export function ApplicationFormPage() {
  const [values, setValues] = React.useState<ApplicationForm>(INITIAL_VALUES)
  const autosave = useFormAutosave("application-form", values, {
    debounceMs: 1500,
  })
 
  const handleRestore = () => {
    const draft = autosave.restore()
    if (draft) setValues(draft)
  }
 
  return (
    <form className="space-y-4">
      {/* form fields */}
      <footer className="flex items-center gap-3 text-sm text-muted-foreground">
        <span>
          {autosave.isSaving
            ? "Saving…"
            : autosave.savedAt
              ? `Saved at ${new Date(autosave.savedAt).toLocaleTimeString()}`
              : "Draft not saved yet"}
        </span>
        <button
          type="button"
          onClick={handleRestore}
          disabled={!autosave.hasDraft}
        >
          Restore draft
        </button>
        <button
          type="button"
          onClick={autosave.clear}
          disabled={!autosave.hasDraft}
        >
          Clear draft
        </button>
      </footer>
    </form>
  )
}