import { ArrowRight, LockKeyhole, Mail } from "lucide-react";
import { useState } from "react";
import { login } from "../api";
import AuthLayout from "./AuthLayout";

export default function LoginPage() {
  const [status, setStatus] = useState({ loading: false, error: "" });

  async function handleSubmit(event) {
    event.preventDefault();
    setStatus({ loading: true, error: "" });
    const form = new FormData(event.currentTarget);
    try {
      const result = await login({
        email: form.get("email"),
        password: form.get("password"),
      });
      sessionStorage.setItem("agmail_access_token", result.access_token);
      sessionStorage.setItem("agmail_account", JSON.stringify(result.account));
      window.location.assign("/app");
    } catch (error) {
      setStatus({ loading: false, error: error.message });
    }
  }

  return (
    <AuthLayout
      eyebrow="Welcome back"
      title={<>Your inbox<br /><em>missed you.</em></>}
      description="Sign in to continue working alongside your agents."
    >
      <>
          <div className="card-heading"><h2>Log in to agmail</h2><p>Enter your account details below.</p></div>
          <form className="auth-form" onSubmit={handleSubmit}>
            <label>Email address<div className="input-wrap"><Mail size={16} /><input name="email" type="email" placeholder="you@getall.help" required autoComplete="email" /></div></label>
            <label>Password<div className="input-wrap"><LockKeyhole size={16} /><input name="password" type="password" placeholder="Your password" required autoComplete="current-password" /></div></label>
            {status.error && <p className="form-error" role="alert">{status.error}</p>}
            <button className="button button-coral auth-submit" disabled={status.loading}>
              {status.loading ? "Signing in…" : "Log in"} <ArrowRight size={16} />
            </button>
          </form>
          <p className="auth-switch">New to agmail? <a href="/signup">Create an account</a></p>
      </>
    </AuthLayout>
  );
}