/* Reusable mac window shell + sidebar for app views */

const MacWindow = ({ title, children, style = {}, height = 720, toolbar = null }) => (
  <div className="macwin" style={{ width: "100%", maxWidth: 1180, height, ...style }}>
    <div className="macwin-titlebar">
      <div className="traffic-lights">
        <span className="tl-close"/><span className="tl-min"/><span className="tl-max"/>
      </div>
      {toolbar ? toolbar : <span className="macwin-title">{title}</span>}
    </div>
    <div style={{ display: "flex", height: "calc(100% - 41px)" }}>
      {children}
    </div>
  </div>
);

/* App-internal sidebar (Finder-style, 240px) */
const AppSidebar = ({ items, current, onSelect }) => (
  <aside style={{
    width: 240,
    flexShrink: 0,
    background: "color-mix(in srgb, var(--surface-1) 70%, transparent)",
    backdropFilter: "blur(20px) saturate(180%)",
    borderRight: "1px solid var(--hairline)",
    padding: "10px 8px",
    display: "flex", flexDirection: "column",
    gap: 18,
    overflow: "auto",
  }}>
    {items.map((section, si) => (
      <div key={si}>
        {section.label && (
          <div style={{
            fontSize: 10, fontWeight: 600, textTransform: "uppercase",
            letterSpacing: "0.08em", color: "var(--text-tertiary)",
            padding: "4px 10px 6px",
          }}>{section.label}</div>
        )}
        <div style={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {section.items.map((it, i) => {
            const active = it.id === current;
            return (
              <button key={i}
                onClick={() => onSelect && onSelect(it.id)}
                style={{
                  display: "flex", alignItems: "center", gap: 8,
                  padding: "6px 10px",
                  borderRadius: 6,
                  border: "none",
                  background: active ? "var(--surface-selected)" : "transparent",
                  color: active ? "var(--text-primary)" : "var(--text-secondary)",
                  fontSize: 13,
                  fontWeight: active ? 500 : 400,
                  textAlign: "left",
                  cursor: "pointer",
                  fontFamily: "inherit",
                  transition: "background 0.15s var(--ease-apple-fast)",
                  width: "100%",
                  boxShadow: active ? "inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 30%, transparent)" : "none",
                }}
                onMouseEnter={e => { if (!active) e.currentTarget.style.background = "var(--surface-hover)"; }}
                onMouseLeave={e => { if (!active) e.currentTarget.style.background = "transparent"; }}
              >
                <Icon name={it.icon} size={15} style={{ color: it.iconColor || (active ? "var(--brand-400)" : "var(--text-tertiary)") }}/>
                <span style={{ flex: 1 }}>{it.label}</span>
                {it.badge && (
                  <span style={{
                    fontSize: 10, fontWeight: 600,
                    padding: "1px 5px",
                    borderRadius: 999,
                    background: it.badgeColor || "color-mix(in srgb, var(--brand-600) 18%, transparent)",
                    color: it.badgeFg || "var(--brand-300)",
                    fontVariantNumeric: "tabular-nums",
                  }}>{it.badge}</span>
                )}
                {it.pro && <span className="pro-tag" style={{ fontSize: 9, padding: "1px 5px" }}>PRO</span>}
              </button>
            );
          })}
        </div>
      </div>
    ))}
    <div style={{ marginTop: "auto", padding: "8px 10px", fontSize: 11, color: "var(--text-tertiary)", display: "flex", alignItems: "center", gap: 8 }}>
      <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--success)" }}/>
      All systems normal
    </div>
  </aside>
);

const AppToolbar = ({ title, sub, actions, search = true }) => (
  <div style={{
    display: "flex", alignItems: "center", gap: 14,
    padding: "10px 16px",
    borderBottom: "1px solid var(--hairline)",
    background: "color-mix(in srgb, var(--surface-1) 50%, transparent)",
    backdropFilter: "blur(20px)",
    minHeight: 52,
  }}>
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
      <span style={{ fontSize: 14, fontWeight: 600 }}>{title}</span>
      {sub && <span style={{ fontSize: 11, color: "var(--text-tertiary)" }}>{sub}</span>}
    </div>
    <div style={{ flex: 1 }}/>
    {search && (
      <div style={{
        display: "flex", alignItems: "center", gap: 6,
        padding: "5px 10px",
        background: "var(--surface-2)",
        border: "1px solid var(--hairline)",
        borderRadius: 7,
        width: 220,
        fontSize: 12,
        color: "var(--text-tertiary)",
      }}>
        <Icon name="search" size={13}/>
        <span style={{ flex: 1 }}>Search</span>
        <span className="mono" style={{ fontSize: 10, opacity: 0.5 }}>⌘ F</span>
      </div>
    )}
    {actions}
  </div>
);

Object.assign(window, { MacWindow, AppSidebar, AppToolbar });