/* Honey Scripts — Sidebar (left rail) */

const { useState: useStateS } = React;

// label → i18n key mapping (so we don't have to refactor the SIDEBAR data shape)
const NAV_KEYS = {
  "Information": "navInformation",
  "Welcome": "navWelcome",
  "Honey Scripts": "navHoneyScripts",
  "General": "navGeneral",
  "Honey Radio": "itemHoneyRadio",
  "More Scripts": "itemMoreScripts",
  "FiveM Asset Escrow": "itemEscrow",
  "Installation": "pageInstallation",
  "FAQ & Troubleshooting": "pageFAQ",
  "API & Usage": "pageApi",
  "Usage & Admin Panel": "pageUsage",
  "Honey TextUI 3D": "itemHoneyTextui",
  "Honey Elevators": "itemHoneyElevators",
};
function tr(t, label) { const k = NAV_KEYS[label]; return (k && t(k)) || label; }

function Sidebar({ activePage, onNavigate, onCloseMobile }) {
  const t = window.useT();
  const [openItems, setOpenItems] = useStateS(() => {
    const init = {};
    SIDEBAR.forEach(g => g.items.forEach(it => { if (it.defaultOpen) init[it.id] = true; }));
    return init;
  });
  const toggle = (id) => setOpenItems(p => ({ ...p, [id]: !p[id] }));

  return (
    <nav>
      {onCloseMobile && (
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="side-group-h" style={{ margin: 0 }}>Docs</span>
          <button className="btn btn-ghost" onClick={onCloseMobile} style={{ padding: 6 }}>
            <Icon.Close/>
          </button>
        </div>
      )}
      {SIDEBAR.map(group => (
        <div key={group.label}>
          <div className="side-group-h">{tr(t, group.label)}</div>
          {group.items.map(item => {
            const isLanding = item.landingPage && activePage === item.landingPage;
            const open = ((item.id in openItems) ? openItems[item.id] : isLanding) && !item.comingSoon;
            const handleClick = () => {
              if (item.comingSoon) return;
              if (item.landingPage) {
                onNavigate(item.landingPage);
                onCloseMobile && onCloseMobile();
              }
              if (item.pages.length > 0) {
                setOpenItems(p => ({ ...p, [item.id]: !open }));
              }
            };
            return (
              <div key={item.id} style={{ marginBottom: 4 }}>
                <div
                  className={"side-toggle" + (open ? " open" : "") + (isLanding ? " is-landing" : "")}
                  onClick={handleClick}
                  style={{
                    opacity: item.comingSoon ? 0.55 : 1,
                    cursor: item.comingSoon ? "default" : "pointer",
                    color: isLanding ? "var(--honey)" : undefined,
                    background: isLanding ? "rgba(255,184,0,0.07)" : undefined,
                  }}
                >
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 9 }}>
                    {item.glyph
                      ? React.createElement(
                          Icon[item.glyph[0].toUpperCase() + item.glyph.slice(1)] || Icon.Hex,
                          { width: 17, height: 17, style: { color: "var(--honey)" } }
                        )
                      : <BrandIcon width={17} height={17} style={{ color: "var(--honey)" }}/>}
                    {tr(t, item.label)}
                  </span>
                  {item.comingSoon
                    ? <span className="chip" style={{ fontSize: 10, padding: "2px 7px" }}>{t("comingSoon")}</span>
                    : (item.pages.length > 0 && <Icon.ChevronRight className="caret"/>)}
                </div>
                {open && item.pages.length > 0 && (
                  <div style={{ padding: "2px 0 6px 12px", borderLeft: "1px solid var(--border)", marginLeft: 16 }}>
                    {item.pages.map(p => (
                      <div
                        key={p.id}
                        className={"side-item" + (activePage === p.id ? " active" : "")}
                        onClick={() => { onNavigate(p.id); onCloseMobile && onCloseMobile(); }}
                      >
                        {tr(t, p.label)}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      ))}
    </nav>
  );
}

window.Sidebar = Sidebar;