/* global React, Icon, SIDEBAR, ROLES */
// App shell — header + sidebar (10 categories, collapsible)

const { useState, useEffect, useRef, useMemo } = React;

// 系統管理員（Samantha）為 Prototype 超級使用者：sidebar 全模組 + 各角色 CTA 皆可操作
const isSidebarAllAccess = (role) =>
  typeof isPrototypeSuperUser === "function" && isPrototypeSuperUser(role);

const isSidebarGroupVisible = (group, role) =>
  isSidebarAllAccess(role) || !group.roleOnly || group.roleOnly === role;

const isSidebarItemVisible = (item, role) =>
  isSidebarAllAccess(role) || !item.roleOnly || item.roleOnly === role;

const Header = ({ role, onLogout }) => {
  return (
    <div className="hdr">
      <img className="hdr__logo" src="assets/uber-logo-horizontal-dark.svg" alt="Uber" />
      <div className="hdr__div" />
      <div className="hdr__name">DG SKU 管理系統</div>
      <div className="hdr__spacer" />
      <RoleSwitcher role={role} onLogout={onLogout} />
    </div>
  );
};

const RoleSwitcher = ({ role, onLogout }) => {
  const r = ROLES[role];
  const [open, setOpen] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    if (!open) return;
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [open]);

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <div className="hdr__user" onClick={() => setOpen(o => !o)}>
        <div className="hdr__avatar">{r.initials}</div>
        <div>
          <div className="hdr__uname">{r.name}</div>
          <div className="hdr__urole">{r.label}</div>
        </div>
      </div>
      {open && (
        <div style={{
          position: "absolute", top: "calc(100% + 6px)", right: 0,
          background: "#fff", border: "1px solid var(--border-1)",
          borderRadius: "var(--radius-lg)", boxShadow: "0 4px 16px rgba(0,0,0,.12)",
          minWidth: 148, zIndex: 300, overflow: "hidden",
        }}>
          <div style={{ padding: "8px 12px", borderBottom: "1px solid var(--border-1)" }}>
            <div style={{ fontSize: "var(--fs-13)", fontWeight: "var(--fw-medium)", color: "var(--fg-1)" }}>{r.name}</div>
            <div style={{ fontSize: "var(--fs-12)", color: "var(--fg-3)", marginTop: 2 }}>{r.label}</div>
          </div>
          <button
            onClick={(e) => { e.stopPropagation(); setOpen(false); onLogout?.(); }}
            style={{
              display: "block", width: "100%", padding: "8px 12px",
              background: "transparent", border: "none", cursor: "pointer",
              textAlign: "left", fontSize: "var(--fs-13)", color: "var(--danger)",
              fontFamily: "var(--font-sans)",
            }}
          >
            登出
          </button>
        </div>
      )}
    </div>
  );
};

/* Highlight matched text in search results */
const Highlight = ({ text, query }) => {
  if (!query) return <>{text}</>;
  const idx = text.toLowerCase().indexOf(query.toLowerCase());
  if (idx === -1) return <>{text}</>;
  return (
    <span>
      {text.slice(0, idx)}
      <span style={{ color: "#06C167", fontWeight: 600 }}>{text.slice(idx, idx + query.length)}</span>
      {text.slice(idx + query.length)}
    </span>
  );
};

const Sidebar = ({ currentPage, onNavigate, collapsed, onToggle, role, notifications = {} }) => {
  const [openGroups, setOpenGroups] = useState(() =>
    Object.fromEntries(SIDEBAR.map(s => [s.id, !!s.defaultOpen]))
  );
  const [query, setQuery] = useState("");
  const searchRef = useRef(null);
  const toggleGroup = (id) => setOpenGroups(o => ({ ...o, [id]: !o[id] }));

  // hash 直達 / 外部導覽時，只展開含 currentPage 的大分類（手風琴，避免 defaultOpen 的「商品」一直開著）
  useEffect(() => {
    const group = SIDEBAR.find(g => (g.children || []).some(c => c.id === currentPage));
    if (group) {
      setOpenGroups(Object.fromEntries(SIDEBAR.map(s => [s.id, s.id === group.id])));
    }
  }, [currentPage]);

  // Search results: group[] = { catId, catLabel, catMatched, items[] }
  const searchResults = useMemo(() => {
    const q = query.trim().toLowerCase();
    if (!q) return null;
    const groups = [];
    SIDEBAR.forEach(group => {
      if (!isSidebarGroupVisible(group, role)) return;
      const visibleItems = (group.children || []).filter(item =>
        isSidebarItemVisible(item, role)
      );
      const catMatched = group.label.toLowerCase().includes(q);
      const matchedItems = visibleItems.filter(item => item.label.toLowerCase().includes(q));
      if (catMatched) {
        // Show all children; items already matched by cat don't need separate entry
        groups.push({ catId: group.id, catLabel: group.label, catMatched: true, items: visibleItems });
      } else if (matchedItems.length > 0) {
        groups.push({ catId: group.id, catLabel: group.label, catMatched: false, items: matchedItems });
      }
    });
    return groups;
  }, [query, role]);

  const totalCount = searchResults ? searchResults.reduce((n, g) => n + g.items.length, 0) : 0;

  return (
    <nav className="sb">
      {/* Search input — hidden when sidebar is collapsed */}
      {!collapsed && (
        <div
          className={"sb__search" + (query ? " sb__search--active" : "")}
          onClick={() => searchRef.current?.focus()}
        >
          <Icon name="search" size={12} />
          <input
            ref={searchRef}
            type="text"
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="搜尋功能…"
          />
          {query && (
            <button className="sb__search-clear" onClick={() => setQuery("")} title="清除">
              <Icon name="x" size={12} />
            </button>
          )}
        </div>
      )}

      {/* Search results mode */}
      {searchResults !== null ? (
        <div className="sb__results">
          {searchResults.length === 0 ? (
            <div className="sb__empty">沒有符合「{query}」的功能</div>
          ) : (
            searchResults.map((group, gi) => (
              <React.Fragment key={group.catId}>
                <div className={"sb__results-cat" + (gi > 0 ? " sb__results-cat--sep" : "")}>
                  <Highlight text={group.catLabel} query={group.catMatched ? query : ""} />
                </div>
                {group.items.map(item => (
                  <div
                    key={item.id}
                    className={"sb__result-item" + (currentPage === item.id ? " active" : "")}
                    onClick={() => { onNavigate(group.catId, item.id); setQuery(""); }}
                  >
                    <Icon name="search" size={12} style={{ flex: "none" }} />
                    <Highlight text={item.label} query={query} />
                  </div>
                ))}
              </React.Fragment>
            ))
          )}
        </div>
      ) : (
        /* Normal category tree */
        SIDEBAR.map(group => {
          if (!isSidebarGroupVisible(group, role)) return null;
          const open = openGroups[group.id];
          const visibleItems = group.children.filter(item =>
            isSidebarItemVisible(item, role)
          );
          if (visibleItems.length === 0) return null;
          return (
            <React.Fragment key={group.id}>
              <div
                className={"sb__cat" + (open ? " open" : "")}
                onClick={() => toggleGroup(group.id)}
                title={collapsed ? group.label : undefined}
              >
                <Icon name={group.icon} size={16} />
                <span className="sb__cat-lbl">{group.label}</span>
                <Icon name={open ? "chevUp" : "chevDown"} size={12} className="sb__cat-chev" />
              </div>
              {open && (
                <div className="sb__sub">
                  {visibleItems.map(item => (
                    <div
                      key={item.id}
                      className={"sb__item" + (currentPage === item.id ? " active" : "")}
                      onClick={() => onNavigate(group.id, item.id)}
                    >
                      <span>{item.label}</span>
                      {notifications[item.id] && <span className="sb__notif-dot" />}
                    </div>
                  ))}
                </div>
              )}
            </React.Fragment>
          );
        })
      )}

      <div className="sb__footer">
        {!collapsed && (
          searchResults !== null
            ? <span>{totalCount} 個結果</span>
            : <span>v2.4.1 · DG TW</span>
        )}
        <button className="sb__collapse" onClick={onToggle} title={collapsed ? "展開" : "收合"}>
          <Icon name={collapsed ? "chevRight" : "chevLeft"} size={16} />
        </button>
      </div>
    </nav>
  );
};

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