const { Wordmark, Icon, IconButton, ThemeToggle, Button } = window.SamsonAILabDesignSystem_8f27a2;

/* Product layer surfaces (§2.3): page background-dimmed, panels background-bright,
   wells background-deep, row hover background-hover, panel borders grid-bright. */
function Sidebar({ active, onSelect }) {
  return (
    <aside style={{ width: 232, flexShrink: 0, display: "flex", flexDirection: "column", background: "var(--color-background-bright)", borderRight: "1px solid var(--color-grid-bright)" }}>
      <div style={{ height: 56, display: "flex", alignItems: "center", padding: "0 16px", borderBottom: "1px solid var(--color-grid-bright)" }}>
        <Wordmark name="Samson AI Lab" suffix=".dev" />
      </div>
      <div style={{ padding: "12px 12px 8px" }}>
        <button type="button" style={{ display: "flex", alignItems: "center", gap: 8, width: "100%", height: 32, padding: "0 10px", cursor: "pointer", borderRadius: "var(--radius-xs)", border: "1px solid var(--color-border-bright)", background: "var(--color-surface-control)", color: "var(--color-text-bright)", fontSize: "var(--text-sm)" }}>
          <span style={{ width: 7, height: 7, borderRadius: "var(--radius-full)", background: "var(--color-success)" }} />
          Production
          <Icon name="chevron-down" size={14} style={{ marginLeft: "auto", opacity: 0.7 }} />
        </button>
      </div>
      <nav className="ds-scroll" style={{ flex: 1, overflowY: "auto", padding: "4px 8px 16px" }}>
        {window.NAV_GROUPS.map((g) => (
          <div key={g.heading} style={{ marginBottom: 14 }}>
            <div style={{ padding: "6px 10px", fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", letterSpacing: "var(--tracking-wide)", textTransform: "uppercase", color: "var(--color-text-faint)" }}>{g.heading}</div>
            {g.items.map((it) => {
              const on = it.id === active;
              return (
                <button
                  key={it.id}
                  type="button"
                  onClick={() => onSelect(it.id)}
                  style={{ position: "relative", display: "flex", alignItems: "center", gap: 10, width: "100%", height: 32, padding: "0 10px", marginBottom: 1, cursor: "pointer", textAlign: "left", border: 0, borderRadius: "var(--radius-xs)", background: on ? "var(--color-surface-selected)" : "transparent", color: on ? "var(--color-text-bright)" : "var(--color-text-dimmed)", fontSize: "var(--text-sm)", transition: "background-color var(--transition-default), color var(--transition-default)" }}
                >
                  <Icon name={it.icon} size={16} color={it.color} />
                  {it.label}
                </button>
              );
            })}
          </div>
        ))}
      </nav>
      <div style={{ padding: 12, borderTop: "1px solid var(--color-grid-bright)", display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, borderRadius: "var(--radius-full)", background: "var(--color-background-raised)", color: "var(--color-text-dimmed)", fontSize: "var(--text-xs)" }}>PR</span>
        <div style={{ lineHeight: 1.3, minWidth: 0 }}>
          <div style={{ fontSize: "var(--text-sm)", color: "var(--color-text-bright)", overflow: "hidden", textOverflow: "ellipsis" }}>Priya Raman</div>
          <div style={{ fontSize: "var(--text-xs)", color: "var(--color-text-faint)" }}>Northwind</div>
        </div>
        <IconButton icon="settings" label="Settings" size="small" style={{ marginLeft: "auto" }} />
      </div>
    </aside>
  );
}

function TopBar({ crumbs, action }) {
  return (
    <header style={{ display: "flex", alignItems: "center", gap: 12, height: 56, padding: "0 20px", flexShrink: 0, background: "var(--color-background-dimmed)", borderBottom: "1px solid var(--color-grid-bright)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "var(--text-sm)" }}>
        {crumbs.map((c, i) => (
          <React.Fragment key={c}>
            {i > 0 ? <span style={{ color: "var(--color-text-faint)" }}>/</span> : null}
            <span style={{ color: i === crumbs.length - 1 ? "var(--color-text-bright)" : "var(--color-text-dimmed)", fontFamily: i === crumbs.length - 1 && c.indexOf("run_") === 0 ? "var(--font-mono)" : "var(--font-sans)" }}>{c}</span>
          </React.Fragment>
        ))}
      </div>
      <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, height: 32, padding: "0 10px", width: 220, borderRadius: "var(--radius-xs)", background: "var(--color-input-bg)", border: "1px solid var(--color-grid-bright)" }}>
          <Icon name="search" size={14} color="var(--color-text-faint)" />
          <span style={{ fontSize: "var(--text-sm)", color: "var(--color-text-faint)" }}>Search runs</span>
          <kbd style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: "var(--text-xxs)", background: "var(--color-background-raised)", borderRadius: "var(--radius-xs)", padding: "2px 4px", color: "var(--color-text-dimmed)" }}>⌘K</kbd>
        </div>
        <ThemeToggle />
        {action || <Button variant="secondary" size="medium" icon="book-open">Docs</Button>}
      </div>
    </header>
  );
}

Object.assign(window, { Sidebar, TopBar });