// =========================================================================
// ADMIN — Vista global de equipo y operaciones
// =========================================================================

const AdminDashboard = ({ goTo }) => {
  const { Icons, DATA, PageHeader, Card, KPIRow, fmtEUR } = window;
  const [tab, setTab] = React.useState("overview");

  // Saludo con el usuario logueado + fecha real de hoy (antes: "Vista global · marzo 2025" fijo).
  const _now = new Date();
  const _h = _now.getHours();
  const _saludo = _h < 6 ? "Buenas noches" : _h < 14 ? "Buenos días" : _h < 21 ? "Buenas tardes" : "Buenas noches";
  const _nombre = (DATA.USER?.name || "").split(" ")[0];
  const _hoy = _now.toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" });

  // Equipo con métricas de comisiones (incluye admins que tengan comisiones)
  const comerciales = (window.RevinTeam?.comercialesConComisiones() || []);
  const team = comerciales.map(m => {
    const comms = (DATA.COMMISSIONS || []).filter(c => c.captador === m.id || c.comercializador === m.id);
    const facturado = comms.reduce((s, c) => s + (c.captador === m.id ? c.capt : 0) + (c.comercializador === m.id ? c.com : 0), 0);
    const objetivo = m.supabase?.objetivo_mensual || 0;
    return {
      name: m.name,
      initials: m.initials,
      role: m.role,
      facturado,
      pct: objetivo > 0 ? Math.min(100, Math.round((facturado / objetivo) * 100)) : 0,
      deals: comms.length,
      leads: 0,
      hasData: comms.length > 0,
    };
  }).sort((a, b) => b.facturado - a.facturado);

  // Facturación EMPRESA: ingresos reales de contabilidad en categorías de venta
  // (Venta, Honorarios, Comisiones, Reforma a terceros); excluye capital
  // (Préstamo socio, Financiación), depósitos (Reserva, Provisión de fondos) y
  // devoluciones. Los 'duplicado' no computan. (Antes salía de `comisiones` → 0.)
  // `esOperacion` (PLANO 1, ver CLAUDE.md §4): dinero entre terceros, jamás
  // facturación de REVIN. Hoy FACT_CATS es lista blanca y ya lo dejaría fuera,
  // pero el filtro va explícito: la regla es que TODA agregación en cliente
  // excluya el Plano 1, sin depender de qué categorías se añadan mañana.
  const FACT_CATS = ["Venta", "Honorarios", "Comisiones", "Reforma"];
  const facturacionEmpresa = (DATA.MOVIMIENTOS || [])
    .filter(m => m.tipo === "ingreso" && !m.esOperacion && m.estado !== "duplicado" && FACT_CATS.includes(m.categoria))
    .reduce((s, m) => s + m.importe, 0);
  // HONORARIOS FACTURADOS (TIPO 1): lo que REVIN factura por intermediar.
  // Es un SUBCONJUNTO de `facturacionEmpresa` (FACT_CATS ya incluye Honorarios),
  // no una partida aparte — de ahí el subtítulo del KPI, para que nadie sume los
  // dos números. Mismos filtros que arriba: fuera Plano 1 y fuera duplicados.
  const honorariosFacturados = (DATA.MOVIMIENTOS || [])
    .filter(m => m.tipo === "ingreso" && !m.esOperacion && m.estado !== "duplicado" && m.categoria === "Honorarios")
    .reduce((s, m) => s + m.importe, 0);

  // COMISIONES AL EQUIPO (TIPO 2): lo que REVIN PAGA a comerciales propios.
  // Mismo helper que usa "Facturación global" (FinanceView), para que ambos
  // números no puedan divergir nunca. Global, sin filtrar por persona.
  // `total` son solo las materializadas; las previsiones van en `previsto` y
  // se muestran aparte, porque una previsión todavía no es un gasto.
  const comisiones = window.RevinComisiones?.totales() || { total: 0, previsto: 0, nMaterializadas: 0 };

  // Euros SIN céntimos para los KPIs: en una fila de 6 tarjetas los decimales
  // ("46.563,30") desbordan la caja. El detalle exacto vive en Contabilidad.
  const _eurKpi = (n) => Math.round(n || 0).toLocaleString("es-ES", { useGrouping: "always" });

  const inmueblesActivos = (DATA.INMUEBLES || []).filter(i => !["captacion", "registro"].includes(i.phase)).length;
  // "Contactos", no "Leads": cuenta TODOS los contactos menos proveedores, para
  // reconciliar con la vista "Clientes / Leads" (150). Ojo: NO es la métrica de
  // leads reales del negocio (entradas/semana + estado) — esa está pendiente.
  const contactos = (DATA.CLIENTS || []).filter(c => c.typeKey !== "proveedor").length;
  const enRiesgo = ((DATA.CLIENTS || []).filter(c => c.cooling && c.typeKey !== "proveedor").length) + ((DATA.INMUEBLES || []).filter(i => i.cooling).length);

  return (
    <>
      <PageHeader
        eyebrow={`${_saludo}${_nombre ? ", " + _nombre : ""} · vista global · ${_hoy}`}
        title="DASHBOARD EQUIPO"
        sub="Métricas agregadas, rendimiento por comercial, salud del pipeline y alertas globales."
        actions={<>
          <button className="btn secondary"><Icons.Download/> Exportar</button>
          <button className="btn primary"><Icons.Plus/> Acción rápida</button>
        </>}
      />

      <div className="adm-tabs">
        <button className={"adm-tab" + (tab === "overview" ? " active" : "")} onClick={() => setTab("overview")}>Resumen</button>
        <button className={"adm-tab" + (tab === "team" ? " active" : "")} onClick={() => setTab("team")}>Comerciales</button>
        <button className={"adm-tab" + (tab === "pipeline" ? " active" : "")} onClick={() => setTab("pipeline")}>Salud del pipeline</button>
        <button className={"adm-tab" + (tab === "finance" ? " active" : "")} onClick={() => setTab("finance")}>Finanzas</button>
      </div>

      <KPIRow cols={6} items={[
        { accent: true, icon: Icons.Euro, label: "Facturación empresa", // Espacio DURO en la unidad: con 6 columnas la tarjeta se estrecha y "k €"
        // se partía en dos líneas, dejando el € huérfano debajo del número.
        value: facturacionEmpresa > 0 ? (facturacionEmpresa / 1000).toFixed(1) : "0", unit: "k €", sub: "Venta, honorarios, comisiones y reforma", bar: 0 },
        // A la derecha de "Facturación empresa" y con el subtítulo que declara la
        // contenencia: estos honorarios YA están dentro de esa cifra (decisión D4).
        { icon: Icons.Receipt, label: "Honorarios facturados", value: _eurKpi(honorariosFacturados), unit: "€", fin: "fin-in", sub: "incluido en facturación empresa", bar: 0 },
        // Lo que REVIN PAGA a su gente: gasto, no ingreso. La etiqueta ya lo
        // decía; ahora el color también.
        { icon: Icons.Trophy, label: "Comisiones al equipo", value: _eurKpi(comisiones.total), unit: "€", fin: "fin-out",
          sub: comisiones.previsto > 0
            ? `${comisiones.nMaterializadas} pagadas · +${fmtEUR(comisiones.previsto)} en previsión`
            : `${comisiones.nMaterializadas} operaci${comisiones.nMaterializadas === 1 ? "ón" : "ones"} · sin previsiones`,
          bar: 0 },
        { icon: Icons.Building, label: "Inmuebles activos", value: inmueblesActivos, sub: `${(DATA.INMUEBLES || []).length} en cartera total` },
        { icon: Icons.Users, label: "Contactos", value: contactos, sub: `${(DATA.CLIENTS || []).filter(c => c.cooling && c.typeKey !== "proveedor").length} enfriándose` },
        { icon: Icons.Flame, label: "En riesgo", value: enRiesgo, sub: "clientes + inmuebles" },
      ]}/>

      <div className="dash-2col">
        <Card title="Rendimiento del equipo" right={<Pill tone="brand">{(DATA.PERIOD_LABEL) || "MES ACTUAL"}</Pill>}>
          {team.length === 0 && (
            <div className="empty" style={{padding: 20}}>
              <div className="icon-wrap"><Icons.Users/></div>
              Aún no hay comerciales. <a onClick={() => goTo("equipo")} style={{color: "var(--revin-red)", fontWeight: 600, cursor: "pointer"}}>Añadir el primero →</a>
            </div>
          )}
          {team.map((p, i) => (
            <div className={"leader-row" + (i === 0 && p.hasData ? " top1" : "")} key={p.initials}>
              <div className="pos">{i + 1}</div>
              <div className="who">
                <div className="ava">{p.initials}</div>
                <div>
                  <div className="name">{p.name}</div>
                  <div className="role">{p.role}</div>
                </div>
              </div>
              {/* Facturado por cada comercial: ingreso para REVIN. */}
              <div className={"num " + (p.hasData ? "fin-amt fin-in" : "fin-info")}>
                {p.hasData ? fmtEUR(p.facturado) : "—"}
              </div>
              <div className="num" style={{color: "var(--fg-3)"}}>{p.hasData ? p.deals + " cierres" : "Sin datos"}</div>
              <div className="target-bar">
                <div className="bar"><span style={{width: p.pct + "%"}}/></div>
                <div className="pct">{p.pct}%</div>
              </div>
            </div>
          ))}
        </Card>

        <Card title="Embudo global del mes">
          <div className="funnel-stack">
            {[
              { lbl: "Leads", val: 142, pct: 100, cls: "" },
              { lbl: "Cualificados", val: 86, pct: 60, cls: "info" },
              { lbl: "Visitas", val: 42, pct: 30, cls: "warn" },
              { lbl: "Ofertas", val: 12, pct: 9, cls: "red" },
              { lbl: "Cerrados", val: 4, pct: 3, cls: "success" },
            ].map((f, i) => (
              <div className="funnel-row" key={i}>
                <span className="lbl">{f.lbl}</span>
                <div className={"funnel-bar " + f.cls} style={{width: Math.max(f.pct, 5) + "%"}}>
                  {f.val}<span className="pct">{f.pct}%</span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, marginTop: 20}}>
        <Card title="Inventario por fase">
          <window.DemoBlockMark bloque="PIPELINE_DONUT">Gráfico de ejemplo.</window.DemoBlockMark>
          <div style={{display: "flex", gap: 20, alignItems: "center"}}>
            <div className="donut"/>
            <div className="donut-legend">
              {DATA.PIPELINE_DONUT.map((p, i) => (
                <div className="legend-item" key={i}>
                  <span className="swatch" style={{background: p.color}}/>{p.lbl}
                  <span className="val">{p.val}</span>
                </div>
              ))}
            </div>
          </div>
        </Card>

        <div className="cooling-card">
          <div className="cc-h">
            <h3><Icons.Flame/> Inmuebles enfriándose</h3>
            <Pill tone="red">7</Pill>
          </div>
          {DATA.INMUEBLES.filter(p => p.cooling).map(p => (
            <div className="cooling-row" key={p.id}>
              <div className="ava">{p.comercializador}</div>
              <div className="cooling-body">
                <div className="cooling-name">{p.addr}</div>
                <div className="cooling-sub">{p.status} · {p.town}</div>
              </div>
              <div className="cooling-days">{p.days}d</div>
            </div>
          ))}
          <div className="cooling-row" style={{cursor: "default", color: "var(--fg-3)", fontSize: 11, justifyContent: "center"}}>
            +5 más en estado crítico
          </div>
        </div>
      </div>
    </>
  );
};

// =========================================================================
// PORTAL CLIENTE (vista del propietario)
// =========================================================================

const PortalCliente = () => {
  const { Icons, DATA } = window;
  const cp = DATA.CLIENT_PORTAL_DATA;

  return (
    <div className="cp-app">
      <div className="cp-top">
        <div className="brand">
          <img src={(window.__resources && window.__resources.logoWhite) || "revin/assets/logo-wordmark-white.png"} alt="REVIN"/>
          <span className="div"/>
          <span className="label">Portal Propietario</span>
        </div>
        <nav className="nav">
          <a className="active">Mi inmueble</a>
          <a>Documentos</a>
          <a>Mensajes</a>
          <a>Comparables</a>
        </nav>
        <div className="right">
          <div className="who">
            <div className="ava">{cp.ownerInitials}</div>
            <div>
              <div className="name">{cp.ownerName} Cano</div>
              <div className="role">Propietario</div>
            </div>
          </div>
        </div>
      </div>

      <window.DemoBlockMark bloque="CLIENT_PORTAL_DATA">
        Vista de demostración. Ningún dato de esta pantalla es real.
      </window.DemoBlockMark>

      <div className="cp-hero">
        <div className="cp-hero-inner">
          <div>
            <div className="eyebrow">SEGUIMIENTO DE OPERACIÓN</div>
            <h1>HOLA <span className="red">{(cp.ownerName || "").toUpperCase()}.</span><br/>TU PISO SIGUE<br/>EN MARCHA.</h1>
            <div className="addr">{cp.addr} · {cp.town}</div>
            <div className="id">REF: {cp.property} · ALTA 22 ENE 2025</div>
          </div>
          <div>
            <div className="photo-frame">FOTO TU INMUEBLE</div>
          </div>
        </div>
      </div>

      <div className="cp-strip">
        <div className="cp-strip-inner">
          {cp.stats.map((s, i) => (
            <div className="cp-stat" key={i}>
              <div className="lbl">{s.lbl}</div>
              <div className="val">{s.val}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="cp-body">
        <div className="cp-milestones">
          <div className="cp-milestones-h">
            <h2>El recorrido de tu operación</h2>
            <div className="sub">Te mostramos cada paso del proceso REVIN para que sepas exactamente dónde estamos.</div>
          </div>
          {cp.milestones.map((m, i) => (
            <div className={"cp-mile-row" + (m.done ? " done" : "") + (m.active ? " active" : "")} key={i}>
              <div className="cp-mile-num">{m.done ? "✓" : m.num}</div>
              <div>
                <div className="cp-mile-h">
                  <div className="cp-mile-title">{m.title}</div>
                  {m.active && <Pill tone="danger">FASE ACTUAL</Pill>}
                  {m.done && <Pill tone="success">Completada</Pill>}
                </div>
                <div className="cp-mile-text">{m.text}</div>
                <div className="cp-mile-date">{m.date}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="cp-side">
          <div className="cp-card">
            <div className="cp-card-h"><h3>Tu comercial</h3></div>
            <div className="cp-card-b">
              <div className="cp-agent">
                <div className="ava">{cp.agent.initials}</div>
                <div className="info">
                  <div className="name">{cp.agent.name}</div>
                  <div className="role">{cp.agent.role}</div>
                </div>
              </div>
              <div className="cp-actions">
                <a className="btn wa"><Icons.Whatsapp/> Escribir por WhatsApp</a>
                <button className="btn secondary"><Icons.Phone/> Llamar</button>
                <button className="btn secondary"><Icons.Mail/> Email</button>
              </div>
            </div>
          </div>

          <div className="cp-card">
            <div className="cp-card-h"><h3>Tus documentos</h3></div>
            <div className="cp-card-b">
              {cp.docs.map((d, i) => (
                <div className="cp-doc" key={i}>
                  <div className="ico">PDF</div>
                  <div className="info">
                    <div className="name">{d.name}</div>
                    <div className="sub">{d.kind} · {d.size}</div>
                  </div>
                  <Icons.Download size={16} className="dl"/>
                </div>
              ))}
            </div>
          </div>

          <div className="cp-card">
            <div className="cp-card-h"><h3>Resumen mensual</h3></div>
            <div className="cp-card-b">
              <div style={{fontSize: 13, color: "var(--fg-2)", lineHeight: 1.6}}>
                En marzo recibimos <b style={{color: "var(--fg-1)"}}>12 contactos nuevos</b> a través de Idealista y Fotocasa. Realizamos <b style={{color: "var(--fg-1)"}}>5 visitas</b> y la oferta más alta hasta ahora ha sido de <b className="fin-in">168.000 €</b>.
              </div>
              <button className="btn secondary" style={{marginTop: 12, width: "100%", justifyContent: "center"}}>
                <Icons.Doc/> Ver informe completo
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.AdminDashboard = AdminDashboard;
window.PortalCliente = PortalCliente;