// Right social/friends panel — quick-link contacts with an inline search
// filter that narrows the list to matches on the displayed names.

const SOCIAL = [
  { id: "github",   name: "GitHub",   dot: "var(--orange)", url: "https://github.com/ConnorXTan",                        icon: I.github   },
  { id: "linkedin", name: "LinkedIn", dot: "var(--orange)", url: "https://www.linkedin.com/in/connorxtan/",              icon: I.linkedin },
  { id: "email",    name: "Email",    dot: "var(--green)",  url: "mailto:connor.tan@uwaterloo.ca",                       icon: I.mail     },
  { id: "ugg",      name: "U.GG",     dot: "var(--cyan)",   url: "https://u.gg/lol/profile/na1/Copokemon-cope/overview", icon: I.shield   },
];

const RightPanel = () => {
  const [open, setOpen] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const headRef = React.useRef(null);
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (headRef.current && !headRef.current.contains(e.target)) {
        setOpen(false);
        setQuery("");
      }
    };
    const onKey = (e) => {
      if (e.key === "Escape") { setOpen(false); setQuery(""); }
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  React.useEffect(() => {
    if (open && inputRef.current) inputRef.current.focus();
  }, [open]);

  const q = query.trim().toLowerCase();
  const filtered = q ? SOCIAL.filter((s) => s.name.toLowerCase().includes(q)) : SOCIAL;

  return (
    <div className="rightpanel">
      <div className="rp-social-head" ref={headRef}>
        {open ? (
          <input
            ref={inputRef}
            className="rp-search-inline"
            type="text"
            placeholder="Search…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            spellCheck="false"
            autoCapitalize="off"
            autoCorrect="off"
          />
        ) : (
          <span>Social</span>
        )}
        <div className="icons">
          <div
            className={`iconbtn ${open ? "active" : ""}`}
            title="Search"
            onClick={() => {
              setOpen((v) => {
                if (v) setQuery("");
                return !v;
              });
            }}
          >
            <I.search width="14" height="14"/>
          </div>
        </div>
      </div>

      <div className="rp-section-head">
        <span>▾ General · {filtered.length}/{SOCIAL.length}</span>
      </div>
      <div className="rp-friends">
        {filtered.map((s) => (
          <a key={s.id} href={s.url} target="_blank" rel="noreferrer" className="rp-friend">
            <div className="av">
              <s.icon width="22" height="22" />
              <span className="sd" style={{ background: s.dot }}></span>
            </div>
            <div className="meta">
              <div className="nm">{s.name}</div>
            </div>
          </a>
        ))}
        {filtered.length === 0 && (
          <div className="rp-friends-empty">No matches</div>
        )}
      </div>

      <div className="rp-foot">
        <div className="ind"><span className="d"></span><span>Connection stable</span></div>
        <span>NA1 · 32ms</span>
      </div>
    </div>
  );
};

window.RightPanel = RightPanel;