// Sidebar + Topbar shell components
const Sidebar = ({ page, setPage, t, user }) => {
  const items = [
    { section: t("nav_section_workspace"), entries: [
      { id: "dashboard", icon: "dashboard", label: t("nav_dashboard") },
      { id: "form",      icon: "plus",      label: t("nav_form") },
      { id: "analytics", icon: "chart",     label: t("nav_analytics") },
    ]},
    { section: t("nav_section_admin"), entries: [
      { id: "users",     icon: "users",     label: t("nav_users") },
      { id: "utilities", icon: "sliders",   label: t("nav_utilities") },
    ]},
  ];
  return (
    <aside className="sidebar" data-screen-label="Sidebar">
      <div className="brand">
        <div className="brand-mark"><span>V</span></div>
        <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.1 }}>
          <span className="brand-name">Verena</span>
          <span className="brand-sub">Utility Records</span>
        </div>
      </div>

      {items.map((sec, i) => (
        <div key={i} className="nav-section">
          <div className="nav-label">{sec.section}</div>
          {sec.entries.map((e) => (
            <div key={e.id}
                 className={"nav-item" + (page === e.id ? " active" : "")}
                 onClick={() => setPage(e.id)}>
              <Icon name={e.icon} className="nav-icon" />
              <span>{e.label}</span>
            </div>
          ))}
        </div>
      ))}

      <div className="sidebar-foot">
        <div className="avatar">{user.initials}</div>
        <div className="user-meta">
          <span className="user-name">{user.name}</span>
          <span className="user-email">{user.email}</span>
        </div>
        <Icon name="chevronRight" className="nav-icon" />
      </div>
    </aside>
  );
};

const Topbar = ({ t, lang, setLang, onLogout }) => {
  return (
    <div className="topbar">
      <div className="search">
        <Icon name="search" />
        <input type="text" placeholder={t("search")} />
        <span className="kbd">⌘K</span>
      </div>
      <div className="spacer"></div>
      <div className="lang-switch" role="tablist">
        <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        <button className={lang === "th" ? "active" : ""} onClick={() => setLang("th")}>TH</button>
      </div>
      <button className="icon-btn" title={t("notifications")} style={{ position: "relative" }}>
        <Icon name="bell" />
        <span className="dot"></span>
      </button>
      <button className="icon-btn" title={t("help")}>
        <Icon name="help" />
      </button>
      <button className="icon-btn" title={t("logout")} onClick={onLogout}>
        <Icon name="logout" />
      </button>
    </div>
  );
};

window.Sidebar = Sidebar;
window.Topbar = Topbar;