// wh-altas-section.jsx - extracted AltasSection

(() => {

const { useState, useEffect } = React;
const {
  Icon,
  Avatar,
  Badge,
  EmptyState,
  SecHead,
  NoticeCard,
  SummaryRow,
  FormField,
  apiFetch,
  DisconnectedBanner,
} = window;

const toast = (msg, type, dur) => window.showToast?.(msg, type, dur);

function AltasSection({ contacts = [], groupLists = [], onJobCreated, whStatus }) {
  const isReady = whStatus?.status === 'ready';
  const [selList, setSelList] = useState('');
  const [selCont, setSelCont] = useState(new Set());
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    if (groupLists.length && !selList) {
      setSelList(groupLists[0].id);
    }
  }, [groupLists]);

  const toggle = (id) => {
    const next = new Set(selCont);
    if (next.has(id)) next.delete(id);
    else next.add(id);
    setSelCont(next);
  };

  const add = async () => {
    if (!selCont.size || !selList) return;
    if (!isReady) {
      toast('WhatsApp no esta conectado. Conectalo desde la seccion Conexion.', 'warning');
      return;
    }

    setBusy(true);
    try {
      const res = await apiFetch('/api/add-participants', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ groupListId: selList, contactIds: [...selCont] }),
      });

      if (!res.ok) {
        const err = await res.json();
        toast(err.error, 'error');
        setBusy(false);
        return;
      }

      const job = await res.json();
      onJobCreated?.(job);
      setSelCont(new Set());
      toast('Alta iniciada. Segui el progreso en la seccion Actividad.', 'success', 6000);
    } catch (error) {
      toast(`Error al agregar participantes: ${error.message}`, 'error');
    } finally {
      setBusy(false);
    }
  };

  const destination = groupLists.find((list) => list.id === selList);

  return (
    <div>
      <SecHead eyebrow="Participantes" title="Agregar Contactos a Grupos" />

      <div className="split-2">
        <div className="card">
          <div className="card-head">
            <div className="card-title">Seleccionar contactos</div>
            <Badge color="gray">{selCont.size} sel.</Badge>
          </div>
          <div className="card-body scroll list-col altas-contacts-list">
            {contacts.length === 0
              ? <EmptyState icon="users" title="Sin contactos" sub="Agrega contactos primero" />
              : contacts.map((contact) => (
                <label
                  key={contact.id}
                  className={`citem ${selCont.has(contact.id) ? 'on' : ''}`}
                  onClick={() => toggle(contact.id)}
                >
                  <input type="checkbox" checked={selCont.has(contact.id)} onChange={() => {}} />
                  <Avatar name={contact.name} size="sm" />
                  <div className="litem-main">
                    <div className="litem-name">{contact.name}</div>
                    <div className="litem-sub">{contact.phone}</div>
                  </div>
                  <span className="citem-tail-spacer" aria-hidden="true"></span>
                </label>
              ))}
          </div>
        </div>

        <div className="flex-c" style={{ gap: 14 }}>
          <div className="card card-pad">
            <FormField label="Lista de grupos destino" style={{ marginBottom: 14 }}>
              {groupLists.length === 0
                ? <div className="t-muted t-sm">No hay listas. Crea una en la seccion Grupos.</div>
                : (
                  <select className="sel" value={selList} onChange={(e) => setSelList(e.target.value)}>
                    {groupLists.map((list) => (
                      <option key={list.id} value={list.id}>
                        {list.name} ({list.groupIds.length} grupos)
                      </option>
                    ))}
                  </select>
                )}
            </FormField>

            <div className="stack" style={{ gap: 8, marginBottom: 16 }}>
              <div className="t-sm t-bold">Resumen</div>
              <SummaryRow label="Contactos:">
                <Badge color={selCont.size ? 'green' : 'gray'}>{selCont.size} seleccionados</Badge>
              </SummaryRow>
              <SummaryRow label="Lista destino:">
                <Badge color="teal">{destination?.name || '-'}</Badge>
              </SummaryRow>
              {destination && (
                <SummaryRow label="Grupos:">
                  <Badge color="brand">{destination.groupIds.length}</Badge>
                </SummaryRow>
              )}
            </div>

            {!isReady && <DisconnectedBanner />}
            <button
              className="btn btn-primary btn-full"
              onClick={add}
              disabled={!selCont.size || !selList || busy || !isReady}
            >
              <Icon name="user-plus" size={14} />
              {busy ? 'Iniciando alta...' : `Agregar a grupos (${selCont.size})`}
            </button>
          </div>

          <NoticeCard text="Las altas se procesan con delay aleatorio. WhatsApp puede limitar operaciones masivas." />
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AltasSection });

})();