// Sidebar — ultra-thin icon rail that sits in the window's grey bg, NOT inside
// the paper. Matches the screenshot where the paper has a clean rounded edge.

const { useState: uS_sb } = React;

function Sidebar({ view, setView, onOpenCommandK }) {
  const items = [
    { id: "home", label: "Home", icon: <Ic.home width="16" height="16" /> },
    { id: "dictionary", label: "Dictionary", icon: <Ic.book width="16" height="16" /> },
    { id: "style", label: "Style", icon: <Ic.type width="16" height="16" /> },
    { id: "transforms", label: "Transforms", icon: <Ic.wand width="16" height="16" /> },
  ];
  const bottom = [
    { id: "settings", label: "Settings", icon: <Ic.settings width="16" height="16" /> },
    { id: "help", label: "Help", icon: <Ic.help width="16" height="16" /> },
  ];

  const Item = ({ id, label, icon, active, onClick }) => {
    const [hover, setHover] = uS_sb(false);
    return (
      <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} title={label}
        style={{ width: 32, height: 32, borderRadius: 8, border: "none",
          background: active ? "rgba(0,0,0,.07)" : hover ? "rgba(0,0,0,.04)" : "transparent",
          color: active ? "var(--ink)" : "var(--ink-mute)",
          display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
          transition: "all 120ms ease", position: "relative" }}>
        {icon}
        {hover && (
          <span style={{ position: "absolute", left: "calc(100% + 8px)", top: "50%", transform: "translateY(-50%)", background: "var(--ink)", color: "#fff", fontSize: 11.5, padding: "4px 8px", borderRadius: 6, whiteSpace: "nowrap", pointerEvents: "none", zIndex: 10, animation: "fadeIn 120ms ease" }}>{label}</span>
        )}
      </button>
    );
  };

  return (
    <aside style={{ width: 44, flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "center", padding: "2px 0 2px", gap: 2 }}>
      <div title="globefn" style={{ width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center" }}>
        <img src="/globefn-doublekeycaps.svg" alt="globefn" height="22" style={{ display: "block", height: 22, width: "auto" }} />
      </div>
      <div style={{ height: 4 }} />
      <Item id="__search" label="Search · ⌘K" icon={<Ic.search width="15" height="15" />} active={false} onClick={onOpenCommandK} />
      <div style={{ height: 6 }} />
      {items.map((it) => <Item key={it.id} {...it} active={view === it.id} onClick={() => setView(it.id)} />)}
      <div style={{ flex: 1 }} />
      {bottom.map((it) => <Item key={it.id} {...it} active={view === it.id} onClick={() => setView(it.id)} />)}
      <div style={{ height: 6 }} />
      <div style={{ width: 26, height: 26, borderRadius: 999, background: "linear-gradient(135deg,#d9d9d9,#a8a8a8)", outline: "1.5px solid #fff", boxShadow: "0 0 0 1px rgba(0,0,0,.08)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 10.5, fontWeight: 600, color: "#fff" }}>L</div>
    </aside>
  );
}

window.Sidebar = Sidebar;