// wh-grupos-section.jsx - extracted GruposSection

(() => {

const { useState, useEffect, useRef } = React;
const { Icon, Avatar, Badge, EmptyState, SecHead, apiFetch } = window;

const toast = (msg, type, dur) => window.showToast?.(msg, type, dur);
const confirm = async (msg, opts) => window.showConfirm?.(msg, opts) ?? false;

function GruposSection({ groups = [], groupLists = [], onGroupListsChange, whStatus }) {
  const [selected, setSelected] = useState(new Set());
  const [search, setSearch] = useState('');
  const [listName, setListName] = useState('');
  const [syncing, setSyncing] = useState(false);
  const [mobileTab, setMobileTab] = useState('grupos');
  const gruposListRef = useRef(null);

  const filtered = groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
  const isReady = whStatus?.status === 'ready';

  useEffect(() => {
    if (mobileTab === 'grupos' && gruposListRef.current) {
      gruposListRef.current.scrollTop = 0;
    }
  }, [mobileTab, filtered.length]);

  const toggle = (id) => {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  };

  const syncGroups = async () => {
    if (!isReady) {
      toast('WhatsApp no esta conectado.', 'warning');
      return;
    }
    setSyncing(true);
    try {
      await apiFetch('/api/groups/sync', { method: 'POST' });
    } catch (e) {
      toast(`Error al sincronizar grupos: ${e.message}`, 'error');
    } finally {
      setSyncing(false);
    }
  };

  const saveList = async () => {
    if (!listName.trim() || !selected.size) return;
    try {
      const res = await apiFetch('/api/group-lists', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: listName.trim(), groupIds: [...selected] }),
      });
      if (!res.ok) {
        const err = await res.json();
        toast(err.error, 'error');
        return;
      }
      const newList = await res.json();
      onGroupListsChange([...groupLists, newList]);
      setListName('');
      setSelected(new Set());
      toast(`Lista "${newList.name}" guardada.`, 'success');
    } catch (e) {
      toast(`Error al guardar la lista: ${e.message}`, 'error');
    }
  };

  const deleteList = async (id) => {
    const lista = groupLists.find((l) => l.id === id);
    const ok = await confirm(`Eliminar la lista "${lista?.name}"?`);
    if (!ok) return;
    try {
      await apiFetch(`/api/group-lists/${id}`, { method: 'DELETE' });
      onGroupListsChange(groupLists.filter((l) => l.id !== id));
      toast('Lista eliminada.', 'info');
    } catch (e) {
      toast(`Error al eliminar la lista: ${e.message}`, 'error');
    }
  };

  const renderPanelGrupos = () => (
    <div className="card">
      <div className="card-head grupos-card-head">
        <div>
          <div className="card-title">Grupos de WhatsApp</div>
          <div className="card-sub">{selected.size} seleccionados</div>
        </div>
        <div style={{ position: 'relative', flex: '1 1 160px', maxWidth: 220 }}>
          <Icon name="search" size={13} style={{ position: 'absolute', left: 9, top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)', pointerEvents: 'none' }} />
          <input className="inp" style={{ paddingLeft: 30, width: '100%' }} placeholder="Buscar..." value={search} onChange={(e) => setSearch(e.target.value)} />
        </div>
      </div>
      <div className={`card-body scroll list-col grupos-scroll-body ${selected.size > 0 ? 'with-savebar' : ''}`} ref={gruposListRef}>
        {filtered.length === 0
          ? <EmptyState icon="layers" title="Sin grupos" sub={isReady ? 'Haz clic en Sincronizar' : 'Conecta WhatsApp primero'} />
          : filtered.map((g) => (
            <label key={g.id} className={`citem grupos-group-item ${selected.has(g.id) ? 'on' : ''}`} onClick={() => toggle(g.id)}>
              <input type="checkbox" checked={selected.has(g.id)} onChange={() => {}} />
              <Avatar name={g.name} size="sm" />
              <div className="litem-main">
                <div className="litem-name">{g.name}</div>
                <div className="litem-sub">{g.participantsCount ?? g.participants ?? 0} participantes</div>
              </div>
              <Badge color="brand">grupo</Badge>
            </label>
          ))}
      </div>
      {selected.size > 0 && (
        <div className="grupos-save-bar grupos-mobile-only">
          <input className="inp" placeholder="Nombre de la lista..." style={{ flex: 1 }} value={listName} onChange={(e) => setListName(e.target.value)} />
          <button className="btn btn-primary" onClick={saveList} disabled={!listName.trim()}>
            <Icon name="plus" size={14} />
            {selected.size} grupos
          </button>
        </div>
      )}
    </div>
  );

  const renderPanelListas = () => (
    <div className="flex-c" style={{ gap: 14 }}>
      <div className="card card-pad">
        <div className="card-title" style={{ marginBottom: 12 }}>Guardar seleccion</div>
        <div className="stack">
          <div className="card-sub" style={{ marginTop: -4 }}>
            {selected.size > 0
              ? <><strong>{selected.size}</strong> grupos seleccionados en la lista de grupos.</>
              : 'Selecciona grupos primero desde la pestana Grupos.'}
          </div>
          <input className="inp" placeholder="Nombre de la lista..." value={listName} onChange={(e) => setListName(e.target.value)} />
          <button className="btn btn-primary" onClick={saveList} disabled={!listName.trim() || !selected.size}>
            <Icon name="plus" size={14} />
            {' '}Guardar lista ({selected.size})
          </button>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div className="card-title">Listas guardadas</div>
          <Badge color="gray">{groupLists.length}</Badge>
        </div>
        <div className="card-body list-col">
          {groupLists.length === 0
            ? <EmptyState icon="list" title="Sin listas" sub="Guarda una seleccion de grupos" />
            : groupLists.map((l) => (
              <div key={l.id} className="litem grupos-list-item">
                <div className="litem-main">
                  <div className="litem-name">{l.name}</div>
                  <div className="litem-sub">{l.groupIds.length} grupos</div>
                </div>
                <div className="grupos-list-actions">
                  <button className="btn btn-ghost btn-sm" onClick={() => { setSelected(new Set(l.groupIds)); setMobileTab('grupos'); }}>Cargar</button>
                  <button className="btn btn-danger btn-icon btn-sm" onClick={() => deleteList(l.id)}>
                    <Icon name="trash" size={12} />
                  </button>
                </div>
              </div>
            ))}
        </div>
      </div>
    </div>
  );

  return (
    <div>
      <SecHead
        eyebrow="Segmentacion"
        title="Grupos y Listas"
        actions={(
          <button className="btn btn-ghost btn-sm" onClick={syncGroups} disabled={syncing || !isReady} title={!isReady ? 'WhatsApp no esta conectado' : ''}>
            <Icon name="refresh-cw" size={13} style={syncing ? { animation: 'spin 1s linear infinite' } : {}} />
            {syncing ? 'Sincronizando...' : 'Sincronizar'}
          </button>
        )}
      />

      <div className="grupos-tabs">
        <button className={`grupos-tab ${mobileTab === 'grupos' ? 'active' : ''}`} onClick={() => setMobileTab('grupos')}>
          <Icon name="layers" size={14} />
          Grupos
          {selected.size > 0 && <span className="grupos-tab-badge">{selected.size}</span>}
        </button>
        <button className={`grupos-tab ${mobileTab === 'listas' ? 'active' : ''}`} onClick={() => setMobileTab('listas')}>
          <Icon name="list" size={14} />
          Listas
          {groupLists.length > 0 && <span className="grupos-tab-badge">{groupLists.length}</span>}
        </button>
      </div>

      <div className="split-2">
        <div className={mobileTab !== 'grupos' ? 'grupos-mobile-hidden' : ''}>{renderPanelGrupos()}</div>
        <div className={mobileTab !== 'listas' ? 'grupos-mobile-hidden' : ''}>{renderPanelListas()}</div>
      </div>
    </div>
  );
}

Object.assign(window, { GruposSection });

})();