import { useState, type FormEvent } from 'react';
import { useAuth } from '../context/AuthContext';

export function SignIn() {
  const { signIn } = useAuth(); const [error, setError] = useState(''); const [busy, setBusy] = useState(false);
  async function submit(event: FormEvent<HTMLFormElement>) { event.preventDefault(); setBusy(true); setError(''); const form = new FormData(event.currentTarget); try { await signIn(String(form.get('email')), String(form.get('password'))); } catch { setError('Those credentials could not be verified.'); setBusy(false); } }
  return <><span className="eyebrow">Welcome back</span><h2>Sign in to FeltDB.</h2><p className="muted">Managed apps exchange credentials for a short-lived, application-scoped actor session.</p><form onSubmit={submit}><label>Email<input name="email" type="email" autoComplete="email" required placeholder="ada@example.com" /></label><label>Password<input name="password" type="password" autoComplete="current-password" required /></label>{error && <p className="error">{error}</p>}<button disabled={busy}>{busy ? 'Signing in…' : 'Sign in'}</button></form><p className="switch">New to this app? <a href="?view=signup">Create an account</a></p></>;
}