/* Dulius Web UI Kit — Log in (sign-up routes to the onboarding flow) */

function WAuth({ onClose, onDone, onSignup }) {
  const [view, setView] = React.useState("login"); // login | forgot | reset
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [showPw, setShowPw] = React.useState(false);
  const [code, setCode] = React.useState("");
  const [newPw, setNewPw] = React.useState("");
  const [showNewPw, setShowNewPw] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [notice, setNotice] = React.useState("");

  // Sign in via Clerk; on success let the host redirect to the dashboard.
  // Falls back to onDone() in preview where Clerk isn't configured.
  const resendCode = async () => {
    setErr(""); setNotice("");
    try {
      var si = window.Clerk.client.signIn;
      if (window.__verifyKind === "second") { await si.prepareSecondFactor({ strategy: "phone_code" }); }
      else { var ff = (si.supportedFirstFactors || []).find(function (f) { return f.strategy === "email_code"; }); if (ff) { await si.prepareFirstFactor({ strategy: "email_code", emailAddressId: ff.emailAddressId }); } }
      setNotice("New code sent. Check your inbox.");
    } catch (e7) { setErr((e7 && e7.errors && e7.errors[0] && e7.errors[0].message) || "Could not resend the code."); }
  };
  const verifyLogin = async (e) => {
    if (e) e.preventDefault();
    setErr(""); setBusy(true);
    try {
      var si = window.Clerk.client.signIn;
      var r2 = window.__verifyKind === "second"
        ? await si.attemptSecondFactor({ strategy: "phone_code", code: code.trim() })
        : await si.attemptFirstFactor({ strategy: "email_code", code: code.trim() });
      if (r2.status === "complete") { await window.Clerk.setActive({ session: r2.createdSessionId }); onDone(); }
      else { setErr("That code did not complete sign-in. Please try again."); }
    } catch (e6) {
      setErr((e6 && e6.errors && e6.errors[0] && e6.errors[0].message) || "Invalid or expired code.");
    } finally { setBusy(false); }
  };
  const login = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      if (!window.Clerk || !window.Clerk.client) { onDone(); return; }
      if (window.Clerk.session) { onDone(); return; }
      const res = await window.Clerk.client.signIn.create({ identifier: email, password: pw });
      if (res.status === "complete") {
        await window.Clerk.setActive({ session: res.createdSessionId });
        onDone();
      } else {
        if (res.status === "needs_first_factor") {
          var _ff = (res.supportedFirstFactors || []).find(function (f) { return f.strategy === "email_code"; });
          if (_ff) { await window.Clerk.client.signIn.prepareFirstFactor({ strategy: "email_code", emailAddressId: _ff.emailAddressId }); window.__verifyKind = "first"; setCode(""); setView("verify"); }
          else { setErr("Additional verification is required. Use the Forgot password link to sign in with an email code."); }
        } else if (res.status === "needs_second_factor") {
          var _sf = (res.supportedSecondFactors || []).find(function (f) { return f.strategy === "phone_code"; });
          if (_sf) { try { await window.Clerk.client.signIn.prepareSecondFactor({ strategy: "phone_code" }); } catch (e5) {} }
          window.__verifyKind = "second"; setCode(""); setView("verify");
        } else { setErr("Additional verification is required to sign in."); }
      }
    } catch (e2) {
      setErr((e2 && e2.errors && e2.errors[0] && e2.errors[0].message) || (e2 && e2.message) || "Couldn't sign you in. Check your email and password.");
    } finally { setBusy(false); }
  };

  // Step 1 of reset: create the sign-in, find the email factor, and send the
  // reset code via prepareFirstFactor (the most reliable Clerk pattern), then
  // advance to the code+new-password form.
  const requestResetCode = async () => {
    const signIn = window.Clerk.client.signIn;
    const si = await signIn.create({ identifier: email });
    const factor = (si.supportedFirstFactors || []).find((f) => f.strategy === "reset_password_email_code");
    await signIn.prepareFirstFactor({
      strategy: "reset_password_email_code",
      emailAddressId: factor && factor.emailAddressId,
    });
  };

  const sendReset = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      if (window.Clerk && window.Clerk.client) {
        await requestResetCode();
      }
      setView("reset");
    } catch (e2) {
      // Don't reveal whether the email exists — still advance to the code form.
      setView("reset");
    } finally { setBusy(false); }
  };

  // Step 2 of reset: verify the code + set the new password, then sign the user in.
  const completeReset = async (e) => {
    e.preventDefault();
    setErr(""); setBusy(true);
    try {
      if (!window.Clerk || !window.Clerk.client) { onDone(); return; }
      let res = await window.Clerk.client.signIn.attemptFirstFactor({ strategy: "reset_password_email_code", code });
      if (res && res.status !== "complete" && typeof res.resetPassword === "function") {
        try { res = await res.resetPassword({ password: newPw }); } catch (e9) {}
      }
      if (res.status === "complete") {
        await window.Clerk.setActive({ session: res.createdSessionId });
        onDone();
      } else if (res.status === "needs_second_factor") {
        setErr("Two-factor authentication is required. Please contact support.");
      } else {
        setErr("Could not reset your password. Please try again.");
      }
    } catch (e2) {
      setErr((e2 && e2.errors && e2.errors[0] && e2.errors[0].message) || (e2 && e2.message) || "That code didn't work or has expired. Please request a new one.");
    } finally { setBusy(false); }
  };

  const resendReset = async () => {
    setErr(""); setBusy(true);
    try {
      if (window.Clerk && window.Clerk.client) {
        await requestResetCode();
      }
    } catch (e2) { /* silent */ }
    finally { setBusy(false); }
  };

  return (
    <div className="wauth">
      <button className="wauth-close" onClick={onClose}><WIcon name="x" size={22} /></button>
      <div className="wauth-left">
        <img className="wauth-logo" src="../../assets/dulius-wordmark.png" alt="Dulius" />
        <div className="wauth-left-body">
          <h2 className="wauth-quote">Get back to your score, offers, and funding path.</h2>
          <div className="wauth-author">
            <div className="wauth-ava">RP</div>
            <div><div className="wauth-an">Renée Park</div><div className="wauth-ar">Owner, Park &amp; Co. Logistics</div></div>
          </div>
        </div>
        <div className="wauth-left-foot">
          <div className="wauth-trustrow"><WIcon name="shield-check" size={18} /> Bank-grade 256-bit encryption</div>
          <div className="wauth-trustrow"><WIcon name="lock" size={18} /> SOC 2 Type II</div>
        </div>
      </div>

      <div className="wauth-right">
        {view === "verify" && (
          <React.Fragment>
            <h1 className="wauth-h1">Verify it&#8217;s you</h1>
            <p className="wauth-sub">Enter the code we emailed to {email || "your inbox"} to finish signing in.</p>
            <form className="wauth-form" onSubmit={verifyLogin}>
              {err && <div className="ostep-error">{err}</div>}
              <label className="wfield"><span>Verification code</span>
                <div className="wfield-in"><WIcon name="shield-check" size={18} /><input type="text" inputMode="numeric" autoComplete="one-time-code" placeholder="123456" value={code} onChange={(e) => setCode(e.target.value)} /></div>
              </label>
              <WButton variant="accent" size="lg" iconRight="arrow-right">{busy ? "Verifying..." : "Verify & sign in"}</WButton>
            </form>
            {notice && <div className="wauth-sub" style={{ color: "#1f7a44", marginTop: 8 }}>{notice}</div>}
            <button type="button" className="wauth-forgot" onClick={resendCode}>Resend code</button>
            <button type="button" className="wauth-forgot" onClick={() => { setErr(""); setCode(""); setNotice(""); setView("login"); }}>&#8592; Back to login</button>
          </React.Fragment>
        )}
        {view === "login" && (
          <React.Fragment>
            <h1 className="wauth-h1">Welcome back</h1>
            <p className="wauth-sub">Log in to see your latest score and offers.</p>
            <form className="wauth-form" onSubmit={login}>
              <label className="wfield"><span>Work email</span>
                <div className="wfield-in"><WIcon name="mail" size={18} /><input type="email" placeholder="you@business.com" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
              </label>
              <label className="wfield"><span>Password</span>
                <div className="wfield-in"><WIcon name="lock" size={18} /><input type={showPw ? "text" : "password"} placeholder="••••••••" value={pw} onChange={(e) => setPw(e.target.value)} /><button type="button" className="wfield-eye" onClick={() => setShowPw(!showPw)} aria-label={showPw ? "Hide password" : "Show password"}><WIcon name={showPw ? "eye-off" : "eye"} size={17} /></button></div>
              </label>
              <a className="wauth-forgot" role="button" onClick={(e) => { e.preventDefault(); setErr(""); setView("forgot"); }}>Forgot password?</a>
              {err && <div className="ostep-error">{err}</div>}
              <WButton variant="accent" size="lg" iconRight="arrow-right">{busy ? "Signing in…" : "Log in"}</WButton>
            </form>
            <p className="wauth-switch"><a role="button" onClick={(e) => { e.preventDefault(); setErr(""); setView("reset"); }}>Already have a reset code? Enter it →</a></p>
            <p className="wauth-switch">New to Dulius? <a role="button" onClick={(e) => { e.preventDefault(); onSignup && onSignup(); }}>Check your free score →</a></p>
          </React.Fragment>
        )}

        {view === "forgot" && (
          <React.Fragment>
            <button className="wauth-back" onClick={() => setView("login")}><WIcon name="arrow-left" size={16} /> Back to log in</button>
            <h1 className="wauth-h1">Forgot your password?</h1>
            <p className="wauth-sub">Enter the email on your account and we'll send a secure code to reset your password.</p>
            <form className="wauth-form" onSubmit={sendReset}>
              <label className="wfield"><span>Work email</span>
                <div className="wfield-in"><WIcon name="mail" size={18} /><input type="email" placeholder="you@business.com" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
              </label>
              {err && <div className="ostep-error">{err}</div>}
              <WButton variant="accent" size="lg" iconRight="arrow-right">{busy ? "Sending…" : "Send reset code"}</WButton>
            </form>
            <p className="wauth-switch"><a role="button" onClick={(e) => { e.preventDefault(); setErr(""); setView("reset"); }}>Already have a code? Enter it →</a></p>
          </React.Fragment>
        )}

        {view === "reset" && (
          <React.Fragment>
            <button className="wauth-back" onClick={() => { setErr(""); setView("forgot"); }}><WIcon name="arrow-left" size={16} /> Back</button>
            <h1 className="wauth-h1">Enter your reset code</h1>
            <p className="wauth-sub">Check your email for the 6-digit code{email ? <span> we sent to <strong>{email}</strong></span> : ""}, then choose a new password.</p>
            <form className="wauth-form" onSubmit={completeReset}>
              <label className="wfield"><span>Reset code</span>
                <div className="wfield-in"><WIcon name="shield-check" size={18} /><input inputMode="numeric" placeholder="123456" value={code} onChange={(e) => setCode(e.target.value)} /></div>
              </label>
              <label className="wfield"><span>New password</span>
                <div className="wfield-in"><WIcon name="lock" size={18} /><input type={showNewPw ? "text" : "password"} placeholder="At least 8 characters" value={newPw} onChange={(e) => setNewPw(e.target.value)} /><button type="button" className="wfield-eye" onClick={() => setShowNewPw(!showNewPw)} aria-label={showNewPw ? "Hide password" : "Show password"}><WIcon name={showNewPw ? "eye-off" : "eye"} size={17} /></button></div>
              </label>
              {err && <div className="ostep-error">{err}</div>}
              <WButton variant="accent" size="lg" iconRight="arrow-right">{busy ? "Resetting…" : "Reset password & sign in"}</WButton>
            </form>
            <p className="wauth-switch">Didn't get a code? <a role="button"role="button" onClick={(e) => { e.preventDefault(); if (!busy) resendReset(); }}>Resend</a> · check spam.</p>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}
Object.assign(window, { WAuth });