import { useState } from "react";
import "./login.css";

const ONLY_ALLOWED_USERNAME = "GLIS26STEM";

export default function LabSelection({ onApproved }) {
  const [username, setUsername] = useState("");
  const [showApproved, setShowApproved] = useState(false);

  function submit(e) {
    e.preventDefault();

    if (username.trim().toLowerCase() === ONLY_ALLOWED_USERNAME.toLowerCase()) {
      setShowApproved(true);

      // let the toast animate in, then proceed
      setTimeout(() => onApproved(), 600);

      // optional: hide toast if you ever stay on this screen
      setTimeout(() => setShowApproved(false), 2500);
    } else {
      alert("That username isn’t allowed.");
    }
  }

  return (
    <>
      <div className={`approvedToast ${showApproved ? "show" : ""}`}>
        Approved ✓
      </div>

      <div className="loginOverlay">
        <div className="loginCard">
          <h1 className="loginTitle">Computer Vision Lab</h1>
          <p className="loginSubtitle">Enter your class username to continue.</p>

          <form onSubmit={submit} autoComplete="off">
            <label className="loginLabel">Username</label>
            <input
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="e.g., cv-student"
              required
            />

            <div className="loginRow">
              <button type="submit">Continue</button>
              <div className="loginTip">Tip: usernames are case-insensitive.</div>
            </div>
          </form>
        </div>
      </div>
    </>
  );
}