// wh-conexion-section.jsx - extracted ConnectionSection

(() => {

const { useState } = React;
const { Icon, Modal, SecHead, apiFetch } = window;

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

const isAdmin = (role) => role === 'admin' || role === 'super_admin';

function ConnectionSection({ whStatus, qrUrl, groups, contacts, groupLists, jobs, user }) {
  const status = whStatus?.status || 'stopped';
  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
  const [logoutBusy, setLogoutBusy] = useState(false);
  const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);
  const [disconnectBusy, setDisconnectBusy] = useState(false);

  const cfgMap = {
    stopped:       { label: 'Detenido',      color: 'red',    dotCls: 'dot dot-red',          icon: 'wifi-off', iconBg: 'var(--danger-soft)', iconClr: 'var(--danger)', hint: 'Inicia el cliente para conectar WhatsApp Web.' },
    starting:      { label: 'Iniciando…',    color: 'yellow', dotCls: 'dot dot-yellow pulse', icon: 'wifi',     iconBg: 'var(--warn-soft)',   iconClr: 'var(--warn)',   hint: 'Iniciando el cliente de WhatsApp, aguarda…' },
    qr:            { label: 'Escanear QR',   color: 'yellow', dotCls: 'dot dot-yellow pulse', icon: 'wifi',     iconBg: 'var(--warn-soft)',   iconClr: 'var(--warn)',   hint: 'Escanea el código QR desde WhatsApp en tu teléfono.' },
    authenticated: { label: 'Autenticado',   color: 'yellow', dotCls: 'dot dot-yellow pulse', icon: 'wifi',     iconBg: 'var(--warn-soft)',   iconClr: 'var(--warn)',   hint: 'Autenticado correctamente. Cargando grupos…' },
    ready:         { label: 'Conectado',     color: 'green',  dotCls: 'dot dot-green pulse',  icon: 'wifi',     iconBg: 'var(--ok-soft)',     iconClr: 'var(--ok)',     hint: `${whStatus?.groupsCount || 0} grupos disponibles.` },
    auth_failure:  { label: 'Error de auth', color: 'red',    dotCls: 'dot dot-red',          icon: 'wifi-off', iconBg: 'var(--danger-soft)', iconClr: 'var(--danger)', hint: 'Error de autenticación. Intenta de nuevo.' },
    disconnected:  { label: 'Desconectado',  color: 'red',    dotCls: 'dot dot-red',          icon: 'wifi-off', iconBg: 'var(--danger-soft)', iconClr: 'var(--danger)', hint: 'Inicia el cliente para conectar WhatsApp Web.' },
  };

  const cfg = cfgMap[status] || cfgMap.stopped;
  const isReady = status === 'ready';
  const isConnecting = ['starting', 'qr', 'authenticated'].includes(status);
  const canManageSession = isAdmin(user?.role);

  const startWhatsApp = async () => {
    try {
      await apiFetch('/api/whatsapp/start', { method: 'POST' });
    } catch (e) {
      toast(`Error al iniciar WhatsApp: ${e.message}`, 'error');
    }
  };

  const confirmDisconnect = async () => {
    setDisconnectBusy(true);
    try {
      const res = await apiFetch('/api/whatsapp/disconnect', { method: 'POST' });
      if (!res.ok) {
        const err = await res.json();
        toast(err.error || 'No se pudo desconectar.', 'error');
        return;
      }
      setShowDisconnectConfirm(false);
      toast('WhatsApp desconectado. La sesión se conserva.', 'success');
    } catch (e) {
      toast(`Error al desconectar: ${e.message}`, 'error');
    } finally {
      setDisconnectBusy(false);
    }
  };

  const confirmLogout = async () => {
    setLogoutBusy(true);
    try {
      const res = await apiFetch('/api/whatsapp/logout', { method: 'POST' });
      if (!res.ok) {
        const err = await res.json();
        toast(err.error || 'No se pudo cerrar la sesión.', 'error');
        return;
      }
      setShowLogoutConfirm(false);
      toast('Sesión de WhatsApp cerrada correctamente.', 'success');
    } catch (e) {
      toast(`Error al cerrar sesión: ${e.message}`, 'error');
    } finally {
      setLogoutBusy(false);
    }
  };

  const headerAction = isReady && canManageSession
    ? (
      <div className="flex-r" style={{ gap: 8 }}>
        <button
          type="button"
          className="btn btn-ghost btn-sm"
          onClick={() => setShowDisconnectConfirm(true)}
        >
          <Icon name="wifi-off" size={13} />
          Desconectar
        </button>
        <button
          type="button"
          className="btn btn-danger-ghost btn-sm"
          onClick={() => setShowLogoutConfirm(true)}
        >
          <Icon name="log-out" size={13} />
          Cerrar sesión
        </button>
      </div>
    )
    : isConnecting
    ? <button className="btn btn-ghost btn-sm" disabled><Icon name="wifi" size={13} />Conectando…</button>
    : <button className="btn btn-primary" onClick={startWhatsApp}><Icon name="zap" size={14} />Iniciar WhatsApp</button>;

  return (
    <div>
      <SecHead
        eyebrow="Sesión"
        title="Conexión WhatsApp"
        actions={headerAction}
      />

      <div className="stats-row" style={{ marginBottom: 20 }}>
        {[
          [String(whStatus?.groupsCount ?? groups?.length ?? 0), 'Grupos sincronizados'],
          [String(groupLists?.length ?? 0), 'Listas creadas'],
          [String(contacts?.length ?? 0), 'Contactos'],
          [String(jobs?.length ?? 0), 'Jobs ejecutados'],
        ].map(([v, l]) => (
          <div key={l} className="stat-card">
            <div className="stat-val">{v}</div>
            <div className="stat-lbl">{l}</div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="status-hero">
          <div className="s-icon" style={{ background: cfg.iconBg, color: cfg.iconClr }}>
            <Icon name={cfg.icon} size={26} />
          </div>
          <div style={{ flex: 1 }}>
            <div className="eyebrow">Estado de sesión</div>
            <div className="flex-r" style={{ gap: 10, marginBottom: 4 }}>
              <h2 style={{ fontSize: 21, fontWeight: 800 }}>{cfg.label}</h2>
              <span className={cfg.dotCls} />
            </div>
            <p className="t-muted t-sm">{cfg.hint}</p>
            {whStatus?.lastError && (
              <p style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>{whStatus.lastError}</p>
            )}
          </div>
        </div>

        {qrUrl && (
          <div style={{ padding: '0 22px 22px' }}>
            <div className="qr-wrap">
              <p className="t-sm t-muted" style={{ fontWeight: 600 }}>Código QR de WhatsApp</p>
              <img src={qrUrl} alt="QR WhatsApp" style={{ width: 200, height: 200, display: 'block', margin: '12px auto', borderRadius: 8 }} />
              <p className="t-sm t-muted" style={{ textAlign: 'center', maxWidth: 230 }}>
                Abre WhatsApp → Dispositivos vinculados → Vincular dispositivo
              </p>
            </div>
          </div>
        )}
      </div>

      <Modal
        open={showDisconnectConfirm}
        onClose={() => !disconnectBusy && setShowDisconnectConfirm(false)}
        title="¿Desconectar WhatsApp?"
        subtitle="El cliente se detiene, pero la sesión se conserva"
      >
        <div className="stack">
          <p className="t-sm t-muted">
            Se detendrá el cliente de WhatsApp Web. La sesión permanece guardada,
            por lo que la próxima vez que inicies <strong>no necesitarás escanear el QR</strong>.
          </p>
          <p className="t-sm" style={{ color: 'var(--warn)' }}>
            Cualquier job en curso será interrumpido.
          </p>
          <div className="flex-r" style={{ justifyContent: 'flex-end', gap: 10, marginTop: 4 }}>
            <button
              type="button"
              className="btn btn-ghost"
              onClick={() => setShowDisconnectConfirm(false)}
              disabled={disconnectBusy}
            >
              Cancelar
            </button>
            <button
              type="button"
              className="btn btn-primary"
              onClick={confirmDisconnect}
              disabled={disconnectBusy}
            >
              {disconnectBusy
                ? <><Icon name="clock" size={13} />Desconectando…</>
                : <><Icon name="wifi-off" size={13} />Desconectar</>}
            </button>
          </div>
        </div>
      </Modal>

      <Modal
        open={showLogoutConfirm}
        onClose={() => !logoutBusy && setShowLogoutConfirm(false)}
        title="¿Cerrar sesión de WhatsApp?"
        subtitle="Esta acción desvinculará el dispositivo"
      >
        <div className="stack">
          <p className="t-sm t-muted">
            Se cerrará la sesión activa de WhatsApp Web. El dispositivo quedará desvinculado
            y deberás escanear el QR nuevamente para reconectar.
          </p>
          <p className="t-sm" style={{ color: 'var(--danger)' }}>
            Cualquier job en curso será interrumpido.
          </p>
          <div className="flex-r" style={{ justifyContent: 'flex-end', gap: 10, marginTop: 4 }}>
            <button
              type="button"
              className="btn btn-ghost"
              onClick={() => setShowLogoutConfirm(false)}
              disabled={logoutBusy}
            >
              Cancelar
            </button>
            <button
              type="button"
              className="btn btn-danger"
              onClick={confirmLogout}
              disabled={logoutBusy}
            >
              {logoutBusy
                ? <><Icon name="clock" size={13} />Cerrando…</>
                : <><Icon name="log-out" size={13} />Cerrar sesión</>}
            </button>
          </div>
        </div>
      </Modal>
    </div>
  );
}

Object.assign(window, { ConnectionSection });

})();