"use client";

import { useState, type FormEvent } from "react";

/** Original UIDiscovery example. MIT licensed. Validation runs locally. */
export function FieldValidationExample() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [touched, setTouched] = useState(false);
  const [complete, setComplete] = useState(false);
  const nameError = name.trim().length < 2 ? "Enter at least two characters." : "";
  const emailError = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? "" : "Enter an email address such as you@example.com.";
  function submit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setTouched(true); setComplete(!nameError && !emailError); }
  function reset() { setName(""); setEmail(""); setTouched(false); setComplete(false); }
  return <section aria-label="Interactive field validation example" className="rounded-3xl border border-zinc-200 bg-white p-5 text-zinc-950 sm:p-8">
    <p className="text-xs font-semibold uppercase tracking-widest text-zinc-600">Field notes · Form preview</p><h3 className="mt-5 text-2xl font-semibold tracking-tight">Join the reading list</h3><p className="mt-2 text-sm text-zinc-600">Errors appear after you try to continue. No address is collected.</p>
    <form noValidate onSubmit={submit} className="mt-6 space-y-4">
      <div><label htmlFor="demo-field-name" className="block text-sm font-medium">Your name</label><input id="demo-field-name" value={name} onChange={event => { setName(event.target.value); setComplete(false); }} aria-invalid={touched && !!nameError} aria-describedby={touched && nameError ? "demo-name-error" : undefined} className="mt-2 w-full rounded-xl border border-zinc-300 px-4 py-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black" />{touched && nameError && <p id="demo-name-error" className="mt-2 text-sm text-red-700">{nameError}</p>}</div>
      <div><label htmlFor="demo-field-email" className="block text-sm font-medium">Email address</label><input id="demo-field-email" type="email" value={email} onChange={event => { setEmail(event.target.value); setComplete(false); }} aria-invalid={touched && !!emailError} aria-describedby={touched && emailError ? "demo-email-error" : undefined} className="mt-2 w-full rounded-xl border border-zinc-300 px-4 py-3 text-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black" />{touched && emailError && <p id="demo-email-error" className="mt-2 text-sm text-red-700">{emailError}</p>}</div>
      <div className="flex flex-wrap gap-3 pt-1"><button type="submit" className="rounded-full bg-zinc-950 px-6 py-3 text-sm font-semibold text-white active:scale-[.97] focus-visible:outline-2 focus-visible:outline-offset-4">Check details</button><button type="button" onClick={reset} className="rounded-full border border-zinc-300 px-6 py-3 text-sm font-semibold active:scale-[.97] focus-visible:outline-2 focus-visible:outline-offset-4">Reset</button></div>
    </form><p role="status" className="mt-5 min-h-5 text-sm text-zinc-700">{complete ? `Looks good, ${name.trim()}. This is only a local preview.` : touched && (nameError || emailError) ? "Review the fields above and try again." : "Try submitting an empty form to see the validation state."}</p>
  </section>;
}