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

type LoginPageProps = {
  busy: boolean;
  error: string | null;
  onSubmit: (payload: { accessKey: string }) => Promise<void>;
};

export default function LoginPage({ busy, error, onSubmit }: LoginPageProps) {
  const [accessKey, setAccessKey] = useState("");

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    await onSubmit({
      accessKey: accessKey.trim()
    });
  };

  return (
    <main className="auth-shell">
      <section className="auth-card">
        <div className="eyebrow">Mailserver</div>
        <h1>User management</h1>
        {/* <p className="auth-copy">
          Sign in with the access key configured for this panel.
        </p> */}

        <form className="stack" onSubmit={handleSubmit}>
          <label className="field">
            <span>Access key</span>
            <input
              type="password"
              value={accessKey}
              onChange={(event) => setAccessKey(event.target.value)}
              autoComplete="current-password"
              autoFocus
              disabled={busy}
            />
          </label>

          {error ? <p className="form-error">{error}</p> : null}

          <button type="submit" className="primary-button" disabled={busy}>
            {busy ? "Signing in..." : "Sign in"}
          </button>
        </form>
      </section>
    </main>
  );
}