/* Gaby · Sidebar — marca propia (no el orbital), tarjeta de identidad,
   nav agrupada en "tu trabajo / tu vida / el resto". */

const { dashboard, pendientes, agenda, repos, personal, mail, seguimiento } = window.GabyIcons;

const GABY_NAV = [
  { group: "tu trabajo", items: [
    { id: "dashboard",  label: "Dashboard",    short: "Inicio", Icon: dashboard },
    { id: "pendientes", label: "Pendientes",   short: "Pend.",  Icon: pendientes, badge: "2" },
    { id: "agenda",     label: "Agenda",       short: "Agenda", Icon: agenda },
    { id: "workshop",   label: "Workshop",     short: "Workshop", Icon: repos },
  ]},
  { group: "tu vida", items: [
    { id: "personal",   label: "Personal",     short: "Tú",     Icon: personal },
  ]},
  { group: "el resto", items: [
    { id: "correo",     label: "Correo electrónico", short: "Correo", Icon: mail, badge: "3" },
  ]},
  { group: "el equipo", items: [
    { id: "seguimiento", label: "Seguimiento",  short: "Proy.",  Icon: seguimiento },
  ]},
];
window.GABY_NAV = GABY_NAV;

/* Marca propia de Gaby: arco abierto + núcleo. Quieta, no es el orbital. */
function BrandMark({ size = 30 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" aria-hidden="true">
      <circle cx="20" cy="20" r="15" stroke="var(--cy-petrol)" strokeWidth="1.6"
        strokeLinecap="round" strokeDasharray="60 18" transform="rotate(-40 20 20)" opacity="0.9" />
      <circle cx="20" cy="20" r="4.4" fill="none" stroke="var(--cy-petrol)" strokeWidth="1.4" opacity="0.7" />
      <circle cx="20" cy="20" r="2.1" fill="var(--cy-orange)" />
    </svg>
  );
}
window.GabyBrandMark = BrandMark;

function Sidebar({ active, onNav }) {
  const D = window.GABY_DATA;
  return (
    <aside className="cy-side">
      <div className="cy-brand">
        <BrandMark />
        <div>
          <div className="cy-brand__word">Gaby</div>
          <div className="cy-brand__sub cy-mono" style={{ color: "var(--cy-faint)" }}>ASISTENTE · OPERARIA</div>
        </div>
      </div>

      <div className="cy-id">
        <div className="cy-id__avatar">C</div>
        <div>
          <div className="cy-id__name">{D.user.nombre}</div>
          <div className="cy-id__meta cy-mono">{D.user.rol} · {D.user.sucursal}</div>
        </div>
      </div>

      <nav style={{ display: "flex", flexDirection: "column", gap: "var(--op-sp-5)" }}>
        {GABY_NAV.map((g) => (
          <div className="cy-navgroup" key={g.group}>
            <div className="cy-navgroup__label">{g.group}</div>
            {g.items.map((it) => {
              const on = active === it.id;
              return (
                <div key={it.id}
                  className={"cy-nav" + (on ? " cy-nav--active" : "")}
                  onClick={() => onNav(it.id)}>
                  <it.Icon className="cy-nav__icon" />
                  <span>{it.label}</span>
                  {it.badge && <span className="cy-nav__badge">{it.badge}</span>}
                </div>
              );
            })}
          </div>
        ))}
      </nav>

      <div style={{ marginTop: "auto", padding: "0 var(--op-sp-3)" }}>
        <div className="cy-serif" style={{ fontSize: "0.95rem", color: "var(--cy-faint)" }}>
          “Encendemos la operación para devolverte tiempo.”
        </div>
      </div>
    </aside>
  );
}
window.GabySidebar = Sidebar;

/* Tabs inferiores para iPhone */
function MobileTabs({ active, onNav }) {
  const items = GABY_NAV.flatMap((g) => g.items);
  return (
    <nav className="cy-mobile-tabs">
      {items.map((it) => (
        <button key={it.id} className={"cy-tab" + (active === it.id ? " cy-tab--active" : "")}
          onClick={() => onNav(it.id)}>
          <it.Icon className="cy-tab__icon" />
          <span className="cy-tab__label">{it.short || it.label}</span>
        </button>
      ))}
    </nav>
  );
}
window.GabyMobileTabs = MobileTabs;