// access-picker.jsx — выбор доступа по сотрудникам и отделам

const AccessPicker = ({ value, onChange, compact = false }) => {
  const [tab, setTab] = React.useState('people');
  const access = value || { people: [], departments: [] };
  const departments = window.DEPARTMENTS || [];
  const hasAny = access.people.length > 0 || access.departments.length > 0;

  const togglePerson = (id) => {
    onChange({
      ...access,
      people: access.people.includes(id)
        ? access.people.filter((x) => x !== id)
        : [...access.people, id],
    });
  };

  const toggleDept = (id) => {
    onChange({
      ...access,
      departments: access.departments.includes(id)
        ? access.departments.filter((x) => x !== id)
        : [...access.departments, id],
    });
  };

  return (
    <div className={`kb-access-picker${compact ? ' kb-access-picker--compact' : ''}`}>
      <p className="kb-access-picker-hint">
        {hasAny
          ? 'Только выбранные сотрудники и отделы смогут видеть материал'
          : 'Доступ не ограничен — видят все сотрудники'}
      </p>
      <div className="kb-access-tabs">
        <button type="button" className={tab === 'people' ? 'active' : ''} onClick={() => setTab('people')}>
          Сотрудники
        </button>
        <button type="button" className={tab === 'departments' ? 'active' : ''} onClick={() => setTab('departments')}>
          Отделы
        </button>
      </div>
      <div className={`kb-access-list${compact ? ' kb-access-list--compact' : ''}`}>
        {tab === 'people' && window.PEOPLE.map((p) => (
          <label key={p.id} className="kb-access-row">
            <input type="checkbox" checked={access.people.includes(p.id)} onChange={() => togglePerson(p.id)} />
            <span className={`avatar ${p.av}`}>
              {p.name.split(' ').map((n) => n[0]).join('').slice(0, 2)}
            </span>
            <span className="kb-access-row-main">
              <span>{p.name}</span>
              <span className="kb-access-row-sub">{p.dept || '—'} · {p.role || '—'}</span>
            </span>
          </label>
        ))}
        {tab === 'departments' && departments.map((d) => (
          <label key={d.id} className="kb-access-row">
            <input type="checkbox" checked={access.departments.includes(d.id)} onChange={() => toggleDept(d.id)} />
            <span className="kb-access-dept-icon"><Icon name="grid" size={14} /></span>
            <span className="kb-access-row-main">
              <span>{d.name}</span>
              <span className="kb-access-row-sub">{d.employeeCount || 0} сотрудников</span>
            </span>
          </label>
        ))}
      </div>
    </div>
  );
};

window.AccessPicker = AccessPicker;