const { useMemo: useSbMemo, useState: useSbState } = React;

window.Sidebar = function Sidebar({ user, tenant, useCases, categories, activeSlug, onSelect, onNew, onOpenAdmin, onLogout }) {
  const [statusFilter, setStatusFilter] = useSbState([]);
  const [lifecycleFilter, setLifecycleFilter] = useSbState([]);
  const [prioFilter, setPrioFilter] = useSbState([]);
  const [search, setSearch] = useSbState("");

  const filtered = useSbMemo(() => {
    return useCases.filter((uc) => {
      if (statusFilter.length && !statusFilter.includes(uc.status || "Draft")) return false;
      if (lifecycleFilter.length) {
        const lc = uc.category && uc.category.code ? uc.category.code : null;
        if (!lc || !lifecycleFilter.includes(lc)) return false;
      }
      if (prioFilter.length && !prioFilter.includes(uc.priorityName || "")) return false;
      if (search.trim()) {
        const q = search.trim().toLowerCase();
        const hay = [uc.title, uc.audience, uc.product, uc.subcategory, uc.priorityName, uc.status].join(" ").toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });
  }, [useCases, statusFilter, lifecycleFilter, prioFilter, search]);

  // Show only the prio categories that actually have use cases
  const availablePrios = useSbMemo(() => {
    const seen = new Set();
    useCases.forEach((uc) => { if (uc.priorityName) seen.add(uc.priorityName); });
    // Sort by canonical PRIO_CATEGORIES order, with unknown labels last alphabetically
    const canonical = (window.PRIO_CATEGORIES || []).map((p) => p.label);
    const arr = Array.from(seen);
    arr.sort((a, b) => {
      const ai = canonical.indexOf(a);
      const bi = canonical.indexOf(b);
      if (ai === -1 && bi === -1) return a.localeCompare(b);
      if (ai === -1) return 1;
      if (bi === -1) return -1;
      return ai - bi;
    });
    return arr;
  }, [useCases]);

  const availableStatuses = useSbMemo(() => {
    const seen = new Set();
    useCases.forEach((uc) => seen.add(uc.status || "Draft"));
    const canonical = (window.STATUSES || []).map((s) => s.value);
    return canonical.filter((s) => seen.has(s)).concat(Array.from(seen).filter((s) => !canonical.includes(s)));
  }, [useCases]);

  const availableLifecycles = useSbMemo(() => {
    const seenCodes = new Set();
    useCases.forEach((uc) => { if (uc.category && uc.category.code) seenCodes.add(uc.category.code); });
    return (categories || []).filter((c) => seenCodes.has(c.code));
  }, [useCases, categories]);

  // Group by priorityName, ordered by canonical PRIO_CATEGORIES order
  const grouped = useSbMemo(() => {
    const buckets = new Map();
    for (const uc of filtered) {
      const key = uc.priorityName || "Ej kategoriserad";
      if (!buckets.has(key)) buckets.set(key, []);
      buckets.get(key).push(uc);
    }
    const canonical = (window.PRIO_CATEGORIES || []).map((p) => p.label);
    const orderedKeys = Array.from(buckets.keys()).sort((a, b) => {
      const ai = canonical.indexOf(a);
      const bi = canonical.indexOf(b);
      if (ai === -1 && bi === -1) return a.localeCompare(b);
      if (ai === -1) return 1;
      if (bi === -1) return -1;
      return ai - bi;
    });
    return orderedKeys.map((k) => ({ label: k, cases: buckets.get(k) }));
  }, [filtered]);

  return (
    <aside className="sidebar">
      <div className="sidebar-head">
        <div className="brand-row">
          {tenant && tenant.logoUrl
            ? <img className="brand-logo" src={tenant.logoUrl} alt={tenant.name} />
            : <span className="brand-name">{tenant ? tenant.name : "MarTech Portal"}</span>}
        </div>
        <h1 className="sidebar-title">Use case-backlog</h1>
        <div className="sidebar-sub">
          {filtered.length} av {useCases.length} use case{useCases.length === 1 ? "" : "s"}
        </div>
      </div>

      <div className="sidebar-search">
        <span className="sidebar-search-icon">🔍</span>
        <input
          placeholder="Sök use case…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>

      <div className="filter-multiselects">
        {availableStatuses.length > 0 && (
          <window.MultiSelect
            label="Status"
            options={availableStatuses.map((s) => {
              const def = (window.STATUSES || []).find((x) => x.value === s);
              return { value: s, label: s, color: def ? def.color : "#94A3B8" };
            })}
            selected={statusFilter}
            onChange={setStatusFilter}
          />
        )}
        {availableLifecycles.length > 0 && (
          <window.MultiSelect
            label="Kundlivscykel"
            options={availableLifecycles.map((c) => ({ value: c.code, label: `${c.code}. ${c.name}`, color: c.color }))}
            selected={lifecycleFilter}
            onChange={setLifecycleFilter}
          />
        )}
        {availablePrios.length > 0 && (
          <window.MultiSelect
            label="Prio"
            options={availablePrios.map((p) => ({ value: p, label: p }))}
            selected={prioFilter}
            onChange={setPrioFilter}
          />
        )}
      </div>

      <div className="uc-list">
        {grouped.length === 0 && (
          <div className="empty" style={{padding: "40px 24px"}}>
            <div>
              <div style={{fontSize: 13, marginBottom: 8}}>Inga use cases matchar filtret.</div>
              {(user.role === "super_admin" || user.role === "tenant_admin") && (
                <button className="btn btn-secondary btn-sm" onClick={onNew}>+ Skapa nytt</button>
              )}
            </div>
          </div>
        )}

        {grouped.map((g) => (
          <div key={g.label}>
            <div className="uc-group-head">
              <span>{g.label}</span>
              <span className="count">{g.cases.length}</span>
            </div>
            {g.cases.map((uc) => {
              const statusDef = (window.STATUSES || []).find((s) => s.value === (uc.status || "Draft"));
              return (
                <div
                  key={uc.slug}
                  className={"uc-item " + (uc.slug === activeSlug ? "active" : "")}
                  onClick={() => onSelect(uc.slug)}>
                  <div className="uc-item-title">{uc.title}</div>
                  <div className="uc-item-meta">
                    <span
                      className="uc-status-dot"
                      style={{background: statusDef ? statusDef.color : "#94A3B8"}}
                      title={uc.status || "Draft"}></span>
                    {uc.subcategory && (
                      <span className={"uc-tag " + uc.subcategory.toLowerCase()}>{uc.subcategory}</span>
                    )}
                    <span style={{flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
                      {uc.audience}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        ))}
      </div>

      <div className="sidebar-foot">
        <div className="avatar">{(user.name || user.email).slice(0, 1).toUpperCase()}</div>
        <div className="meta">
          <div className="name">{user.name || user.email}</div>
          <div className="role">{roleLabel(user.role)}</div>
        </div>
        {(user.role === "super_admin" || user.role === "tenant_admin") && (
          <button className="icon-btn" title="Admin" onClick={onOpenAdmin}>⚙</button>
        )}
        <button className="icon-btn" title="Logga ut" onClick={onLogout}>↪</button>
      </div>

      <div className="powered-by">
        <span>Powered by</span>
        <img src="/assets/jms-logo.svg" alt="JM Sandberg" />
      </div>
    </aside>
  );
};

// "1. Migrate" → "1.M", "2. New - Quick Win" → "2.QW" — short label for chip
function prioShort(label) {
  const m = label.match(/^(\d)\.\s*(.+)$/);
  if (!m) return label;
  const num = m[1];
  const rest = m[2].replace(/^New - /, "");
  const initials = rest.split(/[\s+]+/).filter(Boolean).map((w) => w[0]).join("").toUpperCase().slice(0, 3);
  return num + "." + initials;
}

function roleLabel(role) {
  return {
    super_admin: "Super admin",
    tenant_admin: "Kund-admin",
    member: "Medlem",
  }[role] || role;
}