// Login / landing screen — gates entry into Vault.
// Two credential profiles: admin (bscott) and user (jscheftz).

const VAULT_ACCOUNTS = [
  {
    email: "bscott@harveyllc.com",
    password: "placeholder",
    name: "Brian Scott",
    role: "Managing Director · Industrials",
    access: "admin",
    personId: "p_bscott",
  },
  {
    email: "jscheftz@harveyllc.com",
    password: "placeholder",
    name: "Jordan Scheftz",
    role: "Associate",
    access: "user",
    personId: "p_jscheftz",
  },
];
window.VAULT_ACCOUNTS = VAULT_ACCOUNTS;

function VaultLanding({ onEnter }) {
  // Default to admin credentials so reviewers land on the full surface.
  const [email, setEmail] = React.useState(VAULT_ACCOUNTS[0].email);
  const [pw, setPw] = React.useState(VAULT_ACCOUNTS[0].password);
  const [shake, setShake] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState("");

  const fail = (msg) => {
    setError(msg);
    setShake(true);
    setTimeout(() => setShake(false), 420);
  };

  const submit = (e) => {
    e?.preventDefault();
    setError("");
    if (!email.trim() || !pw.trim()) { fail("Enter your email and password."); return; }
    const acct = VAULT_ACCOUNTS.find(a =>
      a.email.toLowerCase() === email.trim().toLowerCase() && a.password === pw
    );
    if (!acct) { fail("Incorrect email or password."); return; }
    setLoading(true);
    // Record login activity on the global accounts store so the Admin > Accounts tab can show it.
    window.VAULT_RECORD_LOGIN && window.VAULT_RECORD_LOGIN(acct.email);
    setTimeout(() => onEnter({
      name: acct.name,
      email: acct.email,
      role: acct.role,
      access: acct.access,
      personId: acct.personId,
    }), 700);
  };

  // Quick-fill helpers (clicking a chip swaps in those creds)
  const fillAs = (acct) => { setEmail(acct.email); setPw(acct.password); setError(""); };

  return (
    <div style={{
      minHeight: "100vh",
      background: "var(--bg)",
      color: "var(--ink)",
      display: "grid",
      gridTemplateColumns: "1fr 1fr",
    }}>
      {/* Left: brand pane */}
      <div style={{
        position: "relative",
        background:
          "radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%), " +
          "radial-gradient(circle at 70% 80%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 55%), " +
          "var(--canvas)",
        borderRight: "1px solid var(--line)",
        padding: "44px 56px",
        display: "flex", flexDirection: "column",
        overflow: "hidden",
      }}>
        <VaultLogo size={36}/>

        <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div style={{
            position: "relative",
            width: 360, height: 360,
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <div style={{ position: "absolute", inset: 0, borderRadius: "50%", border: "1px dashed color-mix(in oklab, var(--accent) 35%, var(--line))", opacity: .55 }}/>
            <div style={{ position: "absolute", inset: 24, borderRadius: "50%", border: "1px solid color-mix(in oklab, var(--accent) 25%, var(--line))", opacity: .65 }}/>
            <div style={{ position: "absolute", inset: 60, borderRadius: "50%", border: "1px solid color-mix(in oklab, var(--accent) 18%, var(--line))", opacity: .8 }}/>
            <div style={{ position: "absolute", inset: 96, borderRadius: "50%", background: "color-mix(in oklab, var(--accent-soft) 55%, transparent)" }}/>
            <div style={{ position: "relative", color: "var(--accent)" }}>
              <VaultMark size={170} animated/>
            </div>
            {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => (
              <div key={i} style={{
                position: "absolute", left: "50%", top: "50%",
                width: 1, height: 8,
                background: "var(--accent)",
                opacity: i % 2 === 0 ? .9 : .4,
                transform: `translate(-50%, -50%) rotate(${a}deg) translateY(-178px)`,
              }}/>
            ))}
          </div>
        </div>

        <div style={{ maxWidth: 460 }}>
          <div className="display" style={{ fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.015em" }}>
            The deal book.<br/><span className="display-i" style={{ color: "var(--accent)" }}>Sealed.</span>
          </div>
          <p className="muted" style={{ marginTop: 14, fontSize: 14, lineHeight: 1.55, maxWidth: 440 }}>
            Vault is the operating system for our outreach, pipeline, and closed-deal record.
            Every call, lead, IOI, and LOI lives behind one door.
          </p>
          <div className="row" style={{ marginTop: 22, gap: 22, color: "var(--muted)", fontSize: 11.5, letterSpacing: ".06em", textTransform: "uppercase", fontWeight: 600 }}>
            <span>SOC 2 Type II</span>
            <span style={{ width: 1, height: 10, background: "var(--line)" }}/>
            <span>FINRA Reviewed</span>
            <span style={{ width: 1, height: 10, background: "var(--line)" }}/>
            <span>Encrypted at rest</span>
          </div>
        </div>
      </div>

      {/* Right: login form */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: 44 }}>
        <form onSubmit={submit} style={{
          width: 380,
          animation: shake ? "vaultShake 380ms cubic-bezier(.36,.07,.19,.97)" : "none",
        }}>
          <div className="micro" style={{ marginBottom: 8 }}>Sign in to Vault</div>
          <h1 className="display" style={{ fontSize: 32, lineHeight: 1.15, margin: 0, letterSpacing: "-.01em" }}>
            Welcome back.
          </h1>
          <p className="muted" style={{ marginTop: 6, fontSize: 13.5 }}>
            Use your firm credentials to access the workspace.
          </p>

          {/* Quick-select credential chips */}
          <div className="row" style={{ marginTop: 16, gap: 8 }}>
            {VAULT_ACCOUNTS.map(a => {
              const active = email.toLowerCase() === a.email.toLowerCase();
              return (
                <button key={a.email} type="button" onClick={() => fillAs(a)} style={{
                  flex: 1,
                  padding: "10px 11px",
                  background: active ? "var(--accent-soft)" : "var(--surface)",
                  border: "1px solid " + (active ? "color-mix(in oklab, var(--accent) 45%, var(--line))" : "var(--line)"),
                  borderRadius: 8,
                  textAlign: "left",
                  display: "flex", flexDirection: "column", gap: 2,
                }}>
                  <span className="row" style={{ gap: 6 }}>
                    <span style={{ fontSize: 11.5, fontWeight: 600, color: "var(--ink)" }}>{a.name.split(" ")[0]}</span>
                    <span className="pill" style={{
                      padding: "1px 6px", fontSize: 9,
                      background: a.access === "admin" ? "var(--accent)" : "var(--surface-2)",
                      color: a.access === "admin" ? "var(--accent-ink)" : "var(--muted)",
                      borderColor: "transparent",
                    }}>{a.access}</span>
                  </span>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--muted)" }}>{a.email.split("@")[0]}</span>
                </button>
              );
            })}
          </div>

          <div style={{ marginTop: 20 }}>
            <Field label="Work email" value={email} onChange={setEmail} type="email" autoFocus/>
            <Field label="Password" value={pw} onChange={setPw} type="password"
              right={<button type="button" className="btn ghost sm" tabIndex={-1} style={{ fontSize: 11 }}>Forgot?</button>}/>
            <label style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, fontSize: 12.5, color: "var(--ink-2)" }}>
              <input type="checkbox" defaultChecked/>
              Trust this browser for 30 days
            </label>
          </div>

          {error && (
            <div style={{
              marginTop: 14,
              padding: "8px 11px",
              background: "var(--risk-soft)",
              border: "1px solid color-mix(in oklab, var(--risk) 30%, transparent)",
              borderRadius: 7,
              fontSize: 12.5,
              color: "var(--risk)",
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.3"/><path d="M8 5v4M8 11v.01" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>
              {error}
            </div>
          )}

          <button type="submit" className="btn primary"
            style={{ width: "100%", marginTop: 20, padding: "11px 14px", fontSize: 14, justifyContent: "center" }}>
            {loading ? <Spinner/> : <>Open the Vault <span style={{ marginLeft: 6 }}>→</span></>}
          </button>

          <div className="row" style={{ margin: "20px 0", gap: 12 }}>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
            <span className="micro">or</span>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }}/>
          </div>

          <button type="button" className="btn"
            style={{ width: "100%", padding: "10px 14px", fontSize: 13, justifyContent: "center" }}
            onClick={() => fail("SSO is unavailable on this account. Use email + password.")}>
            <SsoIcon/> Continue with Okta SSO
          </button>

          <p className="muted small" style={{ textAlign: "center", marginTop: 24, lineHeight: 1.6 }}>
            By signing in you agree to Vault's information-barriers policy.<br/>
            Need access? <span style={{ color: "var(--accent)", fontWeight: 600, cursor: "pointer" }}>Request from IT</span>.
          </p>
        </form>
      </div>

      <style>{`
        @keyframes vaultShake {
          10%, 90% { transform: translateX(-1px); }
          20%, 80% { transform: translateX(2px); }
          30%, 50%, 70% { transform: translateX(-4px); }
          40%, 60% { transform: translateX(4px); }
        }
      `}</style>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", right, autoFocus }) {
  const [focus, setFocus] = React.useState(false);
  return (
    <div style={{ marginTop: 14 }}>
      <div className="row" style={{ marginBottom: 5 }}>
        <label className="micro" style={{ flex: 1 }}>{label}</label>
        {right}
      </div>
      <input type={type} value={value} onChange={e => onChange(e.target.value)} autoFocus={autoFocus}
        onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
        style={{
          width: "100%",
          padding: "10px 12px", fontSize: 13.5,
          background: "var(--surface)",
          border: "1px solid " + (focus ? "var(--accent)" : "var(--line)"),
          boxShadow: focus ? "0 0 0 3px var(--accent-soft)" : "none",
          borderRadius: 8, color: "var(--ink)",
          outline: "none", transition: "border-color .12s, box-shadow .12s",
        }}/>
    </div>
  );
}

function Spinner() {
  return (
    <span style={{
      width: 16, height: 16, borderRadius: "50%",
      border: "2px solid color-mix(in oklab, var(--accent-ink) 50%, transparent)",
      borderTopColor: "var(--accent-ink)",
      display: "inline-block",
      animation: "vsp .7s linear infinite",
    }}>
      <style>{`@keyframes vsp { to { transform: rotate(360deg); } }`}</style>
    </span>
  );
}

function SsoIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
      <circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="8" cy="8" r="2" fill="currentColor"/>
    </svg>
  );
}

window.VaultLanding = VaultLanding;