// mod_contacts.jsx — Module CONTACTS branché sur window.Store.
// Trois vues filtrées par rôle :
//   • Prestataires  → contacts ayant le rôle « dev »
//   • Clients       → contacts ayant le rôle « prospect » (organisation rattachée)
//   • Apporteurs    → contacts ayant le rôle « apporteur »
// Lecture : window.Store.state ; écriture : PATCH /api/contacts/[id], POST /api/contacts.
// Réutilise le layout split + fiche accordéon du mock (leads-list/lead-detail) mais
// 100 % données réelles. Style aligné sur mod_opportunites.jsx / styles.css. FR.
// Le mock (window.LeadsListView / window.LeadDetail) reste intact en fallback.

// ─── Config par rôle ─────────────────────────────────────────────────────────
const CONTACT_VIEWS = {
  presta:    { role: 'dev',       singular: 'prestataire', plural: 'prestataires', searchLbl: 'un presta', roleLabel: 'Prestataire' },
  client:    { role: 'prospect',  singular: 'client',      plural: 'clients',      searchLbl: 'un client', roleLabel: 'Client' },
  apporteur: { role: 'apporteur', singular: 'apporteur',   plural: 'apporteurs',   searchLbl: 'un apporteur', roleLabel: 'Apporteur' },
};

const ROLE_LABELS = { dev: 'Dev', prospect: 'Prospect', apporteur: 'Apporteur' };

const SOURCE_LABELS = {
  linkedin: 'LinkedIn', malt: 'Malt', referral: 'Recommandation',
  inbound: 'Inbound', free_work: 'Free-Work',
};

const skillLabel = (s) => (window.APPORTOO?.SKILLS?.[s]?.label) || s;
const skillCls = (s) => (window.APPORTOO?.SKILLS?.[s]?.cls) || '';
const splitStack = (stack) =>
  (stack || '').split(',').map((s) => s.trim()).filter(Boolean);

// Hook : ré-render quand le Store change (même pattern que mod_opportunites.jsx).
function useContactsSnapshot() {
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => window.Store.subscribe(force), []);
  return window.Store.state;
}

// ─────────────────────────────────────────────────────────────────
// Vue principale : liste filtrée par rôle + fiche détail
// ─────────────────────────────────────────────────────────────────
function ContactsView({ kind, onToast }) {
  const state = useContactsSnapshot();
  const cfg = CONTACT_VIEWS[kind] || CONTACT_VIEWS.presta;
  const [search, setSearch] = React.useState('');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [tagFilter, setTagFilter] = React.useState([]);
  const [selectedId, setSelectedId] = React.useState(null);
  const [creating, setCreating] = React.useState(false);

  // Index rôles : contact_id -> [roles]
  const rolesByContact = React.useMemo(() => {
    const m = {};
    (state.contact_roles || []).forEach((r) => {
      (m[r.contact_id] || (m[r.contact_id] = [])).push(r.role);
    });
    return m;
  }, [state.contact_roles]);

  const orgById = React.useMemo(() => {
    const m = {};
    (state.organisations || []).forEach((o) => { m[o.id] = o; });
    return m;
  }, [state.organisations]);

  // Pool : contacts ayant le rôle de la vue.
  const pool = React.useMemo(
    () => (state.contacts || []).filter((c) => (rolesByContact[c.id] || []).includes(cfg.role)),
    [state.contacts, rolesByContact, cfg.role]
  );

  // Tags disponibles : union des stacks des prestataires (utile surtout pour dev).
  const allTags = React.useMemo(() => {
    const set = new Set();
    pool.forEach((c) => splitStack(c.stack).forEach((s) => set.add(s)));
    return [...set].slice(0, 6);
  }, [pool]);

  const filtered = pool.filter((c) => {
    if (tagFilter.length > 0) {
      const st = splitStack(c.stack);
      if (!tagFilter.some((t) => st.includes(t))) return false;
    }
    if (statusFilter !== 'all' && (c.dispo || '').toLowerCase() !== statusFilter) return false;
    if (search) {
      const hay = `${c.display_name} ${c.headline || ''} ${c.location || ''}`.toLowerCase();
      if (!hay.includes(search.toLowerCase())) return false;
    }
    return true;
  });

  // Tri : par nom (les contacts n'ont pas de score réel — ordre alpha stable).
  const sorted = [...filtered].sort((a, b) =>
    (a.display_name || '').localeCompare(b.display_name || '', 'fr'));

  const sel = sorted.find((c) => c.id === selectedId) || sorted[0] || null;

  const toggleTag = (t) =>
    setTagFilter((f) => (f.includes(t) ? f.filter((x) => x !== t) : [...f, t]));

  return (
    <div className="page" style={{ paddingTop: 16, paddingBottom: 16 }}>
      <div className="split" style={{ height: 'calc(100vh - 60px - 32px)' }}>
        <div className="split-list">
          <div className="split-list-head">
            <div className="search">
              <window.Icon.search size={14} />
              <input placeholder={`Rechercher ${cfg.searchLbl}…`}
                     value={search} onChange={(e) => setSearch(e.target.value)} />
              <span className="kbd">/</span>
            </div>
            <div className="filter-bar">
              {kind === 'presta' && allTags.length > 0 && allTags.map((t) => (
                <span key={t}
                      className={`chip sm ${tagFilter.includes(t) ? 'is-on' : ''}`}
                      onClick={() => toggleTag(t)}>
                  {skillLabel(t)}
                </span>
              ))}
              <span className="chip sm" title="Nouveau contact"
                    onClick={() => { setCreating(true); }}>
                <window.Icon.plus size={11} /> Nouveau
              </span>
            </div>
            <div className="hstack tiny muted" style={{ justifyContent: 'space-between' }}>
              <span><b style={{ color: 'var(--ink)' }}>{sorted.length}</b> {cfg.plural}</span>
              <span className="mono">Trié par nom</span>
            </div>
          </div>
          <div className="split-list-scroll">
            {sorted.length === 0 && (
              <div className="empty" style={{ padding: '32px 16px' }}>
                <div className="mark"><window.Icon.user size={20} /></div>
                <div className="tiny">Aucun {cfg.singular} pour l'instant.</div>
              </div>
            )}
            {sorted.map((c) => (
              <ContactCompactRow key={c.id} contact={c}
                                 org={orgById[c.organisation_id]}
                                 selected={sel && c.id === sel.id}
                                 onClick={() => setSelectedId(c.id)} />
            ))}
          </div>
        </div>

        {sel ? (
          <ContactDetail
            contact={sel}
            cfg={cfg}
            org={orgById[sel.organisation_id]}
            organisations={state.organisations || []}
            roles={rolesByContact[sel.id] || []}
            state={state}
            onToast={onToast}
          />
        ) : (
          <div className="split-detail">
            <div className="empty" style={{ height: '100%' }}>
              <div className="mark"><window.Icon.user size={22} /></div>
              <div>Sélectionne un {cfg.singular} pour voir sa fiche.</div>
            </div>
          </div>
        )}
      </div>

      {creating && (
        <ContactCreateModal
          cfg={cfg}
          organisations={state.organisations || []}
          onClose={() => setCreating(false)}
          onCreated={(c) => { setCreating(false); setSelectedId(c.id); }}
          onToast={onToast}
        />
      )}
    </div>
  );
}

// ─── Ligne compacte (liste de gauche) ────────────────────────────
function ContactCompactRow({ contact, org, selected, onClick }) {
  const stack = splitStack(contact.stack).slice(0, 3);
  return (
    <div className={`lead-compact ${selected ? 'is-selected' : ''}`} onClick={onClick}
         style={{ position: 'relative' }}>
      <window.Avatar name={contact.display_name} size="sm" />
      <div className="vstack" style={{ gap: 2, minWidth: 0 }}>
        <div className="top">
          <span className="nm">{contact.display_name}</span>
        </div>
        <div className="hd">{contact.headline || org?.name || '—'}</div>
        {stack.length > 0 && (
          <div className="hstack" style={{ gap: 4, marginTop: 2 }}>
            {stack.map((s) => (
              <span key={s} className="tag" style={{ fontSize: 10 }}>{skillLabel(s)}</span>
            ))}
          </div>
        )}
      </div>
      <div className="right">
        {contact.tjm != null && <span className="tiny mono">{contact.tjm} €</span>}
        <span className="tiny muted mono">{contact.location || ''}</span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Fiche contact (panneau droit) : infos / rôles / organisation / timeline
// ─────────────────────────────────────────────────────────────────
function ContactDetail({ contact, cfg, org, organisations, roles, state, onToast }) {
  const [open, setOpen] = React.useState({
    profile: true, roles: true, org: false, timeline: false, notes: false,
  });
  const [editing, setEditing] = React.useState(false);

  const toggle = (k) => setOpen((o) => ({ ...o, [k]: !o[k] }));

  // Timeline : événements inbound + opportunités liées à ce contact.
  const timeline = React.useMemo(() => {
    const items = [];
    (state.events_inbox || [])
      .filter((e) => e.contact_id === contact.id)
      .forEach((e) => items.push({
        when: e.received_at || '', cls: 'turq',
        what: `Événement ${SOURCE_LABELS[e.source] || e.source}`, who: e.source,
      }));
    (state.opportunities || [])
      .filter((o) => o.contact_id === contact.id)
      .forEach((o) => items.push({
        when: o.captured_at || '', cls: '',
        what: `Opportunité : ${o.title}`, who: 'pipeline',
      }));
    (state.opportunity_candidates || [])
      .filter((c) => c.contact_id === contact.id)
      .forEach((c) => {
        const opp = (state.opportunities || []).find((o) => o.id === c.opportunity_id);
        items.push({
          when: c.created_at || '', cls: 'warm',
          what: `Shortlisté : ${opp ? opp.title : c.opportunity_id} (${c.status})`, who: 'sourcing',
        });
      });
    return items.sort((a, b) => (b.when || '').localeCompare(a.when || ''));
  }, [contact.id, state.events_inbox, state.opportunities, state.opportunity_candidates]);

  const oppCount = timeline.filter((t) => t.what.startsWith('Opportunité')).length;

  return (
    <div className="split-detail" style={{ height: '100%' }}>
      <div className="detail-head">
        <window.Avatar name={contact.display_name} size="lg" />
        <div className="meta-stack">
          <div className="hstack" style={{ alignItems: 'baseline' }}>
            <span className="name">{contact.display_name}</span>
            {roles.map((r) => (
              <span key={r} className="tag brown" style={{ marginLeft: 4 }}>{ROLE_LABELS[r] || r}</span>
            ))}
          </div>
          <div className="head">{contact.headline || '—'}</div>
          <div className="hstack tiny muted" style={{ marginTop: 2, gap: 14, flexWrap: 'wrap' }}>
            {contact.location && (
              <span className="hstack" style={{ gap: 4 }}>
                <window.Icon.globe size={11} /> {contact.location}
              </span>
            )}
            {contact.linkedin_url && (
              <span className="hstack" style={{ gap: 4 }}>
                <window.Icon.link size={11} /> {contact.linkedin_url}
              </span>
            )}
            {contact.source && <span>· {SOURCE_LABELS[contact.source] || contact.source}</span>}
          </div>
        </div>
        <div className="quick-actions">
          <button className="btn" onClick={() => setEditing((e) => !e)}>
            <window.Icon.edit size={13} /> {editing ? 'Annuler' : 'Éditer'}
          </button>
          {contact.linkedin_url && (
            <a className="btn ghost"
               href={`https://${contact.linkedin_url.replace(/^https?:\/\//, '')}`}
               target="_blank" rel="noreferrer">
              <window.Icon.external size={13} /> LinkedIn
            </a>
          )}
        </div>
      </div>

      <div className="main-scroll">
        {editing ? (
          <div style={{ padding: '14px 18px' }}>
            <ContactEditForm
              contact={contact}
              cfg={cfg}
              organisations={organisations}
              onCancel={() => setEditing(false)}
              onSaved={() => { setEditing(false); }}
              onToast={onToast}
            />
          </div>
        ) : (
          <>
            <Acc2 open={open.profile} onToggle={() => toggle('profile')} title="Profil">
              <ContactProfile contact={contact} cfg={cfg} org={org} />
            </Acc2>

            <Acc2 open={open.roles} onToggle={() => toggle('roles')} title="Rôles"
                  badge={`${roles.length} rôle${roles.length > 1 ? 's' : ''}`}>
              <ContactRoles contact={contact} roles={roles} onToast={onToast} />
            </Acc2>

            <Acc2 open={open.org} onToggle={() => toggle('org')} title="Organisation"
                  badge={org ? org.name : 'aucune'}>
              <ContactOrg org={org} />
            </Acc2>

            <Acc2 open={open.timeline} onToggle={() => toggle('timeline')} title="Timeline"
                  badge={`${timeline.length} évt${timeline.length > 1 ? 's' : ''}`}>
              <ContactTimeline timeline={timeline} />
            </Acc2>

            <Acc2 open={open.notes} onToggle={() => toggle('notes')} title="Notes">
              <ContactNotes contact={contact} onToast={onToast} />
            </Acc2>
          </>
        )}
      </div>
    </div>
  );
}

// Accordéon (calque de l'Acc du mock, mais local au module pour ne rien casser).
function Acc2({ open, onToggle, title, children, badge }) {
  return (
    <div className={`acc ${open ? 'is-open' : ''}`}>
      <div className="acc-head" onClick={onToggle}>
        <window.Icon.chev size={14} className="chev" />
        <h3>{title}</h3>
        {badge && <span className="badge">{badge}</span>}
      </div>
      <div className="acc-body">{children}</div>
    </div>
  );
}

// ─── Sous-blocs de la fiche ──────────────────────────────────────
function ContactProfile({ contact, cfg, org }) {
  const stack = splitStack(contact.stack);
  return (
    <div>
      <dl className="kv">
        {cfg.role === 'dev' && (
          <>
            <dt>TJM</dt>
            <dd>{contact.tjm != null ? <b>{contact.tjm} €</b> : '—'}</dd>
            <dt>Anglais</dt>
            <dd>{contact.anglais || '—'}</dd>
            <dt>Statut freelance</dt>
            <dd>{contact.freelance || '—'}</dd>
            <dt>Séniorité</dt>
            <dd>{contact.seniority || '—'}</dd>
            <dt>Dispo</dt>
            <dd>{contact.dispo || '—'}</dd>
            <dt>Stack</dt>
            <dd>{stack.length
              ? stack.map((s) => <span key={s} className={`tag ${skillCls(s)}`}>{skillLabel(s)}</span>)
              : '—'}</dd>
          </>
        )}
        {cfg.role === 'prospect' && (
          <>
            <dt>Société</dt>
            <dd><b>{org ? org.name : '—'}</b></dd>
            <dt>Headline</dt>
            <dd>{contact.headline || '—'}</dd>
          </>
        )}
        <dt>Email</dt>
        <dd>{contact.email || '—'}</dd>
        <dt>Téléphone</dt>
        <dd>{contact.phone || '—'}</dd>
        <dt>Localisation</dt>
        <dd>{contact.location || '—'}</dd>
        <dt>Source</dt>
        <dd><span className="chip sm">{SOURCE_LABELS[contact.source] || contact.source || '—'}</span></dd>
      </dl>
    </div>
  );
}

function ContactRoles({ contact, roles, onToast }) {
  const ALL_ROLES = ['dev', 'prospect', 'apporteur'];
  const [busy, setBusy] = React.useState(false);

  const toggleRole = async (role) => {
    if (busy) return;
    const has = roles.includes(role);
    setBusy(true);
    try {
      await window.Store.toggleContactRole(contact.id, role, !has);
      onToast(has ? `Rôle « ${ROLE_LABELS[role]} » retiré` : `Rôle « ${ROLE_LABELS[role]} » ajouté`);
    } catch (e) {
      onToast('Échec mise à jour du rôle');
    } finally { setBusy(false); }
  };

  return (
    <div>
      <div className="hstack" style={{ gap: 6, flexWrap: 'wrap' }}>
        {ALL_ROLES.map((r) => {
          const on = roles.includes(r);
          return (
            <span key={r}
                  className={`chip ${on ? 'is-on turq' : ''}`}
                  style={{ cursor: 'pointer' }}
                  onClick={() => toggleRole(r)}>
              {on && <window.Icon.check size={11} />} {ROLE_LABELS[r]}
            </span>
          );
        })}
      </div>
      <div className="muted tiny" style={{ marginTop: 8 }}>
        Un contact peut cumuler plusieurs rôles (dev infiltré apporteur, prospect devenu dev…).
      </div>
    </div>
  );
}

function ContactOrg({ org }) {
  if (!org) {
    return <div className="muted tiny">Aucune organisation rattachée à ce contact.</div>;
  }
  return (
    <dl className="kv">
      <dt>Nom</dt>
      <dd><b>{org.name}</b></dd>
      <dt>Type</dt>
      <dd>{org.type || '—'}</dd>
      <dt>Site web</dt>
      <dd>{org.website || '—'}</dd>
      <dt>Notes</dt>
      <dd>{org.notes || '—'}</dd>
    </dl>
  );
}

function ContactTimeline({ timeline }) {
  if (timeline.length === 0) {
    return <div className="muted tiny">Pas encore d'événements historisés.</div>;
  }
  return (
    <div className="timeline">
      {timeline.map((t, i) => (
        <div key={i} className={`tl-item ${t.cls}`}>
          <div className="when">{t.when}</div>
          <div className="what">{t.what}</div>
          <div className="who">{t.who}</div>
        </div>
      ))}
    </div>
  );
}

function ContactNotes({ contact, onToast }) {
  const [notes, setNotes] = React.useState(contact.notes || '');
  const [dirty, setDirty] = React.useState(false);

  React.useEffect(() => { setNotes(contact.notes || ''); setDirty(false); }, [contact.id]);

  const save = async () => {
    try {
      await window.Store.update('contacts', 'contacts', contact.id, { notes });
      setDirty(false);
      onToast('Notes enregistrées');
    } catch (e) { onToast('Échec enregistrement notes'); }
  };

  return (
    <div>
      <textarea className="notes-area" value={notes}
                onChange={(e) => { setNotes(e.target.value); setDirty(true); }}
                placeholder="Notes perso sur ce contact…" />
      <div style={{ marginTop: 8 }}>
        <button className="btn primary" disabled={!dirty} onClick={save}>
          <window.Icon.check size={12} /> Enregistrer
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Édition d'un contact (PATCH /api/contacts/[id])
// ─────────────────────────────────────────────────────────────────
const DEV_FIELDS = [
  ['tjm', 'TJM (€)', 'number'],
  ['anglais', 'Anglais', 'text'],
  ['freelance', 'Statut freelance', 'text'],
  ['seniority', 'Séniorité', 'text'],
  ['dispo', 'Dispo', 'text'],
  ['stack', 'Stack (csv)', 'text'],
];
const BASE_FIELDS = [
  ['display_name', 'Nom', 'text'],
  ['headline', 'Headline', 'text'],
  ['email', 'Email', 'text'],
  ['phone', 'Téléphone', 'text'],
  ['linkedin_url', 'LinkedIn', 'text'],
  ['location', 'Localisation', 'text'],
  ['source', 'Source', 'text'],
];

function buildForm(contact) {
  const f = {};
  [...BASE_FIELDS, ...DEV_FIELDS].forEach(([k]) => { f[k] = contact[k] != null ? contact[k] : ''; });
  f.organisation_id = contact.organisation_id || '';
  return f;
}

function ContactEditForm({ contact, cfg, organisations, onCancel, onSaved, onToast }) {
  const [form, setForm] = React.useState(() => buildForm(contact));
  const [saving, setSaving] = React.useState(false);
  React.useEffect(() => { setForm(buildForm(contact)); }, [contact.id]);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const fields = cfg.role === 'dev' ? [...BASE_FIELDS, ...DEV_FIELDS] : BASE_FIELDS;

  const save = async () => {
    if (!form.display_name.trim()) { onToast('Le nom est obligatoire'); return; }
    setSaving(true);
    const patch = {};
    fields.forEach(([k, , type]) => {
      let v = form[k];
      if (type === 'number') v = v === '' ? null : Number(v);
      else if (v === '') v = null;
      patch[k] = v;
    });
    patch.organisation_id = form.organisation_id || null;
    try {
      await window.Store.update('contacts', 'contacts', contact.id, patch);
      onToast('Contact mis à jour ✓');
      onSaved();
    } catch (e) { onToast('Échec de la mise à jour'); }
    finally { setSaving(false); }
  };

  return (
    <div className="vstack" style={{ gap: 10 }}>
      <div className="contact-form-grid">
        {fields.map(([k, label, type]) => (
          <label key={k} className="contact-field">
            <span className="contact-field-k">{label}</span>
            <input className="contact-input" type={type === 'number' ? 'number' : 'text'}
                   value={form[k]} onChange={(e) => set(k, e.target.value)} />
          </label>
        ))}
        <label className="contact-field">
          <span className="contact-field-k">Organisation</span>
          <select className="contact-input" value={form.organisation_id}
                  onChange={(e) => set('organisation_id', e.target.value)}>
            <option value="">— aucune —</option>
            {organisations.map((o) => (
              <option key={o.id} value={o.id}>{o.name}</option>
            ))}
          </select>
        </label>
      </div>
      <div className="hstack" style={{ gap: 8 }}>
        <button className="btn primary" disabled={saving} onClick={save}>
          <window.Icon.check size={12} /> Enregistrer
        </button>
        <button className="btn ghost" onClick={onCancel}>Annuler</button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────
// Création d'un contact (POST /api/contacts + rôle de la vue)
// ─────────────────────────────────────────────────────────────────
function ContactCreateModal({ cfg, organisations, onClose, onCreated, onToast }) {
  const [form, setForm] = React.useState(() => {
    const f = {};
    [...BASE_FIELDS, ...DEV_FIELDS].forEach(([k]) => { f[k] = ''; });
    f.organisation_id = '';
    return f;
  });
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', h);
    return () => document.removeEventListener('keydown', h);
  }, [onClose]);

  const fields = cfg.role === 'dev' ? [...BASE_FIELDS, ...DEV_FIELDS] : BASE_FIELDS;

  const create = async () => {
    if (!form.display_name.trim()) { onToast('Le nom est obligatoire'); return; }
    setSaving(true);
    const body = {};
    fields.forEach(([k, , type]) => {
      let v = form[k];
      if (type === 'number') v = v === '' ? null : Number(v);
      else if (v === '') v = null;
      if (v != null) body[k] = v;
    });
    if (form.organisation_id) body.organisation_id = form.organisation_id;
    try {
      const created = await window.Store.createContact(body, [cfg.role]);
      onToast(`${created.display_name} créé comme ${cfg.roleLabel} ✓`);
      onCreated(created);
    } catch (e) { onToast('Échec de la création'); }
    finally { setSaving(false); }
  };

  return (
    <div className="opp-modal-overlay" onClick={onClose}>
      <div className="opp-modal" style={{ maxWidth: 560 }} onClick={(e) => e.stopPropagation()}>
        <div className="opp-modal-head">
          <h2 className="opp-modal-title">Nouveau {cfg.singular}</h2>
          <button className="mer-del" onClick={onClose} title="Fermer">
            <window.Icon.x size={14} />
          </button>
        </div>
        <div style={{ padding: '14px 18px' }}>
          <div className="contact-form-grid">
            {fields.map(([k, label, type]) => (
              <label key={k} className="contact-field">
                <span className="contact-field-k">{label}{k === 'display_name' ? ' *' : ''}</span>
                <input className="contact-input" type={type === 'number' ? 'number' : 'text'}
                       value={form[k]} onChange={(e) => set(k, e.target.value)} />
              </label>
            ))}
            <label className="contact-field">
              <span className="contact-field-k">Organisation</span>
              <select className="contact-input" value={form.organisation_id}
                      onChange={(e) => set('organisation_id', e.target.value)}>
                <option value="">— aucune —</option>
                {organisations.map((o) => (
                  <option key={o.id} value={o.id}>{o.name}</option>
                ))}
              </select>
            </label>
          </div>
          <div className="hstack" style={{ gap: 8, marginTop: 12 }}>
            <button className="btn primary" disabled={saving} onClick={create}>
              <window.Icon.check size={12} /> Créer le {cfg.singular}
            </button>
            <button className="btn ghost" onClick={onClose}>Annuler</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.ContactsView = ContactsView;