/* MIRAI — Dashboard: sección "Tablero" (todas las consultas en una planilla)
 *
 * Combina los leads de WhatsApp + Instagram en una sola tabla buscable por
 * nombre o teléfono, con un detalle expandible por fila (mismo criterio que
 * el panel de lead del Inbox: los campos sin dato no se muestran).
 *
 * Datos: mock -> dashGetInboxConversations() (dashboard-inbox-data.jsx).
 * En vivo (usuarios de MIRAI_LIVE_USERS) -> useInboxChats(user, env), el mismo
 * hook que alimenta el Inbox de WhatsApp (GET /dashboard/chats), que ya trae
 * TODOS los leads con teléfono (sin límite de 12 como en "Inicio").
 *
 * Reutiliza piezas ya definidas en dashboard.jsx (DashboardSidebar, Icon,
 * ChannelIcon, StatusPill, Dropdown, EnvSwitch, RefreshControl, useToast,
 * ComingSoonNotice, COMING_SOON) y dashboard-live.jsx (useInboxChats) — mismo
 * scope global (ver orden de carga en index.html).
 */

const { useState: tbS, useMemo: tbM, useEffect: tbE } = React;

// Personas a las que se puede derivar un lead — puede ser más de una a la
// vez (ver TableroAssignDropdown). Mismo listado que valida el backend (ver
// DERIVADO_OPTIONS en api/dashboard.js) y que usa Emma internamente — si se
// agrega o saca a alguien, actualizar los dos lados.
const DERIVADO_PEOPLE = ["Paola", "Andrea", "Camila", "Karina", "Ezequiel", "Gabriela"];

// ============ DATOS: mock (combina WhatsApp + Instagram) ============
// "chatId" es el id que espera mirai_setPendingChat/consumePendingChat para
// abrir la conversación correcta en el Inbox — en mock es el id propio de la
// conversación (dashboard-inbox-data.jsx); en vivo es el teléfono (ver
// tableroRowFromApi). No siempre coincide con "id" (la identidad de la fila).
function tableroRowFromMock(c, channel) {
  const d = c.lead || {};
  return {
    id: c.id, chatId: c.id, name: c.name, channel, phone: c.handle,
    operation: d.operation, intent: d.intent, zone: d.zone, budget: d.budget,
    propertyType: d.propertyType, propertyOfInterest: d.propertyOfInterest,
    status: d.status, derivedTo: d.broker && d.broker !== "Sin asignar" ? [d.broker] : [], origin: d.origin,
    date: d.lastContact || d.createdAt, notes: d.notes, diagnosis: d.diagnosis,
  };
}

function dashGetTableroRows() {
  return [
    ...dashGetInboxConversations("whatsapp").map((c) => tableroRowFromMock(c, "whatsapp")),
    ...dashGetInboxConversations("instagram").map((c) => tableroRowFromMock(c, "instagram")),
  ];
}

// Convierte una fila de GET /dashboard/chats (ver apiChatToConversation en
// dashboard-inbox.jsx) al mismo shape de fila que el mock. "id" es el id real
// de la consulta en Supabase (no el teléfono): un mismo contacto puede tener
// varias consultas separadas con el mismo número, y el teléfono repetido como
// key rompía el renderizado de la tabla (React no distinguía las filas).
function tableroRowFromApi(c) {
  return {
    id: c.id, chatId: c.phone, name: c.nombre, channel: "whatsapp", phone: c.phone,
    operation: c.operacion, intent: c.intencion, zone: c.zona, budget: c.presupuesto,
    propertyType: c.tipo_propiedad, status: c.estado,
    derivedTo: Array.isArray(c.derivado_a) ? c.derivado_a : [],
    date: c.fecha_ultimo_contacto, diagnosis: c.resumen,
  };
}

// ============ DERIVAR A (desplegable multi-selección reutilizable) ============
// "current" es siempre un array de nombres (puede estar vacío). Tocar una
// persona la suma/saca de la lista sin cerrar el menú, para poder tildar
// varias seguidas — se cierra clickeando afuera.
function tableroDerivedLabel(current) {
  if (!current || current.length === 0) return "Sin asignar";
  if (current.length <= 2) return current.join(", ");
  return `${current.slice(0, 2).join(", ")} +${current.length - 2}`;
}

function TableroAssignDropdown({ current, onAssign, align = "left" }) {
  const list = current || [];
  const toggle = (p) => onAssign(list.includes(p) ? list.filter((x) => x !== p) : [...list, p]);
  return (
    <Dropdown
      align={align}
      className="dash-tb__assign"
      portal
      closeOnItemClick={false}
      button={(open, toggleOpen) => (
        <button type="button" className={`dash-tb__broker ${list.length ? "" : "is-empty"}`} onClick={toggleOpen} title={list.join(", ")}>
          {tableroDerivedLabel(list)} <Icon name="chevron" size={13} />
        </button>
      )}>
      {DERIVADO_PEOPLE.map((p) => (
        <button key={p} className={`dd__opt dd__opt--check ${list.includes(p) ? "is-sel" : ""}`} onClick={() => toggle(p)}>
          <span className="dd__opt-check">{list.includes(p) && <Icon name="check2" size={12} />}</span>
          {p}
        </button>
      ))}
    </Dropdown>
  );
}

// ============ TABLA (estilo planilla) ============
function TableroTable({ rows, onSelect, onAssign }) {
  return (
    <div className="dash-tb__wrap">
      <table className="dash-tb__table">
        <thead>
          <tr>
            <th>Cliente</th><th>Canal</th><th>Intención</th><th>Estado</th><th>Fecha</th><th>Derivado a</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((r) => (
            <tr key={r.id} onClick={() => onSelect(r)} tabIndex={0}
              onKeyDown={(e) => { if (e.key === "Enter") onSelect(r); }}>
              <td className="dash-tb__name">{r.name}</td>
              <td>
                <span className="dash-tb__channel">
                  <ChannelIcon channel={r.channel} size={16} /> {r.channel === "instagram" ? "Instagram" : "WhatsApp"}
                </span>
              </td>
              <td>{r.intent || "—"}</td>
              <td>{r.status ? <StatusPill status={r.status} /> : "—"}</td>
              <td className="dash-tb__date">{r.date || "—"}</td>
              <td onClick={(e) => e.stopPropagation()}>
                <TableroAssignDropdown current={r.derivedTo} onAssign={(next) => onAssign(r, next)} align="right" />
              </td>
            </tr>
          ))}
          {rows.length === 0 && (
            <tr><td colSpan={6} className="dash-tb__empty">No se encontraron consultas para tu búsqueda.</td></tr>
          )}
        </tbody>
      </table>
    </div>
  );
}

// ============ DETALLE (reutiliza el drawer de "Últimas consultas") ============
function TableroDetailDrawer({ row, onClose, onGoToChat, onCopyDiagnosis, onAssign }) {
  tbE(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, []);
  if (!row) return null;

  const fields = [
    [row.channel === "instagram" ? "Usuario" : "Teléfono", row.phone],
    ["Operación", row.operation], ["Intención", row.intent], ["Zona de interés", row.zone],
    ["Presupuesto", row.budget], ["Tipo de propiedad", row.propertyType],
    ["Propiedad de interés", row.propertyOfInterest],
    ["Origen del lead", row.origin], ["Fecha", row.date],
  ].filter(([, v]) => !!v);

  const diagnosisText = row.diagnosis && miraiFormatDiagnosis({
    name: row.name, operator: (row.derivedTo || []).join(", "), phone: row.phone, intent: row.intent, summary: row.diagnosis,
  });

  return (
    <div className="dash-drawer" role="dialog" aria-modal="true">
      <div className="dash-drawer__scrim" onClick={onClose}></div>
      <div className="dash-drawer__panel">
        <header className="dash-drawer__head">
          <div className="dash-drawer__head-main">
            <span className="dash-drawer__icon"><ChannelIcon channel={row.channel} size={22} /></span>
            <div>
              <h3 className="dash-drawer__name">{row.name}</h3>
              <div className="dash-drawer__meta">
                {row.status && <StatusPill status={row.status} />}
                <span className="dash-drawer__time">{row.phone}</span>
              </div>
            </div>
          </div>
          <button className="dash-iconbtn" onClick={onClose} aria-label="Cerrar"><Icon name="close" /></button>
        </header>

        <div className="dash-drawer__body">
          <section className="dash-drawer__section">
            <div className="dash-drawer__field dash-tb__derivedfield">
              <span className="dash-drawer__field-k">Derivado a</span>
              <TableroAssignDropdown current={row.derivedTo} onAssign={(next) => onAssign(row, next)} />
            </div>
            <div className="dash-tb__quickactions">
              <button type="button" className={`dash-tb__gochat is-${row.channel}`} onClick={() => onGoToChat(row)}>
                <Icon name="send" size={15} /> Ir a la conversación de {row.channel === "instagram" ? "Instagram" : "WhatsApp"}
              </button>
              {row.diagnosis && (
                <button type="button" className="dash-ibx__btn dash-ibx__btn--diagnosis" onClick={() => onCopyDiagnosis(row)}>
                  <Icon name="copy" size={15} /> Copiar diagnóstico
                </button>
              )}
            </div>
          </section>

          {row.diagnosis && (
            <section className="dash-drawer__section">
              <h4 className="dash-drawer__title">Diagnóstico</h4>
              <p className="dash-drawer__summary">{diagnosisText}</p>
            </section>
          )}

          <section className="dash-drawer__section">
            <h4 className="dash-drawer__title">Datos del lead</h4>
            <div className="dash-drawer__grid">
              {fields.map(([k, v]) => (
                <div key={k} className="dash-drawer__field">
                  <span className="dash-drawer__field-k">{k}</span>
                  <span className="dash-drawer__field-v">{v}</span>
                </div>
              ))}
              {fields.length === 0 && <p className="dash-drawer__summary">Sin datos adicionales cargados.</p>}
            </div>
          </section>

          {row.notes && (
            <section className="dash-drawer__section">
              <h4 className="dash-drawer__title">Notas</h4>
              <p className="dash-drawer__summary">{row.notes}</p>
            </section>
          )}
        </div>

        <footer className="dash-drawer__foot">
          <button className="btn btn--ghost btn--sm" onClick={onClose}>Cerrar</button>
        </footer>
      </div>
    </div>
  );
}

// ============ ENCABEZADO ============
function TableroHeader({ search, setSearch, onLogout, onMenu, onAccount, onRefresh, loading, lastUpdated, env, setEnv, showEnvSwitch }) {
  return (
    <header className="dash-head">
      <div className="dash-head__left">
        <button className="dash-iconbtn dash-head__menu" onClick={onMenu} aria-label="Abrir menú"><Icon name="menu" /></button>
        <div className="dash-head__heading">
          <h1 className="dash-head__title">Tablero</h1>
        </div>
      </div>
      <div className="dash-head__right">
        <div className="dash-tb__search">
          <Icon name="search" size={16} />
          <input
            type="text" value={search} onChange={(e) => setSearch(e.target.value)}
            placeholder="Buscar por nombre o teléfono…" aria-label="Buscar por nombre o teléfono" />
        </div>
        {showEnvSwitch && <EnvSwitch env={env} setEnv={setEnv} />}
        <RefreshControl onRefresh={onRefresh} loading={loading} lastUpdated={lastUpdated} />
        <Dropdown
          align="right"
          className="dash-profile"
          button={(open, toggle) => (
            <button className="dash-avatar" onClick={toggle} aria-label="Perfil"><Icon name="user" size={18} /></button>
          )}>
          <button className="dd__opt" onClick={onAccount}>Mi cuenta</button>
          <button className="dd__opt" onClick={onLogout}>Cerrar sesión</button>
        </Dropdown>
      </div>
    </header>
  );
}

// ============ PÁGINA ============
function TableroPage({ user, onLogout, env, setEnv, showEnvSwitch }) {
  const [sbOpen, setSbOpen] = tbS(false);
  const [search, setSearch] = tbS("");
  const [selectedId, setSelectedId] = tbS(null);
  const [lastUpdated, setLastUpdated] = tbS(() => new Date());
  const [toast, showToast] = useToast();

  const { chats: liveChats, loading, isLive, refresh } = useInboxChats(user, env);
  tbE(() => { setLastUpdated(new Date()); }, [liveChats]);

  // Estado propio (no derivado) para poder aplicar la asignación de forma
  // optimista sin esperar el siguiente refresco de /dashboard/chats.
  const [rows, setRows] = tbS(() => (isLive ? [] : dashGetTableroRows()));
  tbE(() => {
    if (isLive) setRows(liveChats.map(tableroRowFromApi));
  }, [liveChats, isLive]);

  const patchRow = (id, fn) => setRows((rs) => rs.map((r) => (r.id === id ? fn(r) : r)));

  const filtered = tbM(() => rows.filter((r) => miraiMatchesSearch(search, r.name, r.phone)), [rows, search]);

  const selected = rows.find((r) => r.id === selectedId) || null;

  // "Ir a la conversación": guarda qué chat abrir y navega al Inbox de ese canal.
  const goToChat = (row) => {
    mirai_setPendingChat(row.channel, row.chatId);
    window.location.hash = `#/dashboard/${row.channel}`;
  };

  const copyDiagnosis = async (row) => {
    if (!row.diagnosis) return;
    const text = miraiFormatDiagnosis({
      name: row.name, operator: (row.derivedTo || []).join(", "), phone: row.phone, intent: row.intent, summary: row.diagnosis,
    });
    try { await navigator.clipboard.writeText(text); } catch (e) { /* clipboard no disponible */ }
    showToast("Diagnóstico copiado");
  };

  // "Derivado a": ahora admite varias personas a la vez. Optimista siempre;
  // en cuentas en vivo además lo guarda en Supabase — si falla, se revierte.
  const assignDerivedTo = async (row, derivedToList) => {
    const prev = row.derivedTo;
    patchRow(row.id, (r) => ({ ...r, derivedTo: derivedToList }));
    const label = derivedToList.length ? `Derivado a ${derivedToList.join(", ")}` : "Derivado desasignado";
    if (!isLive) {
      showToast(label);
      return;
    }
    try {
      await mirai_assignDerivedTo(row.phone, derivedToList, env);
      showToast(label);
    } catch (e) {
      patchRow(row.id, (r) => ({ ...r, derivedTo: prev }));
      showToast("No se pudo guardar la asignación.");
    }
  };

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

      <div className="dash-main">
        <TableroHeader
          search={search} setSearch={setSearch}
          onLogout={onLogout} onMenu={() => setSbOpen(true)} onAccount={() => showToast(COMING_SOON)}
          onRefresh={refresh} loading={loading} lastUpdated={lastUpdated}
          env={env} setEnv={setEnv} showEnvSwitch={showEnvSwitch} />

        <div className="dash-card dash-tb__card">
          <div className="dash-tb__cardhead">
            <h3 className="dash-card__title">Todas las consultas</h3>
            <span className="dash-tb__count">{filtered.length} {filtered.length === 1 ? "resultado" : "resultados"}</span>
          </div>
          <TableroTable rows={filtered} onSelect={(r) => setSelectedId(r.id)} onAssign={assignDerivedTo} />
        </div>
      </div>

      {selected && (
        <TableroDetailDrawer
          row={selected} onClose={() => setSelectedId(null)}
          onGoToChat={goToChat} onCopyDiagnosis={copyDiagnosis} onAssign={assignDerivedTo} />
      )}

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

Object.assign(window, { TableroPage });