import { useState } from "react";
import { useTranslation } from "react-i18next";
import { login, type SessionUser } from "./api.js";

export function Login({ onLoggedIn }: { onLoggedIn: (u: SessionUser) => void }) {
  const { t } = useTranslation();
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setBusy(true);
    setError(null);
    try {
      onLoggedIn(await login(username, password));
    } catch (err) {
      setError((err as Error).message);
    } finally {
      setBusy(false);
    }
  }

  return (
    <main className="flex min-h-screen items-center justify-center bg-term-bg px-4">
      <form onSubmit={submit} className="card w-full max-w-sm p-6">
        <h1 className="mb-5 text-h5 font-semibold uppercase tracking-widest text-term-amber">{t("auth.title")}</h1>
        <div className="field mb-3">
          <label className="label">{t("auth.username")}</label>
          <input
            className="input"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
            autoFocus
            autoComplete="username"
          />
        </div>
        <div className="field mb-3">
          <label className="label">{t("auth.password")}</label>
          <input
            className="input"
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            autoComplete="current-password"
          />
        </div>
        {error && <p className="mb-3 text-[0.75rem] text-term-red">{error}</p>}
        <button type="submit" className="btn btn-primary btn-lg w-full" disabled={busy || !username || !password}>
          {busy ? t("auth.signingIn") : t("auth.signIn")}
        </button>
      </form>
    </main>
  );
}