// Auth.jsx — composants UI pour l'authentification : Login (modal) + UserBadge
// (pastille dans la nav). Tous deux consomment window.useAuth() exposé par
// AuthProvider.jsx.

// ─────────────────────────────────────────────────────────────────────────
// LoginModal — formulaire magic link
// ─────────────────────────────────────────────────────────────────────────

function LoginModal({ onClose }) {
  const { signIn, error: globalError, clearError } = window.useAuth();
  const [email, setEmail] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);
  const [localError, setLocalError] = React.useState(null);
  const [sentTo, setSentTo] = React.useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLocalError(null);
    if (!email || !email.includes("@")) {
      setLocalError("Email invalide.");
      return;
    }
    setSubmitting(true);
    try {
      await signIn(email);
      setSentTo(email);
    } catch (err) {
      setLocalError(err.message || "Erreur d'envoi du lien de connexion.");
    } finally {
      setSubmitting(false);
    }
  };

  // Fermeture sur Échap
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return ReactDOM.createPortal(
    <div
      style={{ position: "fixed", inset: 0, background: "rgba(15,20,15,0.55)", backdropFilter: "blur(4px)", display: "grid", placeItems: "center", zIndex: 9999, padding: 20 }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "var(--paper)",
          padding: "40px 44px",
          maxWidth: 460,
          width: "100%",
          border: "1px solid var(--line)",
        }}
      >
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <h3 className="h-display" style={{ fontSize: 30, margin: 0 }}>Se connecter</h3>
          <button
            onClick={onClose}
            aria-label="Fermer"
            style={{ background: "transparent", border: 0, fontSize: 26, color: "var(--ink-mute)", cursor: "pointer", lineHeight: 1, padding: 4 }}
          >×</button>
        </div>

        {sentTo ? (
          <>
            <p style={{ fontFamily: "var(--serif)", fontSize: 16, lineHeight: 1.55, color: "var(--ink-soft)", margin: "0 0 16px" }}>
              Un lien de connexion vient d'être envoyé à <strong style={{ fontWeight: 500, color: "var(--ink)" }}>{sentTo}</strong>.
            </p>
            <p style={{ fontFamily: "var(--serif)", fontSize: 15, lineHeight: 1.55, color: "var(--ink-mute)", fontStyle: "italic", margin: "0 0 24px" }}>
              Cliquez sur le lien dans l'email pour vous connecter. Le lien expire après une heure.
            </p>
            <button className="btn" onClick={onClose} style={{ width: "100%", justifyContent: "center" }}>Fermer</button>
          </>
        ) : (
          <form onSubmit={handleSubmit}>
            <p style={{ fontFamily: "var(--serif)", fontSize: 15, fontStyle: "italic", color: "var(--ink-mute)", margin: "0 0 22px", lineHeight: 1.55 }}>
              Entrez votre email pour recevoir un lien de connexion. Pas de mot de passe à mémoriser — un clic sur le lien et vous voilà connecté.
            </p>
            <label style={{ display: "block", marginBottom: 6, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase", color: "var(--ink-mute)" }}>
              Adresse email
            </label>
            <input
              type="email"
              value={email}
              onChange={(e) => { setEmail(e.target.value); setLocalError(null); clearError && clearError(); }}
              placeholder="vous@exemple.fr"
              required
              autoFocus
              style={{
                width: "100%", padding: "11px 14px",
                fontFamily: "var(--serif)", fontSize: 16, color: "var(--ink)",
                border: "1px solid var(--line)", background: "var(--cream)",
                marginBottom: 12, boxSizing: "border-box", outline: "none",
              }}
            />
            {(localError || globalError) && (
              <p style={{ color: "#c0392b", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".06em", margin: "0 0 14px" }}>
                {localError || globalError}
              </p>
            )}
            <button
              type="submit"
              className="btn btn-solid"
              disabled={submitting}
              style={{ width: "100%", justifyContent: "center", opacity: submitting ? 0.6 : 1 }}
            >
              {submitting ? "Envoi…" : "Recevoir le lien de connexion"}
            </button>
            <p style={{ fontFamily: "var(--serif)", fontSize: 12, fontStyle: "italic", color: "var(--ink-mute)", marginTop: 18, lineHeight: 1.5 }}>
              L'accès est sur invitation. Si votre email n'a pas été ajouté par un administrateur, le lien ne donnera pas accès au site.
            </p>
          </form>
        )}
      </div>
    </div>,
    document.body
  );
}

// ─────────────────────────────────────────────────────────────────────────
// UserBadge — pastille en nav, modal au clic
// ─────────────────────────────────────────────────────────────────────────

function UserBadge() {
  const { user, loading, signOut, error } = window.useAuth();
  const [loginOpen, setLoginOpen] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Si une erreur d'auth survient (ex. email non whitelisté), on ouvre le
  // modal de login pour afficher le message.
  React.useEffect(() => {
    if (error) setLoginOpen(true);
  }, [error]);

  // Fermeture du dropdown au clic dehors
  const dropdownRef = React.useRef(null);
  React.useEffect(() => {
    if (!menuOpen) return;
    const onClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, [menuOpen]);

  if (loading) {
    return (
      <div
        style={{ width: 36, height: 36, border: "1px solid var(--line-soft)", borderRadius: "50%", display: "grid", placeItems: "center", color: "var(--ink-mute)", fontFamily: "var(--mono)", fontSize: 10, opacity: 0.5 }}
        title="Chargement…"
      >
        …
      </div>
    );
  }

  if (!user) {
    return (
      <>
        <button
          onClick={() => setLoginOpen(true)}
          style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "8px 14px",
            border: "1px solid var(--line)",
            background: "transparent",
            color: "var(--ink-soft)",
            fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
            textTransform: "uppercase", cursor: "pointer",
            transition: "all 200ms var(--ease)",
          }}
          onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--moss-deep)"; e.currentTarget.style.color = "var(--moss-deep)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.color = "var(--ink-soft)"; }}
        >
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
          Se connecter
        </button>
        {loginOpen && <LoginModal onClose={() => setLoginOpen(false)} />}
      </>
    );
  }

  // Utilisateur connecté
  const initial = (user.displayName || user.email || "?").charAt(0).toUpperCase();
  const labelByRole = {
    admin: "Administrateur",
    moderator: "Modérateur",
    contributor: "Contributeur",
  };
  const roleColor = {
    admin: "var(--rust)",
    moderator: "var(--moss-deep)",
    contributor: "var(--olive)",
  };

  return (
    <div ref={dropdownRef} style={{ position: "relative" }}>
      <button
        onClick={() => setMenuOpen(o => !o)}
        title={`${user.email} · ${labelByRole[user.role] || user.role}`}
        style={{
          width: 36, height: 36, borderRadius: "50%",
          border: "1px solid " + (roleColor[user.role] || "var(--line)"),
          background: "var(--cream)",
          color: roleColor[user.role] || "var(--ink)",
          fontFamily: "var(--display)", fontSize: 16,
          cursor: "pointer", display: "grid", placeItems: "center",
          transition: "all 200ms var(--ease)",
        }}
      >
        {initial}
      </button>

      {menuOpen && (
        <div style={{
          position: "absolute", top: "calc(100% + 8px)", right: 0,
          minWidth: 240,
          background: "var(--paper)",
          border: "1px solid var(--line)",
          padding: 0,
          zIndex: 100,
          boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
        }}>
          <div style={{ padding: "14px 18px 12px", borderBottom: "1px solid var(--line-soft)" }}>
            <div style={{ fontFamily: "var(--serif)", fontSize: 15, color: "var(--ink)", marginBottom: 4 }}>
              {user.displayName || user.email}
            </div>
            {user.displayName && (
              <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-mute)", letterSpacing: ".02em" }}>
                {user.email}
              </div>
            )}
            <div style={{ marginTop: 8, fontFamily: "var(--mono)", fontSize: 10, letterSpacing: ".14em", textTransform: "uppercase", color: roleColor[user.role] || "var(--ink-mute)" }}>
              {labelByRole[user.role] || user.role}
            </div>
          </div>
          <button
            onClick={async () => { setMenuOpen(false); await signOut(); }}
            style={{
              width: "100%", padding: "12px 18px",
              background: "transparent", border: 0,
              textAlign: "left",
              fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em",
              textTransform: "uppercase", color: "var(--ink-soft)",
              cursor: "pointer",
              display: "flex", alignItems: "center", gap: 10,
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--cream)"; e.currentTarget.style.color = "var(--rust)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink-soft)"; }}
          >
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
              <polyline points="16 17 21 12 16 7"/>
              <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>
            Se déconnecter
          </button>
        </div>
      )}
    </div>
  );
}

window.LoginModal = LoginModal;
window.UserBadge = UserBadge;