// FOOTPASS Messenger v2 · Filtres de la liste Messages
// Première version inspirée du filtrage dynamique V4 : chips par rôle (avec
// sous-filtres par contact) + filtres personnalisés que l'utilisateur crée,
// nomme et renomme librement.
const { useState: useStateF, useEffect: useEffectF, useRef: useRefF } = React;

// Libellés courts par rôle (sinon le rôle brut). L'ordre suit la 1ʳᵉ apparition.
const MSG_ROLE_LABEL = {
  'Joueur': 'Joueurs',
  'Agent': 'Agents',
  'Directeur sportif': 'Direction',
  'Juriste': 'Juridique',
  'Club': 'Clubs',
  'Recruteur': 'Recrutement',
  'Entraîneur': 'Coachs',
};

function msgRoleCats(all) {
  const seen = [];
  all.forEach((c) => { if (c.role && !seen.includes(c.role)) seen.push(c.role); });
  return seen.map((role) => {
    const members = all.filter((c) => c.role === role);
    return {
      key: 'role:' + role,
      role,
      label: MSG_ROLE_LABEL[role] || role,
      badge: members.reduce((n, c) => n + (c.unread || 0), 0),
      subs: members.map((c) => ({
        key: c.id,
        label: (c.name || '').split(' ')[0],
        badge: c.unread || 0,
      })),
    };
  });
}

const FCheck = ({ s = 13 }) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
    <path d="M2.5 7.5L6 11l5.5-7" stroke="currentColor" strokeWidth="2.1" strokeLinecap="round" strokeLinejoin="round"></path>
  </svg>
);
const FPlus = ({ s = 13 }) => (
  <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
    <path d="M7 1.5v11M1.5 7h11" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round"></path>
  </svg>
);
const FPencil = ({ s = 12 }) => (
  <svg width={s} height={s} viewBox="0 0 16 16" fill="none">
    <path d="M11.3 2.2l2.5 2.5L5.4 13H2.9v-2.5l8.4-8.3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"></path>
  </svg>
);

// ── Barre de filtres : rangée de catégories + sous-rangée contextuelle ──
function MsgFilters({ roleCats, custom, cat, sub, onCat, onSub, onAdd, onEdit }) {
  const activeRole = roleCats.find((c) => c.key === cat);
  const activeCustom = custom.find((f) => f.id === cat);
  return (
    <div className="hm-filters">
      <div className="hm-chips">
        <button className={`hm-chip ${cat === 'all' ? 'on' : ''}`} onClick={() => onCat('all')}>Tous</button>
        {roleCats.map((c) => (
          <button key={c.key} className={`hm-chip ${cat === c.key ? 'on' : ''}`} onClick={() => onCat(cat === c.key ? 'all' : c.key)}>
            <span>{c.label}</span>
            {c.badge > 0 ? <span className="hm-chip-badge">{c.badge}</span> : null}
          </button>
        ))}
        {custom.map((f) => (
          <button key={f.id} className={`hm-chip custom ${cat === f.id ? 'on' : ''}`}
            onClick={() => onCat(cat === f.id ? 'all' : f.id)}>
            <span className="hm-chip-dot"></span>
            <span>{f.name}</span>
            {f._badge > 0 ? <span className="hm-chip-badge">{f._badge}</span> : null}
          </button>
        ))}
        <button className="hm-chip add" onClick={onAdd}><FPlus s={11} /><span>Filtre</span></button>
      </div>

      {activeRole && activeRole.subs.length > 0 ? (
        <div className="hm-chips hm-mf-sub">
          <span className="hm-mf-arrow">↳</span>
          {activeRole.subs.map((s) => (
            <button key={s.key} className={`hm-chip sub ${sub === s.key ? 'on' : ''}`}
              onClick={() => onSub(sub === s.key ? null : s.key)}>
              <span>{s.label}</span>
              {s.badge > 0 ? <span className="hm-chip-badge">{s.badge}</span> : null}
            </button>
          ))}
        </div>
      ) : null}

      {activeCustom ? (
        <div className="hm-chips hm-mf-sub">
          <span className="hm-mf-arrow">↳</span>
          <span className="hm-mf-count">{activeCustom.members.length} membre{activeCustom.members.length > 1 ? 's' : ''}</span>
          <button className="hm-chip sub ghost" onClick={() => onEdit(activeCustom)}><FPencil s={11} /><span>Modifier</span></button>
        </div>
      ) : null}
    </div>
  );
}

// ── Feuille : créer / modifier un filtre personnalisé ──
function MsgFilterSheet({ editing, allContacts, onClose, onSave, onDelete }) {
  const [name, setName] = useStateF(editing ? editing.name : '');
  const [members, setMembers] = useStateF(editing ? editing.members.slice() : []);
  const inputRef = useRefF(null);
  useEffectF(() => { const id = setTimeout(() => inputRef.current && inputRef.current.focus(), 220); return () => clearTimeout(id); }, []);
  const toggle = (id) => setMembers((arr) => (arr.includes(id) ? arr.filter((x) => x !== id) : [...arr, id]));
  const valid = name.trim().length > 0 && members.length > 0;
  const save = () => {
    if (!valid) return;
    onSave({ id: editing ? editing.id : 'f' + Date.now().toString(36), name: name.trim(), members });
    onClose();
  };
  return (
    <div className="pg-sheetwrap">
      <div className="pg-scrim" onClick={onClose}></div>
      <div className="pg-sheet">
        <span className="pg-grab"></span>
        <div className="pg-sheet-title">{editing ? 'Modifier le filtre' : 'Nouveau filtre'}</div>

        <div className="hm-flt-field">
          <label className="hm-flt-lbl">Nom du filtre</label>
          <input ref={inputRef} className="hm-flt-input" value={name} maxLength={28}
            onChange={(e) => setName(e.target.value)}
            placeholder="ex. Mercato, Noyau U19, Real Madrid…"
            onKeyDown={(e) => { if (e.key === 'Enter') save(); }} />
        </div>

        <div className="hm-flt-fieldhead">
          <span className="hm-flt-lbl">Membres</span>
          <span className="hm-flt-count">{members.length} sélectionné{members.length > 1 ? 's' : ''}</span>
        </div>
        <div className="hm-flt-list">
          {allContacts.map((c) => (
            <button key={c.id} className={`hm-pickrow ${members.includes(c.id) ? 'on' : ''}`} onClick={() => toggle(c.id)}>
              <FPAvatar size={38} initials={c.initials} src={c.photo} />
              <span className="hm-pickrow-txt">
                <b>{c.name}</b>
                <em>{c.role} · {c.org}</em>
              </span>
              <span className="hm-pick-check">{members.includes(c.id) ? <FCheck s={13} /> : null}</span>
            </button>
          ))}
        </div>

        <div className="hm-flt-actions">
          <button className={`pg-btn primary ${valid ? '' : 'disabled'}`} onClick={save}>
            {editing ? 'Enregistrer' : 'Créer le filtre'}
          </button>
          {editing ? (
            <button className="pg-btn danger" onClick={() => { onDelete(editing.id); onClose(); }}>Supprimer ce filtre</button>
          ) : null}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { msgRoleCats, MsgFilters, MsgFilterSheet });