/* members.jsx — Select Team Members modal (focused task flow, no tab bar) */
const { useState, useEffect, useRef, useMemo } = React;

function GroupIcon({ name }) {
  const init = name.split(/\s+/).slice(0, 2).map((w) => w[0]).join('').toUpperCase();
  return <div className="grp-ic">{init}</div>;
}

const MEMBER_SORTS = [
{ id: 'recent', label: 'Added to group (Most recent)', short: 'Most recent' },
{ id: 'least', label: 'Added to group (Least recent)', short: 'Least recent' },
{ id: 'az', label: 'Alphabetically (A to Z)', short: 'A to Z' },
{ id: 'za', label: 'Alphabetically (Z to A)', short: 'Z to A' }];


function SelectMembersModal({ badge, open, onClose, members, groups, onReview, initialMemberIds = [], initialGroupIds = [], step, onOpenFilters, filterCount: filterCountProp }) {
  const [mounted, setMounted] = useState(false);
  const [entered, setEntered] = useState(false);
  const [mode, setMode] = useState('people');
  const [query, setQuery] = useState('');
  const [hideAwarded, setHideAwarded] = useState(false);
  const [sort, setSort] = useState('recent');
  const [sortOpen, setSortOpen] = useState(false);
  const [localFilterCount] = useState(() => {try {return Object.values(JSON.parse(localStorage.getItem('sx_filters_v1') || '{}')).filter(Boolean).length;} catch (e) {return 0;}});
  const filterCount = filterCountProp != null ? filterCountProp : localFilterCount;
  const [selM, setSelM] = useState(() => new Set());
  const [selG, setSelG] = useState(() => new Set());
  const listRef = useRef(null);
  const secRefs = useRef({});

  useEffect(() => {
    let t;
    if (open) {
      setMode('people');setQuery('');setHideAwarded(false);setSort('recent');setSortOpen(false);
      setSelM(new Set(initialMemberIds));setSelG(new Set(initialGroupIds));
      setMounted(true);
      t = setTimeout(() => setEntered(true), 24);
      return () => clearTimeout(t);
    } else if (mounted) {
      setEntered(false);
      t = setTimeout(() => setMounted(false), 400);
      return () => clearTimeout(t);
    }
  }, [open]);

  const filtered = useMemo(() => {
    const q = query.trim().toLowerCase();
    let r = members.filter((m) => m.name.toLowerCase().includes(q) && (!hideAwarded || !m.awarded));
    if (sort === 'az') r = [...r].sort((a, b) => a.name.localeCompare(b.name));else
    if (sort === 'za') r = [...r].sort((a, b) => b.name.localeCompare(a.name));else
    if (sort === 'recent') r = [...r].reverse();
    // 'least' keeps source (added) order
    return r;
  }, [members, query, hideAwarded, sort]);

  const useSections = sort === 'az' || sort === 'za';
  const sections = useMemo(() => {
    if (!useSections) return [];
    const map = {};
    filtered.forEach((m) => {const L = m.name[0].toUpperCase();(map[L] = map[L] || []).push(m);});
    let letters = Object.keys(map).sort();
    if (sort === 'za') letters = letters.reverse();
    return letters.map((L) => ({ letter: L, items: map[L] }));
  }, [filtered, useSections, sort]);

  const memberSortLabel = (MEMBER_SORTS.find((o) => o.id === sort) || MEMBER_SORTS[0]).short;

  if (!mounted) return null;

  const selectedPeople = members.filter((m) => selM.has(m.id));
  const selectedGroups = groups.filter((g) => selG.has(g.id));
  const groupHeads = selectedGroups.reduce((n, g) => n + g.count, 0);
  const total = selectedPeople.length + groupHeads;

  const toggleM = (m) => {if (m.awarded) return;setSelM((s) => {const n = new Set(s);n.has(m.id) ? n.delete(m.id) : n.add(m.id);return n;});};
  const toggleG = (g) => setSelG((s) => {const n = new Set(s);n.has(g.id) ? n.delete(g.id) : n.add(g.id);return n;});
  const reset = () => {setSelM(new Set());setSelG(new Set());};
  const jump = (L) => {const el = secRefs.current[L];if (el && listRef.current) listRef.current.scrollTop = el.offsetTop;};

  const review = () => {if (total > 0) onReview({ count: total, names: selectedPeople.map((m) => m.name), memberIds: selectedPeople.map((m) => m.id), groupIds: selectedGroups.map((g) => g.id) });};

  const pickSort = (opt) => {setSort(opt.id);setTimeout(() => setSortOpen(false), 220);};

  const openFilters = onOpenFilters || (() => {
    let any = false;
    try {any = Object.values(JSON.parse(localStorage.getItem('sx_filters_v1') || '{}')).some(Boolean);} catch (e) {}
    window.location.href = any ? 'filters-active.html' : 'filters-empty.html';
  });

  const memberRow = (m) => {
    const on = selM.has(m.id);
    return (
      <div key={m.id} className={'mrow' + (m.awarded ? ' awarded' : '')} onClick={() => toggleM(m)}>
        <div className="m-tap">
          {m.awarded ?
          <div className="m-check lock"><Ic.Check s={18} c="var(--ink-3)" /></div> :
          <div className={'m-check' + (on ? ' on' : '')}>{on && <Ic.Check s={15} c="#fff" />}</div>}
        </div>
        <Avatar name={m.name} size={40} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="m-name">{m.name}</div>
          <div className="m-role">{m.role}</div>
        </div>
        {m.awarded && <span className="m-await-tag">Already awarded</span>}
      </div>);

  };

  return (
    <div className="modal-backdrop" data-in={entered} onClick={onClose}>
      <div className="modal-panel" data-in={entered} onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="m-header">
          <button className="m-close" onClick={onClose} aria-label="Close"><Ic.Close s={20} c="var(--ink)" /></button>
          <div className="m-title">Select Members</div>
          {step && <div className="step-pill"><span className="step-bar"><i className="on"></i><i></i></span>Step 1 of 2</div>}
        </div>

        {/* Badge context */}
        <div className="m-context">
          <div className="mc-badge">
            {badge && (badge.img ? <img src={badge.img} alt="" /> : <HexPlaceholder size={30} hint={false} />)}
          </div>
          <div>
            <div className="mc-eyebrow">Awarding</div>
            <div className="mc-name">{badge?.name}</div>
          </div>
        </div>

        {/* Mode toggle */}
        <div className="seg" role="tablist">
          <button className={mode === 'people' ? 'on' : ''} onClick={() => setMode('people')}>People</button>
          <button className={mode === 'groups' ? 'on' : ''} onClick={() => setMode('groups')}>Groups</button>
        </div>

        {/* Unified toolbar */}
        <div className="m-search-wrap">
          <div className="search">
            <Ic.Search s={19} />
            <input value={query} onChange={(e) => setQuery(e.target.value)}
            placeholder={mode === 'people' ? 'Search team members' : 'Search groups'} aria-label="Search" />
            {query && <button className="trail-icon" onClick={() => setQuery('')} aria-label="Clear"><Ic.Close s={16} /></button>}
            {mode === 'people' && <>
              <div className="filter-divider"></div>
              <button className={'trail-icon' + (filterCount ? ' active' : '')} onClick={openFilters} aria-label={filterCount ? `Filters (${filterCount} active)` : 'Filters'}>
                <Ic.Sliders s={20} c={filterCount ? 'var(--purple)' : 'var(--ink-2)'} />
                {filterCount > 0 && <span className="trail-count">{filterCount}</span>}
              </button>
            </>}
          </div>
        </div>

        {/* Selected chip strip */}
        {total > 0 &&
        <div className="m-strip">
            <div className="m-strip-head"><span className="m-strip-count">{total} selected</span></div>
            <div className="m-chips">
              {selectedGroups.map((g) =>
            <button key={'g' + g.id} className="m-chip" onClick={() => toggleG(g)}>
                  <GroupIcon name={g.name} />
                  <span className="m-chip-name">{g.name}</span>
                  <span className="mc-x"><Ic.Close s={11} c="var(--ink-2)" /></span>
                </button>
            )}
              {selectedPeople.map((m) =>
            <button key={'m' + m.id} className="m-chip" onClick={() => toggleM(m)}>
                  <Avatar name={m.name} size={26} />
                  <span className="m-chip-name">{m.name.split(' ')[0]}</span>
                  <span className="mc-x"><Ic.Close s={11} c="var(--ink-2)" /></span>
                </button>
            )}
            </div>
          </div>
        }

        {/* Sort trigger (people mode) */}
        {mode === 'people' &&
        <div className="sort-bar">
            <span className="sort-bar-count">{filtered.length} {filtered.length === 1 ? 'person' : 'people'}</span>
            <button className={'sort-bar-btn' + (sort !== 'recent' ? ' active' : '')} onClick={() => setSortOpen(true)}>
              <Ic.Sort s={16} c="var(--ink-2)" /> Sort: {memberSortLabel}
            </button>
          </div>
        }

        {/* List */}
        <div className="m-list-wrap">
          {mode === 'people' ?
          filtered.length === 0 ?
          <div className="m-empty">
                <Ic.Search s={38} c="var(--ink-3)" />
                <div className="m-empty-title">No matches found</div>
                <div className="m-empty-sub">No team members match “{query.trim()}”. Try a different name or check the spelling.</div>
              </div> :

          <>
                <div className="m-list" ref={listRef}>
                  {useSections ?
              sections.map((sec) =>
              <div key={sec.letter}>
                          <div className="m-sec" ref={(el) => secRefs.current[sec.letter] = el}>{sec.letter}</div>
                          {sec.items.map(memberRow)}
                        </div>
              ) :
              filtered.map(memberRow)}
                  <div style={{ height: 8 }}></div>
                </div>
                {useSections && sections.length > 1 &&
            <div className="scrubber">
                    {sections.map((s) => <button key={s.letter} onClick={() => jump(s.letter)}>{s.letter}</button>)}
                  </div>
            }
              </> :


          <div className="m-list">
              {groups.filter((g) => g.name.toLowerCase().includes(query.trim().toLowerCase())).map((g) => {
              const on = selG.has(g.id);
              return (
                <div key={g.id} className="mrow" onClick={() => toggleG(g)}>
                    <div className="m-tap">
                      <div className={'m-check' + (on ? ' on' : '')}>{on && <Ic.Check s={15} c="#fff" />}</div>
                    </div>
                    <GroupIcon name={g.name} />
                    <div style={{ flex: 1, minWidth: 0, marginLeft: 12 }}>
                      <div className="m-name">{g.name}</div>
                      <div className="m-role">{g.count} members</div>
                    </div>
                  </div>);

            })}
            </div>
          }
        </div>

        {/* Footer */}
        <div className="m-footer">
          <button className="btn-reset" disabled={total === 0} onClick={reset}>Reset</button>
          <button className="btn-review" disabled={total === 0} onClick={review}>
            Review{total > 0 ? ` (${total})` : ''} <Ic.ChevronRight s={17} c="#fff" />
          </button>
        </div>

        <SortSheet
          open={sortOpen} value={sort} options={MEMBER_SORTS}
          onClose={() => setSortOpen(false)}
          onPick={pickSort} />
      </div>
    </div>);

}

Object.assign(window, { SelectMembersModal });