// Gestión de clientes — CRUD de empresas + asignación de usuarios cliente
function GestionClientes() {
  const u = DesasfAPI.getCurrentUser() || {};
  // El sidebar ya oculta este apartado a quien no tiene clientes.ver; si se
  // llega sin permiso (URL directa / cambio en vivo), se redirige sin avisos.
  const autorizado  = DesasfAPI.hasPerm('clientes.ver');
  const puedeCrear  = DesasfAPI.hasPerm('clientes.crear');
  const puedeEditar = DesasfAPI.hasPerm('clientes.editar');
  const puedeBorrar = DesasfAPI.hasPerm('clientes.eliminar');

  const [empresas,    setEmpresas]    = React.useState([]);
  const [vendedores,  setVendedores]  = React.useState([]);
  const [loading,     setLoading]     = React.useState(true);
  const [search,      setSearch]      = React.useState('');
  const [editing,     setEditing]     = React.useState(null);
  const [usuariosVinc, setUsuariosVinc] = React.useState([]);
  const [clientesLibres, setClientesLibres] = React.useState([]);
  const [saving,      setSaving]      = React.useState(false);
  const [err,         setErr]         = React.useState('');
  const [tipoFil,     setTipoFil]     = React.useState('');
  const [vendedorFil, setVendedorFil] = React.useState('');

  function recargar() {
    setLoading(true);
    Promise.all([
      DesasfAPI.get('/clientes?limit=500'),
      DesasfAPI.get('/config/usuarios?rol=vendedor').catch(() => []),
    ]).then(([emps, vends]) => {
      setEmpresas(emps.rows || []);
      setVendedores(Array.isArray(vends) ? vends : []);
    }).catch(e => setErr(e.message))
      .finally(() => setLoading(false));
  }
  React.useEffect(() => { if (autorizado) recargar(); else setLoading(false); }, []);

  React.useEffect(() => {
    if (!autorizado || loading || !empresas.length) return;
    const reqId = window._desasfEditEmpresaId;
    if (reqId) {
      const emp = empresas.find(e => e.id === Number(reqId));
      if (emp) openEdit(emp);
      delete window._desasfEditEmpresaId;
    }
  }, [loading, empresas.length]);

  function openEdit(emp) {
    setErr('');
    setEditing(emp || {
      razon_social: '', ruc: '', direccion: '', sector: '',
      tamano: '', tipo_cliente: 'estandar', credito_limite: 0,
      dias_prom_pago: 30, vendedor_id: '',
    });
    if (emp?.id) cargarUsuarios(emp.id);
    else { setUsuariosVinc([]); setClientesLibres([]); }
  }

  function cargarUsuarios(empresaId) {
    Promise.all([
      DesasfAPI.get(`/clientes/${empresaId}/usuarios`).catch(() => []),
      DesasfAPI.get('/config/usuarios?rol=cliente').catch(() => []),
    ]).then(([vinc, todos]) => {
      const vincList = Array.isArray(vinc) ? vinc : [];
      const allList  = Array.isArray(todos) ? todos : [];
      const vincIds  = new Set(vincList.map(v => v.id));
      setUsuariosVinc(vincList);
      setClientesLibres(allList.filter(c => !vincIds.has(c.id)));
    });
  }

  async function guardar() {
    if (!editing.razon_social?.trim() || !editing.ruc?.trim()) {
      setErr('Razón social y RUC son obligatorios.'); return;
    }
    if (!/^\d{11}$/.test(editing.ruc.trim())) {
      setErr('El RUC debe tener exactamente 11 dígitos.'); return;
    }
    setErr(''); setSaving(true);
    try {
      const payload = {
        razon_social:   editing.razon_social.trim(),
        ruc:            editing.ruc.trim(),
        direccion:      editing.direccion || null,
        sector:         editing.sector || null,
        tamano:         editing.tamano || null,
        tipo_cliente:   editing.tipo_cliente || 'estandar',
        credito_limite: Number(editing.credito_limite) || 0,
        dias_prom_pago: Number(editing.dias_prom_pago) || 30,
        vendedor_id:    editing.vendedor_id ? Number(editing.vendedor_id) : null,
      };
      let id = editing.id;
      if (id) {
        await DesasfAPI.put('/clientes/' + id, payload);
      } else {
        const r = await DesasfAPI.post('/clientes', payload);
        id = r.id;
        setEditing({ ...editing, id });
      }
      recargar();
      if (id) cargarUsuarios(id);
    } catch (e) {
      setErr(e.message || 'No se pudo guardar.');
    } finally { setSaving(false); }
  }

  async function eliminar(emp) {
    if (!confirm(`¿Desactivar la empresa "${emp.razon_social}"?\nLos usuarios vinculados perderán acceso. La acción se puede revertir contactando a soporte.`)) return;
    try {
      await DesasfAPI.delete('/clientes/' + emp.id);
      if (editing?.id === emp.id) setEditing(null);
      recargar();
    } catch (e) { alert('Error: ' + e.message); }
  }

  async function vincularUsuario(userId) {
    if (!editing?.id || !userId) return;
    try {
      await DesasfAPI.post(`/clientes/${editing.id}/usuarios/${userId}`, {});
      cargarUsuarios(editing.id);
      recargar();
    } catch (e) { alert('Error: ' + e.message); }
  }

  async function desvincularUsuario(userId) {
    if (!editing?.id || !userId) return;
    if (!confirm('¿Desvincular este usuario de la empresa?')) return;
    try {
      await DesasfAPI.delete(`/clientes/${editing.id}/usuarios/${userId}`);
      cargarUsuarios(editing.id);
      recargar();
    } catch (e) { alert('Error: ' + e.message); }
  }

  function verPerfil(emp) {
    window._desasfCurrentCliente = emp.id;
    navigate('clientes-detalle');
  }

  React.useEffect(() => { if (!autorizado) navigate('dashboard'); }, [autorizado]);
  if (!autorizado) return null;

  const filtered = empresas.filter(e => {
    if (search.trim()) {
      const q = search.toLowerCase();
      if (!e.razon_social.toLowerCase().includes(q) && !(e.ruc || '').includes(search)) return false;
    }
    if (tipoFil && e.tipo_cliente !== tipoFil) return false;
    if (vendedorFil && String(e.vendedor_nombre || '') !== vendedorFil) return false;
    return true;
  });

  const totales = {
    total:    empresas.length,
    premium:  empresas.filter(e => e.tipo_cliente === 'premium').length,
    sinVend:  empresas.filter(e => !e.vendedor_nombre).length,
  };

  function fmtMoney(n) {
    n = Number(n || 0);
    if (n >= 1_000_000) return 'S/ ' + (n / 1_000_000).toFixed(1) + 'M';
    if (n >= 1_000)     return 'S/ ' + (n / 1_000).toFixed(0) + 'k';
    return 'S/ ' + n.toLocaleString('es-PE');
  }

  return (
    <div className="app">
      <Sidebar active="gestion-clientes"/>
      <Topbar crumbs={['Operación', 'Empresas clientes']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Empresas clientes</h1>
            <p>{totales.total} empresas registradas · {totales.premium} premium · {totales.sinVend} sin asistente técnico comercial</p>
          </div>
          <div className="row">
            <button className="btn btn--ghost" onClick={() => exportCSV(
              'empresas-' + new Date().toISOString().slice(0,10) + '.csv',
              empresas,
              [
                { label: 'Razón social',   value: 'razon_social' },
                { label: 'RUC',            value: 'ruc' },
                { label: 'Sector',         value: r => r.sector || '' },
                { label: 'Tipo',           value: 'tipo_cliente' },
                { label: 'Crédito límite', value: r => Number(r.credito_limite || 0) },
                { label: 'Crédito usado',  value: r => Number(r.credito_usado || 0) },
                { label: 'Días prom. pago', value: r => Number(r.dias_prom_pago || 0) },
                { label: 'Asistente Técnico comercial', value: r => r.vendedor_nombre || '' },
                { label: 'Solicitudes',    value: r => Number(r.total_solicitudes || 0) },
              ]
            )}>{Icon.download}<span>Exportar</span></button>
            {puedeCrear && (
              <button className="btn btn--accent" onClick={() => openEdit(null)}>
                {Icon.plus}<span>Nueva empresa</span>
              </button>
            )}
          </div>
        </div>

        <div className="kpi-grid">
          <div className="kpi">
            <div className="kpi__label">Empresas activas</div>
            <div className="kpi__value">{totales.total}</div>
            <span className="kpi__delta up">{totales.premium} premium</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, totales.total * 8) + '%' }}/></div>
          </div>
          <div className="kpi kpi--accent">
            <div className="kpi__label">Sin asist. téc. comercial</div>
            <div className="kpi__value">{totales.sinVend}</div>
            <span className="kpi__delta down">requieren asignación</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, totales.sinVend * 18) + '%' }}/></div>
          </div>
          <div className="kpi kpi--ok">
            <div className="kpi__label">Crédito total otorgado</div>
            <div className="kpi__value" style={{ fontSize: 22 }}>
              {fmtMoney(empresas.reduce((a, e) => a + Number(e.credito_limite || 0), 0))}
            </div>
            <span className="kpi__delta up">
              Usado {fmtMoney(empresas.reduce((a, e) => a + Number(e.credito_usado || 0), 0))}
            </span>
            <div className="kpi__bar"><i style={{ width: '50%' }}/></div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: editing ? '1.3fr 1fr' : '1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head">
              <div className="row" style={{ gap: 10, alignItems: 'center', flex: 1 }}>
                <input className="input" placeholder="Buscar por razón social o RUC…"
                  value={search} onChange={e => setSearch(e.target.value)}
                  style={{ height: 32, fontSize: 13, maxWidth: 300 }}/>
                <select className="input" value={tipoFil} onChange={e => setTipoFil(e.target.value)}
                  style={{ height: 32, padding: '0 8px', fontSize: 12, width: 130 }}>
                  <option value="">Tipo: todos</option>
                  <option value="estandar">Estándar</option>
                  <option value="premium">Premium</option>
                </select>
                <select className="input" value={vendedorFil} onChange={e => setVendedorFil(e.target.value)}
                  style={{ height: 32, padding: '0 8px', fontSize: 12, width: 180 }}>
                  <option value="">Asistente Técnico comercial: todos</option>
                  {Array.from(new Set(empresas.map(e => e.vendedor_nombre).filter(Boolean))).map(v => (
                    <option key={v} value={v}>{v}</option>
                  ))}
                </select>
                <span className="meta" style={{ marginLeft: 'auto' }}>{filtered.length} resultados</span>
              </div>
            </div>
            <div className="card__body" style={{ padding: 0, maxHeight: 600, overflow: 'auto' }}>
              {loading
                ? <div style={{ padding: 24, color: 'var(--ink-5)', textAlign: 'center' }}>Cargando empresas…</div>
                : (
                  <table className="tbl">
                    <thead><tr>
                      <th>Razón social</th><th>RUC</th><th>Sector / Tipo</th>
                      <th>Asist. téc. comercial</th><th style={{ textAlign: 'right' }}>Crédito</th>
                      <th className="num">Solicitudes</th><th></th>
                    </tr></thead>
                    <tbody>
                      {filtered.map(e => {
                        const credPct = e.credito_limite > 0
                          ? Math.round((Number(e.credito_usado || 0) / Number(e.credito_limite)) * 100)
                          : 0;
                        return (
                          <tr key={e.id} style={{ background: editing?.id === e.id ? 'var(--ink-9)' : '#fff' }}>
                            <td>
                              <div className="row" style={{ gap: 10 }}>
                                <div style={{ width: 32, height: 32, borderRadius: 6, background: 'var(--ink-2)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}>
                                  {(e.razon_social || '?').slice(0, 2).toUpperCase()}
                                </div>
                                <div>
                                  <div style={{ fontWeight: 600 }}>{e.razon_social}</div>
                                  <div className="muted k" style={{ fontSize: 11 }}>{e.tipo_cliente}</div>
                                </div>
                              </div>
                            </td>
                            <td className="k">{e.ruc}</td>
                            <td>
                              <div>{e.sector || '—'}</div>
                              <div className="muted" style={{ fontSize: 11 }}>{e.tipo_cliente === 'premium' ? '⭐ Premium' : 'Estándar'}</div>
                            </td>
                            <td>{e.vendedor_nombre || <span className="muted" style={{ fontSize: 11 }}>Sin asignar</span>}</td>
                            <td style={{ textAlign: 'right' }}>
                              {Number(e.credito_limite) > 0 ? (
                                <>
                                  <div style={{ fontWeight: 600 }}>{fmtMoney(e.credito_limite)}</div>
                                  <div className="muted" style={{ fontSize: 11 }}>{credPct}% usado</div>
                                </>
                              ) : (
                                <div style={{ fontWeight: 600, color: 'var(--status-ok)' }}>Ilimitado</div>
                              )}
                            </td>
                            <td className="num">{e.total_solicitudes || 0}</td>
                            <td style={{ textAlign: 'right' }}>
                              <div className="row" style={{ gap: 4, justifyContent: 'flex-end' }}>
                                <button className="btn btn--ghost btn--sm" onClick={() => verPerfil(e)}>Ver</button>
                                {puedeEditar && (
                                  <button className="btn btn--ghost btn--sm" onClick={() => openEdit(e)}>Editar</button>
                                )}
                                {puedeBorrar && (
                                  <div className="icon-btn" title="Desactivar" onClick={() => eliminar(e)}
                                    style={{ color: 'var(--status-danger)' }}>×</div>
                                )}
                              </div>
                            </td>
                          </tr>
                        );
                      })}
                      {!filtered.length && (
                        <tr><td colSpan={7} style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                          {empresas.length === 0
                            ? (puedeCrear
                              ? 'Aún no hay empresas registradas. Pulsa "Nueva empresa" para crear la primera.'
                              : 'Aún no hay empresas registradas.')
                            : 'Sin empresas que coincidan con los filtros.'}
                        </td></tr>
                      )}
                    </tbody>
                  </table>
                )}
            </div>
          </div>

          {editing && (
            <div className="card" style={{ alignSelf: 'flex-start', position: 'sticky', top: 16, maxHeight: 'calc(100vh - 80px)', display: 'flex', flexDirection: 'column' }}>
              <div className="card__head">
                <h3 style={{ fontSize: 15 }}>{editing.id ? `Editar empresa` : 'Nueva empresa'}</h3>
                <div className="icon-btn" onClick={() => setEditing(null)} style={{ fontSize: 18 }}>×</div>
              </div>
              <div className="card__body" style={{ overflow: 'auto', flex: 1 }}>
                <div style={{ display: 'grid', gap: 10 }}>
                  <div>
                    <label className="label">Razón social *</label>
                    <input className="input" value={editing.razon_social || ''}
                      onChange={e => setEditing({ ...editing, razon_social: e.target.value })}/>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    <div>
                      <label className="label">RUC *</label>
                      <input className="input k" maxLength={11} value={editing.ruc || ''}
                        onChange={e => setEditing({ ...editing, ruc: e.target.value.replace(/\D/g, '').slice(0, 11) })}/>
                    </div>
                    <div>
                      <label className="label">Sector</label>
                      <input className="input" placeholder="construccion, mineria…" value={editing.sector || ''}
                        onChange={e => setEditing({ ...editing, sector: e.target.value })}/>
                    </div>
                  </div>
                  <div>
                    <label className="label">Dirección</label>
                    <input className="input" value={editing.direccion || ''}
                      onChange={e => setEditing({ ...editing, direccion: e.target.value })}/>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    <div>
                      <label className="label">Tamaño</label>
                      <select className="input" value={editing.tamano || ''}
                        onChange={e => setEditing({ ...editing, tamano: e.target.value })}>
                        <option value="">—</option>
                        <option value="micro">Micro</option>
                        <option value="pequena">Pequeña</option>
                        <option value="mediana">Mediana</option>
                        <option value="grande">Grande</option>
                      </select>
                    </div>
                    <div>
                      <label className="label">Tipo cliente</label>
                      <select className="input" value={editing.tipo_cliente || 'estandar'}
                        onChange={e => setEditing({ ...editing, tipo_cliente: e.target.value })}>
                        <option value="estandar">Estándar</option>
                        <option value="premium">Premium</option>
                      </select>
                    </div>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                    <div>
                      <label className="label">Crédito límite (S/)</label>
                      <input className="input k" type="number" step="100" value={editing.credito_limite || 0}
                        onChange={e => setEditing({ ...editing, credito_limite: e.target.value })}/>
                      <div className="muted" style={{ fontSize: 11, marginTop: 4 }}>0 = crédito ilimitado</div>
                    </div>
                    <div>
                      <label className="label">Días prom. pago</label>
                      <input className="input k" type="number" value={editing.dias_prom_pago || 30}
                        onChange={e => setEditing({ ...editing, dias_prom_pago: e.target.value })}/>
                    </div>
                  </div>
                  <div>
                    <label className="label">Asistente Técnico comercial asignado</label>
                    <select className="input" value={editing.vendedor_id || ''}
                      onChange={e => setEditing({ ...editing, vendedor_id: e.target.value })}>
                      <option value="">Sin asignar</option>
                      {vendedores.map(v => <option key={v.id} value={v.id}>{v.nombre}</option>)}
                    </select>
                  </div>
                </div>

                {err && <div style={{ marginTop: 10, padding: 8, background: 'var(--status-danger-bg, #fef0f0)', color: 'var(--status-danger)', borderRadius: 6, fontSize: 12 }}>{err}</div>}

                <div className="row" style={{ marginTop: 14, justifyContent: 'flex-end', gap: 8 }}>
                  <button className="btn btn--ghost btn--sm" onClick={() => setEditing(null)} disabled={saving}>Cancelar</button>
                  <button className="btn btn--accent btn--sm" onClick={guardar} disabled={saving}>
                    {Icon.check}<span>{saving ? 'Guardando…' : (editing.id ? 'Guardar' : 'Crear empresa')}</span>
                  </button>
                </div>

                {editing.id && (
                  <>
                    <div className="divider" style={{ margin: '16px 0' }}/>
                    <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
                      <h4 style={{ margin: 0, fontFamily: 'var(--cond)', fontSize: 14, fontWeight: 700 }}>Usuarios vinculados</h4>
                      <span className="meta">{usuariosVinc.length} usuario{usuariosVinc.length === 1 ? '' : 's'}</span>
                    </div>
                    <div style={{ border: '1px solid var(--line)', borderRadius: 6, overflow: 'hidden' }}>
                      {usuariosVinc.length === 0
                        ? <div style={{ padding: 12, color: 'var(--ink-5)', fontSize: 12, textAlign: 'center' }}>Sin usuarios vinculados aún.</div>
                        : usuariosVinc.map(usr => (
                          <div key={usr.id} style={{ padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--line)' }}>
                            <div style={{ width: 28, height: 28, borderRadius: 5, background: usr.es_principal ? 'var(--hi-vis)' : 'var(--ink-2)', color: usr.es_principal ? 'var(--ink-0)' : '#fff', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700 }}
                              title={usr.es_principal ? 'Empresa principal de este usuario' : 'Empresa adicional'}>
                              {usr.es_principal ? '★' : (usr.nombre || '?').slice(0, 2).toUpperCase()}
                            </div>
                            <div style={{ flex: 1, minWidth: 0 }}>
                              <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                                {usr.nombre}
                                {usr.username && <span className="muted k" style={{ fontSize: 11, fontWeight: 400, marginLeft: 6 }}>@{usr.username}</span>}
                              </div>
                              <div className="muted k" style={{ fontSize: 11 }}>{usr.email}{usr.activo ? '' : ' · inactivo'}</div>
                            </div>
                            <div className="icon-btn" title="Desvincular" onClick={() => desvincularUsuario(usr.id)}
                              style={{ color: 'var(--status-danger)' }}>×</div>
                          </div>
                        ))}
                    </div>

                    <div style={{ marginTop: 12, padding: 10, background: 'var(--ink-9)', borderRadius: 6 }}>
                      <div className="muted" style={{ fontSize: 11, marginBottom: 6 }}>
                        Vincular un usuario cliente a esta empresa
                        <span style={{ display: 'block', marginTop: 2 }}>
                          Un usuario puede estar vinculado a varias empresas. ★ marca la principal.
                        </span>
                      </div>
                      <div className="row" style={{ gap: 8 }}>
                        <select id="vinc-libre-gc" className="input" style={{ flex: 1, height: 30, fontSize: 12 }}>
                          <option value="">— Selecciona usuario —</option>
                          {clientesLibres.map(c => <option key={c.id} value={c.id}>{c.nombre} ({c.email})</option>)}
                        </select>
                        <button className="btn btn--ghost btn--sm" onClick={() => {
                          const sel = document.getElementById('vinc-libre-gc');
                          if (sel?.value) { vincularUsuario(Number(sel.value)); sel.value = ''; }
                        }}>{Icon.plus}<span>Vincular</span></button>
                      </div>
                      {clientesLibres.length === 0 && (
                        <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>
                          Todos los usuarios cliente ya están vinculados. Crea uno desde Configuración → Usuarios.
                        </div>
                      )}
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
        </div>
      </main>
    </div>
  );
}

window.GestionClientes = GestionClientes;