/* global React, Nav, Footer, useApi */
const { useState, useRef, useEffect } = React;

/* ────────────────────────────────────────────────────────── */

function Header() {
  return (
    <section style={{ padding: "72px 0 40px", borderBottom: "1px solid var(--rule)" }}>
      <div className="wrap">
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
          <span className="rule-thick" />
          <span className="eyebrow">Members</span>
        </div>
        <h1 className="t-h1">The people behind the Society.</h1>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function MemberCard({ m, index }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  const [expanded, setExpanded] = useState(false);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (typeof IntersectionObserver === "undefined") { setInView(true); return; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { setInView(true); obs.disconnect(); }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -40px 0px" });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  const toggle = () => setExpanded(e => !e);
  const onKey = (e) => {
    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle(); }
  };

  return (
    <div
      ref={ref}
      className={`member-card ${inView ? "in-view" : ""} ${expanded ? "is-expanded" : ""}`}
      style={{ "--card-delay": `${index * 50}ms` }}
      onClick={toggle}
      onKeyDown={onKey}
      role="button"
      tabIndex={0}
      aria-expanded={expanded}
      aria-label={`${m.name}, ${expanded ? "hide" : "read"} bio`}
    >
      <div className="member-photo">
        {m.avatar
          ? <img src={m.avatar} alt={m.name} loading="lazy" />
          : <span className="ini">{m.ini}</span>}
      </div>
      <div className="member-body">
        <div className="member-name">{m.name}</div>
        <div className="member-role-row">
          <span className="member-role">{m.role}</span>
          <span className="member-toggle" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="6 9 12 15 18 9" />
            </svg>
          </span>
        </div>
        <div className="member-bio">
          <div className="member-bio-inner">
            <p>{m.bio}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

function MemberSkeleton({ index }) {
  return (
    <div className="member-card in-view" style={{ "--card-delay": `${index * 50}ms`, pointerEvents: "none" }}>
      <div className="member-photo" style={{ background: "var(--rule)" }} />
      <div className="member-body">
        <div className="member-name" style={{ background: "var(--rule)", color: "transparent", borderRadius: 3 }}>Loading name placeholder</div>
        <div className="member-role-row">
          <span className="member-role" style={{ background: "var(--rule-2)", color: "transparent", borderRadius: 3 }}>Loading role</span>
        </div>
      </div>
    </div>
  );
}

function Members({ members, loading }) {
  return (
    <section className="members-section">
      <div className="wrap">
        <div className="members-header">
          <h2>Leadership Board</h2>
        </div>
        <div className="members-grid">
          {loading && members.length === 0
            ? Array.from({ length: 11 }).map((_, i) => <MemberSkeleton key={i} index={i} />)
            : members.map((m, i) => <MemberCard key={m.id || m.name} m={m} index={i} />)}
        </div>
      </div>
    </section>
  );
}

/* ────────────────────────────────────────────────────────── */

function MembersPage() {
  const { data, loading } = useApi("members", []);
  const members = Array.isArray(data) ? data : [];
  return (
    <>
      <Nav active="members" />
      <Header />
      <Members members={members} loading={loading} />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<MembersPage />);