// Login screen — Email+Password (primary), Magic Link, Google OAuth.

window.LoginScreen = function LoginScreen({
  isConfigured,
  signInWithPassword,
  signUpWithPassword,
  signInWithMagicLink,
  signInWithGoogle,
}) {
  const [mode, setMode] = React.useState("signin"); // "signin" | "signup" | "magic"
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [fullName, setFullName] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState("");
  const [info, setInfo] = React.useState("");

  const reset = () => { setError(""); setInfo(""); };

  const onSubmit = async (e) => {
    e.preventDefault();
    reset();
    setBusy(true);
    try {
      if (mode === "signin") {
        const { error } = await signInWithPassword(email.trim(), password);
        if (error) setError(error.message || "Sign in failed");
      } else if (mode === "signup") {
        if (password.length < 8) {
          setError("รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร");
          return;
        }
        const { error } = await signUpWithPassword(email.trim(), password, fullName.trim());
        if (error) setError(error.message || "Sign up failed");
        else setInfo("✅ สมัครสำเร็จ — กำลังเข้าสู่ระบบ…");
      } else if (mode === "magic") {
        const { error } = await signInWithMagicLink(email.trim());
        if (error) setError(error.message || "Magic link failed");
        else setInfo("📧 ส่งลิงก์ไปที่อีเมลแล้ว — เปิด email แล้วคลิกเพื่อเข้าระบบ");
      }
    } finally {
      setBusy(false);
    }
  };

  const onGoogle = async () => {
    reset();
    setBusy(true);
    try {
      const { error } = await signInWithGoogle();
      if (error) setError(error.message || "Google sign-in failed");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login-screen">
      <div className="login-card">
        <img src="assets/initial-logo.jpg" alt="Initial Estate" className="login-logo"/>
        <div className="login-eyebrow">Initial Estate HR</div>
        <h1 className="login-title">AI-assisted hiring</h1>
        <p className="login-sub">
          {mode === "signup" ? "Create your account" : mode === "magic" ? "Sign in with magic link" : "Sign in to continue"}
        </p>

        {!isConfigured && (
          <div className="login-warning">
            <strong>⚠ Setup required:</strong> Supabase config missing in <code>index.html</code>.
          </div>
        )}

        {error && <div className="login-warning login-error">{error}</div>}
        {info && <div className="login-info">{info}</div>}

        <form onSubmit={onSubmit} className="login-form">
          {mode === "signup" && (
            <div className="login-field">
              <label>Full name</label>
              <input
                type="text"
                value={fullName}
                onChange={(e) => setFullName(e.target.value)}
                placeholder="Somchai P."
                autoComplete="name"
                required
              />
            </div>
          )}
          <div className="login-field">
            <label>Email</label>
            <input
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="you@initialestate.com"
              autoComplete="email"
              required
            />
          </div>
          {mode !== "magic" && (
            <div className="login-field">
              <label>Password {mode === "signup" && <span className="login-hint">(8+ ตัวอักษร)</span>}</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                autoComplete={mode === "signup" ? "new-password" : "current-password"}
                minLength={mode === "signup" ? 8 : undefined}
                required
              />
            </div>
          )}
          <button
            type="submit"
            className="btn btn-primary login-submit"
            disabled={busy || !isConfigured}
          >
            {busy ? "กำลังดำเนินการ…"
              : mode === "signin" ? "Sign in"
              : mode === "signup" ? "Sign up"
              : "ส่ง Magic Link"}
          </button>
        </form>

        <div className="login-divider"><span>or</span></div>

        <button
          className="login-google-btn"
          onClick={onGoogle}
          disabled={busy || !isConfigured}
          type="button"
        >
          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
            <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84c-.21 1.13-.84 2.09-1.79 2.73v2.27h2.9c1.7-1.57 2.69-3.88 2.69-6.64z"/>
            <path fill="#34A853" d="M9 18c2.43 0 4.46-.81 5.95-2.18l-2.9-2.27c-.81.54-1.83.86-3.05.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.34A9 9 0 0 0 9 18z"/>
            <path fill="#FBBC05" d="M3.97 10.71A5.41 5.41 0 0 1 3.68 9c0-.59.1-1.17.29-1.71V4.96H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.04l3.01-2.33z"/>
            <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.96l3.01 2.33C4.68 5.18 6.66 3.58 9 3.58z"/>
          </svg>
          <span>Sign in with Google</span>
        </button>

        <div className="login-foot login-switch">
          {mode === "signin" && (
            <>
              ยังไม่มีบัญชี? <button type="button" className="link-btn" onClick={() => { reset(); setMode("signup"); }}>สมัคร</button>
              <span className="dot-sep">·</span>
              <button type="button" className="link-btn" onClick={() => { reset(); setMode("magic"); }}>ลิงก์ทาง email</button>
            </>
          )}
          {mode === "signup" && (
            <>มีบัญชีแล้ว? <button type="button" className="link-btn" onClick={() => { reset(); setMode("signin"); }}>เข้าสู่ระบบ</button></>
          )}
          {mode === "magic" && (
            <>กลับไป <button type="button" className="link-btn" onClick={() => { reset(); setMode("signin"); }}>ใช้รหัสผ่าน</button></>
          )}
        </div>

        <div className="login-foot">
          By continuing you agree to Initial Estate internal use policy.
        </div>
      </div>
      <div className="login-bg-orb login-bg-orb-a"/>
      <div className="login-bg-orb login-bg-orb-b"/>
    </div>
  );
};