/* Login screen — hardcoded creds (configurable from Tweaks if needed) */

function LoginScreen({ onLogin, expectedUser, expectedPass }) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);
  const userRef = useRef(null);

  useEffect(() => { userRef.current?.focus(); }, []);

  const submit = (e) => {
    e?.preventDefault();
    if (submitting) return;
    setError(null);

    if (!username.trim() || !password) {
      setError("Username and password are required.");
      return;
    }

    setSubmitting(true);
    // Simulated auth round-trip
    setTimeout(() => {
      if (username === expectedUser && password === expectedPass) {
        onLogin(username);
      } else {
        setError(`Invalid credentials. Hint: both fields should be "${expectedUser}".`);
        setSubmitting(false);
      }
    }, 600);
  };

  return (
    <div className="login-screen" data-screen-label="Login" data-testid="login-screen">
      <div className="login-side">
        <div className="login-card">
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span className="brand-mark" style={{ width: 32, height: 32, fontSize: 14 }}>Q</span>
            <strong style={{ fontSize: 15, letterSpacing: "-0.01em" }}>QA Candidate Testing</strong>
          </div>

          <div>
            <h1 className="h1">Welcome</h1>
            <p className="subtle" style={{ marginTop: 6, fontSize: 14 }}>
              Sign in to start the automation assignment.
            </p>
          </div>

          <form className="login-form" onSubmit={submit} data-testid="login-form" noValidate>
            <div className="field">
              <label className="field-label" htmlFor="username">Username</label>
              <input
                ref={userRef}
                id="username"
                data-testid="username-input"
                className="input"
                type="text"
                autoComplete="username"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
                placeholder={expectedUser}
              />
            </div>

            <div className="field">
              <label className="field-label" htmlFor="password">Password</label>
              <input
                id="password"
                data-testid="password-input"
                className="input"
                type="password"
                autoComplete="current-password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••"
              />
            </div>

            {error && (
              <div className="field-error" data-testid="login-error" role="alert">
                {error}
              </div>
            )}

            <button
              type="submit"
              className="btn btn-lg"
              data-testid="login-submit"
              disabled={submitting}
              style={{ width: "100%" }}
            >
              {submitting ? <><span className="spinner" /> Signing in…</> : <>Sign in</>}
            </button>
          </form>

          <div className="login-credentials-hint" data-testid="credentials-hint" style={{ display: "none" }} />
        </div>
      </div>

      <aside className="login-illustration" aria-hidden="true">
        <div className="login-illustration-grid" />
        <div className="login-illustration-inner">
          <div style={{ fontSize: 13, fontWeight: 600, color: "var(--fg-muted)", letterSpacing: "0.05em", textTransform: "uppercase" }}>
            What's inside
          </div>
          <div className="login-illust-card">
            <span className="num">14</span>
            <div>
              <div style={{ color: "var(--fg)", fontWeight: 500 }}>Practical exercises</div>
              <div style={{ fontSize: 12 }}>From basic locators to shadow DOM and iframes</div>
            </div>
          </div>
          <div className="login-illust-card">
            <span className="num">~</span>
            <div>
              <div style={{ color: "var(--fg)", fontWeight: 500 }}>Realistic timing</div>
              <div style={{ fontSize: 12 }}>Page loads, AJAX delays, animated states</div>
            </div>
          </div>
          <div className="login-illust-card">
            <span className="num">⌖</span>
            <div>
              <div style={{ color: "var(--fg)", fontWeight: 500 }}>Real-world challenges</div>
              <div style={{ fontSize: 12 }}>Async data, hidden elements, dynamic tables, and more</div>
            </div>
          </div>
        </div>
      </aside>
    </div>
  );
}

window.LoginScreen = LoginScreen;