// =========================================================================
// EQUIPO / COMERCIALES — Vista del Admin
// =========================================================================

// Helpers globales — filtros de equipo coherentes en toda la app
const isComercial = (m) => m.role === "Comercial" || m.role === "Captadora" || m.role === "Captador";
const realComerciales = () => (window.DATA?.TEAM || []).filter(isComercial);
const allTeam = () => window.DATA?.TEAM || [];
// Comerciales reales + cualquier miembro (p.ej. un admin como Carlos) que TENGA
// comisiones asignadas. Así el rendimiento del equipo refleja también las
// operaciones cerradas por admins, sin reasignar sus comisiones.
const comercialesConComisiones = () => {
  const base = realComerciales();
  const idsCom = new Set((window.DATA?.COMMISSIONS || []).flatMap(c => [c.captador, c.comercializador]).filter(Boolean));
  const extra = allTeam().filter(m => idsCom.has(m.id) && !base.some(b => b.id === m.id));
  return [...base, ...extra];
};
window.RevinTeam = { isComercial, realComerciales, allTeam, comercialesConComisiones };

// =========================================================================
// AddComercialModal — crear comercial fantasma + opción de invitar
// =========================================================================
const AddComercialModal = ({ onClose, onSaved }) => {
  const { Icons } = window;
  const [form, setForm] = React.useState({
    nombre: "", iniciales: "", email: "", telefono: "",
    rol: "comercial", comision_pct: 30, objetivo_mensual: 0, estado: "activo",
  });
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);
  const [okMsg, setOkMsg] = React.useState(null);

  // Auto-iniciales desde el nombre
  React.useEffect(() => {
    if (form.iniciales) return;
    const parts = form.nombre.trim().split(/\s+/).filter(Boolean).slice(0, 2);
    if (parts.length) {
      setForm(f => ({ ...f, iniciales: parts.map(p => p[0]).join("").toUpperCase() }));
    }
  }, [form.nombre]);

  const setF = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const save = async (e) => {
    e.preventDefault();
    setBusy(true); setErr(null); setOkMsg(null);
    try {
      const sb = window.RevinSupabase?.getClient();
      if (!sb) throw new Error("Conéctate a Supabase para crear comerciales (botón superior derecho).");
      const payload = {
        nombre: form.nombre.trim(),
        iniciales: form.iniciales.trim().toUpperCase().slice(0, 3),
        email: form.email.trim().toLowerCase(),
        telefono: form.telefono.trim() || null,
        rol: form.rol,
        estado: form.estado,
        comision_pct: form.comision_pct ? Number(form.comision_pct) : null,
        objetivo_mensual: form.objetivo_mensual ? Number(form.objetivo_mensual) : null,
      };
      if (!payload.nombre || !payload.email || !payload.iniciales) {
        throw new Error("Nombre, iniciales y email son obligatorios.");
      }
      // org_id por el helper central (Fase 0): un comercial nuevo nace en la org
      // de la sesión. En conflicto por email (upsert) reescribe el mismo org, no-op.
      const { error } = await sb.from("usuarios").upsert(await window.RevinSupabase.conOrg(payload), { onConflict: "email" });
      if (error) throw error;

      setOkMsg(`✓ ${payload.nombre} añadido al equipo. Ahora puedes invitarle a entrar al CRM.`);
      onSaved && onSaved();
    } catch (e) {
      console.error(e);
      setErr(e.message || "Error al guardar");
    } finally {
      setBusy(false);
    }
  };

  const sendInvite = () => {
    const subject = encodeURIComponent("Bienvenida al CRM de REVIN");
    const url = window.location.href.split("?")[0];
    const body = encodeURIComponent(
`Hola ${form.nombre.split(" ")[0] || ""},

Te hemos dado de alta en nuestro CRM. Para acceder:

1. Entra en: ${url}
2. Pulsa "Conectar a Supabase"
3. Regístrate con este mismo email (${form.email}) y elige tu contraseña.

Cuando lo hagas se vinculará automáticamente a tu ficha y tendrás acceso a tu pipeline, tareas e inmuebles asignados.

Un saludo,
Equipo REVIN`
    );
    window.open(`mailto:${form.email}?subject=${subject}&body=${body}`);
  };

  return (
    <div className="sb-login-back" onClick={onClose}>
      <form className="sb-login" style={{width: 520}} onClick={(e) => e.stopPropagation()} onSubmit={save}>
        <div className="sb-login-h">
          <div>
            <div className="eyebrow red">Nuevo comercial</div>
            <h2 className="sb-login-title" style={{marginTop: 6, fontSize: 20}}>Añadir al equipo</h2>
          </div>
          <button type="button" className="btn ghost xs" onClick={onClose}><Icons.X/></button>
        </div>

        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
          <div className="field" style={{gridColumn: "1 / -1"}}>
            <label className="field-lbl">Nombre completo *</label>
            <input className="input" value={form.nombre} onChange={setF("nombre")} placeholder="Hiurma Rodríguez González" required autoFocus/>
          </div>
          <div className="field">
            <label className="field-lbl">Iniciales *</label>
            <input className="input" value={form.iniciales} onChange={setF("iniciales")} placeholder="HR" maxLength={3} required/>
          </div>
          <div className="field">
            <label className="field-lbl">Rol</label>
            <select className="select" value={form.rol} onChange={setF("rol")}>
              <option value="comercial">Comercial</option>
              <option value="captador">Captador/a</option>
              <option value="admin">Admin</option>
            </select>
          </div>
          <div className="field" style={{gridColumn: "1 / -1"}}>
            <label className="field-lbl">Email *</label>
            <input className="input" type="email" value={form.email} onChange={setF("email")} placeholder="hiurma@redefiniendotuespacio.com" required/>
          </div>
          <div className="field">
            <label className="field-lbl">Teléfono</label>
            <input className="input" value={form.telefono} onChange={setF("telefono")} placeholder="+34 614 00 96 07"/>
          </div>
          <div className="field">
            <label className="field-lbl">Comisión (%)</label>
            <input className="input" type="number" value={form.comision_pct} onChange={setF("comision_pct")} min="0" max="100" step="1"/>
          </div>
          <div className="field">
            <label className="field-lbl">Objetivo mensual (€)</label>
            <input className="input" type="number" value={form.objetivo_mensual} onChange={setF("objetivo_mensual")} min="0" step="100"/>
          </div>
          <div className="field">
            <label className="field-lbl">Estado</label>
            <select className="select" value={form.estado} onChange={setF("estado")}>
              <option value="activo">Activo</option>
              <option value="inactivo">Inactivo</option>
              <option value="pausado">Pausado</option>
            </select>
          </div>
        </div>

        {err && <div className="sb-login-err"><Icons.Alert/><span>{err}</span></div>}
        {okMsg && (
          <div style={{background: "var(--success-bg)", color: "var(--success-fg)", padding: 12, borderRadius: 4, marginTop: 16, fontSize: 13, lineHeight: 1.5}}>
            {okMsg}
            <div style={{marginTop: 10, display: "flex", gap: 8}}>
              <button type="button" className="btn xs primary" onClick={sendInvite}><Icons.Mail/> Enviar invitación por email</button>
              <button type="button" className="btn xs secondary" onClick={onClose}>Cerrar</button>
            </div>
          </div>
        )}

        {!okMsg && (
          <div className="sb-login-actions">
            <button type="button" className="btn ghost" onClick={onClose} disabled={busy}>Cancelar</button>
            <button type="submit" className="btn primary" disabled={busy}>
              {busy ? "Guardando…" : <><Icons.Plus/> Crear comercial</>}
            </button>
          </div>
        )}

        <div className="sb-login-foot">
          <Icons.Info size={12}/>
          <span>El comercial se crea "fantasma" (sin login). Para activarlo, envíale la invitación por email — al registrarse con ese mismo email se vinculará automáticamente.</span>
        </div>
      </form>
    </div>
  );
};

// =========================================================================
// PctEditor — % de comisión por defecto del comercial (Fase 4.1 del motor)
// =========================================================================
// Este % es la SEMILLA de la previsión de cada operación, no su valor final:
// `comisiones_equipo.pct_aplicado` es un override por operación (hay acuerdos
// especiales). Por eso cambiar esto NO recalcula previsiones ya guardadas —
// serían acuerdos ya cerrados, y reescribirlos a posteriori falsearía el
// histórico.
//
// Se aplica sobre los HONORARIOS que cobra REVIN, nunca sobre el precio de
// venta (CLAUDE.md §4).
//
// `onSaved` en vez de `window.RevinData.reload()`: ese reload sube `dataVersion`
// y App.jsx remonta el `view-stage` entero (key={dataVersion}), lo que resetea
// la navegación y te escupe al dashboard tras editar un %. Aquí se recarga
// `window.DATA` y se re-renderiza solo esta vista, que es lo que ya hacía
// AddComercialModal.
const PctEditor = ({ miembro, onSaved }) => {
  const { Icons } = window;
  const RS = window.RevinSupabase;
  const sb = miembro.supabase || {};
  const live = !!(window.RevinData && window.RevinData.isLive);

  const [editing, setEditing] = React.useState(false);
  const [val, setVal] = React.useState(sb.comision_pct == null ? "" : String(sb.comision_pct));
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const cancelar = () => {
    setVal(sb.comision_pct == null ? "" : String(sb.comision_pct));
    setErr(null); setEditing(false);
  };

  const guardar = async () => {
    setBusy(true); setErr(null);
    try {
      await RS.actualizarComisionPct(sb.id, val === "" ? null : val);
      if (onSaved) await onSaved();
      setEditing(false);
    } catch (e) {
      console.error(e);
      setErr(e.message || "Error al guardar");
    } finally {
      setBusy(false);
    }
  };

  if (!editing) {
    return (
      <div style={{display: "flex", alignItems: "center", gap: 8}}>
        <div style={{fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: ".02em", color: "var(--fg-1)"}}>
          {sb.comision_pct != null ? sb.comision_pct + "%" : "—"}
        </div>
        {live && (
          <button className="btn ghost xs" onClick={() => setEditing(true)}
                  aria-label={`Editar comisión de ${miembro.name}`}>Editar</button>
        )}
      </div>
    );
  }

  return (
    <div>
      <div style={{display: "flex", alignItems: "center", gap: 4}}>
        <input className="input" type="number" min="0" max="100" step="0.01" value={val} autoFocus
               style={{width: 78, padding: "4px 6px", fontSize: 13}}
               aria-label={`Comisión por defecto de ${miembro.name}`}
               onChange={(e) => setVal(e.target.value)}
               onKeyDown={(e) => { if (e.key === "Enter") guardar(); if (e.key === "Escape") cancelar(); }}/>
        <span style={{fontSize: 13, color: "var(--fg-2)"}}>%</span>
        <button className="btn primary xs" onClick={guardar} disabled={busy}
                aria-label={`Guardar comisión de ${miembro.name}`}>
          {busy ? "…" : <Icons.Check/>}
        </button>
        <button className="btn ghost xs" onClick={cancelar} disabled={busy}
                aria-label={`Cancelar edición de ${miembro.name}`}><Icons.X/></button>
      </div>
      {err && <div style={{fontSize: 11, color: "var(--danger-fg)", marginTop: 4}}>{err}</div>}
    </div>
  );
};

// =========================================================================
// EquipoView — listado real, sin métricas inventadas
// =========================================================================

const EquipoView = () => {
  const { Icons, DATA, PageHeader, Card, fmtEUR } = window;
  const [tab, setTab] = React.useState("all");
  const [showAdd, setShowAdd] = React.useState(false);
  const [refresh, setRefresh] = React.useState(0);

  // Solo comerciales (no admin) para los conteos de la cabecera
  const team = allTeam();
  const comerciales = realComerciales();

  let list = team;
  if (tab === "comerciales") list = comerciales;
  // OJO CON LA RUTA: en el shape de TEAM `estado` va al NIVEL SUPERIOR
  // (`m.estado`), no dentro de `m.supabase` — a diferencia de CLIENTS, donde sí
  // vive en `c.supabase.estado`. Leerlo por la ruta de CLIENTS daba `undefined`,
  // que nunca es "inactivo": David y Natalia salían ACTIVO estando inactivos en
  // BD, y las pestañas Activos/Inactivos no filtraban nada.
  if (tab === "activos")   list = team.filter(t => t.estado !== "inactivo");
  if (tab === "inactivos") list = team.filter(t => t.estado === "inactivo");
  if (tab === "admin")     list = team.filter(t => t.role === "Admin");

  // Calcular métricas REALES desde comisiones (todas vacías = 0 hasta que llenemos esa tabla)
  const metricsBy = (id) => {
    const comms = (DATA.COMMISSIONS || []).filter(c => c.captador === id || c.comercializador === id);
    const facturado = comms.reduce((s, c) => s + (c.captador === id ? c.capt : 0) + (c.comercializador === id ? c.com : 0), 0);
    return { facturado, deals: comms.length, hasData: comms.length > 0 };
  };

  const onSaved = async () => {
    // Recargar datos desde Supabase
    try {
      const data = await window.RevinSupabase.loadDataFromSupabase();
      window.DATA = data;
      setRefresh(r => r + 1);
    } catch (e) { console.error(e); }
  };

  return (
    <>
      <PageHeader
        eyebrow={`${comerciales.length} comerciales · ${team.length - comerciales.length} otros perfiles`}
        title="EQUIPO"
        sub="Gestión de comerciales, captadores y admins. Filtra por estado y rendimiento."
        actions={<>
          <button className="btn secondary"><Icons.Download/> Exportar CSV</button>
          <button className="btn primary" onClick={() => setShowAdd(true)}><Icons.Plus/> Añadir comercial</button>
        </>}
      />

      <div className="fbar">
        <button className={"fchip" + (tab === "all" ? " active" : "")}         onClick={() => setTab("all")}>Todos · {team.length}</button>
        <button className={"fchip" + (tab === "comerciales" ? " active" : "")} onClick={() => setTab("comerciales")}>Comerciales · {comerciales.length}</button>
        <button className={"fchip" + (tab === "activos" ? " active" : "")}     onClick={() => setTab("activos")}>Activos</button>
        <button className={"fchip" + (tab === "inactivos" ? " active" : "")}   onClick={() => setTab("inactivos")}>Inactivos</button>
        <button className={"fchip" + (tab === "admin" ? " active" : "")}       onClick={() => setTab("admin")}>Admin</button>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 16, marginBottom: 24}}>
        {list.map(m => {
          const mx = metricsBy(m.id);
          const sb = m.supabase || {};
          const isInactive = m.estado === "inactivo";   // nivel superior, ver nota arriba
          return (
            <div key={sb.id || m.initials} className="card" style={{padding: 0, opacity: isInactive ? 0.7 : 1}}>
              <div style={{padding: "18px 18px 14px", borderBottom: "1px solid var(--border-3)", display: "flex", alignItems: "flex-start", gap: 14}}>
                <div className="sb-avatar" style={{width: 56, height: 56, fontSize: 18, background: m.role === "Admin" ? "var(--revin-black)" : (isInactive ? "var(--neutral-500)" : "var(--revin-red)")}}>
                  {m.initials}
                </div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 15, fontWeight: 700, lineHeight: 1.2}}>{m.name}</div>
                  <div style={{fontSize: 11, color: "var(--fg-3)", letterSpacing: ".06em", textTransform: "uppercase", marginTop: 2}}>{m.role}</div>
                  <div style={{display: "flex", gap: 4, marginTop: 6, flexWrap: "wrap"}}>
                    {isInactive ? <Pill tone="neutral">INACTIVO</Pill> : <Pill tone="success">ACTIVO</Pill>}
                    {sb.auth_user_id ? <Pill tone="info">CON LOGIN</Pill> : <Pill tone="warning">SIN LOGIN</Pill>}
                  </div>
                </div>
                <button className="btn xs ghost" title="Más"><Icons.MoreH/></button>
              </div>

              <div style={{padding: 14, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
                <div>
                  <div className="kv-lbl">Facturado mes</div>
                  <div className={mx.hasData ? "fin-in" : "fin-info"}
                       style={{fontFamily: "var(--font-display)", fontSize: 18, letterSpacing: ".02em"}}>
                    {mx.hasData ? fmtEUR(mx.facturado) : "Sin datos"}
                  </div>
                </div>
                <div>
                  <div className="kv-lbl">Comisión base</div>
                  <PctEditor miembro={m} onSaved={onSaved}/>
                </div>
                <div>
                  <div className="kv-lbl">Cierres</div>
                  <div style={{fontSize: 14, fontWeight: 600, color: mx.hasData ? "var(--fg-1)" : "var(--fg-3)"}}>{mx.hasData ? mx.deals : "—"}</div>
                </div>
                <div>
                  <div className="kv-lbl">Objetivo mensual</div>
                  <div style={{fontSize: 14, fontWeight: 600}}>{sb.objetivo_mensual ? fmtEUR(sb.objetivo_mensual) : "—"}</div>
                </div>
              </div>

              <div style={{padding: "10px 14px", borderTop: "1px solid var(--border-3)", display: "flex", gap: 6, background: "var(--bg-inset)", alignItems: "center"}}>
                {sb.telefono && <a className="btn xs secondary" href={`tel:${sb.telefono.replace(/\s/g, "")}`}><Icons.Phone/></a>}
                {sb.email && <a className="btn xs secondary" href={`mailto:${sb.email}`}><Icons.Mail/></a>}
                <div style={{marginLeft: "auto", fontSize: 10, color: "var(--fg-3)", fontFamily: "var(--font-mono)"}}>
                  {sb.email}
                </div>
              </div>
            </div>
          );
        })}

        {list.length === 0 && (
          <div className="empty" style={{gridColumn: "1 / -1"}}>
            <div className="icon-wrap"><Icons.Users/></div>
            No hay miembros en esta vista.
          </div>
        )}
      </div>

      <Card title={`Todos los miembros · ${team.length}`} b={false}>
        <table className="tbl">
          <thead><tr>
            <th></th><th>Nombre</th><th>Email</th><th>Teléfono</th><th>Rol</th><th>Estado</th><th className="num">Comisión</th><th>Acceso</th>
          </tr></thead>
          <tbody>
            {team.map(m => {
              const sb = m.supabase || {};
              return (
                <tr key={sb.id || m.initials}>
                  <td style={{width: 40}}>
                    <div className="kb-ava" style={{width: 28, height: 28, fontSize: 11, background: m.role === "Admin" ? "var(--revin-black)" : (m.estado === "inactivo" ? "var(--neutral-500)" : "var(--revin-red)")}}>{m.initials}</div>
                  </td>
                  <td><b>{m.name}</b></td>
                  <td style={{fontFamily: "var(--font-mono)", fontSize: 11}}>{sb.email || "—"}</td>
                  <td style={{fontFamily: "var(--font-mono)", fontSize: 11}}>{sb.telefono || "—"}</td>
                  <td><Pill tone={m.role === "Admin" ? "brand" : "neutral"}>{m.role}</Pill></td>
                  <td><Pill tone={m.estado === "inactivo" ? "neutral" : "success"}>{m.estado === "inactivo" ? "INACTIVO" : "ACTIVO"}</Pill></td>
                  <td className="num">{sb.comision_pct != null ? sb.comision_pct + "%" : "—"}</td>
                  <td>{sb.auth_user_id ? <Pill tone="info">CON LOGIN</Pill> : <Pill tone="warning">SIN LOGIN</Pill>}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>

      {showAdd && <AddComercialModal onClose={() => setShowAdd(false)} onSaved={onSaved}/>}
    </>
  );
};

window.EquipoView = EquipoView;
window.AddComercialModal = AddComercialModal;
window.PctEditor = PctEditor;