// Detalle de cliente
function DetalleCliente() {
  const [emp,     setEmp]       = React.useState(null);
  const [sols,    setSols]      = React.useState([]);
  const [volumen, setVolumen]   = React.useState([]);
  const [loading, setLoading]   = React.useState(true);
  const [solFilter, setSolFilter] = React.useState('todas');

  React.useEffect(() => {
    const cu = DesasfAPI.getCurrentUser() || {};
    const id = cu.rol === 'cliente'
      ? cu.empresa_id
      : (window._desasfCurrentCliente || 1);
    if (!id) { setLoading(false); return; }
    Promise.all([
      DesasfAPI.get('/clientes/' + id),
      DesasfAPI.get('/clientes/' + id + '/solicitudes'),
      DesasfAPI.get('/clientes/' + id + '/volumen-mensual'),
    ]).then(([e, s, v]) => {
      setEmp(e); setSols(s); setVolumen(v);
    }).catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return (
    <div className="app">
      <AppSidebar active="clientes"/>
      <Topbar crumbs={['Empresas clientes', 'Cargando…']}/>
      <main className="main" style={{ display: 'grid', placeItems: 'center' }}>
        <span style={{ color: 'var(--ink-5)' }}>Cargando cliente…</span>
      </main>
    </div>
  );

  if (!emp) return (
    <div className="app">
      <AppSidebar active="clientes"/>
      <Topbar crumbs={['Empresas clientes', '—']}/>
      <main className="main" style={{ display: 'grid', placeItems: 'center' }}>
        <span style={{ color: 'var(--ink-5)' }}>Selecciona un cliente desde una solicitud.</span>
      </main>
    </div>
  );

  const iniciales = emp.razon_social
    .split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase();

  const k         = emp.kpis || {};
  const solsTot   = Number(k.solicitudes_total   || 0);
  const solsAct   = Number(k.solicitudes_activas || 0);
  const volAcum   = Number(k.volumen_acumulado   || 0);
  const facturado = Number(k.facturado_total     || 0);
  const cLim      = Number(emp.credito_limite || 0);
  const cUsado    = Number(emp.credito_usado  || 0);
  const cDisp     = cLim - cUsado;
  const cDispPct  = cLim > 0 ? Math.round((cDisp / cLim) * 100) : 0;
  const yearAlta  = emp.creado_at ? new Date(emp.creado_at).getFullYear() : '';

  const tipoLabel = emp.tipo_cliente === 'premium' ? 'Cliente Premium' : 'Cliente estándar';

  const meses12 = (() => {
    const arr = [];
    const now = new Date();
    const lbls = ['E','F','M','A','M','J','J','A','S','O','N','D'];
    for (let i = 11; i >= 0; i--) {
      const d   = new Date(now.getFullYear(), now.getMonth() - i, 1);
      const key = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0');
      arr.push({ key, lbl: lbls[d.getMonth()] });
    }
    return arr;
  })();
  const volMap   = new Map(volumen.map(v => [v.mes, Number(v.volumen)]));
  const maxVol   = Math.max(1, ...volMap.values());
  const chartRows = meses12.map((m, i) => {
    const v = volMap.get(m.key) || 0;
    return { lbl: m.lbl, h: v > 0 ? Math.max(8, (v / maxVol) * 100) : 4, isLast: i === 11 };
  });

  const solsFiltered = sols.filter(s => solFilter === 'todas' || !['entregado','cancelado'].includes(s.estado));
  const solsMapped = solsFiltered.map(s => ({
    id:  s.ticket,
    proy: s.proyecto || '',
    p:   s.producto_nombre,
    v:   fmtNum(s.volumen) + ' ' + (s.unidad || 'm³'),
    sk:  estadoToKind(s.estado),
    sl:  estadoLabel(s.estado),
    pk:  s.pago_estado === 'confirmado' ? 'ok'
       : s.pago_estado === 'por_validar' ? 'review'
       : 'pending',
    pl:  s.pago_estado === 'confirmado' ? 'Pagado'
       : s.pago_estado === 'por_validar' ? 'Verificación'
       : 'Impago',
    d:   new Date(s.created_at).toLocaleDateString('es-PE', { day: '2-digit', month: 'short' }),
    _id: s.id,
  }));

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

  return (
    <div className="app">
      <AppSidebar active="clientes"/>
      <Topbar crumbs={['Empresas clientes', emp.razon_social]}/>
      <main className="main">
        <div className="page-head">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 6 }}>
              <div style={{ width: 56, height: 56, borderRadius: 10, background: 'var(--ink-0)', color: 'var(--hi-vis)', display: 'grid', placeItems: 'center', fontFamily: 'var(--cond)', fontWeight: 700, fontSize: 22 }}>{iniciales}</div>
              <div>
                <h1 style={{ marginBottom: 2 }}>{emp.razon_social}</h1>
                <p>
                  RUC {emp.ruc} · {emp.sector || '—'} · {tipoLabel}{yearAlta ? ` desde ${yearAlta}` : ''}
                  {emp.vendedor_nombre && <> · Asistente Técnico comercial: <b style={{ color: 'var(--ink-1)' }}>{emp.vendedor_nombre}</b></>}
                </p>
              </div>
            </div>
          </div>
          <div className="row">
            <a className="btn btn--ghost" style={{ textDecoration: 'none' }}
              href={emp.vendedor_email ? `mailto:${emp.vendedor_email}?subject=Contacto%20${encodeURIComponent(emp.razon_social)}` : '#'}
              onClick={e => { if (!emp.vendedor_email) { e.preventDefault(); alert('No hay email de vendedor para este cliente.'); } }}>
              {Icon.mail}<span>Contactar</span>
            </a>
            {['dev','admin','gerente_general','gerente_comercial','vendedor'].includes((DesasfAPI.getCurrentUser() || {}).rol) && (
              <button className="btn btn--ghost" onClick={() => {
                window._desasfEditEmpresaId = emp.id;
                navigate('gestion-clientes');
              }}>Editar</button>
            )}
            {['dev','admin','gerente_general','gerente_comercial','vendedor'].includes((DesasfAPI.getCurrentUser() || {}).rol) && (
              <button className="btn btn--accent" onClick={() => openModal('nueva-solicitud')}>{Icon.plus}<span>Nueva solicitud</span></button>
            )}
          </div>
        </div>

        <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)' }}>
          <div className="kpi">
            <div className="kpi__label">Solicitudes totales</div>
            <div className="kpi__value">{solsTot}</div>
            <span className="kpi__delta up">{solsAct} activas</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, solsTot * 4) + '%' }}/></div>
          </div>
          <div className="kpi kpi--accent">
            <div className="kpi__label">Volumen acumulado</div>
            <div className="kpi__value">{volAcum.toLocaleString('es-PE')}<span className="unit">m³</span></div>
            <span className="kpi__delta up">{sols.length} solicitudes</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, volAcum / 10) + '%' }}/></div>
          </div>
          <div className="kpi kpi--ok">
            <div className="kpi__label">Facturado YTD</div>
            <div className="kpi__value">{fmtMoney(facturado)}</div>
            <span className="kpi__delta up">acumulado del cliente</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, facturado / 10000) + '%' }}/></div>
          </div>
          <div className="kpi">
            <div className="kpi__label">Crédito disponible</div>
            <div className="kpi__value">
              {cLim === 0
                ? <span style={{ fontSize: 16 }}>Ilimitado</span>
                : <>{fmtMoney(cDisp)}<span className="unit">/ {fmtMoney(cLim)}</span></>}
            </div>
            <span className="kpi__delta up">{cLim === 0 ? 'Sin tope de crédito' : `${cDispPct}% libre`}</span>
            <div className="kpi__bar"><i style={{ width: cLim > 0 ? cDispPct + '%' : '0%' }}/></div>
          </div>
          <div className="kpi kpi--review">
            <div className="kpi__label">Días promedio pago</div>
            <div className="kpi__value">{emp.dias_prom_pago || 0}<span className="unit">días</span></div>
            <span className="kpi__delta up">configuración del cliente</span>
            <div className="kpi__bar"><i style={{ width: Math.min(100, (emp.dias_prom_pago || 0) * 2) + '%' }}/></div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 16 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card">
              <div className="card__head">
                <h3>Solicitudes</h3>
                <div className="row" style={{ gap: 6 }}>
                  <span className={`chip${solFilter === 'todas' ? ' is-active' : ''}`} style={{ cursor: 'pointer' }}
                    onClick={() => setSolFilter('todas')}>Todas <span className="n">{solsTot}</span></span>
                  <span className={`chip${solFilter === 'activas' ? ' is-active' : ''}`} style={{ cursor: 'pointer' }}
                    onClick={() => setSolFilter('activas')}>Activas <span className="n">{solsAct}</span></span>
                </div>
              </div>
              <table className="tbl">
                <thead><tr><th>Ticket</th><th>Proyecto / Producto</th><th>Vol.</th><th>Estado</th><th>Pago</th><th>Fecha</th></tr></thead>
                <tbody>
                  {solsMapped.map(r => (
                    <tr key={r.id} style={{ cursor: 'pointer' }} onClick={() => {
                      window._desasfCurrentSolicitud = r._id;
                      navigate('solicitud-detalle');
                    }}>
                      <td className="id" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{r.id}</td>
                      <td>
                        {r.proy
                          ? <><b>{r.proy}</b><div className="muted" style={{ fontSize: 11 }}>{r.p}</div></>
                          : <span className="muted">{r.p}</span>}
                      </td>
                      <td className="num">{r.v}</td>
                      <td><Pill kind={r.sk}>{r.sl}</Pill></td>
                      <td><Pill kind={r.pk}>{r.pl}</Pill></td>
                      <td className="num">{r.d}</td>
                    </tr>
                  ))}
                  {solsMapped.length === 0 && (
                    <tr><td colSpan={6} style={{ padding: 24, textAlign: 'center', color: 'var(--ink-5)' }}>
                      Sin solicitudes registradas para este cliente.
                    </td></tr>
                  )}
                </tbody>
              </table>
            </div>

            <div className="card">
              <div className="card__head"><h3>Volumen mensual — últimos 12 meses</h3><span className="meta">m³ por mes</span></div>
              <div className="card__body">
                <div className="barchart">
                  {chartRows.map((m, i) => (
                    <div className="col-c" key={i}>
                      <div className="stack">
                        <i style={{ height: m.h + '%', background: m.isLast ? 'var(--hi-vis)' : 'var(--ink-0)' }}/>
                      </div>
                      <div className="lbl">{m.lbl}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card">
              <div className="card__head"><h3>Datos fiscales</h3></div>
              <div className="card__body">
                <dl className="dl">
                  <dt>Razón social</dt><dd>{emp.razon_social}</dd>
                  <dt>RUC</dt><dd className="k">{emp.ruc}</dd>
                  <dt>Dirección</dt><dd>{emp.direccion || '—'}</dd>
                  <dt>Sector</dt><dd>{emp.sector || '—'}</dd>
                  <dt>Tamaño</dt><dd>{emp.tamano || '—'}</dd>
                </dl>
              </div>
            </div>

            <div className="card">
              <div className="card__head">
                <h3>Contactos clave</h3>
                <a className="meta" style={{ color: 'var(--ink-2)', fontWeight: 600, cursor: 'pointer' }}>+ Añadir</a>
              </div>
              <div className="card__body" style={{ padding: 0 }}>
                {emp.contactos.map(c => {
                  const ini = c.nombre.split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase();
                  return (
                    <div key={c.id} style={{ padding: '12px 16px', borderBottom: '1px solid var(--line)', display: 'flex', gap: 12, alignItems: 'center' }}>
                      <div className="avatar" style={{ background: 'var(--ink-9)', color: 'var(--ink-2)', width: 36, height: 36 }}>{ini}</div>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontWeight: 600, fontSize: 13 }}>
                          {c.nombre}
                          {c.es_principal ? <span className="tag" style={{ marginLeft: 8, fontSize: 10 }}>Principal</span> : null}
                        </div>
                        <div className="muted" style={{ fontSize: 11 }}>{c.cargo || '—'}</div>
                        <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-4)', marginTop: 2 }}>
                          {c.telefono || '—'}{c.email ? ` · ${c.email}` : ''}
                        </div>
                      </div>
                      <div className="icon-btn">{Icon.phone}</div>
                    </div>
                  );
                })}
                {emp.contactos.length === 0 && (
                  <div style={{ padding: 16, color: 'var(--ink-5)', fontSize: 13 }}>Sin contactos registrados.</div>
                )}
              </div>
            </div>

            <div className="card">
              <div className="card__head"><h3>Repositorio del cliente</h3><span className="meta">— próximamente</span></div>
              <div className="card__body" style={{ padding: 16, color: 'var(--ink-5)', fontSize: 12 }}>
                Los documentos contractuales del cliente se mostrarán aquí cuando el módulo de almacenamiento esté disponible.
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

window.DetalleCliente = DetalleCliente;