// Fuerza de ventas, Centro de ayuda, Auditoría, Cliente final

function FuerzaVentas() {
  const [ranking,  setRanking]  = React.useState([]);
  const [pipeline, setPipeline] = React.useState([]);
  const [loading,  setLoading]  = React.useState(true);

  React.useEffect(() => {
    Promise.all([
      DesasfAPI.get('/fuerza-ventas/ranking').catch(() => []),
      DesasfAPI.get('/fuerza-ventas/pipeline').catch(() => []),
    ]).then(([r, p]) => { setRanking(r); setPipeline(p); })
      .catch(console.error)
      .finally(() => setLoading(false));
  }, []);

  function fmt(n) {
    n = Number(n || 0);
    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');
  }
  function ini(name) {
    return (name || '?').split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase();
  }

  const totalVendedores = ranking.length;
  const totalClientes   = ranking.reduce((a, r) => a + Number(r.clientes || 0), 0);
  const totalFacturado  = ranking.reduce((a, r) => a + Number(r.facturado || 0), 0);
  const totalMeta       = ranking.reduce((a, r) => a + Number(r.meta_mensual || 0), 0);
  const cuotaCumplida   = totalMeta > 0 ? Math.round((totalFacturado / totalMeta) * 100) : 0;

  // Pipeline agrupado por estado
  const grupos = pipeline.reduce((acc, s) => {
    acc[s.estado] = acc[s.estado] || { count: 0, total: 0 };
    acc[s.estado].count++;
    acc[s.estado].total += Number(s.precio_total || 0);
    return acc;
  }, {});
  const etapas = [
    { key: 'recepcion',  l: 'Recepción',     c: 'var(--ink-7)' },
    { key: 'diseno',     l: 'Diseño',         c: 'var(--status-review)' },
    { key: 'produccion', l: 'Producción',     c: 'var(--status-prod)' },
    { key: 'transito',   l: 'En tránsito',    c: 'var(--status-transit)' },
  ];

  return (
    <div className="app">
      <Sidebar active="fuerza"/>
      <Topbar crumbs={['Operación', 'Fuerza de ventas']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Fuerza de ventas</h1>
            <p>{totalVendedores} {totalVendedores === 1 ? 'asistente técnico comercial activo' : 'asistentes técnicos comerciales activos'} · {totalClientes} cliente{totalClientes === 1 ? '' : 's'} asignado{totalClientes === 1 ? '' : 's'} · Meta total {fmt(totalMeta)}{loading ? ' · cargando…' : ''}</p>
          </div>
          <div className="row">
            <button className="btn btn--ghost" onClick={() => exportCSV(
              'comisiones-' + new Date().toISOString().slice(0,10) + '.csv',
              ranking,
              [
                { label: 'Asistente Técnico comercial', value: 'nombre' },
                { label: 'Email',        value: 'email' },
                { label: 'Clientes',     value: r => r.clientes || 0 },
                { label: 'Solicitudes',  value: r => r.solicitudes || 0 },
                { label: 'Facturado',    value: r => Number(r.facturado || 0) },
                { label: 'Meta mensual', value: r => Number(r.meta_mensual || 0) },
                { label: 'Cuota %',      value: r => r.meta_mensual > 0 ? Math.round((r.facturado / r.meta_mensual) * 100) : 0 },
              ]
            )}>{Icon.download}<span>Comisiones</span></button>
            {DesasfAPI.hasPerm('config.usuarios.crear', { strict: true }) && (
              <button className="btn btn--accent" onClick={() => navigate('config')}>
                {Icon.plus}<span>Nuevo asistente téc. comercial</span>
              </button>
            )}
          </div>
        </div>

        <div className="kpi-grid">
          <div className="kpi"><div className="kpi__label">Cuota cumplida</div><div className="kpi__value">{cuotaCumplida}<span className="unit">%</span></div><span className="kpi__delta up">{fmt(totalFacturado)}</span><div className="kpi__bar"><i style={{ width: Math.min(100, cuotaCumplida) + '%' }}/></div></div>
          <div className="kpi kpi--accent"><div className="kpi__label">Ticket promedio</div><div className="kpi__value">{fmt(totalVendedores > 0 ? totalFacturado / Math.max(1, ranking.reduce((a,r)=>a+Number(r.solicitudes||0),0)) : 0)}</div><span className="kpi__delta up">por solicitud entregada</span><div className="kpi__bar"><i style={{ width: '64%' }}/></div></div>
          <div className="kpi kpi--ok"><div className="kpi__label">Solicitudes activas</div><div className="kpi__value">{pipeline.length}</div><span className="kpi__delta up">en pipeline</span><div className="kpi__bar"><i style={{ width: Math.min(100, pipeline.length * 8) + '%' }}/></div></div>
          <div className="kpi kpi--review"><div className="kpi__label">Pipeline abierto</div><div className="kpi__value">{fmt(pipeline.reduce((a,s)=>a+Number(s.precio_total||0),0))}</div><span className="kpi__delta up">{pipeline.length} oportunidades</span><div className="kpi__bar"><i style={{ width: '52%' }}/></div></div>
        </div>

        <div className="card" style={{ marginBottom: 16 }}>
          <div className="card__head"><h3>Ranking del mes</h3><span className="meta">{new Date().toLocaleDateString('es-PE', { month: 'long', year: 'numeric' })}</span></div>
          <table className="tbl">
            <thead><tr>
              <th style={{ width: 32 }}>#</th><th>Asist. téc. comercial</th><th>Email</th><th>Clientes</th>
              <th>Solicitudes</th><th style={{ textAlign: 'right' }}>Ventas</th><th style={{ width: 220 }}>Cuota</th>
            </tr></thead>
            <tbody>
              {ranking.map((v, i) => {
                const fact = Number(v.facturado || 0);
                const meta = Number(v.meta_mensual || 0);
                const cuo  = meta > 0 ? Math.round((fact / meta) * 100) : 0;
                return (
                  <tr key={v.id}>
                    <td><div style={{ width: 24, height: 24, borderRadius: 4, background: i === 0 ? 'var(--hi-vis)' : 'var(--ink-9)', color: 'var(--ink-0)', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12 }}>{i + 1}</div></td>
                    <td><div className="row" style={{ gap: 10 }}><div className="avatar" style={{ background: 'var(--ink-0)', color: 'var(--hi-vis)' }}>{ini(v.nombre)}</div><b>{v.nombre}</b></div></td>
                    <td className="muted" style={{ fontSize: 11 }}>{v.email}</td>
                    <td className="num">{v.clientes || 0}</td>
                    <td className="num">{v.solicitudes || 0}</td>
                    <td className="num" style={{ textAlign: 'right', fontWeight: 600 }}>{fmt(fact)}</td>
                    <td>
                      {meta > 0 ? (
                        <div className="row" style={{ gap: 8 }}>
                          <div style={{ flex: 1, height: 6, background: 'var(--ink-9)', borderRadius: 3, overflow: 'hidden' }}>
                            <div style={{ width: Math.min(cuo, 100) + '%', height: '100%', background: cuo >= 100 ? 'var(--status-ok)' : 'var(--ink-0)' }}/>
                          </div>
                          <span className="num" style={{ fontSize: 11, fontWeight: 600, minWidth: 36 }}>{cuo}%</span>
                        </div>
                      ) : <span className="muted" style={{ fontSize: 11 }}>sin meta</span>}
                    </td>
                  </tr>
                );
              })}
              {!loading && ranking.length === 0 && (
                <tr><td colSpan={7} style={{ padding: 24, textAlign: 'center', color: 'var(--ink-5)' }}>Sin vendedores activos.</td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head"><h3>Pipeline por etapa</h3></div>
            <div className="card__body">
              <div style={{ display: 'flex', gap: 4 }}>
                {etapas.map(s => {
                  const g = grupos[s.key] || { count: 0, total: 0 };
                  return (
                    <div key={s.key} style={{ flex: 1, padding: 14, borderRadius: 6, background: '#fff', border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
                      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: s.c }}/>
                      <div className="muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600 }}>{s.l}</div>
                      <div style={{ fontFamily: 'var(--cond)', fontSize: 24, fontWeight: 700, marginTop: 4 }}>{g.count}</div>
                      <div className="num muted" style={{ fontSize: 11 }}>{fmt(g.total)}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card__head"><h3>Pipeline reciente</h3></div>
            <div className="card__body" style={{ padding: 0 }}>
              {pipeline.slice(0, 6).map(s => (
                <div key={s.id} style={{ padding: '10px 16px', borderBottom: '1px solid var(--line)', display: 'flex', gap: 10, cursor: 'pointer' }}
                     onClick={() => { window._desasfCurrentSolicitud = s.id; navigate('solicitud-detalle'); }}>
                  <div style={{ width: 4, background: 'var(--hi-vis)', borderRadius: 2 }}/>
                  <div style={{ flex: 1 }}>
                    <div className="num k" style={{ fontSize: 11, color: 'var(--ink-5)', fontWeight: 600 }}>{s.ticket}</div>
                    <div style={{ fontWeight: 600, fontSize: 13 }}>{s.proyecto || s.empresa}</div>
                    <div className="muted" style={{ fontSize: 11 }}>
                      {s.proyecto ? `${s.empresa} · ` : ''}{s.producto} · {fmt(s.precio_total)}
                    </div>
                  </div>
                </div>
              ))}
              {pipeline.length === 0 && (
                <div style={{ padding: 16, color: 'var(--ink-5)', fontSize: 13 }}>Sin oportunidades activas.</div>
              )}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function FAQItem({ q, t, a, last }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: last ? 0 : '1px solid var(--line)' }}>
      <div style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => setOpen(o => !o)}>
        <div style={{ width: 28, height: 28, borderRadius: 4, background: 'var(--ink-9)', display: 'grid', placeItems: 'center', color: 'var(--ink-3)' }}>{Icon.help}</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13, fontWeight: 500 }}>{q}</div>
          <div className="muted" style={{ fontSize: 11, fontFamily: 'var(--mono)' }}>{t}</div>
        </div>
        <span style={{ color: 'var(--ink-5)', transform: open ? 'rotate(90deg)' : 'rotate(0)', transition: 'transform 0.15s' }}>{Icon.arrow}</span>
      </div>
      {open && (
        <div style={{ padding: '0 16px 14px 56px', fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.6 }}>{a}</div>
      )}
    </div>
  );
}

function CentroAyuda() {
  const [tickets,    setTickets]    = React.useState([]);
  const [loading,    setLoading]    = React.useState(true);
  const [showForm,   setShowForm]   = React.useState(false);
  const [asunto,     setAsunto]     = React.useState('');
  const [descripcion,setDescripcion]= React.useState('');
  const [prioridad,  setPrioridad]  = React.useState('media');
  const [saving,     setSaving]     = React.useState(false);
  const [vendedorCA,  setVendedorCA]  = React.useState(null);
  const [vendedorEmail, setVendedorEmail] = React.useState(null);
  const [faqSearch,   setFaqSearch]   = React.useState('');

  const userCA = DesasfAPI.getCurrentUser() || {};

  function fetchTickets() {
    setLoading(true);
    DesasfAPI.get('/soporte')
      .then(r => setTickets(r.rows || r))
      .catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(() => {
    fetchTickets();
    if (userCA.empresa_id) {
      DesasfAPI.get(`/clientes/${userCA.empresa_id}`)
        .then(e => {
          if (e?.vendedor_nombre) setVendedorCA(e.vendedor_nombre);
          if (e?.vendedor_email)  setVendedorEmail(e.vendedor_email);
        })
        .catch(() => {});
    }
  }, []);

  async function crearTicket() {
    if (!asunto.trim() || !descripcion.trim()) return;
    setSaving(true);
    try {
      await DesasfAPI.post('/soporte', { asunto, descripcion, prioridad });
      setAsunto(''); setDescripcion(''); setPrioridad('media');
      setShowForm(false);
      fetchTickets();
    } catch (err) { alert('Error: ' + err.message); }
    finally { setSaving(false); }
  }

  function estadoKind(e) {
    return { pendiente: 'pending', en_proceso: 'review', resuelto: 'ok', cerrado: 'neutral' }[e] || 'neutral';
  }
  function estadoLbl(e) {
    return { pendiente: 'Pendiente', en_proceso: 'En proceso', resuelto: 'Resuelto', cerrado: 'Cerrado' }[e] || e;
  }

  return (
    <div className="app">
      <AppSidebar active="ayuda"/>
      <Topbar crumbs={['Información', 'Centro de ayuda']}/>
      <main className="main">
        <div style={{ background: 'linear-gradient(135deg, #14181B, #0B0D0E)', color: '#fff', padding: '36px 32px', borderRadius: 'var(--r-2)', marginBottom: 24, position: 'relative', overflow: 'hidden' }}>
          <div className="hex-bg"/>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <div style={{ display: 'inline-block', padding: '4px 10px', background: 'var(--hi-vis)', color: 'var(--ink-0)', fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 16 }}>Soporte 24/7</div>
            <h1 style={{ fontFamily: 'var(--cond)', fontSize: 32, fontWeight: 700, margin: '0 0 8px' }}>¿En qué te ayudamos hoy?</h1>
            <p style={{ color: 'var(--ink-6)', margin: '0 0 20px' }}>Documentación técnica, guías rápidas y atención directa con tu asistente técnico comercial o el equipo comercial.</p>
            <div style={{ display: 'flex', gap: 8, background: '#fff', borderRadius: 8, padding: 6, maxWidth: 540 }}>
              <div className="row" style={{ flex: 1, padding: '0 12px', color: 'var(--ink-5)' }}>
                {Icon.search}
                <input value={faqSearch} onChange={e => setFaqSearch(e.target.value)}
                  placeholder="Buscar en artículos, manuales, fichas técnicas…"
                  style={{ flex: 1, border: 0, outline: 'none', background: 'transparent', fontSize: 13, color: 'var(--ink-1)', padding: 0 }}/>
              </div>
              <button className="btn btn--accent" onClick={() => {
                if (!faqSearch.trim()) { alert('Escribe lo que buscas en el cuadro.'); return; }
                document.getElementById('faq-list')?.scrollIntoView({ behavior: 'smooth' });
              }}>Buscar</button>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 24 }}>
          {[
            { t: 'Cargar un voucher', n: 'pagos',     k: 'pago',        ic: Icon.cash, c: 'var(--status-ok)' },
            { t: 'Diseño de mezcla', n: 'catálogo',  k: 'mezcla',      ic: Icon.beaker, c: 'var(--status-prod)' },
            { t: 'Despachos y rutas', n: 'logística', k: 'despacho',   ic: Icon.truck, c: 'var(--status-transit)' },
            { t: 'Facturación',      n: 'pagos',     k: 'factur',     ic: Icon.doc, c: 'var(--status-review)' },
          ].map(c => (
            <div className="card" key={c.t} style={{ cursor: 'pointer' }} onClick={() => { setFaqSearch(c.k); document.getElementById('faq-list')?.scrollIntoView({ behavior: 'smooth' }); }}>
              <div className="card__body">
                <div style={{ width: 40, height: 40, borderRadius: 8, background: c.c, color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 12 }}>{c.ic}</div>
                <div style={{ fontWeight: 600, fontSize: 14 }}>{c.t}</div>
                <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>Ver en {c.n}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
          <div className="card" id="faq-list">
            <div className="card__head"><h3>Preguntas frecuentes</h3><span className="meta">Top 6</span></div>
            <div className="card__body" style={{ padding: 0 }}>
              {(() => {
                const faqs = [
                  { q: '¿Cómo cargo el voucher de pago para una solicitud?', t: 'Pagos · 2 min', a: 'Desde "Pagos y depósitos" haz clic en "Validar" sobre el voucher. Tu equipo de finanzas confirmará el pago manualmente.' },
                  { q: '¿Qué documentos requiere el laboratorio para una muestra?', t: 'Calidad · 4 min', a: 'Diseño de mezcla aprobado en PDF, certificado de origen del agregado y guía de despacho.' },
                  { q: '¿Dónde reviso el estado de mi despacho en tiempo real?', t: 'Logística · 1 min', a: 'En el menú lateral, sección "Logística" o "Despachos" si eres cliente. Verás el estado y la ETA actual.' },
                  { q: '¿Cómo solicito una cotización con tarifa preferencial?', t: 'Comercial · 3 min', a: 'Habla con tu asistente técnico comercial asignado o llena el formulario "Nueva solicitud" desde la barra superior.' },
                  { q: '¿Cómo descargo el certificado de calidad de un lote?', t: 'Calidad · 2 min', a: 'En "Catálogo" → producto → pestaña "Archivos" puedes descargar las fichas técnicas asociadas.' },
                  { q: '¿Cómo agrego un nuevo contacto a mi empresa?', t: 'Cuenta · 1 min', a: 'Tu administrador puede agregar contactos en "Clientes" → tu empresa → sección "Contactos".' },
                ];
                const visible = faqSearch.trim().length > 1
                  ? faqs.filter(f => (f.q + ' ' + f.a).toLowerCase().includes(faqSearch.toLowerCase()))
                  : faqs;
                return visible.length === 0 ? (
                  <div style={{ padding: 16, color: 'var(--ink-5)', fontSize: 13, textAlign: 'center' }}>Sin resultados para "{faqSearch}".</div>
                ) : visible.map((f, i) => (
                  <FAQItem key={i} q={f.q} t={f.t} a={f.a} last={i === visible.length - 1}/>
                ));
              })()}
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card">
              <div className="card__head"><h3>Habla con tu asistente técnico comercial</h3></div>
              <div className="card__body">
                {vendedorCA
                  ? <>
                      <div className="row" style={{ gap: 12, marginBottom: 12 }}>
                        <div className="avatar" style={{ width: 44, height: 44, fontSize: 14 }}>
                          {vendedorCA.trim().split(/\s+/).slice(0,2).map(w=>w[0]).join('').toUpperCase()}
                        </div>
                        <div>
                          <div style={{ fontWeight: 600 }}>{vendedorCA}</div>
                          <div className="muted" style={{ fontSize: 11 }}>Asistente Técnico comercial asignado</div>
                        </div>
                      </div>
                      {(() => {
                        const tel = window._appConfig?.org_telefono;
                        return (
                          <a className="btn btn--primary" href={tel ? `tel:${tel}` : '#'} style={{ width: '100%', justifyContent: 'center', textDecoration: 'none' }}
                            onClick={e => { if (!tel) { e.preventDefault(); alert('No hay teléfono de contacto configurado.'); } }}>
                            {Icon.phone}<span>{tel ? `Llamar ${tel}` : 'Llamar ahora'}</span>
                          </a>
                        );
                      })()}
                      <a className="btn btn--ghost" href={vendedorEmail ? `mailto:${vendedorEmail}?subject=Consulta%20comercial` : '#'}
                        style={{ width: '100%', justifyContent: 'center', marginTop: 8, textDecoration: 'none' }}
                        onClick={e => { if (!vendedorEmail) { e.preventDefault(); alert('Sin email de vendedor disponible.'); } }}>
                        {Icon.mail}<span>{vendedorEmail ? `Email: ${vendedorEmail}` : 'Enviar correo'}</span>
                      </a>
                    </>
                  : <div style={{ padding: '16px 0', textAlign: 'center', color: 'var(--ink-5)', fontSize: 13 }}>
                      Contacta a la organización a través del formulario de soporte
                    </div>
                }
              </div>
            </div>

            <div className="card">
              <div className="card__head">
                <h3>Mis tickets de soporte</h3>
                <a className="meta" style={{ color: 'var(--ink-2)', fontWeight: 600, cursor: 'pointer' }}
                   onClick={() => setShowForm(s => !s)}>{showForm ? '× Cancelar' : '+ Nuevo'}</a>
              </div>
              {showForm && (
                <div className="card__body" style={{ borderBottom: '1px solid var(--line)' }}>
                  <input className="input" placeholder="Asunto"
                         value={asunto} onChange={e => setAsunto(e.target.value)}
                         style={{ marginBottom: 8 }}/>
                  <textarea className="input" rows="3" placeholder="Descripción detallada"
                            value={descripcion} onChange={e => setDescripcion(e.target.value)}
                            style={{ height: 'auto', padding: 10, marginBottom: 8 }}/>
                  <select className="input" value={prioridad} onChange={e => setPrioridad(e.target.value)}
                          style={{ marginBottom: 8 }}>
                    <option value="baja">Baja</option>
                    <option value="media">Media</option>
                    <option value="alta">Alta</option>
                    <option value="urgente">Urgente</option>
                  </select>
                  <button className="btn btn--accent" onClick={crearTicket} disabled={saving}
                          style={{ width: '100%', justifyContent: 'center' }}>
                    {saving ? 'Enviando…' : 'Crear ticket'}
                  </button>
                </div>
              )}
              <div className="card__body" style={{ padding: 0 }}>
                {tickets.map(t => (
                  <div key={t.id} style={{ padding: '10px 16px', borderBottom: '1px solid var(--line)' }}>
                    <div className="row" style={{ justifyContent: 'space-between', marginBottom: 2 }}>
                      <span className="id k">{t.ticket_ref || `T-${t.id}`}</span>
                      <Pill kind={estadoKind(t.estado)}>{estadoLbl(t.estado)}</Pill>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 500 }}>{t.asunto}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{formatRelativeTime(t.created_at)}{t.prioridad ? ` · ${t.prioridad}` : ''}</div>
                  </div>
                ))}
                {!loading && tickets.length === 0 && (
                  <div style={{ padding: 16, color: 'var(--ink-5)', fontSize: 12, textAlign: 'center' }}>
                    Sin tickets registrados.
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function Auditoria() {
  const [logs,    setLogs]    = React.useState([]);
  const [total,   setTotal]   = React.useState(0);
  const [page,    setPage]    = React.useState(1);
  const [loading, setLoading] = React.useState(true);
  const [accion,  setAccion]  = React.useState('');
  const [usuario, setUsuario] = React.useState('');
  const [periodo, setPeriodo] = React.useState('');
  const [showFilters, setShowFilters] = React.useState(false);

  function fetchLogs(p = page, a = accion) {
    setLoading(true);
    const q = new URLSearchParams({ page: p, limit: 50, ...(a ? { accion: a } : {}) });
    DesasfAPI.get('/auditoria?' + q.toString())
      .then(r => { setLogs(r.rows); setTotal(r.total); setPage(r.page); })
      .catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { fetchLogs(1, accion); }, [accion]);

  const usuariosLog = Array.from(new Set(logs.map(l => l.usuario_nombre).filter(Boolean)));
  const filteredLogs = logs.filter(l => {
    if (usuario && l.usuario_nombre !== usuario) return false;
    if (periodo) {
      const dias = { '7d': 7, '30d': 30, '90d': 90 }[periodo];
      if (dias) {
        const cut = Date.now() - dias * 86400000;
        if (new Date(l.created_at).getTime() < cut) return false;
      }
    }
    return true;
  });

  function fechaParts(iso) {
    if (!iso) return { t: '—', d: '' };
    const d = new Date(iso);
    const today = new Date();
    const isToday = d.toDateString() === today.toDateString();
    return {
      t: d.toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' }),
      d: isToday ? 'hoy' : d.toLocaleDateString('es-PE', { day: '2-digit', month: 'short' }),
    };
  }

  function actionKind(a) {
    if (!a) return 'pending';
    if (a.includes('rechaz') || a.includes('cancel'))            return 'danger';
    if (a.includes('valid') || a.includes('confirm') || a === 'login') return 'ok';
    if (a.includes('ajuste') || a.includes('modif') || a.includes('edit')) return 'pending';
    return 'review';
  }

  return (
    <div className="app">
      <Sidebar active="auditoria"/>
      <Topbar crumbs={['Información', 'Auditoría e historial']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Auditoría e historial</h1>
            <p>Registro inmutable de todas las acciones del panel · {total} evento{total === 1 ? '' : 's'}{loading ? ' · cargando…' : ''}</p>
          </div>
          <div className="row">
            <button className={`btn btn--ghost${showFilters ? ' is-active' : ''}`} onClick={() => setShowFilters(v => !v)}>{Icon.filter}<span>Filtros</span></button>
            <button className="btn btn--ghost" onClick={() => exportCSV(
              'auditoria-' + new Date().toISOString().slice(0,10) + '.csv',
              filteredLogs,
              [
                { label: 'Fecha',   value: r => new Date(r.created_at).toLocaleString('es-PE') },
                { label: 'Usuario', value: r => r.usuario_nombre || '' },
                { label: 'Acción',  value: 'accion' },
                { label: 'Objeto',  value: r => r.objeto || '' },
                { label: 'IP',      value: r => r.ip || '' },
                { label: 'Contexto', value: r => r.contexto || '' },
              ]
            )}>{Icon.download}<span>Exportar registro</span></button>
          </div>
        </div>

        <div className="filterbar">
          {[
            { k: '',              l: 'Todos' },
            { k: 'ajuste_stock',  l: 'Ajustes de stock' },
            { k: 'login',         l: 'Inicios de sesión' },
            { k: 'validar_pago',  l: 'Validaciones' },
          ].map(f => (
            <span key={f.k || 'todos'}
                  className={'chip' + (accion === f.k ? ' is-active' : '')}
                  style={{ cursor: 'pointer' }}
                  onClick={() => setAccion(f.k)}>
              {f.l}
            </span>
          ))}
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8, alignItems: 'center' }}>
            <select className="input" style={{ height: 28, padding: '0 8px', fontSize: 12 }}
              value={usuario} onChange={e => setUsuario(e.target.value)}>
              <option value="">Usuario: todos</option>
              {usuariosLog.map(u => <option key={u} value={u}>{u}</option>)}
            </select>
            <select className="input" style={{ height: 28, padding: '0 8px', fontSize: 12 }}
              value={periodo} onChange={e => setPeriodo(e.target.value)}>
              <option value="">Periodo: todo</option>
              <option value="7d">Últimos 7 días</option>
              <option value="30d">Últimos 30 días</option>
              <option value="90d">Últimos 90 días</option>
            </select>
          </div>
        </div>

        <div className="card" style={{ borderRadius: '0 0 var(--r-2) var(--r-2)', borderTop: 0 }}>
          <table className="tbl">
            <thead><tr>
              <th style={{ width: 110 }}>Fecha / hora</th>
              <th>Usuario</th>
              <th>Rol</th>
              <th>Acción</th>
              <th>Objeto</th>
              <th>Contexto</th>
              <th>IP</th>
              <th></th>
            </tr></thead>
            <tbody>
              {filteredLogs.map(e => {
                const fp = fechaParts(e.created_at);
                const kind = actionKind(e.accion);
                let ctx = e.contexto;
                try { const o = JSON.parse(e.contexto); ctx = Object.entries(o).map(([k,v]) => `${k}: ${v}`).join(' · '); } catch {}
                return (
                  <tr key={e.id}>
                    <td>
                      <div className="num" style={{ fontWeight: 600 }}>{fp.t}</div>
                      <div className="muted" style={{ fontSize: 11 }}>{fp.d}</div>
                    </td>
                    <td><b>{e.usuario_nombre || e.usuario_nombre_actual || '—'}</b></td>
                    <td>{e.usuario_rol ? <span className="tag">{e.usuario_rol}</span> : <span className="muted">—</span>}</td>
                    <td>
                      <span className="row" style={{ gap: 6 }}>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: `var(--status-${kind})` }}/>
                        <span>{e.accion}</span>
                      </span>
                    </td>
                    <td className="k" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{e.objeto || '—'}</td>
                    <td className="muted" style={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{ctx || '—'}</td>
                    <td className="k" style={{ fontSize: 11 }}>{e.ip || '—'}</td>
                    <td><div className="icon-btn">{Icon.more}</div></td>
                  </tr>
                );
              })}
              {!loading && filteredLogs.length === 0 && (
                <tr><td colSpan={8} style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                  Sin registros para el filtro seleccionado.
                </td></tr>
              )}
            </tbody>
          </table>
          <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-5)' }}>
            <span>Mostrando {logs.length} de {total} registros</span>
            <div className="row">
              <span className="chip" style={{ cursor: page > 1 ? 'pointer' : 'not-allowed', opacity: page > 1 ? 1 : 0.5 }}
                    onClick={() => page > 1 && fetchLogs(page - 1, accion)}>‹ Anterior</span>
              <span className="chip is-active">{page}</span>
              <span className="chip" style={{ cursor: logs.length === 50 ? 'pointer' : 'not-allowed', opacity: logs.length === 50 ? 1 : 0.5 }}
                    onClick={() => logs.length === 50 && fetchLogs(page + 1, accion)}>Siguiente ›</span>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

// Versión cliente final — Dashboard simplificado, sin "ruido" operativo interno
function ClienteFinal() {
  const user = DesasfAPI.getCurrentUser() || {};
  const firstName = (user.nombre || 'Cliente').split(' ')[0];
  const nameParts = (user.nombre || 'Cliente').trim().split(/\s+/);
  const initials = nameParts.length >= 2
    ? (nameParts[0][0] + nameParts[nameParts.length - 1][0]).toUpperCase()
    : (user.nombre || 'C').substring(0, 2).toUpperCase();
  const displayName = nameParts.length >= 2
    ? `${nameParts[0][0].toUpperCase()}. ${nameParts[nameParts.length - 1]}`
    : (user.nombre || 'Cliente');

  const [solicitudes,   setSolicitudes]   = React.useState([]);
  const [despacho,      setDespacho]      = React.useState(null);
  const [empresa,       setEmpresa]       = React.useState({});
  const [voucherCount,  setVoucherCount]  = React.useState(0);

  React.useEffect(() => {
    Promise.all([
      DesasfAPI.get('/dashboard/recientes').catch(() => []),
      user.empresa_id
        ? DesasfAPI.get(`/clientes/${user.empresa_id}`).catch(() => ({}))
        : Promise.resolve({}),
      DesasfAPI.get('/logistica/despachos?estado=en_ruta&limit=1').catch(() => ({})),
      DesasfAPI.get('/pagos?estado=por_validar').catch(() => ({})),
    ]).then(([sols, emp, desp, pagos]) => {
      setSolicitudes(Array.isArray(sols) ? sols : (sols?.rows || []));
      setEmpresa(emp || {});
      const despRows = desp?.rows || (Array.isArray(desp) ? desp : []);
      setDespacho(despRows[0] || null);
      const pagoRows = pagos?.rows || (Array.isArray(pagos) ? pagos : []);
      setVoucherCount(pagoRows.length);
    });
  }, []);

  const stepMap  = { recibida: 1, diseno: 2, produccion: 3, transito: 4, entregado: 5, aprobada: 2 };
  const labelMap = { recibida: 'En recepción', diseno: 'En diseño', produccion: 'En producción', transito: 'En tránsito', entregado: 'Entregado', aprobada: 'Aprobada' };
  const kindMap  = { recibida: 'pending', diseno: 'diseno', produccion: 'prod', transito: 'transit', entregado: 'ok', aprobada: 'ok' };

  const creditMax   = parseFloat(empresa.credito_max  || 0);
  const creditUsed  = parseFloat(empresa.credito_usado || 0);
  const creditAvail = creditMax > 0 ? Math.max(0, creditMax - creditUsed) : null;
  const creditPct   = creditMax > 0 ? Math.round((creditAvail / creditMax) * 100) : null;
  const empresaNombre   = empresa.razon_social || empresa.empresa_nombre || 'Mi empresa';
  const vendedorNombre  = empresa.vendedor_nombre || null;
  const vendedorEmailCF = empresa.vendedor_email  || null;
  const orgTel          = window._appConfig?.org_telefono || null;
  const vendedorInits   = vendedorNombre
    ? vendedorNombre.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
    : '?';

  const activeCount = solicitudes.length;
  const enProd = solicitudes.find(s => s.estado === 'produccion');
  const heroSub = [
    activeCount > 0 ? `${activeCount} solicitud${activeCount !== 1 ? 'es' : ''} en curso` : null,
    despacho ? '1 despacho llegando hoy' : null,
  ].filter(Boolean).join(' · ') || 'Sin actividad reciente';

  return (
    <div className="app">
      <CliSidebar active="inicio"/>
      <Topbar crumbs={['Inicio']} cta={<button className="btn btn--accent" onClick={() => openModal('nueva-solicitud')}>{Icon.plus}<span>Solicitar cotización</span></button>}/>
      <main className="main">
        {/* Hero card */}
        <div style={{ background: 'linear-gradient(135deg, #14181B, #0B0D0E)', color: '#fff', borderRadius: 'var(--r-2)', padding: 28, marginBottom: 18, position: 'relative', overflow: 'hidden' }}>
          <div className="hex-bg"/>
          <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
            <div>
              <div style={{ fontSize: 12, color: 'var(--ink-6)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>Hola, {firstName}</div>
              <h1 style={{ fontFamily: 'var(--cond)', fontSize: 30, fontWeight: 700, margin: '0 0 8px', color: '#fff' }}>{heroSub}</h1>
              <div className="row" style={{ gap: 8 }}>
                {enProd && <span style={{ background: 'var(--hi-vis)', color: 'var(--ink-0)', padding: '4px 10px', borderRadius: 4, fontSize: 12, fontWeight: 600 }}>{enProd.ticket || `#${enProd.id}`} en producción</span>}
                {voucherCount > 0 && <span style={{ background: 'rgba(255,255,255,0.1)', padding: '4px 10px', borderRadius: 4, fontSize: 12, color: '#fff' }}>{voucherCount} voucher{voucherCount !== 1 ? 's' : ''} por validar</span>}
              </div>
            </div>
            <button className="btn btn--accent" style={{ height: 44, fontSize: 14, padding: '0 20px' }}
              onClick={() => openModal('nueva-solicitud')}>{Icon.plus}<span>Nueva solicitud</span></button>
          </div>
        </div>

        {/* KPIs simples */}
        <div className="kpi-grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
          <div className="kpi">
            <div className="kpi__label">Solicitudes activas</div>
            <div className="kpi__value">{activeCount}</div>
            <span className="kpi__delta up">{solicitudes.filter(s => s.estado === 'produccion').length} en producción</span>
            <div className="kpi__bar"><i style={{ width: `${Math.min(100, activeCount * 20)}%` }}/></div>
          </div>
          <div className="kpi kpi--accent">
            <div className="kpi__label">Próximo despacho</div>
            {despacho
              ? <><div className="kpi__value">Hoy</div><span className="kpi__delta up">{despacho.placa} · {despacho.volumen || '—'} m³</span></>
              : <><div className="kpi__value" style={{ fontSize: 18 }}>—</div><span className="kpi__delta">Sin despachos activos</span></>
            }
            <div className="kpi__bar"><i style={{ width: despacho ? '85%' : '0%' }}/></div>
          </div>
          <div className="kpi kpi--ok">
            <div className="kpi__label">Crédito disponible</div>
            {creditAvail !== null
              ? <><div className="kpi__value">S/ {creditAvail >= 1000 ? `${(creditAvail / 1000).toFixed(0)}k` : creditAvail.toFixed(0)}</div><span className="kpi__delta up">{creditPct}% libre</span><div className="kpi__bar"><i style={{ width: `${creditPct}%` }}/></div></>
              : <><div className="kpi__value" style={{ fontSize: 18 }}>—</div><span className="kpi__delta">Sin límite configurado</span><div className="kpi__bar"><i style={{ width: '0%' }}/></div></>
            }
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head"><h3>Mis solicitudes</h3><a className="meta" style={{ color: 'var(--ink-2)', fontWeight: 600, cursor: 'pointer' }} onClick={() => navigate('solicitudes')}>Ver todas →</a></div>
            <div className="card__body" style={{ padding: 0 }}>
              {solicitudes.length === 0
                ? <div style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>Sin solicitudes activas</div>
                : solicitudes.slice(0, 5).map(s => {
                    const step = stepMap[s.estado] || 1;
                    const sl   = labelMap[s.estado] || s.estado;
                    const kind = kindMap[s.estado]  || 'pending';
                    const vol  = s.volumen ? ` · ${s.volumen} ${s.unidad || 'm³'}` : '';
                    const titulo = s.proyecto || s.producto_nombre || '—';
                    const subt   = s.proyecto ? `${s.producto_nombre || ''}${vol}` : vol.replace(/^ · /, '');
                    return (
                      <div key={s.id} style={{ padding: '16px 18px', borderBottom: '1px solid var(--line)', cursor: 'pointer' }}
                        onClick={() => navigate('solicitud-detalle', { solicitudId: s.id })}>
                        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
                          <div>
                            <span className="id k" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{s.ticket || `#${s.id}`}</span>
                            <span style={{ marginLeft: 10, fontWeight: 600 }}>{titulo}</span>
                            {subt && <span className="muted" style={{ marginLeft: 6, fontSize: 12 }}>· {subt}</span>}
                          </div>
                          <Pill kind={kind}>{sl}</Pill>
                        </div>
                        <MiniSteps step={step}/>
                        <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>
                          {s.eta ? `Entrega estimada: ${new Date(s.eta).toLocaleDateString('es-PE')}` : sl}
                        </div>
                      </div>
                    );
                  })
              }
            </div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div className="card">
              <div className="card__head"><h3>Tu próximo despacho</h3>{despacho && <Pill kind="transit">En camino</Pill>}</div>
              <div className="card__body">
                {despacho
                  ? <>
                      <div className="map-ph" style={{ height: 130 }}>
                        <div className="pin signal" style={{ top: '55%', left: '40%' }}/>
                        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                          <path d="M 30 100 Q 100 80 160 75 T 320 50" stroke="var(--hi-vis)" strokeWidth="2" strokeDasharray="4 4" fill="none"/>
                        </svg>
                      </div>
                      <div style={{ marginTop: 12 }}>
                        <div className="row" style={{ justifyContent: 'space-between' }}>
                          <span style={{ fontWeight: 600 }}>{despacho.placa}{despacho.marca ? ` · ${despacho.marca}` : ''}</span>
                          {despacho.eta_at && <span className="num">ETA {new Date(despacho.eta_at).toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' })}</span>}
                        </div>
                        {despacho.conductor_nombre && <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>Conductor {despacho.conductor_nombre}{despacho.producto_nombre ? ` · ${despacho.producto_nombre}` : ''}</div>}
                      </div>
                    </>
                  : <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--ink-5)' }}>
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ opacity: 0.4 }}><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 4v3h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
                      <div style={{ marginTop: 8, fontSize: 13 }}>Sin despachos activos</div>
                    </div>
                }
              </div>
            </div>

            <div className="card">
              <div className="card__head"><h3>Tu asistente técnico comercial</h3></div>
              <div className="card__body">
                {vendedorNombre
                  ? <>
                      <div className="row" style={{ gap: 12 }}>
                        <div className="avatar" style={{ width: 44, height: 44, fontSize: 14 }}>{vendedorInits}</div>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontWeight: 600 }}>{vendedorNombre}</div>
                          <div className="muted" style={{ fontSize: 11 }}>Asistente Técnico comercial asignado</div>
                        </div>
                      </div>
                      <div className="row" style={{ gap: 8, marginTop: 12 }}>
                        <a className="btn btn--ghost btn--sm" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none' }}
                          href={orgTel ? `tel:${orgTel}` : '#'}
                          onClick={e => { if (!orgTel) { e.preventDefault(); alert('Sin teléfono configurado.'); } }}>
                          {Icon.phone}<span>Llamar</span></a>
                        <a className="btn btn--ghost btn--sm" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none' }}
                          href={vendedorEmailCF ? `mailto:${vendedorEmailCF}` : '#'}
                          onClick={e => { if (!vendedorEmailCF) { e.preventDefault(); alert('Sin email del vendedor.'); } }}>
                          {Icon.mail}<span>Correo</span></a>
                      </div>
                    </>
                  : <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--ink-5)' }}>Sin asistente técnico comercial asignado</div>
                }
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

function MisDocumentos() {
  const [solicitudes, setSolicitudes] = React.useState([]);
  const [loading,     setLoading]     = React.useState(true);
  const [selected,    setSelected]    = React.useState(null);
  const [docs,        setDocs]        = React.useState([]);
  const [loadingDocs, setLoadingDocs] = React.useState(false);
  const [search,      setSearch]      = React.useState('');

  React.useEffect(() => {
    DesasfAPI.get('/solicitudes?limit=200')
      .then(r => {
        const rows = r.rows || (Array.isArray(r) ? r : []);
        setSolicitudes(rows);
        if (rows.length > 0) abrirSolicitud(rows[0]);
      })
      .catch(() => setSolicitudes([]))
      .finally(() => setLoading(false));
  }, []);

  function abrirSolicitud(sol) {
    setSelected(sol);
    setLoadingDocs(true);
    setDocs([]);
    DesasfAPI.get('/solicitudes/' + sol.id + '/documentos')
      .then(d => setDocs(Array.isArray(d) ? d : []))
      .catch(() => setDocs([]))
      .finally(() => setLoadingDocs(false));
  }

  function descargar(d) {
    if (!selected) return;
    const tk = DesasfAPI.getToken();
    fetch(`/api/solicitudes/${selected.id}/documentos/${d.id}/descargar`, {
      headers: { Authorization: 'Bearer ' + tk },
    }).then(res => {
      if (!res.ok) throw new Error('Error al descargar');
      return res.blob();
    }).then(blob => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = d.nombre || 'documento';
      document.body.appendChild(a); a.click(); a.remove();
      URL.revokeObjectURL(url);
    }).catch(err => alert('Error: ' + err.message));
  }

  function fmtSize(b) {
    b = Number(b || 0);
    if (b >= 1024 * 1024) return (b / 1024 / 1024).toFixed(1) + ' MB';
    if (b >= 1024) return (b / 1024).toFixed(0) + ' KB';
    return b + ' B';
  }

  const filtered = solicitudes.filter(s => {
    if (!search.trim()) return true;
    const q = search.toLowerCase();
    return (s.ticket || '').toLowerCase().includes(q)
      || (s.producto_nombre || '').toLowerCase().includes(q)
      || (s.orden_compra || '').toLowerCase().includes(q);
  });

  const estadoLbl = { recibida: 'Recepción', diseno: 'Diseño', produccion: 'Producción',
                      transito: 'Tránsito', entregado: 'Entregado', aprobada: 'Aprobada', cancelada: 'Cancelada' };
  const estadoKind = { recibida: 'pending', diseno: 'review', produccion: 'prod',
                       transito: 'transit', entregado: 'ok', aprobada: 'ok', cancelada: 'neutral' };
  const tipoLbl = { orden_compra: 'Orden de compra', documento: 'Documento' };

  const ocDoc    = docs.find(d => d.tipo === 'orden_compra');
  const otrosDoc = docs.filter(d => d.tipo !== 'orden_compra');

  return (
    <div className="app">
      <CliSidebar active="docs"/>
      <Topbar crumbs={['Soporte', 'Mis documentos']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Mis documentos</h1>
            <p>Selecciona una solicitud para ver sus documentos: orden de compra, fichas técnicas, comprobantes y todo lo que se adjunte durante el proceso.</p>
          </div>
        </div>

        {loading
          ? <div style={{ padding: 40, textAlign: 'center', color: 'var(--ink-5)' }}>Cargando solicitudes…</div>
          : solicitudes.length === 0
            ? <div className="card"><div className="card__body" style={{ textAlign: 'center', padding: 32, color: 'var(--ink-5)' }}>
                Aún no tienes solicitudes registradas. Cuando crees una nueva, sus documentos aparecerán aquí.
              </div></div>
            : (
              <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 16 }}>
                <div className="card" style={{ alignSelf: 'flex-start', position: 'sticky', top: 16, maxHeight: 'calc(100vh - 80px)', display: 'flex', flexDirection: 'column' }}>
                  <div className="card__head" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 8 }}>
                    <h3 style={{ fontSize: 14 }}>Mis solicitudes</h3>
                    <input className="input" placeholder="Buscar ticket, producto, OC…"
                      value={search} onChange={e => setSearch(e.target.value)}
                      style={{ height: 30, fontSize: 12 }}/>
                  </div>
                  <div style={{ overflow: 'auto', flex: 1 }}>
                    {filtered.map(s => {
                      const isSel = selected?.id === s.id;
                      return (
                        <div key={s.id}
                          onClick={() => abrirSolicitud(s)}
                          style={{
                            padding: '10px 14px', cursor: 'pointer',
                            borderBottom: '1px solid var(--line)',
                            background: isSel ? 'var(--ink-9)' : '#fff',
                            borderLeft: isSel ? '3px solid var(--hi-vis)' : '3px solid transparent',
                          }}>
                          <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                            <span className="k" style={{ fontSize: 11, fontWeight: 700, color: 'var(--ink-1)' }}>{s.ticket || '#' + s.id}</span>
                            <Pill kind={estadoKind[s.estado] || 'neutral'}>{estadoLbl[s.estado] || s.estado}</Pill>
                          </div>
                          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 2 }}>{s.proyecto || s.producto_nombre || '—'}</div>
                          <div className="muted" style={{ fontSize: 11 }}>
                            {s.proyecto ? `${s.producto_nombre || ''}${s.volumen ? ' · ' + s.volumen + ' ' + (s.unidad || 'm³') : ''}` : (s.volumen ? `${s.volumen} ${s.unidad || 'm³'}` : '')}
                            {s.oc_numero ? ` · OC ${s.oc_numero}` : ''}
                          </div>
                          <div className="muted" style={{ fontSize: 10, marginTop: 2 }}>
                            {s.created_at ? new Date(s.created_at).toLocaleDateString('es-PE', { day: '2-digit', month: 'short', year: 'numeric' }) : ''}
                          </div>
                        </div>
                      );
                    })}
                    {filtered.length === 0 && (
                      <div style={{ padding: 18, color: 'var(--ink-5)', fontSize: 12, textAlign: 'center' }}>
                        Sin solicitudes que coincidan con "{search}".
                      </div>
                    )}
                  </div>
                </div>

                <div>
                  {!selected ? (
                    <div className="card"><div className="card__body" style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                      Selecciona una solicitud para ver sus documentos.
                    </div></div>
                  ) : (
                    <>
                      <div className="card" style={{ marginBottom: 14 }}>
                        <div className="card__head">
                          <div>
                            <div className="muted k" style={{ fontSize: 11 }}>{selected.ticket || '#' + selected.id}</div>
                            <h3 style={{ margin: 0 }}>{selected.proyecto || selected.producto_nombre || 'Solicitud'}</h3>
                            {selected.proyecto && <div className="muted" style={{ fontSize: 12 }}>{selected.producto_nombre}</div>}
                          </div>
                          <button className="btn btn--ghost btn--sm" onClick={() => navigate('solicitud-detalle', { solicitudId: selected.id })}>
                            Ver detalle completo →
                          </button>
                        </div>
                        <div className="card__body" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, fontSize: 12 }}>
                          <div>
                            <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Estado</div>
                            <Pill kind={estadoKind[selected.estado] || 'neutral'}>{estadoLbl[selected.estado] || selected.estado}</Pill>
                          </div>
                          <div>
                            <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Volumen</div>
                            <div style={{ fontWeight: 600 }}>{selected.volumen ? `${selected.volumen} ${selected.unidad || 'm³'}` : '—'}</div>
                          </div>
                          <div>
                            <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>OC</div>
                            <div className="k" style={{ fontSize: 12 }}>{selected.orden_compra || '—'}</div>
                          </div>
                          <div>
                            <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Entrega</div>
                            <div style={{ fontWeight: 600 }}>{selected.eta ? new Date(selected.eta).toLocaleDateString('es-PE') : '—'}</div>
                          </div>
                        </div>
                      </div>

                      <div className="card">
                        <div className="card__head">
                          <h3>Documentos ({docs.length})</h3>
                        </div>
                        <div className="card__body" style={{ padding: 0 }}>
                          {loadingDocs ? (
                            <div style={{ padding: 24, textAlign: 'center', color: 'var(--ink-5)' }}>Cargando documentos…</div>
                          ) : docs.length === 0 ? (
                            <div style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                              <div style={{ marginBottom: 6 }}>{Icon.doc}</div>
                              Aún no hay documentos adjuntos a esta solicitud.
                            </div>
                          ) : (
                            <>
                              {ocDoc && (
                                <div style={{ padding: '14px 18px', borderBottom: '1px solid var(--line)', background: 'var(--ink-9)' }}>
                                  <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>Orden de compra</div>
                                  <div className="row" style={{ gap: 10 }}>
                                    <div style={{ width: 36, height: 36, borderRadius: 6, background: 'var(--hi-vis)', color: 'var(--ink-0)', display: 'grid', placeItems: 'center' }}>{Icon.doc}</div>
                                    <div style={{ flex: 1, minWidth: 0 }}>
                                      <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ocDoc.nombre}</div>
                                      <div className="muted" style={{ fontSize: 11 }}>{fmtSize(ocDoc.archivo_size)} · {ocDoc.created_at ? new Date(ocDoc.created_at).toLocaleDateString('es-PE') : ''}</div>
                                    </div>
                                    <button className="btn btn--ghost btn--sm" onClick={() => descargar(ocDoc)}>
                                      {Icon.download}<span>Descargar</span>
                                    </button>
                                  </div>
                                </div>
                              )}
                              {otrosDoc.length > 0 && (
                                <div>
                                  {ocDoc && <div className="meta" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '10px 18px 0' }}>Otros documentos</div>}
                                  {otrosDoc.map(d => (
                                    <div key={d.id} style={{ padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--line)' }}>
                                      <div style={{ width: 32, height: 32, borderRadius: 5, background: 'var(--ink-9)', color: 'var(--ink-4)', display: 'grid', placeItems: 'center' }}>{Icon.doc}</div>
                                      <div style={{ flex: 1, minWidth: 0 }}>
                                        <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.nombre}</div>
                                        <div className="muted" style={{ fontSize: 11 }}>{fmtSize(d.archivo_size)} · {d.created_at ? new Date(d.created_at).toLocaleDateString('es-PE') : ''}</div>
                                      </div>
                                      <button className="btn btn--ghost btn--sm" onClick={() => descargar(d)}>
                                        {Icon.download}<span>Descargar</span>
                                      </button>
                                    </div>
                                  ))}
                                </div>
                              )}
                            </>
                          )}
                        </div>
                      </div>
                    </>
                  )}
                </div>
              </div>
            )
        }
      </main>
    </div>
  );
}

function MiVendedor() {
  const user = DesasfAPI.getCurrentUser() || {};
  const [empresa, setEmpresa] = React.useState(null);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    if (!user.empresa_id) { setLoading(false); return; }
    DesasfAPI.get('/clientes/' + user.empresa_id)
      .then(setEmpresa)
      .catch(() => setEmpresa({}))
      .finally(() => setLoading(false));
  }, []);

  const v = empresa || {};
  const vNombre = v.vendedor_nombre;
  const vEmail  = v.vendedor_email;
  const orgTel  = window._appConfig?.org_telefono || null;
  const inits   = vNombre
    ? vNombre.trim().split(/\s+/).slice(0, 2).map(w => w[0]).join('').toUpperCase()
    : '?';

  return (
    <div className="app">
      <CliSidebar active="vendedor"/>
      <Topbar crumbs={['Soporte', 'Mi asistente técnico comercial']}/>
      <main className="main">
        <div className="page-head">
          <div>
            <h1>Mi asistente técnico comercial</h1>
            <p>{vNombre ? `Tu contacto comercial directo${window._appConfig?.empresa_nombre ? ' en ' + window._appConfig.empresa_nombre : ''}.` : (loading ? 'Cargando…' : 'Aún no tienes asistente técnico comercial asignado.')}</p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head"><h3>Contacto</h3></div>
            <div className="card__body">
              {vNombre ? (
                <>
                  <div className="row" style={{ gap: 14, alignItems: 'center' }}>
                    <div className="avatar" style={{ width: 56, height: 56, fontSize: 18 }}>{inits}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: 'var(--cond)', fontSize: 20, fontWeight: 700 }}>{vNombre}</div>
                      <div className="muted" style={{ fontSize: 12 }}>Asistente Técnico comercial de {v.razon_social || 'tu empresa'}</div>
                    </div>
                  </div>
                  <div className="row" style={{ gap: 8, marginTop: 18 }}>
                    <a className="btn btn--accent" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none' }}
                      href={orgTel ? `tel:${orgTel}` : '#'}
                      onClick={e => { if (!orgTel) { e.preventDefault(); alert('Sin teléfono configurado.'); } }}>
                      {Icon.phone}<span>{orgTel || 'Llamar'}</span></a>
                    <a className="btn btn--ghost" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none' }}
                      href={vEmail ? `mailto:${vEmail}?subject=Consulta%20comercial` : '#'}
                      onClick={e => { if (!vEmail) { e.preventDefault(); alert('Sin email del asistente técnico comercial.'); } }}>
                      {Icon.mail}<span>{vEmail || 'Enviar correo'}</span></a>
                  </div>
                </>
              ) : (
                <div style={{ padding: '24px 0', textAlign: 'center', color: 'var(--ink-5)' }}>
                  {loading ? 'Cargando…' : `Sin asistente técnico comercial asignado. Contacta${window._appConfig?.empresa_nombre ? ' a ' + window._appConfig.empresa_nombre : ' a la organización'} para que se te asigne uno.`}
                </div>
              )}
            </div>
          </div>

          <div className="card">
            <div className="card__head"><h3>Tu empresa</h3></div>
            <div className="card__body">
              <div className="meta" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Razón social</div>
              <div style={{ fontWeight: 600, marginBottom: 10 }}>{v.razon_social || '—'}</div>
              <div className="meta" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>RUC</div>
              <div className="k" style={{ marginBottom: 10 }}>{v.ruc || '—'}</div>
              <div className="meta" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Sector</div>
              <div style={{ marginBottom: 10 }}>{v.sector || '—'}</div>
              {v.direccion && (<>
                <div className="meta" style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Dirección</div>
                <div>{v.direccion}</div>
              </>)}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

window.FuerzaVentas = FuerzaVentas;
window.CentroAyuda = CentroAyuda;
window.Auditoria = Auditoria;
window.ClienteFinal = ClienteFinal;
window.MiVendedor = MiVendedor;
window.MisDocumentos = MisDocumentos;