// Fixed left sidebar navigation
const { useState: useStateSB } = React;

function NavItem({ icon, label, active, onClick }) {
  const [hover, setHover] = useStateSB(false);
  const Icon = I[icon];
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex", alignItems: "center", gap: 12, width: "100%",
        padding: "11px 14px", borderRadius: 12,
        fontSize: 14.5, fontWeight: 600, letterSpacing: "-0.01em",
        textAlign: "left",
        background: active ? "#fff" : hover ? "rgba(255,255,255,0.05)" : "transparent",
        color: active ? "#0a0a0b" : hover ? "var(--text)" : "var(--muted)",
        transition: "background .2s, color .2s",
      }}
    >
      <Icon style={{ opacity: active ? 1 : 0.85 }} />
      {label}
    </button>
  );
}

function IconLink({ icon, href, title, copyValue }) {
  const [hover, setHover] = useStateSB(false);
  const [copied, setCopied] = useStateSB(false);
  const Icon = I[icon];
  const box = {
    display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 10,
    border: "1px solid " + (copied ? "var(--green)" : "var(--line)"),
    background: hover ? "rgba(255,255,255,0.07)" : "var(--panel)",
    color: copied ? "var(--green)" : hover ? "var(--text)" : "var(--muted)",
    transition: "background .2s, color .2s, transform .2s, border-color .2s",
    transform: hover ? "translateY(-2px)" : "none", cursor: "pointer",
  };
  if (copyValue) {
    return (
      <button title={title + "：" + copyValue}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        onClick={() => { try { navigator.clipboard.writeText(copyValue); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1400); }}
        style={box}>
        {copied ? I.check() : <Icon />}
      </button>
    );
  }
  return (
    <a href={href} target="_blank" rel="noreferrer" title={title}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={box}>
      <Icon />
    </a>
  );
}

const SB_CONTACTS = [
  { id: "mail", icon: "mail", label: "邮箱", value: "yanrongz52@gmail.com" },
  { id: "phone", icon: "phone", label: "电话", value: "15219382905" },
  { id: "wechat", icon: "wechat", label: "微信", value: "Yr-12071229" }];

function ContactDock() {
  const [open, setOpen] = useStateSB(null);
  const [copied, setCopied] = useStateSB(false);
  const wrapRef = React.useRef(null);
  React.useEffect(() => {
    function onDoc(e) { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(null); }
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);
  function toggle(c) { setCopied(false); setOpen((o) => o === c.id ? null : c.id); }
  function copy(c) { try { navigator.clipboard.writeText(c.value); } catch (e) {} setCopied(true); setTimeout(() => setCopied(false), 1600); }
  const active = SB_CONTACTS.find((c) => c.id === open);
  return (
    <div ref={wrapRef} style={{ position: "relative" }}>
      <div style={{ display: "flex", gap: 10 }}>
        {SB_CONTACTS.map((c) => {
          const on = open === c.id;
          const Icon = I[c.icon];
          return (
            <button key={c.id} onClick={() => toggle(c)} title={c.label}
              onMouseEnter={(e) => { if (!on) e.currentTarget.style.background = "rgba(255,255,255,0.09)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { if (!on) e.currentTarget.style.background = "var(--panel)"; e.currentTarget.style.transform = "translateY(0)"; }}
              style={{
                display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 10, cursor: "pointer",
                border: "1px solid " + (on ? "var(--green)" : "var(--line)"),
                background: on ? "var(--green)" : "var(--panel)",
                color: on ? "#0a0a0b" : "var(--muted)",
                transition: "background .2s, color .2s, transform .2s, border-color .2s" }}>
              <Icon />
            </button>);
        })}
      </div>
      {active &&
        <div style={{
          marginTop: 12, background: "#141416", border: "1px solid rgba(255,255,255,0.13)", borderRadius: 14,
          padding: "15px 16px", boxShadow: "0 18px 48px rgba(0,0,0,0.55)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, color: "var(--green)", marginBottom: 8 }}>
            {I[active.icon]()}
            <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: "0.04em" }}>{active.label}</span>
          </div>
          <div style={{ fontSize: 15, fontWeight: 600, wordBreak: "break-all", lineHeight: 1.4 }}>{active.value}</div>
          <button onClick={() => copy(active)}
            style={{
              marginTop: 13, width: "100%", padding: "9px 12px", borderRadius: 9, cursor: "pointer",
              fontSize: 13, fontWeight: 700, border: "none",
              background: copied ? "rgba(63,225,122,0.18)" : "var(--green)",
              color: copied ? "var(--green)" : "#0a0a0b", transition: "background .18s ease, color .18s ease" }}>
            {copied ? "✓ 已复制" : "复制" + active.label}
          </button>
        </div>}
    </div>);
}

function Sidebar({ page, setPage }) {
  return (
    <aside style={{
      position: "sticky", top: 0, alignSelf: "flex-start",
      width: 296, flex: "0 0 296px", height: "100vh",
      borderRight: "1px solid var(--line)",
      padding: "34px 26px",
      display: "flex", flexDirection: "column", gap: 26,
    }}>
      {/* identity */}
      <button onClick={() => setPage("home")} style={{ display: "flex", alignItems: "center", gap: 13, textAlign: "left" }}>
        <div style={{ width: 46, height: 46, borderRadius: 12, overflow: "hidden", flex: "0 0 46px", border: "1px solid var(--line-2)" }}>
          <Slot id="me" shape="rounded" radius={12} placeholder="" style={{ background: "#26262a" }} />
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 16, letterSpacing: "0.01em", lineHeight: 1.05 }}>郑彦荣</div>
        </div>
      </button>

      {/* contacts — click to expand */}
      <ContactDock />

      {/* nav */}
      <nav style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 2 }}>
        <NavItem icon="home" label="首页" active={page === "home"} onClick={() => setPage("home")} />
        <NavItem icon="work" label="项目" active={page === "projects"} onClick={() => setPage("projects")} />
        <NavItem icon="user" label="关于" active={page === "about"} onClick={() => setPage("about")} />
        <NavItem icon="bolt" label="服务" active={page === "services"} onClick={() => setPage("services")} />
      </nav>

      <div style={{ marginTop: "auto" }}></div>
    </aside>
  );
}

Object.assign(window, { Sidebar });