/* ============================================================
   Login screen — First name, Last name, Email verification
   ============================================================ */
const { useState, useEffect, useRef } = React;
function Logo({ size = 30 }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 11 }}>
      <MMark size={size} />
      <Wordmark size={size * 0.6} />
    </div>
  );
}

function LoginScreen({ onLogin }) {
  const [first, setFirst] = useState("");
  const [last, setLast] = useState("");
  const [email, setEmail] = useState("");
  const [err, setErr] = useState("");
  const [focused, setFocused] = useState("");

  // Match against the directory (verification)
  function tryLogin(e) {
    e.preventDefault();
    const f = first.trim().toLowerCase(), l = last.trim().toLowerCase(), em = email.trim().toLowerCase();
    if (!f || !l || !em) { setErr("Please fill in all three fields."); return; }
    const match = VP_DATA.people.find((p) =>
      p.first.toLowerCase() === f && p.last.toLowerCase() === l && p.email.toLowerCase() === em);
    if (!match) {
      setErr("We couldn't match those details to the company directory. Check spelling, or try a demo account below.");
      return;
    }
    onLogin(match);
  }

  const field = (label, val, set, key, type = "text", placeholder = "") => {
    const active = focused === key || val;
    return (
      <label style={{ display: "block" }}>
        <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-2)", marginBottom: 7 }}>{label}</div>
        <input
          type={type} value={val} placeholder={placeholder}
          onChange={(e) => { set(e.target.value); setErr(""); }}
          onFocus={() => setFocused(key)} onBlur={() => setFocused("")}
          className="vp-focusable"
          style={{
            width: "100%", padding: "12px 14px", fontSize: 15, color: "var(--ink)",
            background: "var(--surface)", borderRadius: "var(--r-sm)",
            border: `1px solid ${focused === key ? "var(--accent)" : "var(--line-2)"}`,
            boxShadow: focused === key ? "0 0 0 3px var(--accent-soft)" : "none",
            outline: "none", transition: "all 0.15s ease",
          }}
        />
      </label>
    );
  };

  const demos = [VP_DATA.byId.p_mara, VP_DATA.byId.p_lena];

  return (
    <div style={{ minHeight: "100%", display: "grid", placeItems: "center", padding: "40px 24px" }}>
      <div className="vp-fade-up" style={{ width: "100%", maxWidth: 396 }}>
        <Card pad="34px 34px 30px" style={{ borderRadius: "var(--r-lg)", boxShadow: "var(--sh-md)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 28 }}>
            <MMark size={34} />
            <Wordmark size={19} />
          </div>

          <h2 style={{ fontSize: 23, marginBottom: 5 }}>Sign in</h2>
          <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 0, marginBottom: 22 }}>
            Enter the name and work email on file.
          </p>

          <form onSubmit={tryLogin}>
            <div style={{ display: "grid", gap: 14 }}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                {field("First name", first, setFirst, "first", "text", "Mara")}
                {field("Last name", last, setLast, "last", "text", "Schreiber")}
              </div>
              {field("Work email", email, setEmail, "email", "email", "mara.schreiber@mesper.de")}
            </div>

            {err && (
              <div className="vp-fade" style={{
                marginTop: 14, padding: "11px 13px", background: "var(--st-declined-soft)",
                color: "var(--st-declined)", borderRadius: "var(--r-sm)", fontSize: 13.5,
                display: "flex", gap: 9, alignItems: "flex-start", lineHeight: 1.45,
              }}>
                <Icon name="info" size={17} style={{ flex: "0 0 auto", marginTop: 1 }} /> {err}
              </div>
            )}

            <div style={{ marginTop: 20 }}>
              <Button type="submit" size="lg" full iconRight="arrowRight">Continue</Button>
            </div>
          </form>

          {/* Demo accounts */}
          <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line)" }}>
            <div style={{ fontSize: 12, color: "var(--ink-4)", marginBottom: 11, fontWeight: 600 }}>
              Demo accounts
            </div>
            <div style={{ display: "grid", gap: 8 }}>
              {demos.map((p) => (
                <button key={p.id} type="button" className="vp-focusable"
                  onClick={() => { setFirst(p.first); setLast(p.last); setEmail(p.email); setErr(""); }}
                  style={{
                    display: "flex", alignItems: "center", gap: 11, padding: "9px 11px",
                    background: "var(--surface-2)", border: "1px solid var(--line)",
                    borderRadius: "var(--r-sm)", cursor: "pointer", textAlign: "left", width: "100%",
                  }}>
                  <Avatar person={p} size={32} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 14, color: "var(--ink)" }}>{p.first} {p.last}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-3)" }}>{p.role === "ceo" ? "CEO · Admin" : `${p.team} · Employee`}</div>
                  </div>
                  <Icon name="arrowRight" size={16} style={{ color: "var(--ink-4)" }} />
                </button>
              ))}
            </div>
          </div>
        </Card>
        <p style={{ textAlign: "center", color: "var(--ink-4)", fontSize: 12, marginTop: 16 }}>
          Mesper internal · Leave planning
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, Logo });