/* ======================================================================
   KOREALM — Auth: registration + email verification + sign in
   window.AuthScreen
   ====================================================================== */

const DEMO_CODE = "486 213";

// After auth, honor a pending destination (e.g. "apply to this property") when it matches the user's role.
function destFromIntent(intent, user, fallback) {
  if (intent && intent.role === user.role && intent.view) return { view: intent.view, params: intent.params || {} };
  return fallback;
}

function AuthShell({ children }) {
  const { setRole } = useApp();
  return (
    <div className="auth-wrap">
      <div className="auth-aside">
        <div className="auth-aside-top">
          <div onClick={() => setRole("public")} style={{ cursor: "pointer" }}><Logo variant="full" onDark /></div>
        </div>
        <div className="auth-aside-mid">
          <h2 className="auth-quote">"We moved in two weeks faster than any rental we've done. Everything in one place."</h2>
          <div className="row gap-12" style={{ marginTop: 22 }}>
            <Avatar name="Aisha Rahman" size={40} />
            <div className="col"><span style={{ fontWeight: 600, color: "#eef3ef" }}>Aisha R.</span><span style={{ fontSize: 13, color: "#aec4ba" }}>Tenant · Maple Heights</span></div>
          </div>
        </div>
        <div className="auth-aside-foot">
          {["Verified landlords & listings", "Protected, escrow-style payments", "Inspections and applications tracked end-to-end"].map(t => (
            <div key={t} className="row gap-10"><Icon name="checkCircle" size={17} style={{ color: "#7fd3a3" }} /><span style={{ fontSize: 14, color: "#cfdcd5" }}>{t}</span></div>
          ))}
        </div>
      </div>
      <div className="auth-main"><div className="auth-card">{children}</div></div>
    </div>
  );
}

function SignIn({ onRegister }) {
  const { db, session, setSession, toast } = useApp();
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [err, setErr] = useState({});

  const submit = () => {
    const e = {};
    const q = email.trim().toLowerCase();
    const user = db.users.find(u => u.email.toLowerCase() === q && u.role !== "admin");
    if (!q) e.email = "Enter your email";
    else if (!user) e.email = "No account found for that email. Create one to get started.";
    if (!pw) e.pw = "Enter your password";
    else if (user && user.password && user.password !== pw) e.pw = "Incorrect password";
    setErr(e);
    if (Object.keys(e).length) return;
    const idKey = user.role === "tenant" ? "tenantId" : "landlordId";
    const dest = destFromIntent(session.params?.intent, user, { view: "dashboard", params: {} });
    setSession(s => ({ ...s, role: user.role, [idKey]: user.id, view: dest.view, params: dest.params }));
    toast("Welcome back, " + user.name.split(" ")[0] + "!", "ok");
  };

  return (
    <>
      <h1 style={{ fontSize: 26 }}>Welcome back</h1>
      <p className="muted" style={{ marginTop: 6, marginBottom: 24 }}>Sign in to your Korealm account.</p>
      <div className="col gap-16">
        <Field label="Email" error={err.email}><Input icon="mail" placeholder="you@email.com" value={email} onChange={e => { setEmail(e.target.value); setErr(x => ({ ...x, email: undefined })); }} error={err.email} /></Field>
        <Field label="Password" error={err.pw}><Input icon="lock" type="password" placeholder="password" value={pw} onChange={e => { setPw(e.target.value); setErr(x => ({ ...x, pw: undefined })); }} error={err.pw} /></Field>
        <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" onClick={submit}>Sign in</Button>
      </div>
      <p className="center muted" style={{ marginTop: 22, textAlign: "center", fontSize: 14 }}>New to Korealm? <button className="btn-link" onClick={onRegister}>Create an account</button></p>
    </>
  );
}

function Register({ onSignIn }) {
  const { actions, setSession, toast, session } = useApp();
  const [step, setStep] = useState(0);
  const [role, setRoleSel] = useState(session.params?.intent?.role || "tenant");
  const [form, setForm] = useState({ name: "", email: "", phone: "", pw: "" });
  const [errors, setErrors] = useState({});
  const [code, setCode] = useState(["", "", "", "", "", ""]);
  const [user, setUser] = useState(null);
  const [verifying, setVerifying] = useState(false);
  const refs = useRef([]);

  const validate = () => {
    const e = {};
    if (form.name.trim().length < 3) e.name = "Enter your full name";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "Enter a valid email address";
    if (form.phone.replace(/\D/g, "").length < 7) e.phone = "Enter a valid phone number";
    if (form.pw.length < 8) e.pw = "Use at least 8 characters";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submitDetails = () => {
    if (!validate()) return;
    const u = actions.registerUser({ name: form.name.trim(), email: form.email.trim(), role, phone: form.phone, password: form.pw });
    actions.verifyEmail(u.id);
    toast("Welcome to Korealm!", "ok");
    const fallback = role === "tenant" ? { view: "dashboard", params: { welcome: true } } : { view: "kyc", params: { welcome: true } };
    const dest = destFromIntent(session.params?.intent, u, fallback);
    const idKey = role === "tenant" ? "tenantId" : "landlordId";
    setSession(s => ({ ...s, role, [idKey]: u.id, view: dest.view, params: dest.params }));
  };

  const codeStr = code.join("");
  const setDigit = (i, v) => {
    if (!/^\d?$/.test(v)) return;
    const next = [...code]; next[i] = v; setCode(next);
    if (v && i < 5) refs.current[i + 1]?.focus();
  };
  const onKey = (i, e) => { if (e.key === "Backspace" && !code[i] && i > 0) refs.current[i - 1]?.focus(); };
  const fillDemo = () => { setCode(DEMO_CODE.replace(" ", "").split("")); refs.current[5]?.focus(); };

  const verify = () => {
    if (codeStr.length !== 6) { toast("Enter the 6-digit code", "err"); return; }
    setVerifying(true);
    setTimeout(() => {
      actions.verifyEmail(user.id);
      setVerifying(false);
      toast("Email verified — welcome to Korealm!", "ok");
      if (role === "tenant") setSession(s => ({ ...s, role: "tenant", tenantId: user.id, view: "dashboard", params: { welcome: true } }));
      else setSession(s => ({ ...s, role: "landlord", landlordId: user.id, view: "kyc", params: { welcome: true } }));
    }, 1100);
  };

  return (
    <>
      <div className="row between" style={{ marginBottom: 22 }}>
        <Stepper steps={["Account", "Details"]} current={step} />
      </div>

      {step === 0 && (
        <div className="anim-rise">
          <h1 style={{ fontSize: 26 }}>Create your account</h1>
          <p className="muted" style={{ marginTop: 6, marginBottom: 22 }}>First, tell us how you'll use Korealm.</p>
          <div className="radio-cards">
            <div className={"radio-card" + (role === "tenant" ? " sel" : "")} onClick={() => setRoleSel("tenant")}>
              <span className="rc-dot" />
              <span className="avatar sq" style={{ width: 40, height: 40, background: "var(--green-soft)", color: "var(--green)" }}><Icon name="user" size={20} /></span>
              <div className="grow"><div style={{ fontWeight: 600 }}>I'm a tenant</div><div className="hint">Find a home, book inspections, apply and pay rent.</div></div>
            </div>
            <div className={"radio-card" + (role === "landlord" ? " sel" : "")} onClick={() => setRoleSel("landlord")}>
              <span className="rc-dot" />
              <span className="avatar sq" style={{ width: 40, height: 40, background: "var(--green-soft)", color: "var(--green)" }}><Icon name="building" size={20} /></span>
              <div className="grow"><div style={{ fontWeight: 600 }}>I'm a landlord</div><div className="hint">List properties, verify your identity, and collect rent.</div></div>
            </div>
          </div>
          <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" style={{ marginTop: 22 }} onClick={() => setStep(1)}>Continue</Button>
          <p className="center muted" style={{ marginTop: 18, textAlign: "center", fontSize: 14 }}>Already have an account? <button className="btn-link" onClick={onSignIn}>Sign in</button></p>
        </div>
      )}

      {step === 1 && (
        <div className="anim-rise">
          <button className="btn-link row gap-6" style={{ marginBottom: 12 }} onClick={() => setStep(0)}><Icon name="chevL" size={15} />Back</button>
          <h1 style={{ fontSize: 26 }}>Your details</h1>
          <p className="muted" style={{ marginTop: 6, marginBottom: 22 }}>Creating a {role} account.</p>
          <div className="col gap-16">
            <Field label="Full name" req error={errors.name}><Input icon="user" placeholder="Jordan Avery" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} error={errors.name} /></Field>
            <Field label="Email address" req error={errors.email} hint={!errors.email && "We'll send a verification code here."}><Input icon="mail" placeholder="you@email.com" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} error={errors.email} /></Field>
            <Field label="Phone number" req error={errors.phone}><Input icon="phone" placeholder="(555) 000-0000" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} error={errors.phone} /></Field>
            <Field label="Password" req error={errors.pw} hint={!errors.pw && "At least 8 characters."}><Input icon="lock" type="password" placeholder="Create a password" value={form.pw} onChange={e => setForm({ ...form, pw: e.target.value })} error={errors.pw} /></Field>
            <Button variant="primary" size="lg" className="btn-block" iconR="arrowR" onClick={submitDetails}>Create account</Button>
            <p className="hint center" style={{ textAlign: "center" }}>By continuing you agree to Korealm's Terms & Privacy Policy.</p>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="anim-rise">
          <div className="verify-icon"><Icon name="mail" size={26} /></div>
          <h1 style={{ fontSize: 26, marginTop: 16 }}>Check your email</h1>
          <p className="muted" style={{ marginTop: 6 }}>We sent a 6-digit code to <strong style={{ color: "var(--ink)" }}>{form.email}</strong>.</p>

          <div className="otp-row">
            {code.map((c, i) => (
              <input key={i} ref={el => refs.current[i] = el} className="otp" value={c} maxLength={1} inputMode="numeric"
                onChange={e => setDigit(i, e.target.value)} onKeyDown={e => onKey(i, e)} />
            ))}
          </div>

          <div className="demo-hint">
            <Icon name="info" size={15} />
            <span>Sandbox: your code is <strong className="mono">{DEMO_CODE}</strong></span>
            <button className="btn-link" style={{ marginLeft: "auto" }} onClick={fillDemo}>Autofill</button>
          </div>

          <Button variant="primary" size="lg" className="btn-block" style={{ marginTop: 18 }} disabled={verifying} onClick={verify}>
            {verifying ? <><span className="spin" />Verifying…</> : "Verify email"}
          </Button>
          <div className="row center gap-6" style={{ marginTop: 18, justifyContent: "center" }}>
            <span className="hint">Didn't get it?</span>
            <button className="btn-link" onClick={() => toast("Verification code re-sent", "info")}>Resend code</button>
            <span className="dim">·</span>
            <button className="btn-link" onClick={() => setStep(1)}>Change email</button>
          </div>
        </div>
      )}
    </>
  );
}

function AuthScreen() {
  const { session, go } = useApp();
  const [mode, setMode] = useState(session.params?.mode || "register");
  return (
    <AuthShell>
      {mode === "signin"
        ? <SignIn onRegister={() => setMode("register")} />
        : <Register onSignIn={() => setMode("signin")} />}
    </AuthShell>
  );
}

window.AuthScreen = AuthScreen;