const {
  IconHome, IconSearch, IconBars, IconNetwork, IconMonitor, IconBranch, IconGrid,
  IconStream, IconReport, IconAlert, IconBolt, IconFilter, IconUsers,
  IconSun, IconMoon, IconHelp, IconGear, IconUser, IconChevDown,
  IconSlack,
} = window.Icons;

function BrandGlyph() {
  return (
    <img
      src="https://openobserve.ai/img/logo/logo_horizontal.svg"
      alt="OpenObserve"
      style={{ height: 26, width: "auto", display: "block" }}
    />
  );
}

// ─── AI sparkle (in top bar)
function AISparkle({ onOpen }) {
  return (
    <button title="AI Assistant" onClick={onOpen} style={{
      width: 36, height: 28, borderRadius: 5,
      background: "var(--accent-dark)",
      border: "none", cursor: "pointer", padding: 0,
      display: "inline-flex", alignItems: "center", justifyContent: "center",
    }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
        <defs>
          <linearGradient id="ai-grad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#F0A6FF"/>
            <stop offset="1" stopColor="#9B9EF0"/>
          </linearGradient>
        </defs>
        <path d="M11 2 L13 8.5 L19.5 10.5 L13 12.5 L11 19 L9 12.5 L2.5 10.5 L9 8.5 Z" fill="url(#ai-grad)"/>
        <path d="M18 16 L18.7 17.8 L20.5 18.5 L18.7 19.2 L18 21 L17.3 19.2 L15.5 18.5 L17.3 17.8 Z" fill="url(#ai-grad)" opacity=".9"/>
      </svg>
    </button>
  );
}

// ─── Edition pill
function EditionPill() {
  return (
    <div className="mono" style={{
      display: "inline-flex", alignItems: "center", gap: 6,
      height: 26, padding: "0 10px",
      background: "var(--accent-dark)", color: "white",
      borderRadius: 5,
      fontSize: 11, fontWeight: 600, letterSpacing: ".02em",
      whiteSpace: "nowrap",
    }}>
      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 7l9-4 9 4v6c0 5-4 8-9 9-5-1-9-4-9-9z"/>
      </svg>
      <span>Edition: Enterprise</span>
    </div>
  );
}

const NAV_ITEMS = [
  { key: "home",     label: "Home",          icon: IconHome },
  { key: "logs",     label: "Logs",          icon: IconSearch },
  { key: "metrics",  label: "Metrics",       icon: IconBars },
  { key: "traces",   label: "Traces",        icon: IconNetwork },
  { key: "rum",      label: "RUM",           icon: IconMonitor },
  { key: "pipelines",label: "Pipelines",     icon: IconBranch },
  { key: "dashboards",label:"Dashboards",    icon: IconGrid },
  { key: "streams",  label: "Streams",       icon: IconStream },
  { key: "reports",  label: "Reports",       icon: IconReport },
  { key: "alerts",   label: "Alerts",        icon: IconAlert },
  { key: "incidents",label: "Incidents",     icon: IconAlertDot },
  { key: "actions",  label: "Actions",       icon: IconBolt },
  { key: "sources",  label: "Data sources",  icon: IconFilter },
  { key: "iam",      label: "IAM",           icon: IconUsers },
];

// ─── Incidents glyph (alert with dot)
function IconAlertDot({ size = 16, sw = 1.6 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
      <path d="M6 17h12l-1.5-3V10a4.5 4.5 0 0 0-9 0v4z"/>
      <circle cx="18" cy="7" r="3" fill="currentColor" stroke="none"/>
    </svg>
  );
}

function Sidebar({ active, onSelect }) {
  return (
    <nav style={{
      width: 64, flexShrink: 0, background: "var(--rail)",
      borderRight: "1px solid var(--border)",
      display: "flex", flexDirection: "column", alignItems: "stretch",
      paddingTop: 4,
      overflowY: "auto",
    }}>
      {NAV_ITEMS.map(item => {
        const Ico = item.icon;
        const isActive = item.key === active;
        return (
          <button key={item.key} title={item.label} onClick={() => onSelect && onSelect(item.key)}
            style={{
              border: "none", background: "transparent", cursor: "pointer",
              padding: "5px 4px 5px",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
              color: isActive ? "var(--ink)" : "var(--ink-2)",
              position: "relative",
            }}
            onMouseEnter={e => { if (!isActive) e.currentTarget.style.background = "var(--surface)"; }}
            onMouseLeave={e => { if (!isActive) e.currentTarget.style.background = "transparent"; }}>
            <div style={{
              width: 44, height: 30, borderRadius: 6,
              display: "flex", alignItems: "center", justifyContent: "center",
              background: isActive ? "var(--accent-dark)" : "transparent",
              color: isActive ? "white" : "inherit",
              transition: "background .15s",
            }}>
              <Ico size={17} sw={1.6} />
            </div>
            <span style={{
              fontSize: 9.5, lineHeight: 1.1, fontWeight: isActive ? 600 : 500,
              letterSpacing: ".005em",
              maxWidth: 56, textAlign: "center", wordBreak: "break-word",
            }}>{item.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

// ─── Top bar
function TopBar({ theme, onToggleTheme, onAIOpen }) {
  function handleAIClick() {
    if (typeof onAIOpen === "function") onAIOpen();
    if (window.parent && window.parent !== window) {
      window.parent.postMessage({ type: "oo-ai-open" }, "*");
    }
  }
  return (
    <div style={{
      height: 48, flexShrink: 0,
      background: "var(--canvas)",
      borderBottom: "1px solid var(--border)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      padding: "0 14px 0 16px",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <BrandGlyph />
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        <EditionPill />
        <AISparkle onOpen={handleAIClick} />
        <button className="btn-ghost" style={{ fontWeight: 500, marginLeft: 4 }}>
          default
          <IconChevDown size={13} />
        </button>
        <div style={{ width: 1, height: 18, background: "var(--border)", margin: "0 4px" }}/>
        <button className="icon-btn" title="Theme" onClick={onToggleTheme}>
          {theme === "dark" ? <IconSun size={15} /> : <IconMoon size={15} />}
        </button>
        <button className="icon-btn" title="Integrations"><IconSlack size={15} /></button>
        <button className="icon-btn" title="Help"><IconHelp size={15} /></button>
        <button className="icon-btn" title="Settings"><IconGear size={15} /></button>
        <button className="icon-btn" title="Account" style={{
          background: "var(--ink)", color: "var(--canvas)", marginLeft: 2,
        }}><IconUser size={14} /></button>
      </div>
    </div>
  );
}

window.Chrome = { Sidebar, TopBar, BrandGlyph, NAV_ITEMS };