// Login page — two ways in:
//   • Operators: "Sign in with Microsoft" is a plain full-page <a href="/auth/login">
//     that hands off to the PKCE redirect flow (viewer-server GET /auth/login).
//     The browser leaves this SPA entirely; on return the session cookie is set
//     and whoami finds the identity. No device-code polling here anymore — that
//     endpoint (/login/start) still exists for the CLI, just not for the web UI.
//   • Customers: a toggle reveals an email + password form that POSTs via
//     window.Api.customerLogin; on { ok, landing } we navigate to the landing page.
const { useState: useStateLogin } = React;

function LoginPage() {
  const [showCustomer, setShowCustomer] = useStateLogin(false);
  const [email, setEmail] = useStateLogin("");
  const [password, setPassword] = useStateLogin("");
  const [submitting, setSubmitting] = useStateLogin(false);
  const [error, setError] = useStateLogin(null);

  async function submitCustomer(e) {
    if (e) e.preventDefault();
    setSubmitting(true); setError(null);
    try {
      const { landing } = await window.Api.customerLogin(email.trim(), password);
      // Full-page nav to the customer's landing (session cookie is already set).
      window.location.assign(landing || "/sales/brief-to-done.html");
    } catch (err) {
      setError(String(err.message || err));
      setSubmitting(false);
    }
  }

  return (
    <div className="min-h-[70vh] flex items-center justify-center">
      <div className="max-w-md w-full rounded-2xl border border-neutral-200 p-8 text-center shadow-sm">
        <h1 className="text-xl font-semibold mb-2">Fellow Assembly Line</h1>
        <p className="text-neutral-500 mb-6">Sign in with your Fellow Microsoft account to continue.</p>

        {/* Primary: full-page redirect to the Microsoft PKCE flow. */}
        <a
          href="/auth/login"
          className="inline-block px-5 py-2.5 rounded-lg bg-[#2F2F2F] text-white font-medium hover:bg-black"
        >
          Sign in with Microsoft
        </a>

        {/* Secondary: customer credential login behind a toggle. */}
        <div className="mt-6">
          {!showCustomer ? (
            <button
              onClick={() => setShowCustomer(true)}
              className="text-sm text-neutral-500 hover:text-neutral-900 underline"
            >
              Customer login
            </button>
          ) : (
            <form onSubmit={submitCustomer} className="text-left space-y-3 border-t border-neutral-200 pt-6">
              <label className="block text-sm font-medium text-neutral-700">Email</label>
              <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                autoFocus
                autoComplete="username"
                className="w-full px-3 py-2.5 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                placeholder="name@company.com"
              />
              <label className="block text-sm font-medium text-neutral-700">Password</label>
              <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                autoComplete="current-password"
                className="w-full px-3 py-2.5 rounded-lg border border-neutral-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                placeholder="Password"
              />
              {error && <p className="text-red-600 text-sm">{error}</p>}
              <button
                type="submit"
                disabled={submitting}
                className="w-full px-5 py-2.5 rounded-lg bg-[#2F2F2F] text-white font-medium hover:bg-black active:scale-[0.99] transition disabled:opacity-60"
              >
                {submitting ? "Signing in…" : "Sign in"}
              </button>
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;