// Logística simplificada — flujo lineal de despachos
// Tres vistas: COORDINADOR (web) · CONDUCTOR (móvil) · CLIENTE (público)

const ESTADO_META = {
  programado:  { l: 'Programado',     c: 'var(--ink-5)',           bg: 'var(--ink-9)',             dot: '○' },
  cargando:    { l: 'Cargando',       c: 'var(--status-prod)',     bg: 'var(--status-prod-bg)',    dot: '◔' },
  en_ruta:     { l: 'En ruta',        c: 'var(--status-transit)',  bg: 'var(--status-transit-bg)', dot: '◐' },
  incidencia:  { l: 'Con incidencia', c: 'var(--status-pending)',  bg: 'var(--status-pending-bg)', dot: '!' },
  entregado:   { l: 'Entregado',      c: 'var(--status-ok)',       bg: 'var(--status-ok-bg)',      dot: '✓' },
};
function estadoUI(estadoDB) {
  return estadoDB === 'pendiente' ? 'programado' : estadoDB;
}
function fmtTime(iso) {
  if (!iso) return null;
  return new Date(iso).toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' });
}

function EstadoChip({ estado, large }) {
  const m = ESTADO_META[estado] || ESTADO_META.programado;
  return (
    <span style={{
      background: m.bg, color: m.c,
      padding: large ? '4px 10px' : '2px 8px',
      borderRadius: 11, fontSize: large ? 12 : 11, fontWeight: 600,
      letterSpacing: '0.02em',
      display: 'inline-flex', alignItems: 'center', gap: 6,
    }}>
      <span style={{ width: 14, height: 14, borderRadius: '50%', background: m.c, color: '#fff', display: 'inline-grid', placeItems: 'center', fontSize: 9, fontWeight: 700 }}>{m.dot}</span>
      {m.l}
    </span>
  );
}

// ═══════════════════════════════════════════════
// 1) COORDINADOR DE LOGÍSTICA
// ═══════════════════════════════════════════════

function VistaLogistica() {
  const [despachos, setDespachos] = React.useState([]);
  const [loading,   setLoading]   = React.useState(true);
  const [selId,     setSelId]     = React.useState(null);
  const [saving,    setSaving]    = React.useState(false);
  const [eventos,   setEventos]   = React.useState([]);
  const [showAsign, setShowAsign] = React.useState(false);
  const [conductores, setConductores] = React.useState([]);
  const [vehiculos, setVehiculos] = React.useState([]);
  const [aCond,    setACond]      = React.useState('');
  const [aVeh,     setAVeh]       = React.useState('');

  const me = (typeof DesasfAPI !== 'undefined' && DesasfAPI.getCurrentUser()) || {};
  const canAsignar = DesasfAPI.hasPerm('logistica.asignar');

  function fetchDespachos() {
    setLoading(true);
    DesasfAPI.get('/logistica/despachos?limit=20')
      .then(d => {
        setDespachos(d.rows);
        if (d.rows.length > 0 && !selId) setSelId(d.rows[0].id);
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { fetchDespachos(); }, []);

  React.useEffect(() => {
    if (!selId) { setEventos([]); return; }
    DesasfAPI.get('/logistica/despachos/' + selId + '/eventos')
      .then(setEventos).catch(() => setEventos([]));
  }, [selId]);

  async function cambiarEstado(estado) {
    if (!sel) return;
    setSaving(true);
    try {
      await DesasfAPI.put('/logistica/despachos/' + sel.id + '/estado', { estado });
      fetchDespachos();
    } catch (err) {
      alert(err.message);
    } finally { setSaving(false); }
  }

  function abrirAsignacion() {
    if (!sel) return;
    setACond(sel.conductor_id ? String(sel.conductor_id) : '');
    setAVeh(sel.vehiculo_id ? String(sel.vehiculo_id) : '');
    setShowAsign(true);
    if (conductores.length === 0) {
      Promise.all([
        DesasfAPI.get('/logistica/conductores').catch(() => []),
        DesasfAPI.get('/logistica/vehiculos').catch(() => []),
      ]).then(([c, v]) => { setConductores(c || []); setVehiculos(v || []); });
    }
  }

  async function guardarAsignacion() {
    if (!sel || !aCond) { alert('Selecciona un conductor'); return; }
    setSaving(true);
    try {
      await DesasfAPI.put('/logistica/despachos/' + sel.id + '/asignar', {
        conductor_id: Number(aCond),
        vehiculo_id:  aVeh ? Number(aVeh) : null,
      });
      setShowAsign(false);
      fetchDespachos();
    } catch (err) { alert(err.message); }
    finally { setSaving(false); }
  }

  async function resolverEvento(eventoId) {
    const resolucion = prompt('¿Cómo se resolvió? (opcional)');
    if (resolucion === null) return;
    try {
      await DesasfAPI.put('/logistica/despachos/' + selId + '/eventos/' + eventoId, { resolucion });
      DesasfAPI.get('/logistica/despachos/' + selId + '/eventos').then(setEventos);
    } catch (err) { alert(err.message); }
  }

  const sel = despachos.find(d => d.id === selId);

  const counts = despachos.reduce((acc, d) => {
    const ui = estadoUI(d.estado);
    acc[ui] = (acc[ui] || 0) + 1;
    return acc;
  }, {});

  return (
    <div className="app">
      <Sidebar active="logistica"/>
      <Topbar
        crumbs={['Información', 'Logística', 'Despachos']}
        cta={<button className="btn btn--accent" onClick={fetchDespachos}>{Icon.upload}<span>{loading ? 'Cargando…' : 'Refrescar'}</span></button>}
      />
      <main className="main">

        <div className="page-head">
          <div>
            <h1>Despachos</h1>
            <p>Flujo simplificado · salida · llegada estimada · llegada real · estado · incidencias</p>
          </div>
          <div className="row" style={{ gap: 10 }}>
            <span className="chip is-active">Total <span className="n">{despachos.length}</span></span>
          </div>
        </div>

        {/* Resumen rápido */}
        <div className="kpi-grid" style={{ marginBottom: 18 }}>
          <div className="kpi"><div className="kpi__label">Programados</div><div className="kpi__value">{counts.programado || 0}</div><span className="kpi__delta">esperando salida</span></div>
          <div className="kpi kpi--accent"><div className="kpi__label">En ruta</div><div className="kpi__value">{counts.en_ruta || 0}</div><span className="kpi__delta up">en tránsito</span></div>
          <div className="kpi kpi--review"><div className="kpi__label">Con incidencia</div><div className="kpi__value">{counts.incidencia || 0}</div><span className="kpi__delta">requieren atención</span></div>
          <div className="kpi kpi--ok"><div className="kpi__label">Entregados</div><div className="kpi__value">{counts.entregado || 0}<span className="unit">/ {despachos.length}</span></div><span className="kpi__delta up">conforme</span></div>
        </div>

        {/* Tabla */}
        <div className="card" style={{ marginBottom: 16 }}>
          <div className="card__head"><h3>Despachos</h3>
            <span className="meta">click en una fila para ver detalle</span>
          </div>
          <table className="tbl">
            <thead><tr>
              <th>ID</th><th>Cliente / planta</th><th>Producto</th>
              <th>Conductor · placa</th>
              <th>Salida</th><th>ETA</th><th>Llegada</th>
              <th>Estado</th>
            </tr></thead>
            <tbody>
              {despachos.map(d => {
                const ui = estadoUI(d.estado);
                return (
                  <tr key={d.id}
                    onClick={() => setSelId(d.id)}
                    style={{ cursor: 'pointer', background: d.id === selId ? 'rgba(255,212,0,0.06)' : undefined }}>
                    <td><b className="k">{d.despacho_ref}</b></td>
                    <td>
                      <div style={{ fontWeight: 600 }}>{d.cliente_nombre}</div>
                      <div className="muted" style={{ fontSize: 11 }}>{d.planta || '—'} → {d.ticket}</div>
                    </td>
                    <td className="muted" style={{ fontSize: 12 }}>{d.producto_nombre} · {fmtNum(d.volumen)} m³</td>
                    <td>
                      <div>{d.conductor_nombre || <span className="muted">sin asignar</span>}</div>
                      <div className="k" style={{ fontSize: 11, color: 'var(--ink-5)' }}>{d.placa || '—'}</div>
                    </td>
                    <td className="num">{fmtTime(d.salida_at) || <span className="muted">—</span>}</td>
                    <td className="num">{fmtTime(d.eta_at) || '—'}</td>
                    <td className="num" style={{ color: d.llegada_at ? 'var(--status-ok)' : 'var(--ink-7)', fontWeight: d.llegada_at ? 600 : 400 }}>{fmtTime(d.llegada_at) || '—'}</td>
                    <td><EstadoChip estado={ui}/></td>
                  </tr>
                );
              })}
              {!loading && despachos.length === 0 && (
                <tr><td colSpan={8} style={{ padding: 32, textAlign: 'center', color: 'var(--ink-5)' }}>
                  Sin despachos registrados aún.
                </td></tr>
              )}
            </tbody>
          </table>
        </div>

        {sel && <>
          <div className="sect-h"><h2>Detalle · {sel.despacho_ref}</h2>
            <span className="meta">{sel.cliente_nombre} · {sel.producto_nombre}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 16, marginBottom: 16 }}>

            <div className="card">
              <div className="card__head"><h3>Línea de tiempo</h3>
                <EstadoChip estado={estadoUI(sel.estado)} large/>
              </div>
              <div className="card__body" style={{ padding: '24px 22px' }}>
                <div className="dispatch-flow">
                  <FlowStep
                    label="Programado"
                    time={sel.eta_at ? `ETA ${fmtTime(sel.eta_at)}` : '—'}
                    done={true}
                    active={sel.estado === 'pendiente' || sel.estado === 'cargando'}
                    detail={`Asignado: ${sel.conductor_nombre || 'sin conductor'} · ${sel.placa || 'sin vehículo'}`}/>
                  <FlowConn done={!!sel.salida_at}/>
                  <FlowStep
                    label="Salida de planta"
                    time={fmtTime(sel.salida_at) || 'pendiente'}
                    done={!!sel.salida_at}
                    detail={`Origen: ${sel.planta || '—'}`}/>
                  <FlowConn done={['en_ruta','incidencia','entregado'].includes(sel.estado)} warn={sel.estado === 'incidencia'}/>
                  <FlowStep
                    label="En ruta"
                    time={['en_ruta','incidencia'].includes(sel.estado) ? `ETA ${fmtTime(sel.eta_at)}` : (sel.llegada_at ? `→ ${fmtTime(sel.llegada_at)}` : 'pendiente')}
                    done={['en_ruta','incidencia','entregado'].includes(sel.estado)}
                    active={['en_ruta','incidencia'].includes(sel.estado)}
                    warn={sel.estado === 'incidencia'}
                    detail={`Destino: ${sel.cliente_nombre}`}/>
                  <FlowConn done={!!sel.llegada_at}/>
                  <FlowStep
                    label="Entregado"
                    time={fmtTime(sel.llegada_at) || (sel.eta_at ? `est. ${fmtTime(sel.eta_at)}` : '—')}
                    done={!!sel.llegada_at}
                    active={sel.estado === 'entregado'}
                    detail={sel.llegada_at ? 'Confirmado por conductor' : 'pendiente de confirmación'}/>
                </div>

                <div className="row" style={{ marginTop: 22, paddingTop: 16, borderTop: '1px solid var(--line)', gap: 8, flexWrap: 'wrap' }}>
                  {canAsignar && !['en_ruta','entregado'].includes(sel.estado) && (
                    <button className="btn btn--primary btn--sm" onClick={abrirAsignacion} disabled={saving}>
                      {sel.conductor_id ? 'Reasignar conductor' : 'Asignar conductor'}
                    </button>
                  )}
                  {sel.estado === 'pendiente' && sel.conductor_id && (
                    <button className="btn btn--primary btn--sm" onClick={() => cambiarEstado('cargando')} disabled={saving}>
                      Marcar carga
                    </button>
                  )}
                  {sel.estado === 'cargando' && (
                    <button className="btn btn--primary btn--sm" onClick={() => cambiarEstado('en_ruta')} disabled={saving}>
                      Marcar salida ahora
                    </button>
                  )}
                  {sel.estado === 'en_ruta' && (
                    <>
                      <button className="btn btn--accent btn--sm" onClick={() => cambiarEstado('entregado')} disabled={saving}>
                        Confirmar entrega
                      </button>
                      <button className="btn btn--ghost btn--sm" onClick={() => cambiarEstado('incidencia')} disabled={saving}>
                        Reportar incidencia
                      </button>
                    </>
                  )}
                  {sel.estado === 'incidencia' && (
                    <button className="btn btn--primary btn--sm" onClick={() => cambiarEstado('en_ruta')} disabled={saving}>
                      Reanudar ruta
                    </button>
                  )}
                  <a className="btn btn--ghost btn--sm" href={sel.conductor_tel ? `tel:${sel.conductor_tel}` : '#'}
                    onClick={e => { if (!sel.conductor_tel) { e.preventDefault(); alert('No hay teléfono registrado para este conductor.'); } }}
                    style={{ textDecoration: 'none' }}>{Icon.phone}<span>{sel.conductor_tel ? `Llamar ${sel.conductor_tel}` : 'Llamar conductor'}</span></a>
                  {sel.estado !== 'entregado' && sel.estado !== 'incidencia' && (
                    <div style={{ marginLeft: 'auto' }}>
                      <button className="btn btn--ghost btn--sm" style={{ color: 'var(--status-danger)' }}
                        onClick={() => { if (confirm('¿Cancelar este despacho? (marcará como incidencia)')) cambiarEstado('incidencia'); }}>
                        Cancelar despacho
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* Datos */}
            <div className="card">
              <div className="card__head"><h3>Datos</h3></div>
              <div className="card__body">
                <dl className="dl">
                  <dt>Solicitud</dt><dd className="k" style={{ fontWeight: 600 }}>{sel.ticket}</dd>
                  <dt>Cliente</dt><dd>{sel.cliente_nombre}</dd>
                  {sel.proyecto && <><dt>Proyecto</dt><dd>{sel.proyecto}</dd></>}
                  <dt>Producto</dt><dd>{sel.producto_nombre}</dd>
                  <dt>Volumen</dt><dd className="num">{parseFloat(sel.volumen)} m³</dd>
                  <dt>Lote</dt><dd className="k">{sel.lote || '—'}</dd>
                  <dt>Planta</dt><dd>{sel.planta || '—'}</dd>
                  {sel.temperatura != null && <><dt>Temperatura</dt><dd>{sel.temperatura} °C</dd></>}
                  <dt>Conductor</dt><dd>{sel.conductor_nombre || '—'}</dd>
                  <dt>Vehículo</dt><dd>{sel.placa ? `${sel.placa} · ${sel.marca || ''} ${sel.modelo || ''}` : '—'}</dd>
                  <dt>Salida</dt><dd className="num">{fmtTime(sel.salida_at) || '—'}</dd>
                  <dt>ETA</dt><dd className="num">{fmtTime(sel.eta_at) || '—'}</dd>
                  <dt>Llegada</dt><dd className="num" style={{ color: sel.llegada_at ? 'var(--status-ok)' : 'var(--ink-7)' }}>{fmtTime(sel.llegada_at) || '—'}</dd>
                </dl>
              </div>
            </div>
          </div>

          {/* Observaciones internas */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div className="card">
              <div className="card__head"><h3>Observaciones internas</h3>
                <span className="tag" style={{ background: 'var(--ink-0)', color: 'var(--hi-vis)', borderColor: 'var(--ink-0)' }}>SOLO EQUIPO</span>
              </div>
              <div className="card__body">
                {sel.notas ? (
                  <div style={{ padding: 12, background: 'var(--ink-9)', borderRadius: 6, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                    {sel.notas}
                  </div>
                ) : (
                  <div className="muted" style={{ fontSize: 13, fontStyle: 'italic' }}>Sin observaciones internas para este despacho.</div>
                )}
                <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>Visible para coordinador, conductor y administradores. <b>No visible para el cliente.</b></div>
              </div>
            </div>

            <div className="card">
              <div className="card__head"><h3>Incidencias y emergencias</h3>
                {eventos.some(ev => !ev.resuelto && ev.tipo === 'emergencia')
                  ? <Pill kind="danger">Emergencia activa</Pill>
                  : eventos.some(ev => !ev.resuelto)
                  ? <Pill kind="pending">Con incidencia</Pill>
                  : <Pill kind="ok">Sin incidencias</Pill>}
              </div>
              <div className="card__body">
                {eventos.length === 0 ? (
                  <div className="muted" style={{ fontSize: 12, lineHeight: 1.5 }}>
                    El conductor reporta incidencias y emergencias desde su app móvil. Aún no hay eventos en este despacho.
                  </div>
                ) : (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {eventos.map(ev => (
                      <div key={ev.id} style={{ padding: 10, borderRadius: 6,
                        background: ev.tipo === 'emergencia' ? 'var(--status-danger-bg)' : 'var(--status-pending-bg)',
                        border: '1px solid ' + (ev.tipo === 'emergencia' ? 'var(--status-danger)' : 'var(--status-pending)') }}>
                        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 4 }}>
                          <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase',
                            color: ev.tipo === 'emergencia' ? 'var(--status-danger)' : 'var(--status-pending)' }}>
                            {ev.tipo === 'emergencia' ? '🚨 EMERGENCIA' : '⚠ Incidencia'} · {ev.severidad}
                          </span>
                          {ev.resuelto ? <Pill kind="ok">Resuelta</Pill>
                            : (canAsignar && <button className="btn btn--ghost btn--sm" onClick={() => resolverEvento(ev.id)} style={{ padding: '2px 8px', fontSize: 11 }}>Marcar resuelta</button>)}
                        </div>
                        <div style={{ fontSize: 12, color: 'var(--ink-1)', marginBottom: 2 }}>{ev.mensaje}</div>
                        <div style={{ fontSize: 11, color: 'var(--ink-5)' }}>
                          {ev.reportado_por_nombre || 'Sistema'} · {window.formatRelativeTime?.(ev.reportado_at) || ''}
                          {ev.resuelto && ev.resuelto_por_nombre && <> · Resuelto por {ev.resuelto_por_nombre}</>}
                        </div>
                        {ev.resolucion && (
                          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 4, fontStyle: 'italic' }}>
                            "{ev.resolucion}"
                          </div>
                        )}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          </div>
        </>}

        {showAsign && sel && (
          <div onClick={() => !saving && setShowAsign(false)}
            className="modal-overlay">
            <div onClick={e => e.stopPropagation()}
              style={{ width: 520, maxWidth: '92vw', background: '#fff', borderRadius: 12, padding: 22, boxShadow: '0 30px 80px rgba(0,0,0,0.4)' }}>
              <div style={{ marginBottom: 16 }}>
                <div style={{ fontSize: 11, color: 'var(--ink-5)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 600 }}>Despacho {sel.despacho_ref}</div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 22, fontWeight: 700 }}>
                  {sel.conductor_id ? 'Reasignar conductor' : 'Asignar conductor'}
                </div>
                <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>
                  {sel.cliente_nombre} · {sel.producto_nombre} · {fmtNum(sel.volumen)} m³
                </div>
              </div>

              <label className="label">Conductor</label>
              <select className="input" value={aCond} onChange={e => setACond(e.target.value)}>
                <option value="">— Selecciona conductor —</option>
                {conductores.map(c => (
                  <option key={c.id} value={c.id}>
                    {c.nombre}{c.dni ? ` · ${c.dni}` : ''}{c.telefono ? ` · ${c.telefono}` : ''}
                  </option>
                ))}
              </select>

              <label className="label" style={{ marginTop: 14 }}>Vehículo (opcional)</label>
              <select className="input" value={aVeh} onChange={e => setAVeh(e.target.value)}>
                <option value="">— Sin vehículo asignado —</option>
                {vehiculos.map(v => (
                  <option key={v.id} value={v.id}>
                    {v.placa}{v.marca ? ` · ${v.marca}` : ''}{v.capacidad_m3 ? ` · ${v.capacidad_m3} m³` : ''}
                  </option>
                ))}
              </select>

              {!conductores.length && (
                <div className="muted" style={{ fontSize: 11, marginTop: 8 }}>
                  Cargando lista de conductores y vehículos…
                </div>
              )}

              <div className="row" style={{ marginTop: 22, justifyContent: 'flex-end', gap: 8 }}>
                <button className="btn btn--ghost" onClick={() => setShowAsign(false)} disabled={saving}>Cancelar</button>
                <button className="btn btn--accent" onClick={guardarAsignacion} disabled={saving || !aCond}>
                  {saving ? 'Asignando…' : 'Guardar asignación'}
                </button>
              </div>
            </div>
          </div>
        )}

      </main>
    </div>
  );
}

function FlowStep({ label, time, done, active, detail, warn }) {
  return (
    <div className="flow-step">
      <div className={`flow-step__dot ${done ? 'is-done' : ''} ${active ? 'is-active' : ''} ${warn ? 'is-warn' : ''}`}>
        {done && !active && <svg viewBox="0 0 12 12" width="12" height="12"><path d="M2 6.5l3 3 5-6" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>}
        {active && !warn && <span style={{ width: 8, height: 8, background: '#fff', borderRadius: '50%' }}/>}
        {warn && <span style={{ color: '#fff', fontWeight: 700, fontSize: 11 }}>!</span>}
      </div>
      <div className="flow-step__body">
        <div className="flow-step__label">{label}</div>
        <div className="flow-step__time">{time}</div>
        <div className="flow-step__detail">{detail}</div>
      </div>
    </div>
  );
}

function FlowConn({ done, warn }) {
  return <div className={`flow-conn ${done ? 'is-done' : ''} ${warn ? 'is-warn' : ''}`}/>;
}

// ═══════════════════════════════════════════════
// 2) CONDUCTOR (móvil)
// ═══════════════════════════════════════════════

function VistaConductor() {
  const [despacho, setDespacho] = React.useState(null);
  const [otros,    setOtros]    = React.useState([]);
  const [eventos,  setEventos]  = React.useState([]);
  const [loading,  setLoading]  = React.useState(true);
  const [saving,   setSaving]   = React.useState(false);
  const [obs,      setObs]      = React.useState('');
  const [modal,    setModal]    = React.useState(null); // 'incidencia' | 'emergencia' | 'finalizar' | null
  const [evMsg,    setEvMsg]    = React.useState('');
  const [evSev,    setEvSev]    = React.useState('media');
  const [finDocs,  setFinDocs]  = React.useState([]); // archivos para adjuntar al finalizar
  const [finNota,  setFinNota]  = React.useState('');
  const finFileRef = React.useRef(null);

  function fetchData() {
    setLoading(true);
    DesasfAPI.get('/logistica/despachos?limit=10')
      .then(d => {
        const rows = d.rows || [];
        const activo = rows.find(r => ['pendiente','cargando','en_ruta','incidencia'].includes(r.estado))
                    || rows[0] || null;
        setDespacho(activo);
        if (activo) {
          setObs(activo.notas || '');
          DesasfAPI.get('/logistica/despachos/' + activo.id + '/eventos')
            .then(setEventos).catch(() => setEventos([]));
        }
        setOtros(rows.filter(r => activo && r.id !== activo.id).slice(0, 2));
      })
      .catch(console.error)
      .finally(() => setLoading(false));
  }

  React.useEffect(() => { fetchData(); }, []);

  async function cambiarEstado(estado) {
    if (!despacho) return;
    setSaving(true);
    try {
      await DesasfAPI.put('/logistica/despachos/' + despacho.id + '/estado', { estado });
      fetchData();
    } catch (err) { alert(err.message); }
    finally { setSaving(false); }
  }

  function abrirModal(tipo) {
    setEvMsg('');
    setEvSev(tipo === 'emergencia' ? 'critica' : 'media');
    setModal(tipo);
  }

  async function reportarEvento() {
    if (!despacho || !evMsg.trim()) {
      alert('Describe brevemente lo sucedido.');
      return;
    }
    setSaving(true);
    try {
      await DesasfAPI.post('/logistica/despachos/' + despacho.id + '/eventos', {
        tipo:      modal,
        severidad: evSev,
        mensaje:   evMsg.trim(),
      });
      setModal(null); setEvMsg('');
      fetchData();
    } catch (err) { alert(err.message); }
    finally { setSaving(false); }
  }

  async function confirmarEntrega() {
    if (!despacho) return;
    setSaving(true);
    try {
      // 1) Subir docs de entrega (paso 5) si hay
      for (const f of finDocs) {
        const fd = new FormData();
        fd.append('file', f);
        try {
          await DesasfAPI.upload('/solicitudes/' + despacho.solicitud_id + '/pasos/5/documentos', fd);
        } catch (e) { console.warn('No se pudo subir doc del paso 5:', e.message); }
      }
      // 2) Guardar nota en el paso 5
      if (finNota.trim()) {
        try {
          await DesasfAPI.put('/solicitudes/' + despacho.solicitud_id + '/pasos/5/notas', { notas: finNota.trim() });
        } catch (e) { console.warn('No se pudo guardar nota:', e.message); }
      }
      // 3) Marcar despacho como entregado (ya actualiza solicitud → entregado en backend)
      await DesasfAPI.put('/logistica/despachos/' + despacho.id + '/estado', { estado: 'entregado' });
      setModal(null);
      setFinDocs([]); setFinNota('');
      fetchData();
    } catch (err) { alert(err.message); }
    finally { setSaving(false); }
  }

  if (loading) return (
    <div style={{ width: '100%', minHeight: 600, display: 'grid', placeItems: 'center', color: 'var(--ink-5)', position: 'relative' }}>
      <button className="btn btn--ghost btn--sm" onClick={logout} style={{ position: 'absolute', top: 16, right: 16 }}>
        {Icon.logout}<span>Salir</span>
      </button>
      Cargando despacho asignado…
    </div>
  );

  if (!despacho) return (
    <div style={{ width: '100%', minHeight: 600, display: 'grid', placeItems: 'center', position: 'relative' }}>
      <button className="btn btn--ghost btn--sm" onClick={logout} style={{ position: 'absolute', top: 16, right: 16 }}>
        {Icon.logout}<span>Salir</span>
      </button>
      <div style={{ textAlign: 'center', padding: 30 }}>
        <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 8 }}>Sin despachos asignados</div>
        <div style={{ color: 'var(--ink-5)', fontSize: 13 }}>Cuando el coordinador te asigne un despacho aparecerá aquí.</div>
      </div>
    </div>
  );

  const ui = estadoUI(despacho.estado);
  const conductorIni = (despacho.conductor_nombre || '?').split(/\s+/).slice(0,2).map(w => w[0]).join('').toUpperCase();

  return (
    <div style={{ width: '100%', minHeight: 900, background: '#f1f3f5', display: 'grid', placeItems: 'center', padding: 30 }}>
      <div style={{ width: 390, background: '#fff', borderRadius: 32, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', overflow: 'hidden', border: '6px solid #1a1a1a', position: 'relative' }}>

        <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 110, height: 24, background: '#1a1a1a', borderRadius: '0 0 14px 14px', zIndex: 5 }}/>

        <div style={{ display: 'flex', justifyContent: 'space-between', padding: '10px 24px 6px', fontSize: 12, fontFamily: 'var(--mono)', fontWeight: 600 }}>
          <span>{new Date().toLocaleTimeString('es-PE', { hour: '2-digit', minute: '2-digit' })}</span>
          <span style={{ display: 'flex', gap: 4 }}>●●●● 4G ▰▰▰▰</span>
        </div>

        <div style={{ background: 'var(--ink-0)', color: '#fff', padding: '14px 20px 18px' }}>
          <div className="row" style={{ justifyContent: 'space-between', marginBottom: 10 }}>
            <div className="row" style={{ gap: 10 }}>
              <div className="avatar" style={{ width: 36, height: 36, fontSize: 12, background: 'var(--hi-vis)', color: 'var(--ink-0)' }}>{conductorIni}</div>
              <div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{despacho.conductor_nombre || '—'}</div>
                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>Conductor · {despacho.placa || 'sin unidad'}</div>
              </div>
            </div>
            <div className="icon-btn" onClick={logout} title="Cerrar sesión"
              style={{ color: '#fff', opacity: 0.7 }}>{Icon.logout}</div>
          </div>
          <div style={{ fontFamily: 'var(--cond)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>Mi despacho activo</div>
        </div>

        <div style={{ padding: 16, background: '#f8f9fa' }}>

          <div style={{ background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 1px 3px rgba(0,0,0,0.08)' }}>
            <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
              <div className="row" style={{ justifyContent: 'space-between', marginBottom: 6 }}>
                <span className="k" style={{ fontWeight: 600, fontSize: 12 }}>{despacho.despacho_ref}</span>
                <EstadoChip estado={ui}/>
              </div>
              <div style={{ fontFamily: 'var(--cond)', fontSize: 18, fontWeight: 700 }}>{despacho.cliente_nombre}</div>
              <div className="muted" style={{ fontSize: 12 }}>{despacho.producto_nombre} · {fmtNum(despacho.volumen)} m³</div>
            </div>

            <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line)' }}>
              <div style={{ display: 'flex', gap: 12 }}>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, paddingTop: 4 }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--ink-0)' }}/>
                  <span style={{ width: 1, flex: 1, background: 'var(--line-strong)', minHeight: 26 }}/>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--hi-vis)', border: '2px solid var(--ink-0)' }}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>Origen · {fmtTime(despacho.salida_at) || 'pendiente'}</div>
                  <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 12 }}>{despacho.planta || '—'}</div>
                  <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>Destino · ETA {fmtTime(despacho.eta_at) || '—'}</div>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{despacho.cliente_nombre}</div>
                </div>
              </div>
            </div>

            <div style={{ padding: '14px 16px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, textAlign: 'center', background: 'var(--ink-9)' }}>
              <div>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>Salida</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 600, color: despacho.salida_at ? 'var(--status-ok)' : 'var(--ink-7)' }}>{fmtTime(despacho.salida_at) || '—'}</div>
              </div>
              <div style={{ borderLeft: '1px solid var(--line)', borderRight: '1px solid var(--line)' }}>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>ETA</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 600 }}>{fmtTime(despacho.eta_at) || '—'}</div>
              </div>
              <div>
                <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)' }}>Llegada</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 14, fontWeight: 600, color: despacho.llegada_at ? 'var(--status-ok)' : 'var(--ink-7)' }}>{fmtTime(despacho.llegada_at) || '—'}</div>
              </div>
            </div>
          </div>

          {despacho.estado === 'pendiente' && !despacho.conductor_nombre && (
            <div style={{ marginTop: 14, padding: '14px 16px', background: 'var(--ink-9)', borderRadius: 12, color: 'var(--ink-3)', textAlign: 'center', fontSize: 13, border: '1px dashed var(--line-strong)' }}>
              Esperando asignación del coordinador
            </div>
          )}

          {despacho.estado === 'pendiente' && despacho.conductor_nombre && (
            <button onClick={() => cambiarEstado('cargando')} disabled={saving}
              style={{ marginTop: 14, width: '100%', background: 'var(--status-prod)', color: '#fff', border: 0, borderRadius: 12, padding: '16px 18px', fontSize: 15, fontWeight: 700, fontFamily: 'var(--cond)', letterSpacing: '0.02em', cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}>
              {saving ? 'Procesando…' : 'Estoy en planta · Comenzar carga'}
            </button>
          )}
          {despacho.estado === 'cargando' && (
            <button onClick={() => cambiarEstado('en_ruta')} disabled={saving}
              style={{ marginTop: 14, width: '100%', background: 'var(--status-transit)', color: '#fff', border: 0, borderRadius: 12, padding: '16px 18px', fontSize: 15, fontWeight: 700, fontFamily: 'var(--cond)', letterSpacing: '0.02em', cursor: 'pointer', boxShadow: '0 4px 12px rgba(0,0,0,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }}>
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              {saving ? 'Procesando…' : 'Iniciar ruta'}
            </button>
          )}
          {despacho.estado === 'en_ruta' && (
            <button onClick={() => setModal('finalizar')} disabled={saving}
              style={{ marginTop: 14, width: '100%', background: 'var(--status-ok)', color: '#fff', border: 0, borderRadius: 12, padding: '16px 18px', fontSize: 15, fontWeight: 700, fontFamily: 'var(--cond)', letterSpacing: '0.02em', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10, boxShadow: '0 4px 12px rgba(11,138,91,0.3)', cursor: 'pointer' }}>
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
              {saving ? 'Procesando…' : 'Finalizar · He entregado'}
            </button>
          )}
          {despacho.estado === 'incidencia' && (
            <div style={{ marginTop: 14, padding: '14px 16px', background: 'var(--status-pending-bg)', borderRadius: 12, color: 'var(--status-pending)', textAlign: 'center', fontWeight: 600, fontSize: 13, border: '1px solid var(--status-pending)' }}>
              ! Incidencia activa · esperando coordinación
              <button onClick={() => cambiarEstado('en_ruta')} disabled={saving}
                style={{ marginTop: 10, width: '100%', background: 'var(--status-transit)', color: '#fff', border: 0, borderRadius: 8, padding: '10px 14px', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
                Reanudar ruta
              </button>
            </div>
          )}
          {despacho.estado === 'entregado' && (
            <div style={{ marginTop: 14, padding: '14px 16px', background: 'var(--status-ok-bg)', borderRadius: 12, color: 'var(--status-ok)', textAlign: 'center', fontWeight: 600, fontSize: 13, border: '1px solid #BCE3C9' }}>
              ✓ Despacho entregado a las {fmtTime(despacho.llegada_at)} · Cliente notificado
            </div>
          )}

          {/* Botones secundarios: Incidencia + Emergencia (solo si ruta activa) */}
          {['cargando','en_ruta','incidencia'].includes(despacho.estado) && (
            <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              <button onClick={() => abrirModal('incidencia')} disabled={saving}
                style={{ background: '#fff', color: 'var(--status-pending)', border: '1.5px solid var(--status-pending)', borderRadius: 10, padding: '12px 10px', fontSize: 13, fontWeight: 700, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.3 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4M12 17v.01"/></svg>
                Incidencia
              </button>
              <button onClick={() => abrirModal('emergencia')} disabled={saving}
                style={{ background: 'var(--status-danger)', color: '#fff', border: 0, borderRadius: 10, padding: '12px 10px', fontSize: 13, fontWeight: 800, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, boxShadow: '0 4px 12px rgba(220,38,38,0.3)', letterSpacing: '0.04em' }}>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="12" cy="12" r="9"/><path d="M12 8v4M12 16v.01"/></svg>
                EMERGENCIA
              </button>
            </div>
          )}

          {/* Historial de eventos */}
          {eventos.length > 0 && (
            <div style={{ marginTop: 14, background: '#fff', borderRadius: 12, padding: 12, boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)', marginBottom: 8 }}>Eventos reportados</div>
              {eventos.slice(0, 3).map(ev => (
                <div key={ev.id} style={{ padding: '8px 10px', background: ev.tipo === 'emergencia' ? 'var(--status-danger-bg)' : 'var(--status-pending-bg)', borderRadius: 8, marginBottom: 6, fontSize: 12 }}>
                  <div style={{ fontWeight: 700, color: ev.tipo === 'emergencia' ? 'var(--status-danger)' : 'var(--status-pending)', textTransform: 'uppercase', letterSpacing: '0.05em', fontSize: 10, marginBottom: 2 }}>
                    {ev.tipo === 'emergencia' ? '🚨 EMERGENCIA' : '⚠ Incidencia'} · {ev.severidad}{ev.resuelto ? ' · resuelta' : ''}
                  </div>
                  <div style={{ color: 'var(--ink-1)' }}>{ev.mensaje}</div>
                  <div style={{ fontSize: 10, color: 'var(--ink-5)', marginTop: 2 }}>{window.formatRelativeTime?.(ev.reportado_at) || ''}</div>
                </div>
              ))}
            </div>
          )}

          {/* Observaciones */}
          <div style={{ background: '#fff', borderRadius: 12, marginTop: 12, padding: 14, boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
            <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Observaciones del traslado</div>
              <span className="tag" style={{ background: 'var(--ink-0)', color: 'var(--hi-vis)', borderColor: 'var(--ink-0)', fontSize: 9 }}>SOLO EQUIPO</span>
            </div>
            <textarea value={obs} onChange={e => setObs(e.target.value)}
              placeholder="Notas para tu coordinador (no las verá el cliente)"
              style={{ width: '100%', minHeight: 70, padding: 10, border: '1px solid var(--line)', borderRadius: 8, fontSize: 12, fontFamily: 'inherit', resize: 'vertical', background: 'var(--ink-9)' }}/>
            <div className="muted" style={{ fontSize: 10, marginTop: 6 }}>* La edición de notas se conectará en una etapa futura.</div>
          </div>

          {otros.length > 0 && (
            <div style={{ marginTop: 16 }}>
              <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-5)', marginBottom: 8 }}>Próximos asignados</div>
              {otros.map(d => (
                <div key={d.id} style={{ background: '#fff', padding: 12, borderRadius: 10, marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{d.cliente_nombre}</div>
                    <div className="muted" style={{ fontSize: 11 }}>{d.ticket} · ETA {fmtTime(d.eta_at) || '—'}</div>
                  </div>
                  <EstadoChip estado={estadoUI(d.estado)}/>
                </div>
              ))}
            </div>
          )}

          <div style={{ height: 60 }}/>
        </div>

        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: '#fff', borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', padding: '8px 0 14px' }}>
          {[
            { l: 'Hoy', a: true, i: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg> },
            { l: 'Historial', i: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> },
            { l: 'Mensajes', i: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg> },
            { l: 'Cuenta', i: <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0116 0"/></svg> },
          ].map(t => (
            <div key={t.l} style={{ textAlign: 'center', color: t.a ? 'var(--ink-0)' : 'var(--ink-6)', fontSize: 10, fontWeight: 600, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
              {t.i}
              {t.l}
            </div>
          ))}
        </div>

        {modal && (
          <div onClick={() => !saving && setModal(null)}
            style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.55)', display: 'grid', placeItems: 'center', padding: 18, zIndex: 50 }}>
            <div onClick={e => e.stopPropagation()}
              style={{ width: '100%', background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 20px 60px rgba(0,0,0,0.4)' }}>
              {modal === 'finalizar' && (
                <>
                  <div style={{ fontFamily: 'var(--cond)', fontSize: 20, fontWeight: 700, marginBottom: 6 }}>¿Finalizar despacho?</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', marginBottom: 16, lineHeight: 1.5 }}>
                    Confirmas haber entregado <b>{fmtNum(despacho.volumen)} m³</b> al cliente <b>{despacho.cliente_nombre}</b>. Se notificará al cliente y se cerrará el despacho.
                  </div>

                  <input ref={finFileRef} type="file" multiple
                    onChange={e => { setFinDocs([...finDocs, ...Array.from(e.target.files || [])]); e.target.value = ''; }}
                    accept=".pdf,.jpg,.jpeg,.png,.webp"
                    style={{ display: 'none' }}/>

                  <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-5)', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginBottom: 4 }}>
                    Foto/guía de remisión (opcional)
                  </label>
                  <div onClick={() => finFileRef.current?.click()}
                    style={{ border: '1px dashed var(--line-strong)', borderRadius: 8, padding: 10, display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', background: 'var(--ink-9)', color: 'var(--ink-3)', marginBottom: 8, fontSize: 12 }}>
                    📷 Adjuntar foto o guía firmada
                  </div>
                  {finDocs.length > 0 && (
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 8 }}>
                      {finDocs.map((f, i) => (
                        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', background: 'var(--status-pending-bg)', borderRadius: 4, fontSize: 11 }}>
                          <span style={{ flex: 1, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.name}</span>
                          <div className="icon-btn" style={{ color: 'var(--status-danger)', fontSize: 14 }} onClick={(e) => { e.stopPropagation(); setFinDocs(finDocs.filter((_, j) => j !== i)); }}>×</div>
                        </div>
                      ))}
                    </div>
                  )}

                  <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-5)', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginTop: 10, marginBottom: 4 }}>
                    Observaciones de entrega (opcional)
                  </label>
                  <textarea value={finNota} onChange={e => setFinNota(e.target.value)}
                    placeholder="Nombre y firma del receptor, condición de la obra, etc."
                    style={{ width: '100%', minHeight: 60, padding: 8, border: '1px solid var(--line)', borderRadius: 6, fontSize: 12, fontFamily: 'inherit', resize: 'vertical', background: 'var(--ink-9)', marginBottom: 14 }}/>

                  <div style={{ display: 'flex', gap: 8 }}>
                    <button onClick={() => setModal(null)} disabled={saving}
                      style={{ flex: 1, padding: '12px 14px', background: '#fff', border: '1px solid var(--line-strong)', borderRadius: 10, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
                      Cancelar
                    </button>
                    <button onClick={confirmarEntrega} disabled={saving}
                      style={{ flex: 2, padding: '12px 14px', background: 'var(--status-ok)', color: '#fff', border: 0, borderRadius: 10, fontSize: 13, fontWeight: 700, cursor: 'pointer' }}>
                      {saving ? 'Confirmando…' : 'Sí, finalizar'}
                    </button>
                  </div>
                </>
              )}

              {(modal === 'incidencia' || modal === 'emergencia') && (
                <>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                    <div style={{ width: 38, height: 38, borderRadius: 10, background: modal === 'emergencia' ? 'var(--status-danger)' : 'var(--status-pending)', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 18, fontWeight: 700 }}>!</div>
                    <div>
                      <div style={{ fontFamily: 'var(--cond)', fontSize: 18, fontWeight: 700 }}>
                        {modal === 'emergencia' ? 'Reportar emergencia' : 'Reportar incidencia'}
                      </div>
                      <div style={{ fontSize: 11, color: 'var(--ink-5)' }}>
                        {modal === 'emergencia'
                          ? 'Tu coordinador será notificado de inmediato'
                          : 'Quedará registrado en la bitácora del despacho'}
                      </div>
                    </div>
                  </div>

                  <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-5)', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginTop: 14, marginBottom: 4 }}>
                    Severidad
                  </label>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 4 }}>
                    {['baja','media','alta','critica'].map(s => (
                      <button key={s} type="button" onClick={() => setEvSev(s)}
                        style={{ padding: '8px 6px', background: evSev === s ? 'var(--ink-0)' : '#fff', color: evSev === s ? '#fff' : 'var(--ink-2)', border: '1px solid ' + (evSev === s ? 'var(--ink-0)' : 'var(--line)'), borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer', textTransform: 'capitalize' }}>
                        {s}
                      </button>
                    ))}
                  </div>

                  <label style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-5)', letterSpacing: '0.06em', textTransform: 'uppercase', display: 'block', marginTop: 14, marginBottom: 4 }}>
                    ¿Qué pasó?
                  </label>
                  <textarea value={evMsg} onChange={e => setEvMsg(e.target.value)}
                    autoFocus
                    placeholder={modal === 'emergencia'
                      ? 'Accidente, robo, falla mecánica grave…'
                      : 'Demora en obra, ruta cortada, problema menor…'}
                    style={{ width: '100%', minHeight: 90, padding: 10, border: '1px solid var(--line)', borderRadius: 8, fontSize: 13, fontFamily: 'inherit', resize: 'vertical', background: 'var(--ink-9)' }}/>

                  <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
                    <button onClick={() => setModal(null)} disabled={saving}
                      style={{ flex: 1, padding: '12px 14px', background: '#fff', border: '1px solid var(--line-strong)', borderRadius: 10, fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>
                      Cancelar
                    </button>
                    <button onClick={reportarEvento} disabled={saving || !evMsg.trim()}
                      style={{ flex: 2, padding: '12px 14px', background: modal === 'emergencia' ? 'var(--status-danger)' : 'var(--status-pending)', color: '#fff', border: 0, borderRadius: 10, fontSize: 13, fontWeight: 700, cursor: 'pointer', opacity: (!evMsg.trim() || saving) ? 0.6 : 1 }}>
                      {saving ? 'Enviando…' : (modal === 'emergencia' ? 'Activar emergencia' : 'Reportar')}
                    </button>
                  </div>
                </>
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════
// 3) CLIENTE — vista pública del despacho
// ═══════════════════════════════════════════════

function VistaClienteDespacho() {
  const [desp,    setDesp]    = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [error,   setError]   = React.useState('');

  React.useEffect(() => {
    const solicitudId = window._desasfCurrentSolicitud || 1;
    DesasfAPI.get('/logistica/publico/solicitud/' + solicitudId)
      .then(setDesp)
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return (
    <div className="app cli">
      <CliSidebar active="despachos"/>
      <Topbar crumbs={['Mis pedidos','Cargando…']} hideQuick/>
      <main className="main" style={{ display: 'grid', placeItems: 'center' }}>
        <span style={{ color: 'var(--ink-5)' }}>Cargando seguimiento…</span>
      </main>
    </div>
  );

  if (error || !desp) return (
    <div className="app cli">
      <CliSidebar active="despachos"/>
      <Topbar crumbs={['Mis pedidos','—']} hideQuick/>
      <main className="main" style={{ display: 'grid', placeItems: 'center' }}>
        <div style={{ textAlign: 'center', maxWidth: 420 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--ink-2)', marginBottom: 6 }}>Aún no hay despacho activo</div>
          <div style={{ color: 'var(--ink-5)', fontSize: 13 }}>Cuando tu pedido salga de planta podrás seguirlo aquí.</div>
        </div>
      </main>
    </div>
  );

  const ui = estadoUI(desp.estado);
  const tituloEstado = desp.estado === 'entregado' ? 'entregado' : desp.estado === 'en_ruta' ? 'en camino' : 'en preparación';

  return (
    <div className="app cli">
      <CliSidebar active="despachos"/>
      <Topbar crumbs={['Mis pedidos', 'Despacho ' + desp.despacho_ref]} hideQuick/>
      <main className="main">

        <div className="page-head">
          <div>
            <div className="row" style={{ gap: 8, marginBottom: 4 }}>
              <span className="k" style={{ fontWeight: 600, color: 'var(--ink-1)' }}>{desp.despacho_ref}</span>
              <EstadoChip estado={ui} large/>
            </div>
            <h1>Tu pedido está {tituloEstado}</h1>
            <p>{desp.producto_nombre} · {parseFloat(desp.volumen)} m³</p>
          </div>
          <div className="row" style={{ gap: 10 }}>
            <button className="btn btn--ghost btn--sm" onClick={() => exportCSV(
              'guia-remision-' + desp.despacho_ref + '.csv',
              [desp],
              [
                { label: 'Referencia',  value: 'despacho_ref' },
                { label: 'Solicitud',   value: 'ticket' },
                { label: 'Cliente',     value: 'cliente_nombre' },
                { label: 'Producto',    value: 'producto_nombre' },
                { label: 'Volumen m³',  value: r => parseFloat(r.volumen) },
                { label: 'Estado',      value: 'estado' },
                { label: 'Placa',       value: r => r.placa || '' },
                { label: 'Conductor',   value: r => r.conductor_nombre || '' },
                { label: 'Salida',      value: r => r.salida_at || '' },
                { label: 'ETA',         value: r => r.eta_at || '' },
                { label: 'Llegada',     value: r => r.llegada_at || '' },
              ]
            )}>{Icon.download}<span>Guía de remisión</span></button>
            {(() => {
              const tel = window._appConfig?.org_telefono;
              return <a className="btn btn--ghost btn--sm" href={tel ? `tel:${tel}` : '#'}
                onClick={e => { if (!tel) { e.preventDefault(); alert('Configura el teléfono de la empresa en Configuración → Organización.'); } }}
                style={{ textDecoration: 'none' }}>{Icon.phone}<span>{tel ? `Llamar ${tel}` : 'Contactar organización'}</span></a>;
            })()}
          </div>
        </div>

        <div className="card" style={{ marginBottom: 16, overflow: 'hidden' }}>
          <div style={{ padding: '24px 28px', background: 'linear-gradient(180deg, var(--ink-0), #1a1d20)', color: '#fff' }}>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--hi-vis)', marginBottom: 14 }}>
              ◢ SEGUIMIENTO DE DESPACHO
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
              <div>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>Hora de salida</div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em' }}>{fmtTime(desp.salida_at) || '—'}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>desde planta{window._appConfig?.empresa_nombre ? ' ' + window._appConfig.empresa_nombre : ''}</div>
              </div>
              <div style={{ borderLeft: '1px solid rgba(255,255,255,0.15)', paddingLeft: 24 }}>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>Hora estimada</div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--hi-vis)' }}>{fmtTime(desp.eta_at) || '—'}</div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>llegada a tu obra</div>
              </div>
              <div style={{ borderLeft: '1px solid rgba(255,255,255,0.15)', paddingLeft: 24 }}>
                <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.6)', marginBottom: 6 }}>Hora de entrega</div>
                <div style={{ fontFamily: 'var(--cond)', fontSize: 36, fontWeight: 700, letterSpacing: '-0.02em', color: desp.llegada_at ? 'var(--status-ok)' : 'rgba(255,255,255,0.4)' }}>
                  {fmtTime(desp.llegada_at) || '—'}
                </div>
                <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{desp.llegada_at ? 'confirmada' : 'pendiente'}</div>
              </div>
            </div>
          </div>

          <div style={{ padding: '24px 28px' }}>
            <div className="dispatch-flow">
              <FlowStep label="Pedido confirmado" time="—" done={true} detail="Solicitud aceptada"/>
              <FlowConn done/>
              <FlowStep label="Salió de planta" time={fmtTime(desp.salida_at) || 'pendiente'} done={!!desp.salida_at} detail={window._appConfig?.empresa_nombre || 'Planta'}/>
              <FlowConn done={['en_ruta','entregado'].includes(desp.estado)}/>
              <FlowStep label="En camino" time={desp.estado === 'entregado' ? 'completado' : `ETA ${fmtTime(desp.eta_at) || '—'}`} done={['en_ruta','entregado'].includes(desp.estado)} active={desp.estado === 'en_ruta'} detail="hacia tu obra"/>
              <FlowConn done={!!desp.llegada_at}/>
              <FlowStep label="Entregado" time={fmtTime(desp.llegada_at) || `est. ${fmtTime(desp.eta_at) || '—'}`} done={!!desp.llegada_at} active={desp.estado === 'entregado'} detail={desp.llegada_at ? 'Recibido conforme' : 'pendiente de confirmación'}/>
            </div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <div className="card">
            <div className="card__head"><h3>Detalle del pedido</h3></div>
            <div className="card__body">
              <dl className="dl">
                <dt>Solicitud</dt><dd className="k" style={{ fontWeight: 600 }}>{desp.ticket}</dd>
                <dt>Producto</dt><dd>{desp.producto_nombre}</dd>
                <dt>Volumen</dt><dd className="num">{parseFloat(desp.volumen)} m³</dd>
                <dt>Salida</dt><dd className="num">{fmtTime(desp.salida_at) || 'pendiente'}</dd>
                <dt>Llegada estimada</dt><dd className="num">{fmtTime(desp.eta_at) || '—'}</dd>
                <dt>Llegada real</dt><dd className="num" style={{ color: desp.llegada_at ? 'var(--status-ok)' : 'var(--ink-7)' }}>{fmtTime(desp.llegada_at) || 'pendiente'}</dd>
                {desp.placa && <><dt>Unidad</dt><dd>{desp.placa}{desp.marca ? ` · ${desp.marca}` : ''}{desp.color ? ` · ${desp.color}` : ''}</dd></>}
                {desp.conductor_nombre && <><dt>Conductor</dt><dd>{desp.conductor_nombre}{desp.conductor_tel ? ` · ${desp.conductor_tel}` : ''}</dd></>}
              </dl>
            </div>
          </div>

          <div className="card">
            <div className="card__head"><h3>¿Necesitas ayuda?</h3></div>
            <div className="card__body">
              <div style={{ padding: 14, background: 'var(--ink-9)', borderRadius: 8, marginBottom: 10 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-1)', marginBottom: 4 }}>Atención al cliente</div>
                <div style={{ fontSize: 13 }}>{window._appConfig?.empresa_nombre || 'Tu organización'}</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>{window._appConfig?.org_email || ''}</div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.6 }}>
                Si surge alguna duda con tu despacho, contacta a tu coordinador comercial. Al confirmarse la entrega, recibirás el comprobante por correo.
              </div>
              <div className="row" style={{ marginTop: 14, gap: 8 }}>
                {(() => {
                  const tel = window._appConfig?.org_telefono;
                  return <a className="btn btn--ghost btn--sm" style={{ flex: 1, justifyContent: 'center', textDecoration: 'none' }}
                    href={tel ? `tel:${tel}` : '#'}
                    onClick={e => { if (!tel) { e.preventDefault(); alert('Sin teléfono de contacto configurado.'); } }}>
                    {Icon.phone}<span>{tel ? 'Llamar' : 'Sin teléfono'}</span></a>;
                })()}
                <button className="btn btn--accent btn--sm" style={{ flex: 1, justifyContent: 'center' }}
                  onClick={() => {
                    const motivo = prompt('Describe brevemente el problema con tu despacho:');
                    if (!motivo || !motivo.trim()) return;
                    DesasfAPI.post('/soporte', {
                      asunto: `Problema en despacho ${desp.despacho_ref}`,
                      descripcion: motivo,
                      categoria: 'logistica',
                      prioridad: 'alta',
                    }).then(() => alert('Reporte enviado. Te contactaremos pronto.'))
                      .catch(err => alert('Error al enviar: ' + err.message));
                  }}>Reportar problema</button>
              </div>
            </div>
          </div>
        </div>

        <div className="muted" style={{ fontSize: 11, marginTop: 16, textAlign: 'center', padding: 12, background: 'var(--ink-9)', borderRadius: 6 }}>
          La información mostrada incluye únicamente lo público de tu despacho. Las observaciones internas y comunicaciones operativas no se exponen aquí.
        </div>

      </main>
    </div>
  );
}

window.VistaLogistica       = VistaLogistica;
window.VistaConductor       = VistaConductor;
window.VistaClienteDespacho = VistaClienteDespacho;