/* ctor-roles.jsx — каталог профессиональных ролей */
const { useState: rUseState } = React;
const rUid = window.ConstructorData.uid;

const ROLE_PALETTE = ['#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e', '#16a34a', '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#2563eb', '#6366f1', '#8b5cf6', '#9333ea', '#a855f7', '#d946ef', '#78716c', '#a3a3a3', '#1a1714', '#e8793a'];

function RolesPanel({ roles, setRoles, catalog, hideHeader }) {
  // подсчёт использования роли в каталоге
  const usage = {};
  catalog.forEach((ph) => ph.stages.forEach((st) => st.tasks.forEach((tk) => {
    if (tk.role) usage[tk.role] = (usage[tk.role] || 0) + 1;
    (tk.sub || []).forEach((su) => { if (su.role) usage[su.role] = (usage[su.role] || 0) + 1; });
  })));

  const update = (id, patch) => setRoles((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
  const add = () => setRoles((rs) => [...rs, { id: rUid('role'), name: 'Новая роль', abbr: 'НР', color: '#e8793a' }]);
  const remove = (id) => {
    if (usage[id] && !confirm('Роль используется в ' + usage[id] + ' задачах. Всё равно удалить? Связи сбросятся.')) return;
    setRoles((rs) => rs.filter((r) => r.id !== id));
  };
  const autoAbbr = (name) => name.trim().split(/[\s-]+/).slice(0, 2).map((w) => w[0] || '').join('').toUpperCase().slice(0, 3) || '?';

  return (
    <div>
      {!hideHeader && (
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18, gap: 16, flexWrap: 'wrap' }}>
        <div>
          <div style={ctorStyles.sectionLabel}>Специальности · trade-роли</div>
          <div style={{ fontSize: 14, color: '#8a817a', marginTop: 6, maxWidth: 580 }}>
            Справочник специальностей для задач сметы. По ним прораб закрепляет исполнителей, а калькулятор авто-распределяет их при выборе прораба.
            <span style={{ display: 'block', marginTop: 6, fontSize: 12.5, color: '#a89e92' }}>
              Это <b>не</b> доступы в систему. Аккаунты и права (CRM, ЛК, делегаты) — на вкладке <b style={{ color: '#6b6259' }}>«Доступ»</b>.
            </span>
          </div>
        </div>
        <button onClick={add} style={ctorStyles.btnPrimary}>{Icon.plus} Специальность</button>
      </div>
      )}

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 12 }}>
        {roles.map((r) => (
          <div key={r.id} style={{ ...ctorStyles.card, padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <ColorPicker color={r.color} onPick={(c) => update(r.id, { color: c })}>
              <span style={{ width: 38, height: 38, borderRadius: '50%', background: r.color, color: '#fff', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, cursor: 'pointer', boxShadow: '0 0 0 .5px rgba(0,0,0,.08)' }}>
                {r.abbr}
              </span>
            </ColorPicker>
            <div style={{ flex: 1, minWidth: 0 }}>
              <InlineInput value={r.name} onCommit={(v) => update(r.id, { name: v || 'Роль', abbr: r.abbr })}
                style={{ fontSize: 15, fontWeight: 600, color: '#1a1714', width: '100%', letterSpacing: '-.01em' }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2 }}>
                <span style={{ fontSize: 12, color: '#8a817a' }}>код</span>
                <InlineInput value={r.abbr} onCommit={(v) => update(r.id, { abbr: (v || '?').toUpperCase().slice(0, 3) })}
                  style={{ fontSize: 12, fontWeight: 600, color: '#6b6259', width: 44, fontFamily: 'ui-monospace, monospace' }} />
                <span style={{ flex: 1 }}></span>
                <span style={{ fontSize: 11.5, color: usage[r.id] ? '#5aad6e' : '#bcb3a7', fontWeight: 500, whiteSpace: 'nowrap' }}>
                  {usage[r.id] ? `${usage[r.id]} задач` : 'не исп.'}
                </span>
              </div>
            </div>
            <button onClick={() => remove(r.id)} style={ctorStyles.iconBtn} title="Удалить роль">{Icon.trash}</button>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ColorPicker — обёртка, открывающая палитру вокруг переданного триггера */
function ColorPicker({ color, onPick, children }) {
  const [open, setOpen] = rUseState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown', onDown);
    return () => document.removeEventListener('mousedown', onDown);
  }, [open]);
  return (
    <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
      <div onClick={() => setOpen((o) => !o)}>{children}</div>
      {open && (
        <div style={{ ...ctorStyles.dropdown, left: 0, right: 'auto', minWidth: 0, display: 'grid', gridTemplateColumns: 'repeat(6, 24px)', gap: 7, padding: 12 }}>
          {ROLE_PALETTE.map((c) => (
            <button key={c} onClick={() => { onPick(c); setOpen(false); }}
              style={{ width: 24, height: 24, borderRadius: '50%', background: c, border: c === color ? '2px solid #1a1714' : '2px solid #fff', boxShadow: '0 0 0 .5px rgba(0,0,0,.1)', cursor: 'pointer', padding: 0 }}></button>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { RolesPanel });