// Sidebar — dual structure with collapsible primary
const NAV_GROUPS = [
  {
    label: "general",
    items: [
      { id: "dashboard", icon: "Home", label: "dashboard" },
      { id: "alerts", icon: "Bell", label: "alerts" },
    ],
  },
  {
    label: "workspace",
    items: [
      { id: "fiscal", icon: "FileText", label: "fiscal" },
      { id: "docs", icon: "Book", label: "docs" },
      { id: "drive", icon: "Folder", label: "drive" },
      { id: "tasks", icon: "CheckSquare", label: "tasks" },
      { id: "automations", icon: "Brain", label: "automations" },
      { id: "chat", icon: "Chat", label: "chat", soon: true },
      { id: "social", icon: "Hash", label: "social", soon: true },
    ],
  },
  {
    label: "infra",
    items: [
      { id: "servers", icon: "Server", label: "servers", soon: true },
    ],
  },
  {
    label: "admin",
    items: [
      { id: "users", icon: "User", label: "users" },
      { id: "settings", icon: "Settings", label: "settings" },
    ],
  },
];

// Per-screen subnav definitions
// All `count` fields are null for now. The badges in the secondary sidebar
// only render when count is a number, so leaving them null hides them until
// each entity is wired to the API and we can derive counts from real data.
const SUBNAVS = {
  dashboard: { title: "dashboard", items: [
    { id: "overview", label: { en: "Overview", es: "Vista general" }, count: null, active: true },
    { id: "performance", label: { en: "Performance", es: "Rendimiento" }, count: null },
    { id: "activity", label: { en: "Activity", es: "Actividad" }, count: null },
    { id: "calendar", label: { en: "Calendar", es: "Calendario" }, count: null },
  ]},
  fiscal: { title: "fiscal", items: [
    // Comercial — Facturas
    { id: "all", label: { en: "All invoices", es: "Todas las facturas" }, count: null, active: true, group: "invoices" },
    { id: "paid", label: { en: "Paid", es: "Pagadas" }, count: null, group: "invoices" },
    { id: "pending", label: { en: "Pending", es: "Pendientes" }, count: null, group: "invoices" },
    { id: "overdue", label: { en: "Overdue", es: "Vencidas" }, count: null, group: "invoices" },
    { id: "drafts", label: { en: "Drafts", es: "Borradores" }, count: null, group: "invoices" },
    { id: "templates", label: { en: "Templates", es: "Plantillas" }, count: null, group: "invoices" },
    // Comercial — Clientes
    { id: "clients-all", label: { en: "All clients", es: "Todos los clientes" }, count: null, group: "clients" },
    { id: "clients-active", label: { en: "Active", es: "Activos" }, count: null, group: "clients" },
    { id: "clients-archived", label: { en: "Archived", es: "Archivados" }, count: null, group: "clients" },
    // Contabilidad
    { id: "journal", label: { en: "Journal", es: "Libro Diario" }, count: null, group: "accounting" },
    { id: "ledger", label: { en: "Ledger", es: "Libro Mayor" }, count: null, group: "accounting" },
    { id: "accounts", label: { en: "Chart of accounts", es: "Plan de cuentas" }, count: null, group: "accounting" },
  ]},
  alerts: { title: "alerts", items: [
    { id: "all", label: { en: "All", es: "Todas" }, count: null, active: true },
    { id: "unread", label: { en: "Unread", es: "Sin leer" }, count: null },
    { id: "important", label: { en: "Important", es: "Importantes" }, count: null },
    { id: "archived", label: { en: "Archived", es: "Archivadas" }, count: null },
  ]},
  docs: { title: "docs", items: [
    { id: "spaces", label: { en: "Spaces", es: "Espacios" }, count: null, active: true },
    { id: "shared", label: { en: "Shared with me", es: "Compartido" }, count: null },
    { id: "templates", label: { en: "Templates", es: "Plantillas" }, count: null },
    { id: "trash", label: { en: "Trash", es: "Papelera" }, count: null },
  ]},
  drive: { title: "drive", items: [
    { id: "files", label: { en: "All files", es: "Archivos" }, count: null, active: true },
    { id: "recent", label: { en: "Recent", es: "Recientes" }, count: null },
    { id: "shared", label: { en: "Shared", es: "Compartidos" }, count: null },
    { id: "trash", label: { en: "Trash", es: "Papelera" }, count: null },
  ]},
  tasks: { title: "tasks", items: [
    { id: "boards", label: { en: "Boards", es: "Tableros" }, count: null, active: true },
    { id: "mine", label: { en: "Assigned to me", es: "Asignadas" }, count: null },
    { id: "backlog", label: { en: "Backlog", es: "Backlog" }, count: null },
    { id: "sprints", label: { en: "Sprints", es: "Sprints" }, count: null },
  ]},
  automations: { title: "automations", items: [
    { id: "all", label: { en: "All", es: "Todas" }, count: null, active: true },
    { id: "active", label: { en: "Active", es: "Activas" }, count: null },
    { id: "paused", label: { en: "Paused", es: "Pausadas" }, count: null },
  ]},
  chat: { title: "chat", items: [
    { id: "channels", label: { en: "Channels", es: "Canales" }, count: null, active: true },
    { id: "dms", label: { en: "Direct messages", es: "Directos" }, count: null },
    { id: "threads", label: { en: "Threads", es: "Hilos" }, count: null },
  ]},
  social: { title: "social", items: [
    { id: "calendar", label: { en: "Content calendar", es: "Calendario" }, count: null, active: true },
    { id: "drafts", label: { en: "Drafts", es: "Borradores" }, count: null },
    { id: "scheduled", label: { en: "Scheduled", es: "Programados" }, count: null },
    { id: "analytics", label: { en: "Analytics", es: "Analíticas" }, count: null },
  ]},
  servers: { title: "servers", items: [
    { id: "projects", label: { en: "Projects", es: "Proyectos" }, count: null, active: true },
    { id: "deployments", label: { en: "Deployments", es: "Despliegues" }, count: null },
    { id: "domains", label: { en: "Domains", es: "Dominios" }, count: null },
    { id: "logs", label: { en: "Logs", es: "Logs" }, count: null },
  ]},
  users: { title: "users", items: [
    { id: "members", label: { en: "Members", es: "Miembros" }, count: null, active: true },
    { id: "invites", label: { en: "Invites", es: "Invitaciones" }, count: null },
    { id: "roles", label: { en: "Roles", es: "Roles" }, count: null },
  ]},
  settings: { title: "settings", items: [
    { id: "general", label: { en: "General", es: "General" }, count: null, active: true },
    { id: "appearance", label: { en: "Appearance", es: "Apariencia" }, count: null },
    { id: "billing", label: { en: "Billing", es: "Facturación" }, count: null },
    { id: "security", label: { en: "Security", es: "Seguridad" }, count: null },
    { id: "advanced", label: { en: "Advanced", es: "Avanzado" }, count: null },
  ]},
  profile: { title: "profile", items: [
    { id: "personal", label: { en: "Personal", es: "Personal" }, count: null, active: true },
    { id: "team", label: { en: "Team", es: "Equipo" }, count: null },
    { id: "notifications", label: { en: "Notifications", es: "Notificaciones" }, count: null },
    { id: "integrations", label: { en: "Integrations", es: "Integraciones" }, count: null },
    { id: "billing", label: { en: "Billing", es: "Facturación" }, count: null },
    { id: "api", label: { en: "API keys", es: "API keys" }, count: null },
    { id: "security", label: { en: "Security", es: "Seguridad" }, count: null },
  ]},
};

window.SUBNAVS = SUBNAVS;

window.Sidebar = function Sidebar({ active, setActive, collapsed, setCollapsed, forced, secondaryHidden, setSecondaryHidden, hasSecondary, t, lang }) {
  const toast = window.useToast ? window.useToast() : (() => {});
  const onNewModule = () => toast(t("coming_soon"), "info");
  return (
    <aside className="sidebar-primary">
      <div className="sidebar-brand">
        {collapsed ? (
          <>
            <img className="brand-icon light-only" src="assets/logo-small.png" alt="Vildez" />
            <img className="brand-icon dark-only" src="assets/logo-small-dark.png" alt="Vildez" />
          </>
        ) : (
          <>
            <img className="brand-wordmark light-only" src="assets/wordmark.png" alt="Vildez" />
            <img className="brand-wordmark dark-only" src="assets/wordmark-dark.png" alt="Vildez" />
          </>
        )}
      </div>
      <div style={{ flex: 1, overflowY: "auto", paddingBottom: 8 }}>
        {NAV_GROUPS.map((group) => (
          <div className="sidebar-section" key={group.label}>
            {!collapsed && <div className="sidebar-section-label">{t(group.label)}</div>}
            {collapsed && <div className="sidebar-section-label">·</div>}
            {group.items.map((item) => {
              const Icon = window.Icons[item.icon];
              const labelTxt = t(item.label);
              return (
                <div
                  key={item.id}
                  className={`nav-item ${active === item.id ? "active" : ""}`}
                  onClick={() => setActive(item.id)}
                  data-tooltip={labelTxt}
                >
                  <span className="nav-icon"><Icon /></span>
                  <span className="nav-label">{labelTxt}</span>
                  {item.badge && <span className="nav-badge">{item.badge}</span>}
                  {item.soon && (
                    <span
                      className="nav-soon"
                      title={t("soon")}
                      aria-label={t("soon")}
                    >
                      <window.Icons.Clock />
                    </span>
                  )}
                </div>
              );
            })}
          </div>
        ))}
        <div className="sidebar-section">
          <div
            className="nav-item"
            onClick={onNewModule}
            data-tooltip={t("new_module")}
            role="button"
            aria-label={t("new_module")}
          >
            <span className="nav-icon"><window.Icons.Plus /></span>
            <span className="nav-label">{t("new_module")}</span>
            <span className="nav-soon" title={t("soon")} aria-label={t("soon")}>
              <window.Icons.Clock />
            </span>
          </div>
        </div>
      </div>
      <div className="sidebar-cookies">
        <button
          type="button"
          className="cookies-btn"
          onClick={() => window.cookieConsent && window.cookieConsent.reset()}
          title={t("cookies_settings_tooltip")}
          data-tooltip={t("cookies_settings_tooltip")}
          aria-label={t("cookies_settings_tooltip")}
        >
          <window.Icons.Info />
          <span className="cookies-btn-label">{t("cookies_settings")}</span>
        </button>
      </div>
      <div className="sidebar-footer">
        <button
          className="collapse-btn"
          onClick={() => !forced && setCollapsed(!collapsed)}
          disabled={forced}
          title={forced ? "Sidebar locked at this screen size" : (collapsed ? "Expand sidebar" : "Collapse sidebar")}
          data-tooltip={forced ? "Locked" : (collapsed ? "Expand" : "Collapse")}
          aria-label="Toggle sidebar"
        >
          <window.Icons.PanelLeft />
        </button>
      </div>
    </aside>
  );
};

window.SecondarySidebar = function SecondarySidebar({ screen, t, lang, secondaryHidden, setSecondaryHidden, subTab, setSubTab }) {
  const conf = SUBNAVS[screen];
  if (!conf) return null;
  // Detect grouped subnavs (items have a `group` field)
  const grouped = conf.items.some((it) => it.group);
  const renderItem = (it) => (
    <button
      key={it.id}
      type="button"
      className={`sub-item ${subTab === it.id ? "active" : ""}`}
      onClick={() => setSubTab && setSubTab(it.id)}
    >
      <span className="sub-dot" />
      <span>{it.label[lang] || it.label.en}</span>
      {it.count !== null && it.count !== undefined && <span className="sub-count">{it.count}</span>}
    </button>
  );
  return (
    <aside className="sidebar-secondary">
      <div className="secondary-header">{t(conf.title)}</div>
      <div className="secondary-content">
        {grouped ? (() => {
          const groups = {};
          conf.items.forEach((it) => { (groups[it.group] = groups[it.group] || []).push(it); });
          return Object.entries(groups).map(([g, items], idx) => (
            <div key={g} style={{ marginTop: idx === 0 ? 0 : 12 }}>
              <div className="sub-group-label">{t(g)}</div>
              {items.map(renderItem)}
            </div>
          ));
        })() : conf.items.map(renderItem)}
      </div>
      <div className="secondary-footer">
        <button
          className="collapse-btn"
          onClick={() => setSecondaryHidden(true)}
          title="Hide subnav"
          aria-label="Hide subnav"
        >
          <window.Icons.ChevronLeft />
        </button>
      </div>
    </aside>
  );
};

Object.assign(window, { Sidebar: window.Sidebar, SecondarySidebar: window.SecondarySidebar, NAV_GROUPS });