// Helios — Home-aware sidebar variant.
// Adds a "Home" entry above the existing nav. Identical chrome otherwise.

const homeSbItem = (selected) => ({
  display: "flex", alignItems: "center", gap: 10,
  padding: "6px 10px",
  margin: "0 8px",
  borderRadius: 6,
  fontSize: 13.5,
  color: selected ? "var(--color-text)" : "var(--color-text-secondary)",
  background: selected ? "var(--color-surface-hover)" : "transparent",
  cursor: "pointer",
  fontWeight: selected ? 500 : 400,
  letterSpacing: "-0.005em",
});
const homeSbHeading = {
  fontFamily: "var(--font-mono)",
  fontSize: 11, fontWeight: 400,
  letterSpacing: 0,
  fontFeatureSettings: '"tnum" 1, "zero" 1',
  color: "var(--color-text-muted)",
  padding: "14px 18px 6px",
};

const HomeSidebar = ({ current = "home" }) => (
  <aside style={{
    width: 240,
    background: "var(--color-sidebar-bg)",
    display: "flex",
    flexDirection: "column",
    fontFamily: "var(--font-sans)",
    flexShrink: 0,
    paddingTop: 10,
  }}>
    <div style={{ padding: "4px 10px 12px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 8px", borderRadius: 6, cursor: "pointer" }}>
        <HeliosWordmark size={14}/>
        <Icons.ChevronsUpDown size={12} style={{ color: "var(--color-text-muted)" }}/>
      </div>
      <button aria-label="New" style={{
        background: "transparent", border: 0, padding: 5, borderRadius: 6,
        color: "var(--color-text-muted)", cursor: "pointer", display: "flex"
      }}>
        <Icons.SquarePen size={15}/>
      </button>
    </div>

    <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
      <div style={homeSbItem(current === "home")}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/>
          <path d="M9 22V12h6v10"/>
        </svg>
        <span>Home</span>
      </div>
      <div style={homeSbItem(current === "new")}>
        <Icons.Plus size={15}/> <span>New conversation</span>
      </div>
      <div style={homeSbItem(current === "data")}>
        <Icons.Database size={15}/> <span>Data</span>
      </div>
      <div style={homeSbItem(current === "dashboard")}>
        <Icons.BarChart3 size={15}/> <span>Reports</span>
      </div>
      <div style={homeSbItem(current === "signals")}>
        <Icons.Bell size={15}/> <span>Signals</span>
        <span style={{
          marginLeft: "auto", fontSize: 10.5,
          color: "var(--color-warning-text)",
          fontFamily: "var(--font-mono)",
          fontFeatureSettings: '"tnum" 1', fontWeight: 500,
        }}>3</span>
      </div>
    </div>

    <div style={homeSbHeading}>Pinned</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
      <div style={homeSbItem(false)}>
        <Icons.Pin size={13} style={{ color: "var(--color-text-muted)" }}/>
        <span>Weekly revenue check</span>
      </div>
      <div style={homeSbItem(false)}>
        <Icons.Pin size={13} style={{ color: "var(--color-text-muted)" }}/>
        <span>Top services breakdown</span>
      </div>
    </div>

    <div style={homeSbHeading}>Recent</div>
    <div style={{ display: "flex", flexDirection: "column", gap: 1, overflow: "hidden" }}>
      {[
        "Why did Tuesday revenue dip?",
        "Compare gel vs acrylic margins",
        "Lash-fill add-on conversion",
        "Cancellation rate by stylist",
        "How do new clients find us?",
      ].map(t => (
        <div key={t} style={{ ...homeSbItem(false), whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", display: "block" }}>
          {t}
        </div>
      ))}
    </div>

    <div style={{ flex: 1 }}/>
    <div style={{
      borderTop: "1px solid var(--color-border)",
      padding: "10px 12px", display: "flex", alignItems: "center", gap: 10,
      margin: "8px 0 0",
    }}>
      <div style={{
        width: 26, height: 26, borderRadius: 9999,
        background: "var(--color-surface-warm)",
        display: "flex", alignItems: "center", justifyContent: "center",
        fontSize: 11, fontWeight: 600, color: "var(--color-text-secondary)",
      }}>MK</div>
      <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
        <span style={{ fontSize: 12.5, fontWeight: 500 }}>Mira K.</span>
        <span style={{ fontSize: 10.5, color: "var(--color-text-muted)" }}>The Lash Studio</span>
      </div>
      <div style={{ marginLeft: "auto", color: "var(--color-text-muted)", display: "flex", cursor: "pointer" }}>
        <Icons.ChevronsUpDown size={13}/>
      </div>
    </div>
  </aside>
);

const HomeShell = ({ children, current, width = 1280, height = 1080 }) => (
  <div style={{
    width, height,
    display: "flex",
    background: "var(--color-bg)",
    fontFamily: "var(--font-sans)",
    color: "var(--color-text)",
    overflow: "hidden",
  }}>
    <HomeSidebar current={current}/>
    <ContentCanvas>{children}</ContentCanvas>
  </div>
);

Object.assign(window, { HomeSidebar, HomeShell });