"use client";

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

/** Original UIDiscovery example. MIT licensed. Local preview only; no authentication or network request. */
export function LoginExample() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [submitted, setSubmitted] = useState(false);
  function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (event.currentTarget.reportValidity()) setSubmitted(true);
  }
  function reset() { setEmail(""); setPassword(""); setShowPassword(false); setSubmitted(false); }
  return <section aria-label="Interactive login 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">Northstar · Account preview</p>
    <h3 className="mt-5 text-2xl font-semibold tracking-tight">Welcome back</h3>
    <p className="mt-2 text-sm text-zinc-600">Try the form. Nothing is sent or saved.</p>
    <form className="mt-6 space-y-4" onSubmit={submit}>
      <div><label htmlFor="demo-login-email" className="block text-sm font-medium">Email address</label><input id="demo-login-email" type="email" autoComplete="off" required value={email} onChange={event => { setEmail(event.target.value); setSubmitted(false); }} placeholder="you@example.com" 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" /></div>
      <div><label htmlFor="demo-login-password" className="block text-sm font-medium">Password</label><div className="mt-2 flex overflow-hidden rounded-xl border border-zinc-300 focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-black"><input id="demo-login-password" type={showPassword ? "text" : "password"} autoComplete="off" required minLength={8} value={password} onChange={event => { setPassword(event.target.value); setSubmitted(false); }} placeholder="At least 8 characters" className="min-w-0 flex-1 px-4 py-3 text-sm outline-none" /><button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword} className="px-4 text-sm font-medium text-zinc-700 focus-visible:outline-2 focus-visible:outline-offset-[-3px]">{showPassword ? "Hide" : "Show"}</button></div></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">Preview sign in</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">{submitted ? `Form complete for ${email}. This demo does not sign you in.` : "Use any email and an eight-character password to preview the complete state."}</p>
  </section>;
}