/* global React */
function Icon({ name, size = 18, stroke = 1.75 }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = "";
      const i = document.createElement("i");
      i.setAttribute("data-lucide", name);
      ref.current.appendChild(i);
      window.lucide.createIcons({ attrs: { "stroke-width": stroke, width: size, height: size } });
    }
  }, [name, size, stroke]);
  return <span ref={ref} style={{ display: "inline-flex", width: size, height: size }} />;
}

function RingArt({ size = 400, opacity = 0.12, color = "#F5989D" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" fill="none" style={{ color, opacity }}>
      <circle cx="100" cy="100" r="92" stroke="currentColor" strokeWidth="6" />
      <circle cx="100" cy="100" r="64" stroke="currentColor" strokeWidth="6" />
      <circle cx="100" cy="100" r="36" stroke="currentColor" strokeWidth="6" />
    </svg>
  );
}

function PortalTopbar({ current, onNav, user = {}, onLogout }) {
  const isOrg = user.type === "organisation";
  const displayName = user.shortName || user.name || "User";
  const initial = displayName[0] || "U";

  const items = [
    { id: "home",      label: "Overview" },
    { id: "services",  label: isOrg ? "All services" : "My services" },
    { id: "request",   label: "Request a service" },
    { id: "documents", label: "Documents" },
    { id: "billing",   label: "Billing" },
  ];

  return (
    <header className="ptopbar">
      <div className="brand">
        <img src="assets/logo-mark.svg" style={{ width: 32, height: 32 }} alt="" />
        <div>
          <div className="wm">SMASH</div>
          <div className="sub">COMPANIES HOUSE</div>
        </div>
      </div>
      <nav>
        {items.map(it => (
          <a key={it.id} className={current === it.id ? "active" : ""} onClick={() => onNav(it.id)}>{it.label}</a>
        ))}
      </nav>
      <div className="ptopbar-spacer" />
      <button className="icon-btn"><Icon name="message-circle" /></button>
      <button className="icon-btn"><Icon name="bell" /><span className="dot" /></button>
      <div style={{ display: "flex", alignItems: "center", gap: 10, paddingLeft: 12, marginLeft: 4, borderLeft: "1px solid var(--border-subtle)" }}>
        <div style={{
          width: 32, height: 32, borderRadius: isOrg ? 8 : 999,
          background: isOrg ? "var(--brand-burgundy)" : "var(--plum-100)",
          color: isOrg ? "#fff" : "var(--plum-700)",
          display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12,
        }}>{initial}</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500, lineHeight: 1.2 }}>{displayName}</div>
          {isOrg && (
            <div style={{ fontSize: 10, fontWeight: 700, color: "var(--brand-burgundy)", textTransform: "uppercase", letterSpacing: "0.08em", lineHeight: 1.2 }}>Organisation</div>
          )}
        </div>
        <button onClick={onLogout} title="Sign out"
          style={{ background: "transparent", border: 0, cursor: "pointer", color: "var(--fg-3)", padding: 4, borderRadius: 4, display: "flex", marginLeft: 2 }}
          onMouseEnter={e => e.currentTarget.style.color = "var(--fg-1)"}
          onMouseLeave={e => e.currentTarget.style.color = "var(--fg-3)"}>
          <Icon name="log-out" size={16} />
        </button>
      </div>
    </header>
  );
}

function MemberFilter({ members, value, onChange }) {
  if (!members || members.length === 0) return null;
  return (
    <div style={{ display: "flex", gap: 6, marginBottom: 16, flexWrap: "wrap", alignItems: "center" }}>
      <span style={{ fontSize: 12, color: "var(--fg-3)", fontWeight: 600, marginRight: 4 }}>Member:</span>
      {["all", ...members].map(m => (
        <button key={m} onClick={() => onChange(m)} style={{
          padding: "5px 12px", borderRadius: 6, border: "1px solid", cursor: "pointer",
          fontSize: 12.5, fontFamily: "inherit", fontWeight: 500,
          background: value === m ? "var(--plum-900)" : "#fff",
          color:      value === m ? "#fff"           : "var(--fg-2)",
          borderColor: value === m ? "var(--plum-900)" : "var(--border-strong)",
        }}>
          {m === "all" ? "All members" : m}
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Icon, RingArt, PortalTopbar, MemberFilter });