import React from "react";

function ensureStyle(id, css) {
  if (typeof document === "undefined") return;
  if (document.getElementById(id)) return;
  const el = document.createElement("style");
  el.id = id; el.textContent = css;
  document.head.appendChild(el);
}

ensureStyle("at-nav", `
  .at-nav{width:224px;max-width:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-dark);
    color:#fff;padding:16px 12px;font-family:var(--font-sans)}
  .at-nav__brand{display:flex;align-items:center;gap:10px;padding:4px 6px 18px}
  .at-nav__mark{width:32px;height:32px;border-radius:10px;background:var(--at-flush-600);color:#fff;display:grid;
    place-items:center;font-family:var(--font-display);font-weight:600;font-size:18px}
  .at-nav__name{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1}
  .at-nav__sub{margin-top:3px;color:var(--at-plum-500);font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase}
  .at-nav__sec{padding:14px 10px 6px;color:var(--at-plum-600);font-size:10px;letter-spacing:var(--tracking-caps);text-transform:uppercase}
  .at-nav__item{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:36px;padding:0 10px;
    border:0;background:transparent;border-radius:var(--radius-sm);color:var(--at-plum-400);font:inherit;font-size:13px;
    font-weight:500;cursor:pointer;text-align:left;transition:background .12s ease,color .12s ease}
  .at-nav__item:hover{color:#fff}
  .at-nav__item.is-active{background:rgba(224,58,99,0.16);color:#fff}
  .at-nav__item.is-active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:2px;
    border-radius:0 2px 2px 0;background:var(--at-flush-600)}
  .at-nav__count{margin-left:auto;color:var(--at-plum-500);font-size:11px}
`);

/**
 * The dark sidebar navigation shell: brand lockup, sectioned rows, and a flush
 * active marker. It is layout chrome — the applied app shell in ui_kits/app
 * wires it to real routes and the selected-view state.
 */
export function Navigation({ brand, sections = [], onSelect }) {
  return (
    <nav className="at-nav" aria-label="Primary">
      {brand && (
        <div className="at-nav__brand">
          {brand.mark && <div className="at-nav__mark">{brand.mark}</div>}
          <div>
            {brand.name && <div className="at-nav__name">{brand.name}</div>}
            {brand.sub && <div className="at-nav__sub">{brand.sub}</div>}
          </div>
        </div>
      )}
      {sections.map((section, si) => (
        <React.Fragment key={si}>
          {section.label && <div className="at-nav__sec">{section.label}</div>}
          {(section.items || []).map((item, ii) => (
            <button
              key={ii}
              type="button"
              className={"at-nav__item" + (item.active ? " is-active" : "")}
              aria-current={item.active ? "page" : undefined}
              onClick={onSelect ? () => onSelect(item) : item.onClick}
            >
              {item.label}
              {item.count != null && <span className="at-nav__count">{item.count}</span>}
            </button>
          ))}
        </React.Fragment>
      ))}
    </nav>
  );
}