// Sidebar + topbar shell for the Council Meetings module

const NAV = [
  { id: "dashboard",  label: "Dashboard",      icon: "dashboard" },
  { id: "meetings",   label: "Meetings",       icon: "calendar", badge: 2 },
  { id: "papers",     label: "Council Papers", icon: "file-text", badge: 3 },
  { id: "resolutions",label: "Resolutions",    icon: "gavel" },
  { id: "participants",label:"Participants",   icon: "users" },
  { id: "settings",   label: "Settings",       icon: "settings" },
];

const Sidebar = ({ route, navigate }) => {
  const top = NAV[0];
  const active = route.name;
  // Match nav by route family (e.g. meeting-detail → meetings)
  const family = active === "meeting-detail" || active === "meeting-edit" || active === "meeting-create" ? "meetings"
              : active === "paper-detail" || active === "paper-edit" || active === "paper-create" ? "papers"
              : active === "resolution-detail" ? "resolutions"
              : active;
  return (
    <aside className="sidebar">
      <div className="sidebar__brand">
        <div className="sidebar__logo">O</div>
        <div>
          <div className="sidebar__brand-text">Oneteam</div>
          <div className="sidebar__brand-sub">City Council · Admin</div>
        </div>
      </div>

      <button className="sidebar__module-switcher" type="button">
        <span className="sidebar__module-icon"><Icon name="gavel" size={12} /></span>
        <span className="sidebar__module-name">Council Meetings</span>
        <span className="sidebar__module-chev"><Icon name="chevron-down" size={14} /></span>
      </button>

      <div className="sidebar__section-label">Module</div>
      <nav className="sidebar__nav">
        {NAV.map(n => (
          <button
            key={n.id}
            className={`sidebar__item ${family === n.id ? "sidebar__item--active" : ""}`}
            onClick={() => navigate({ name: n.id })}
          >
            <Icon name={n.icon} size={15} className="sidebar__item-icon" />
            <span>{n.label}</span>
            {n.badge && <span className="sidebar__item-badge">{n.badge}</span>}
          </button>
        ))}
      </nav>

      <div className="sidebar__footer">
        <div className="sidebar__avatar">KR</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="sidebar__user-name">Khadeeja Rasheed</div>
          <div className="sidebar__user-role">Council Secretariat</div>
        </div>
        <button className="topbar__icon-btn" style={{ color: "#7e889c" }}><Icon name="settings" size={14} /></button>
      </div>
    </aside>
  );
};

// ============================================================
// Topbar with breadcrumbs (computed from route)
// ============================================================
const crumbsForRoute = (route) => {
  const home = { label: "Council Meetings", route: { name: "dashboard" } };
  switch (route.name) {
    case "dashboard": return [{ label: "Dashboard" }];
    case "meetings": return [home, { label: "Meetings" }];
    case "meeting-create": return [home, { label: "Meetings", route: { name: "meetings" } }, { label: "New meeting" }];
    case "meeting-edit": {
      const m = getMeeting(route.id);
      return [home, { label: "Meetings", route: { name: "meetings" } }, { label: m?.no || "—", route: { name: "meeting-detail", id: route.id } }, { label: "Edit" }];
    }
    case "meeting-detail": {
      const m = getMeeting(route.id);
      return [home, { label: "Meetings", route: { name: "meetings" } }, { label: m?.no || "—" }];
    }
    case "papers": return [home, { label: "Council Papers" }];
    case "agenda": return [home, { label: "Council Papers", route: { name: "papers" } }, { label: "Agenda items" }];
    case "paper-create": return [home, { label: "Council Papers", route: { name: "papers" } }, { label: "New paper" }];
    case "paper-edit": {
      const p = getPaper(route.id);
      return [home, { label: "Council Papers", route: { name: "papers" } }, { label: p?.id || "—", route: { name: "paper-detail", id: route.id } }, { label: "Edit" }];
    }
    case "paper-detail": {
      const p = getPaper(route.id);
      return [home, { label: "Council Papers", route: { name: "papers" } }, { label: p?.id || "—" }];
    }
    case "agenda": return [home, { label: "Agenda Items" }];
    case "resolutions": return [home, { label: "Resolutions" }];
    case "resolution-detail": {
      const r = getResolution(route.id);
      return [home, { label: "Resolutions", route: { name: "resolutions" } }, { label: r?.id || "—" }];
    }
    case "participants": return [home, { label: "Participants" }];
    case "settings": return [home, { label: "Settings" }];
    default: return [home];
  }
};

const Topbar = ({ route, navigate }) => {
  const crumbs = crumbsForRoute(route);
  return (
    <header className="topbar">
      <div className="topbar__crumbs">
        {crumbs.map((c, i) => {
          const last = i === crumbs.length - 1;
          return (
            <React.Fragment key={i}>
              {i > 0 && <span className="topbar__crumb-sep"><Icon name="chevron-right" size={12} /></span>}
              {c.route && !last ? (
                <a onClick={() => navigate(c.route)} style={{ cursor: "pointer" }}>{c.label}</a>
              ) : (
                <span className={last ? "topbar__crumb-current" : ""}>{c.label}</span>
              )}
            </React.Fragment>
          );
        })}
      </div>
      <div className="topbar__search">
        <Icon name="search" size={14} />
        <span>Search papers, meetings, resolutions…</span>
        <kbd>⌘K</kbd>
      </div>
      <button className="topbar__icon-btn" title="Notifications"><Icon name="bell" /></button>
      <button className="topbar__icon-btn" title="Help"><Icon name="info" /></button>
    </header>
  );
};

Object.assign(window, { Sidebar, Topbar });