{conv.name} {conv.source || conv.handle}

{paused && (

Bot pausado · respondiendo asesor

)}

{(() => { let lastDayKey = null; return conv.messages.map((m, i) => { const sent = m.from !== "lead"; const dayKey = inboxDayKey(m.date); const showDateChip = dayKey !== lastDayKey; lastDayKey = dayKey; if (m.from === "event") { return ( {showDateChip && {inboxDayLabel(m.date)}}

{m.text} {m.time && {m.time}}

); } return ( {showDateChip && {inboxDayLabel(m.date)}}

{m.from === "emma" && Emma} {m.from === "agent" && Asesor}

{m.text} {m.time}{sent && }

); }); })()}

{!hideComposer && (

setDraft(e.target.value)} onKeyDown={onKey}
              placeholder={cfg.composerPlaceholder} className="dash-ibx__input" />
            <button className="dash-ibx__composer-icon" type="button" aria-label="Adjuntar"><Icon name="clip" size={19} /></button>
          </div>
          <button className="dash-ibx__send" onClick={submit} disabled={!draft.trim()} aria-label="Enviar mensaje"><Icon name="send" size={20} /></button>
        </div>
      )}
    </div>
  );
}

// ============ COLUMNA DERECHA: DETALLE DEL LEAD (fijo, sin acordeones) ============
function InboxKV({ k, children, wide }) {
  return (
    <div className={`dash-ibx__kv ${wide ? "is-wide" : ""}`}>
      <span className="dash-ibx__kv-k">{k}</span>
      <span className="dash-ibx__kv-v">{children}</span>
    </div>
  );
}

function InboxLeadPanel({ cfg, conv, onPause, onTakeOver, onReactivate, onAssignBroker, onClose, onComingSoon, onToast, hideQuickActions }) {
  const [showDiagnosis, setShowDiagnosis] = React.useState(false);
  React.useEffect(() => { setShowDiagnosis(false); }, [conv && conv.id]);

if (!conv) return null;
  const d = conv.lead;
  const paused = conv.mode === "agent";
  const operatorLabel = (d.derivedTo && d.derivedTo.length) ? d.derivedTo.join(", ") : (d.broker && d.broker !== "Sin asignar" ? d.broker : "");
  const diagnosisText = d.diagnosis && miraiFormatDiagnosis({
    name: conv.name, operator: operatorLabel, phone: conv.handle, intent: d.intent, summary: d.diagnosis,
  });

return (
    <div className="dash-ibx__rail">
      {/* Detalles del lead — todo visible, sin desplegables; crece para llenar el alto */}
      <div className="dash-ibx__card dash-ibx__card--grow">
        <header className="dash-ibx__lead-head">
          <h3 className="dash-ibx__lead-title">Detalles del lead</h3>
          <button className="dash-iconbtn dash-ibx__lead-close" onClick={onClose} aria-label="Cerrar detalle"><Icon name="close" size={16} /></button>
        </header>
        <div className="dash-ibx__lead-body">
          <div className="dash-ibx__lead-grid">
            <InboxKV k="Nombre">{conv.name}</InboxKV>
            <InboxKV k={cfg.contactLabel}>{conv.handle}</InboxKV>
            {d.operation && <InboxKV k="Operación">{d.operation}</InboxKV>}
            {d.propertyType && <InboxKV k="Tipo de propiedad">{d.propertyType}</InboxKV>}
            {d.intent && <InboxKV k="Intención">{d.intent}</InboxKV>}
            {d.zone && <InboxKV k="Zona de interés">{d.zone}</InboxKV>}
            {d.budget && <InboxKV k="Presupuesto">{d.budget}</InboxKV>}
            {d.status && <InboxKV k="Estado"><StatusPill status={d.status} /></InboxKV>}
            {d.broker && <InboxKV k="Broker asignado">{d.broker}</InboxKV>}
            {d.origin && <InboxKV k="Origen del lead">{d.origin}</InboxKV>}
            {d.createdAt && <InboxKV k="Fecha de ingreso">{d.createdAt}</InboxKV>}
            {d.lastContact && <InboxKV k="Último contacto">{d.lastContact}</InboxKV>}
            {d.propertyOfInterest && <InboxKV k="Propiedad de interés" wide>{d.propertyOfInterest}</InboxKV>}
          </div>

{d.tags && d.tags.length > 0 && (
            <div className="dash-ibx__lead-block">
              <span className="dash-ibx__lead-label">Etiquetas</span>
              <div className="dash-ibx__tags">
                {d.tags.map((t) => <span key={t} className="dash-ibx__tag">{t}</span>)}
                <button className="dash-ibx__tag dash-ibx__tag--add" onClick={onComingSoon} aria-label="Agregar etiqueta"><Icon name="plus" size={13} /></button>
              </div>
            </div>
          )}

{d.notes && (
            <div className="dash-ibx__lead-block">
              <span className="dash-ibx__lead-label">Notas</span>
              <p className="dash-ibx__notes">{d.notes}</p>
            </div>
          )}

{d.diagnosis && (
            <div className="dash-ibx__lead-block">
              <button type="button" className="dash-ibx__btn dash-ibx__btn--diagnosis dash-ibx__btn--block" onClick={copyDiagnosis}>
                <Icon name="copy" size={15} /> Copiar diagnóstico
              </button>
              {showDiagnosis && (
                <div className="dash-ibx__diagnosis" role="status">
                  <span className="dash-ibx__diagnosis-flag"><Icon name="check2" size={13} /> Diagnóstico copiado</span>
                  <p className="dash-ibx__diagnosis-text">{diagnosisText}</p>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

{/* Acciones rápidas — fijo, contextual al estado del bot */}
      {!hideQuickActions && (
        <div className="dash-ibx__card">
          <div className="dash-ibx__card-head">
            <h3 className="dash-ibx__card-title">Acciones rápidas</h3>
            <span className={`dash-ibx__statechip ${paused ? "is-agent" : "is-bot"}`}>
              <span className={`dash-ibx__dot ${paused ? "is-agent" : "is-bot"}`}></span>
              {paused ? "Bot pausado" : "Emma activa"}
            </span>
          </div>
          <div className="dash-ibx__actions">
            {paused ? (
              <button className="dash-ibx__btn dash-ibx__btn--accent dash-ibx__btn--block" onClick={() => onReactivate(conv.id)}>
                <Icon name="play" size={15} /> Reactivar Emma
              </button>
            ) : !cfg.hideManualBtn ? (
              <button className="dash-ibx__btn dash-ibx__btn--accent dash-ibx__btn--block" onClick={() => onTakeOver(conv.id)}>
                <Icon name="user" size={16} /> Responder manualmente
              </button>
            ) : null}
          </div>
        </div>
      )}
    </div>
  );
}

// Convierte un lead de la API (/dashboard/chats) al shape que espera InboxChatList.
function apiChatToConversation(c) {
  return {
    id: c.phone,
    name: c.nombre,
    handle: c.phone,
    avatar: null,
    mode: "bot",
    unread: 0,
    online: false,
    lastTime: c.fecha_ultimo_contacto ? c.fecha_ultimo_contacto.slice(-5) : "",
    messages: [],
    lead: {
      intent: c.intencion,
      operation: c.operacion,
      zone: c.zona,
      budget: c.presupuesto,
      propertyType: c.tipo_propiedad,
      status: c.estado,
      lastContact: c.fecha_ultimo_contacto,
      diagnosis: c.resumen,
      derivedTo: Array.isArray(c.derivado_a) ? c.derivado_a : [],
    },
  };
}

// Navegación cruzada desde el Tablero: "Ir a la conversación" guarda acá qué
// chat abrir, la página de Inbox lo lee (y borra) al montar — el router de
// hash de la app no soporta query params, así que no podemos mandarlo en la URL.
const MIRAI_OPEN_CHAT_KEY = "mirai_open_chat";
function mirai_setPendingChat(channel, id) {
  try { sessionStorage.setItem(MIRAI_OPEN_CHAT_KEY, JSON.stringify({ channel, id })); } catch (e) {}
}
function mirai_consumePendingChat(channel) {
  try {
    const raw = sessionStorage.getItem(MIRAI_OPEN_CHAT_KEY);
    if (!raw) return null;
    const { channel: pendingChannel, id } = JSON.parse(raw);
    if (pendingChannel !== channel) return null;
    sessionStorage.removeItem(MIRAI_OPEN_CHAT_KEY);
    return id || null;
  } catch (e) { return null; }
}

// ============ PÁGINA DE INBOX (orquestador) ============
function ChannelInboxPage({ channel, user, onLogout, env, setEnv, showEnvSwitch }) {
  const cfg = INBOX_CFG[channel];
  const headerCfg = { ...dashGetChannelCfg(channel), subtitle: cfg.subtitle };

// Cuentas live solo consumen datos reales en WhatsApp: nunca sembrar con mock.
  const isLiveUser = MIRAI_LIVE_USERS.has((user || "").toLowerCase());
  const liveWhatsApp = isLiveUser && channel === "whatsapp";

// Si venimos del Tablero con "Ir a la conversación", abrimos ese chat puntual
  // en lugar del primero de la lista (una sola vez: se consume y se borra al montar).
  const [pendingChat] = React.useState(() => mirai_consumePendingChat(channel));

const [conversations, setConversations] = React.useState(() => (liveWhatsApp ? [] : dashGetInboxConversations(channel)));
  const [selectedId, setSelectedId] = React.useState(() => {
    if (liveWhatsApp) return pendingChat || null;
    const list = dashGetInboxConversations(channel);
    if (pendingChat && list.some((c) => c.id === pendingChat)) return pendingChat;
    return list.length ? list[0].id : null;
  });
  const [search, setSearch] = React.useState("");
  const [showLead, setShowLead] = React.useState(true);
  const [sbOpen, setSbOpen] = React.useState(false);
  const [filters, setFilters] = React.useState({ period: "30d", channel, compare: false });
  const [lastUpdated, setLastUpdated] = React.useState(() => new Date());
  const [toast, showToast] = useToast();

// Datos en vivo (solo WhatsApp + usuarios live)
  const { chats: liveChats, loading: chatsLoading, isLive: inboxIsLive, refresh: refreshChats } = useInboxChats(user, env);

// Sincronizar lista de conversaciones con la API cuando hay datos en vivo.
  // Corre siempre que sea WhatsApp+live, incluso con 0 chats (para no dejar
  // el sembrado mock inicial ni datos viejos si la lista real quedó vacía).
  React.useEffect(() => {
    if (!liveWhatsApp) return;
    // /dashboard/chats trae una fila por CONSULTA (un mismo contacto puede
    // tener varias, ver dashboard-tablero.jsx) — acá dedupe por teléfono:
    // el Inbox es un hilo de conversación por contacto, no por consulta.
    // Ya viene ordenado por fecha desc, así que nos quedamos con la primera
    // aparición (la más reciente) de cada teléfono.
    const seenPhones = new Set();
    const deduped = liveChats.filter((c) => {
      if (seenPhones.has(c.phone)) return false;
      seenPhones.add(c.phone);
      return true;
    });
    const converted = deduped.map(apiChatToConversation);
    setConversations(converted);
    setSelectedId((prev) => {
      // Todavía no llegó el primer fetch (converted vacío mientras carga):
      // no pisar una selección pendiente (ej. "Ir a la conversación" desde
      // el Tablero) con una lista vacía transitoria.
      if (!converted.length && chatsLoading) return prev;
      return prev && converted.some((c) => c.id === prev) ? prev : (converted[0] ? converted[0].id : null);
    });
    setLastUpdated(new Date());
  }, [liveChats, liveWhatsApp, chatsLoading]);

const selected = conversations.find((c) => c.id === selectedId) || null;

// Mensajes del chat seleccionado desde Supabase (solo en vivo)
  const { messages: liveMessages } = useInboxMessages(user, liveWhatsApp ? selected?.handle : null, env);

// Conversación efectiva: reemplaza mensajes con los reales de Supabase cuando corresponde.
  const effectiveSelected = React.useMemo(() => {
    if (!liveWhatsApp || !selected || !liveMessages.length) return selected;
    return {
      ...selected,
      messages: liveMessages.map((m) => {
        if (m.kind === "event") {
          return { from: "event", text: m.text, time: m.created_at ? miraiFmtTime(new Date(m.created_at)) : "", date: m.created_at };
        }
        return {
          from: m.role === "user" ? "lead" : "emma",
          text: typeof m.content === "string" ? m.content : JSON.stringify(m.content),
          time: m.created_at ? miraiFmtTime(new Date(m.created_at)) : "",
          date: m.created_at,
        };
      }),
    };
  }, [selected, liveMessages, liveWhatsApp]);

const counts = {
    all: conversations.length,
    unread: conversations.filter((c) => c.unread > 0).length,
    waiting: conversations.filter((c) => c.mode === "waiting").length,
  };

return (
    <div className="dboard">
      <DashboardSidebar active={channel} user={user} onComingSoon={() => showToast(COMING_SOON)} open={sbOpen} onClose={() => setSbOpen(false)} />

<div className="dash-main dash-main--inbox">
        <ChannelDashboardHeader
          cfg={headerCfg} filters={filters} setFilters={setFilters}
          onLogout={onLogout} onMenu={() => setSbOpen(true)} onAccount={() => showToast(COMING_SOON)}
          onRefresh={onRefresh} loading={chatsLoading} lastUpdated={lastUpdated}
          env={env} setEnv={setEnv} showEnvSwitch={showEnvSwitch} />

<div className={`dash-inbox is-${channel} ${selectedId ? "has-selection" : ""} ${showLead ? "" : "hide-lead"}`}>
          <InboxChatList
            cfg={cfg} conversations={conversations} counts={counts} selectedId={selectedId} onSelect={onSelect}
            search={search} setSearch={setSearch}
            onTools={() => showToast(COMING_SOON)} />

<InboxConversation cfg={cfg} conv={effectiveSelected} onSend={onSend} onBack={() => setSelectedId(null)} hideComposer={inboxIsLive} />

{showLead && (
            <InboxLeadPanel
              cfg={cfg} conv={effectiveSelected}
              onPause={onPause} onTakeOver={onTakeOver} onReactivate={onReactivate} onAssignBroker={onAssignBroker}
              onClose={() => setShowLead(false)} onComingSoon={() => showToast(COMING_SOON)} onToast={showToast}
              hideQuickActions={inboxIsLive} />
          )}
        </div>
      </div>

<ComingSoonNotice msg={toast} />
    </div>
  );
}

Object.assign(window, { ChannelInboxPage, INBOX_CFG, mirai_setPendingChat });

{cfg.listTitle}