// ─── Micos CRM · Métricas del equipo (tablerito de jefes) ──────────────────
// Qué es: pantalla de SOLO LECTURA para ADMIN/JEFE — primera respuesta por
//   grupo (30 días), hilos sin responder ahora y volumen semanal por grupo/casilla.
// Expone a window: CrmMetricsScreen (para que el shell la integre al menú).
// Consume: GET /api/crm-metricas (agregados de v_crm_metricas_jefes, calculados
//   en Postgres — acá no se reduce nada sobre CRM_EMAILS) + GET /api/me (rol).
// Vida: la carga Micos CRM.html ANTES de crm/app.jsx. Con /crm?vista=metricas
//   se auto-monta como overlay encima del CRM (deep-link directo, sin tocar
//   app.jsx/shell.jsx — la línea de menú queda para integrarse en crm/shell.jsx);
//   en ese modo además vacía STORE_HYDRATE_KEYS y neutraliza el polling de
//   crmHilos: el CRM de fondo no se ve y ese GET es pesado con el historial
//   legacy migrado (~15k hilos).

const { useState: _useStateCM, useEffect: _useEffectCM, useMemo: _useMemoCM } = React;

// Orden y nombre visible de los grupos (mismos grupos que la whitelist de ingesta).
const CRM_METRICS_GRUPOS = [
  ['general', 'General'],
  ['ventas', 'Ventas'],
  ['administracion', 'Administración'],
  ['tesoreria', 'Tesorería'],
  ['audiologia', 'Audiología'],
  ['sucursales', 'Sucursales'],
];
const _cmNombreGrupo = (key) => {
  const par = CRM_METRICS_GRUPOS.find(([k]) => k === key);
  return par ? par[1] : key;
};

// Horas → texto en cristiano: 0,4 h no le dice nada a nadie; "22 min" sí.
function _cmHoras(h) {
  if (h == null || !isFinite(h)) return '—';
  if (h < 1) return `${Math.max(1, Math.round(h * 60))} min`;
  if (h < 48) return `${String(Math.round(h * 10) / 10).replace('.', ',')} h`;
  return `${String(Math.round((h / 24) * 10) / 10).replace('.', ',')} días`;
}
// '2026-06-29' (lunes de la semana) → '29/06'
function _cmSemana(iso) {
  const [, m, d] = String(iso || '').split('-');
  return m && d ? `${d}/${m}` : String(iso || '');
}

// ── Piezas visuales (tokens del bundle, cero colores nuevos) ────────────────
function _CmEyebrow({ children }) {
  return (
    <p className="text-[10.5px] font-bold uppercase tracking-[0.18em] pb-2"
      style={{ color: 'color-mix(in oklab, var(--muted-foreground) 75%, transparent)' }}>
      {children}
    </p>
  );
}

function _CmSeccion({ titulo, nota, children }) {
  return (
    <section className="pt-8">
      <div className="flex items-baseline gap-3 pb-3">
        <h2 className="text-[15px] font-extrabold" style={{ color: 'var(--foreground)' }}>{titulo}</h2>
        {nota && <span className="text-[11.5px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>{nota}</span>}
      </div>
      {children}
    </section>
  );
}

// ── Pantalla ────────────────────────────────────────────────────────────────
function CrmMetricsScreen() {
  const [estado, setEstado] = _useStateCM({ cargando: true, error: null, datos: null });

  const cargar = () => {
    setEstado({ cargando: true, error: null, datos: null });
    fetch('/api/crm-metricas', { credentials: 'same-origin' })
      .then(async (res) => {
        if (res.status === 403) throw new Error('solo-jefes');
        if (res.status === 401) throw new Error('sin-sesion');
        if (!res.ok) throw new Error(`el servidor respondió ${res.status}`);
        return res.json();
      })
      .then((datos) => setEstado({ cargando: false, error: null, datos }))
      .catch((e) => setEstado({ cargando: false, error: e.message, datos: null }));
  };
  _useEffectCM(cargar, []);

  const { cargando, error, datos } = estado;

  // Pivot del volumen semanal: filas = semanas (recientes arriba), columnas =
  // grupos con actividad; celda = { entrada, salida } sumando las casillas del grupo.
  const volumen = _useMemoCM(() => {
    const filas = Array.isArray(datos?.volumenSemanal) ? datos.volumenSemanal : [];
    const semanas = [...new Set(filas.map((f) => f.semana))].sort().reverse();
    const grupos = CRM_METRICS_GRUPOS.filter(([k]) => filas.some((f) => f.grupo === k)).map(([k]) => k);
    const celdas = {}; // `${semana}|${grupo}` -> { entrada, salida }
    const casillas = new Map(); // casilla -> { grupo, entrada, salida }
    for (const f of filas) {
      const key = `${f.semana}|${f.grupo}`;
      const c = celdas[key] || { entrada: 0, salida: 0 };
      c.entrada += f.entrada || 0;
      c.salida += f.salida || 0;
      celdas[key] = c;
      const ca = casillas.get(f.casilla) || { grupo: f.grupo, entrada: 0, salida: 0 };
      ca.entrada += f.entrada || 0;
      ca.salida += f.salida || 0;
      casillas.set(f.casilla, ca);
    }
    const porCasilla = [...casillas.entries()]
      .map(([casilla, v]) => ({ casilla, ...v }))
      .sort((a, b) => b.entrada + b.salida - (a.entrada + a.salida));
    return { semanas, grupos, celdas, porCasilla };
  }, [datos]);

  if (cargando) {
    return (
      <div className="flex items-center justify-center py-24 text-[13px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>
        Cargando métricas…
      </div>
    );
  }
  if (error === 'solo-jefes') {
    return (
      <div className="flex flex-col items-center justify-center py-24 gap-2">
        <p className="text-[15px] font-extrabold" style={{ color: 'var(--foreground)' }}>Esta pantalla es solo para jefes</p>
        <p className="text-[13px]" style={{ color: 'var(--muted-foreground)' }}>Pedile acceso a un administrador si la necesitás.</p>
      </div>
    );
  }
  if (error === 'sin-sesion') {
    return (
      <div className="flex flex-col items-center justify-center py-24 gap-3">
        <p className="text-[15px] font-extrabold" style={{ color: 'var(--foreground)' }}>Tu sesión venció</p>
        <a href="/login" className="btn btn-primary">Volver a entrar</a>
      </div>
    );
  }
  if (error) {
    return (
      <div className="flex flex-col items-center justify-center py-24 gap-3">
        <p className="text-[14px] font-bold" style={{ color: 'var(--foreground)' }}>No se pudieron cargar las métricas ({error}).</p>
        <button type="button" className="btn btn-outline" onClick={cargar}>Reintentar</button>
      </div>
    );
  }

  const respuesta = datos?.respuestaPorGrupo || {};
  const sinResponder = datos?.sinResponder || {};
  const gruposRespuesta = CRM_METRICS_GRUPOS.filter(([k]) => respuesta[k]);
  const gruposSinResp = CRM_METRICS_GRUPOS.filter(([k]) => sinResponder[k])
    .sort((a, b) => (sinResponder[b[0]].hilos || 0) - (sinResponder[a[0]].hilos || 0));
  const totalSinResponder = gruposSinResp.reduce((acc, [k]) => acc + (sinResponder[k].hilos || 0), 0);

  const celdaTh = {
    color: 'color-mix(in oklab, var(--muted-foreground) 85%, transparent)',
    borderBottom: '1px solid var(--border)',
  };
  const celdaTd = { borderBottom: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' };

  return (
    <div className="animate-fade-in-up">
      {/* ── Primera respuesta ── */}
      <_CmSeccion titulo="Tiempo de primera respuesta" nota="hilos que llegaron en los últimos 30 días">
        {gruposRespuesta.length === 0 ? (
          <p className="text-[13px]" style={{ color: 'var(--muted-foreground)' }}>Sin hilos en los últimos 30 días.</p>
        ) : (
          <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))' }}>
            {gruposRespuesta.map(([key, label]) => {
              const r = respuesta[key];
              return (
                <div key={key} className="kpi-card" style={{ padding: '1.4rem 1.6rem', minHeight: 118 }}>
                  <p className="text-[11px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>{label}</p>
                  <p className="text-[26px] font-extrabold leading-tight pt-1" style={{ color: r.promHoras == null ? 'var(--muted-foreground)' : 'var(--foreground)' }}>
                    {r.promHoras == null ? 'Sin respuestas' : _cmHoras(r.promHoras)}
                  </p>
                  <p className="text-[12px] font-semibold pt-1" style={{ color: 'var(--muted-foreground)' }}>
                    {`${r.respondidos} de ${r.hilos} hilos con respuesta`}
                  </p>
                </div>
              );
            })}
          </div>
        )}
      </_CmSeccion>

      {/* ── Sin responder ahora ── */}
      <_CmSeccion
        titulo="Sin responder ahora"
        nota={`${totalSinResponder} hilos esperan respuesta (actividad de los últimos 30 días)`}
      >
        {gruposSinResp.length === 0 ? (
          <p className="text-[13px]" style={{ color: 'var(--muted-foreground)' }}>No hay hilos esperando respuesta. Bandeja al día.</p>
        ) : (
          <div className="grid gap-4" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))' }}>
            {gruposSinResp.map(([key, label]) => {
              const s = sinResponder[key];
              const con24 = s.mas24h || 0;
              return (
                <div key={key} className="kpi-card" style={{ padding: '1.4rem 1.6rem', minHeight: 118 }}>
                  <p className="text-[11px] font-bold uppercase tracking-[0.14em]" style={{ color: 'var(--muted-foreground)' }}>{label}</p>
                  <p className="text-[26px] font-extrabold leading-tight pt-1" style={{ color: 'var(--foreground)' }}>
                    {s.hilos}
                  </p>
                  <p className="text-[12px] font-semibold pt-1"
                    style={{ color: con24 > 0 ? 'var(--destructive)' : 'var(--muted-foreground)' }}>
                    {con24 > 0
                      ? `${con24} con más de 24 h · la más larga espera ${_cmHoras(s.esperaMaxHoras)}`
                      : 'Todos con menos de 24 h de espera'}
                  </p>
                </div>
              );
            })}
          </div>
        )}
      </_CmSeccion>

      {/* ── Volumen semanal ── */}
      <_CmSeccion titulo="Volumen por semana" nota="mensajes por grupo · recibidos / enviados — últimas 8 semanas">
        {volumen.semanas.length === 0 ? (
          <p className="text-[13px]" style={{ color: 'var(--muted-foreground)' }}>Sin mensajes en las últimas 8 semanas.</p>
        ) : (
          <div className="glow-card" style={{ padding: '0.5rem 1.25rem 1rem', overflowX: 'auto' }}>
            <table className="w-full text-[13px]" style={{ borderCollapse: 'collapse' }}>
              <thead>
                <tr>
                  <th className="text-left py-2.5 pr-4 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>Semana del</th>
                  {volumen.grupos.map((g) => (
                    <th key={g} className="text-right py-2.5 px-3 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>
                      {_cmNombreGrupo(g)}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {volumen.semanas.map((sem) => (
                  <tr key={sem}>
                    <td className="py-2.5 pr-4 font-bold tabular-nums" style={{ ...celdaTd, color: 'var(--foreground)' }}>{_cmSemana(sem)}</td>
                    {volumen.grupos.map((g) => {
                      const c = volumen.celdas[`${sem}|${g}`];
                      return (
                        <td key={g} className="py-2.5 px-3 text-right tabular-nums" style={celdaTd}>
                          {c ? (
                            <span>
                              <span className="font-extrabold" style={{ color: 'var(--foreground)' }}>{c.entrada}</span>
                              <span className="font-semibold" style={{ color: 'var(--muted-foreground)' }}>{` / ${c.salida}`}</span>
                            </span>
                          ) : (
                            <span style={{ color: 'color-mix(in oklab, var(--muted-foreground) 45%, transparent)' }}>—</span>
                          )}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </_CmSeccion>

      {/* ── Por casilla ── */}
      {volumen.porCasilla.length > 0 && (
        <_CmSeccion titulo="Por casilla" nota="total de las últimas 8 semanas">
          <div className="glow-card" style={{ padding: '0.5rem 1.25rem 1rem', overflowX: 'auto' }}>
            <table className="w-full text-[13px]" style={{ borderCollapse: 'collapse' }}>
              <thead>
                <tr>
                  <th className="text-left py-2.5 pr-4 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>Casilla</th>
                  <th className="text-left py-2.5 px-3 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>Grupo</th>
                  <th className="text-right py-2.5 px-3 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>Recibidos</th>
                  <th className="text-right py-2.5 pl-3 text-[11px] font-bold uppercase tracking-[0.12em]" style={celdaTh}>Enviados</th>
                </tr>
              </thead>
              <tbody>
                {volumen.porCasilla.map((c) => (
                  <tr key={c.casilla}>
                    <td className="py-2.5 pr-4 font-bold" style={{ ...celdaTd, color: 'var(--foreground)' }}>{c.casilla}</td>
                    <td className="py-2.5 px-3 font-semibold" style={{ ...celdaTd, color: 'var(--muted-foreground)' }}>{_cmNombreGrupo(c.grupo)}</td>
                    <td className="py-2.5 px-3 text-right font-extrabold tabular-nums" style={{ ...celdaTd, color: 'var(--foreground)' }}>{c.entrada}</td>
                    <td className="py-2.5 pl-3 text-right font-semibold tabular-nums" style={{ ...celdaTd, color: 'var(--muted-foreground)' }}>{c.salida}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </_CmSeccion>
      )}
    </div>
  );
}

// ── Overlay del deep-link /crm?vista=metricas ───────────────────────────────
// Envuelve la pantalla con header propio (volver al correo) y gate de rol.
// El rol sale de /api/me (misma fuente que app.jsx) — el server igual devuelve
// 403 en /api/crm-metricas si alguien fuerza la URL sin ser jefe.
function CrmMetricsOverlay() {
  const [sesion, setSesion] = _useStateCM({ cargando: true, rol: null });

  _useEffectCM(() => {
    // Tema compartido con el ERP/CRM (defensivo: app.jsx también lo setea).
    try { document.documentElement.setAttribute('data-theme', localStorage.getItem('micos-theme') || 'light'); } catch (_) {}
    fetch('/api/me', { credentials: 'same-origin' })
      .then((res) => (res.ok ? res.json() : null))
      .then((me) => setSesion({ cargando: false, rol: me ? me.rol : null }))
      .catch(() => setSesion({ cargando: false, rol: null }));
  }, []);

  const esJefe = sesion.rol === 'ADMIN' || sesion.rol === 'JEFE';

  return (
    <div className="fixed inset-0 overflow-y-auto" style={{ zIndex: 60, background: 'var(--background)', color: 'var(--foreground)' }}>
      <div className="mx-auto max-w-[1180px] px-8 pt-10 pb-16">
        <div className="flex items-start justify-between gap-4">
          <div>
            <_CmEyebrow>CRM · Métricas</_CmEyebrow>
            <h1 className="text-[24px] font-extrabold leading-tight">Métricas del equipo</h1>
            <p className="text-[13px] font-semibold pt-1" style={{ color: 'var(--muted-foreground)' }}>
              Cómo viene el correo del equipo: velocidad de respuesta, pendientes y volumen.
            </p>
          </div>
          <a href="/crm" className="btn btn-outline flex-shrink-0">Volver al correo</a>
        </div>

        {sesion.cargando ? (
          <div className="flex items-center justify-center py-24 text-[13px] font-semibold" style={{ color: 'var(--muted-foreground)' }}>
            Cargando…
          </div>
        ) : !sesion.rol ? (
          <div className="flex flex-col items-center justify-center py-24 gap-3">
            <p className="text-[15px] font-extrabold">Necesitás iniciar sesión</p>
            <a href="/login" className="btn btn-primary">Ir al login</a>
          </div>
        ) : !esJefe ? (
          <div className="flex flex-col items-center justify-center py-24 gap-2">
            <p className="text-[15px] font-extrabold">Esta pantalla es solo para jefes</p>
            <a href="/crm" className="btn btn-outline">Volver al correo</a>
          </div>
        ) : (
          <CrmMetricsScreen />
        )}
      </div>
    </div>
  );
}

// ── Auto-mount del deep-link ────────────────────────────────────────────────
// Corre al cargar el script (Micos CRM.html lo lista ANTES de crm/app.jsx, así
// que esto gana la carrera contra el hydrate del mount de CrmApp).
(function () {
  let esVistaMetricas = false;
  try { esVistaMetricas = new URLSearchParams(window.location.search).get('vista') === 'metricas'; } catch (_) {}
  if (!esVistaMetricas) return;

  // El CRM de fondo no se usa en esta vista: sin colecciones que hidratar
  // (CrmApp monta igual, con bandeja vacía, tapado por el overlay) y sin el
  // polling de 45s de crmHilos (ese GET es pesado con el historial migrado).
  window.STORE_HYDRATE_KEYS = [];
  const _neutralizarRefresh = () => {
    if (!window.MicosStore || typeof window.MicosStore.refresh !== 'function') return;
    const refreshOriginal = window.MicosStore.refresh;
    window.MicosStore.refresh = function (key) {
      if (key === 'crmHilos') return Promise.resolve([]);
      return refreshOriginal.apply(this, arguments);
    };
  };
  _neutralizarRefresh();

  const host = document.createElement('div');
  host.id = 'crm-metrics-root';
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<CrmMetricsOverlay />);
})();

Object.assign(window, { CrmMetricsScreen });