// Login-gate: vraagt eerst om familie-wachtwoord voor NamePicker verschijnt.
// Slaat hash op in localStorage zodat je niet elke keer opnieuw hoeft in te tikken.

function LoginGate({ onUnlock }) {
  const [password, setPassword] = React.useState("");
  const [err, setErr] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [locked, setLocked] = React.useState(0); // seconds remaining

  // Rate-limit countdown
  React.useEffect(() => {
    if (locked <= 0) return;
    const t = setTimeout(() => setLocked(l => l - 1), 1000);
    return () => clearTimeout(t);
  }, [locked]);

  // Fingerprint voor rate-limit
  const getFingerprint = () => {
    let fp = localStorage.getItem("kreta-fp");
    if (!fp) {
      fp = Math.random().toString(36).slice(2) + Date.now().toString(36);
      localStorage.setItem("kreta-fp", fp);
    }
    return fp;
  };

  async function sha256(str) {
    const buf = new TextEncoder().encode(str);
    const hash = await crypto.subtle.digest("SHA-256", buf);
    return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2,"0")).join("");
  }

  // Check bij mount of we al ingelogd zijn (hash match met huidige app_config)
  React.useEffect(() => {
    (async () => {
      const saved = localStorage.getItem("kreta-auth-hash");
      if (!saved) return;
      const expected = await window.kretaBackend?.getFamilyPasswordHash?.();
      if (expected && saved === expected) onUnlock();
    })();
  }, []);

  async function submit() {
    if (locked > 0 || loading) return;
    setLoading(true); setErr("");
    try {
      const hash = await sha256(password.trim().toLowerCase());
      const expected = await window.kretaBackend?.getFamilyPasswordHash?.();
      const fp = getFingerprint();

      // Check recente foute pogingen
      const recentFails = await window.kretaBackend?.recentFailedAttempts?.(fp);
      if (recentFails >= 5) {
        setLocked(30);
        setErr("Te veel pogingen — wacht even.");
        setLoading(false);
        return;
      }

      const ok = expected && hash === expected;
      await window.kretaBackend?.logLoginAttempt?.(ok, fp);

      if (ok) {
        localStorage.setItem("kreta-auth-hash", hash);
        onUnlock();
      } else {
        setErr("Wachtwoord klopt niet.");
        setPassword("");
      }
    } catch (e) {
      setErr("Verbinding mislukt. Probeer opnieuw.");
    }
    setLoading(false);
  }

  return (
    <div style={{
      minHeight: "100vh",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, background: "linear-gradient(180deg, #e8f0f7 0%, #fff 60%)",
    }}>
      <div style={{ maxWidth: 380, width: "100%", textAlign: "center" }}>
        <div style={{ fontSize: 72, marginBottom: 8 }}>🇬🇷</div>
        <h1 className="serif" style={{
          fontSize: 30, margin: "0 0 6px",
          color: "var(--aegean-deep)", letterSpacing: -0.6,
        }}>Corvee Kreta</h1>
        <div style={{ color: "var(--muted)", fontSize: 14, marginBottom: 28 }}>
          Alleen voor de familie
        </div>

        <div className="card" style={{ textAlign: "left" }}>
          <label style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-soft)" }}>
            Familie-wachtwoord
          </label>
          <input
            type="password"
            value={password}
            onChange={e => setPassword(e.target.value)}
            onKeyDown={e => e.key === "Enter" && submit()}
            autoFocus
            disabled={locked > 0 || loading}
            placeholder="••••••••"
            style={{
              width: "100%", marginTop: 6, padding: "12px 14px",
              fontSize: 16, borderRadius: 10,
              border: "1px solid var(--line)", fontFamily: "inherit",
              background: locked > 0 ? "#f5f5f5" : "white",
            }}
          />
          {err && (
            <div style={{ color: "#c2410c", fontSize: 13, marginTop: 8, fontWeight: 600 }}>
              {err}
            </div>
          )}
          {locked > 0 && (
            <div style={{ color: "#c2410c", fontSize: 12, marginTop: 4 }}>
              Nog {locked}s wachten…
            </div>
          )}
          <button
            onClick={submit}
            disabled={!password || locked > 0 || loading}
            className="btn"
            style={{
              marginTop: 14, width: "100%", padding: "12px",
              fontSize: 15, fontWeight: 700,
              background: "var(--aegean-deep)", color: "white",
              opacity: (!password || locked > 0) ? 0.5 : 1,
            }}>
            {loading ? "Controleren…" : "Binnenkomen"}
          </button>
        </div>

        <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 16 }}>
          Weet je 't wachtwoord niet? Vraag Marije of Martin.
        </div>
      </div>
    </div>
  );
}

window.LoginGate = LoginGate;