# -*- coding: utf-8 -*-
"""
patch_b2b_modal_v6.py
- PRIMERO: Elimina declaraciones duplicadas de abrirWizardEdicion y cleanText
- LUEGO: Actualiza colores, repara el link de propuesta y aplica modal moderno
"""
import os, subprocess, re

INDEX = "/home/julianurr/woll-crm/woll-crm-docker/frontend/index.html"

def find_line(lines, marker):
    for i, l in enumerate(lines):
        if marker in l:
            return i
    return -1

def remove_duplicate_function(lines, fn_keyword, open_bracket="{", close_bracket="}"):
    """
    Elimina la SEGUNDA ocurrencia de un bloque de función identificado por fn_keyword.
    Devuelve las líneas limpias.
    """
    occurrences = []
    for i, l in enumerate(lines):
        if fn_keyword in l:
            occurrences.append(i)
    
    if len(occurrences) <= 1:
        print(f"  '{fn_keyword}': solo 1 ocurrencia, nada que limpiar.")
        return lines
    
    print(f"  '{fn_keyword}': {len(occurrences)} ocurrencias encontradas en líneas {[o+1 for o in occurrences]}")
    
    # Eliminamos todas excepto la PRIMERA
    # Vamos de la última hacia la primera para no alterar índices
    for occ in reversed(occurrences[1:]):
        # Retroceder hasta encontrar la línea que da inicio al bloque (puede ser un React.useEffect o const)
        start = occ
        while start > 0 and lines[start-1].strip() == '':
            start -= 1
        
        # Avanzar hasta cerrar el bloque contando llaves
        depth = 0
        end = occ
        found_open = False
        for j in range(occ, min(len(lines), occ + 300)):
            for ch in lines[j]:
                if ch == open_bracket:
                    depth += 1
                    found_open = True
                elif ch == close_bracket and found_open:
                    depth -= 1
            if found_open and depth <= 0:
                end = j
                break
        
        # Eliminar el bloque completo (incluyendo líneas vacías previas)
        print(f"  Eliminando bloque duplicado desde línea {start+1} a {end+2}")
        del lines[start:end+2]
        print(f"  ✅ Bloque duplicado eliminado")
    
    return lines

def run():
    print("=== PATCH B2B MODAL v6 (LIMPIEZA + MEJORA) ===")
    print("Leyendo index.html...")
    with open(INDEX, "r", encoding="utf-8", errors="ignore") as f:
        raw = f.read()
    
    lines = raw.split("\n")
    print(f"Total líneas al inicio: {len(lines)}")
    
    # ── PASO 1: Limpiar duplicados ──────────────────────────────────────────
    print("\n[1] Buscando y eliminando declaraciones duplicadas...")
    
    # Limpiar duplicados de abrirWizardEdicion
    lines = remove_duplicate_function(lines, "const abrirWizardEdicion = function")
    
    # Limpiar duplicados de cleanText
    lines = remove_duplicate_function(lines, "var cleanText = function")
    
    # Limpiar duplicados de React.useEffect(function() { que carguen propuesta
    # (solo los que tienen "proposalData" en las siguientes 10 líneas)
    ue_occurrences = []
    for i, l in enumerate(lines):
        if "React.useEffect(function() {" in l:
            context = "\n".join(lines[i:min(len(lines), i+12)])
            if "setProposalData" in context or "proposalData" in context:
                ue_occurrences.append(i)
    
    if len(ue_occurrences) > 1:
        print(f"  useEffect(proposalData): {len(ue_occurrences)} ocurrencias en líneas {[o+1 for o in ue_occurrences]}")
        for occ in reversed(ue_occurrences[1:]):
            start = occ
            while start > 0 and lines[start-1].strip() == '':
                start -= 1
            depth = 0
            end = occ
            found_open = False
            for j in range(occ, min(len(lines), occ + 30)):
                for ch in lines[j]:
                    if ch == '{': depth += 1; found_open = True
                    elif ch == '}' and found_open: depth -= 1
                if found_open and depth <= 0:
                    end = j
                    break
            # Avanzar también el ], [solSel]); del useEffect
            if end + 1 < len(lines) and '], [solSel])' in lines[end+1]:
                end += 1
            print(f"  Eliminando useEffect duplicado desde línea {start+1} a {end+2}")
            del lines[start:end+2]
            print(f"  ✅ useEffect duplicado eliminado")
    else:
        print(f"  useEffect(proposalData): solo {len(ue_occurrences)} ocurrencia(s), OK")
    
    print(f"\nTotal líneas tras limpieza: {len(lines)}")
    
    # Guardar líneas limpias en raw_clean
    raw_clean = "\n".join(lines)
    
    # ── PASO 2: Actualizar PASO_COLORS y PASO_BG ───────────────────────────
    print("\n[2] Actualizando paleta de colores premium...")
    new_colors = "const PASO_COLORS = ['#94a3b8', '#38bdf8', '#14b8a6', '#3b82f6', '#34d399'];"
    new_bg     = "const PASO_BG = ['rgba(148,163,184,0.1)', 'rgba(56,189,248,0.1)', 'rgba(20,184,166,0.1)', 'rgba(59,130,246,0.1)', 'rgba(52,211,153,0.1)'];"
    
    color_patterns = [
        "const PASO_COLORS = ['#94a3b8', '#38bdf8', '#fbbf24', '#a78bfa', '#34d399'];",
        "const PASO_COLORS = ['#64748B', '#38bdf8', '#f59e0b', '#8b5cf6', '#10b981'];",
        "const PASO_COLORS = ['#94a3b8', '#38bdf8', '#dfc07b', '#8f83f8', '#34d399'];",
        "const PASO_COLORS = ['#94a3b8', '#38bdf8', '#14b8a6', '#3b82f6', '#34d399'];",
    ]
    bg_patterns = [
        "const PASO_BG = ['rgba(148,163,184,0.1)', 'rgba(56,189,248,0.1)', 'rgba(251,191,36,0.1)', 'rgba(167,139,250,0.1)', 'rgba(52,211,153,0.1)'];",
        "const PASO_BG = ['rgba(148, 163, 184, 0.1)', 'rgba(56, 189, 248, 0.1)', 'rgba(245, 158, 11, 0.1)', 'rgba(139, 92, 246, 0.1)', 'rgba(16, 185, 129, 0.1)'];",
        "const PASO_BG = ['rgba(148,163,184,0.1)', 'rgba(56,189,248,0.1)', 'rgba(223,192,123,0.1)', 'rgba(143,131,248,0.1)', 'rgba(52,211,153,0.1)'];",
        "const PASO_BG = ['rgba(148,163,184,0.1)', 'rgba(56,189,248,0.1)', 'rgba(20,184,166,0.1)', 'rgba(59,130,246,0.1)', 'rgba(52,211,153,0.1)'];",
    ]
    for pat in color_patterns:
        if pat in raw_clean:
            raw_clean = raw_clean.replace(pat, new_colors)
            print(f"  ✅ PASO_COLORS reemplazado")
            break
    else:
        # Verificar si ya está la versión nueva
        if new_colors in raw_clean:
            print(f"  ✅ PASO_COLORS ya está actualizado")
        else:
            print(f"  ⚠️ PASO_COLORS no encontrado con ningún patrón")
    
    for pat in bg_patterns:
        if pat in raw_clean:
            raw_clean = raw_clean.replace(pat, new_bg)
            print(f"  ✅ PASO_BG reemplazado")
            break
    else:
        if new_bg in raw_clean:
            print(f"  ✅ PASO_BG ya está actualizado")
        else:
            print(f"  ⚠️ PASO_BG no encontrado con ningún patrón")
    
    lines = raw_clean.split("\n")

    # ── PASO 3: Re-localizar marcadores ────────────────────────────────────
    print("\n[3] Localizando marcadores clave...")
    l_emitir    = find_line(lines, "const [emitirSol, setEmitirSol] = React.useState(null);")
    l_calc      = find_line(lines, "const calcPaso = (item) => {")
    l_modal_ver = find_line(lines, "Modal VER con pesta")
    if l_modal_ver == -1:
        l_modal_ver = find_line(lines, "{/* Modal VER */}")
    l_modal_edi = find_line(lines, "{/* Modal EDITAR */}")
    
    print(f"  emitirSol    → línea {l_emitir+1}")
    print(f"  calcPaso     → línea {l_calc+1}")
    print(f"  Modal VER    → línea {l_modal_ver+1}")
    print(f"  Modal EDITAR → línea {l_modal_edi+1}")
    
    if -1 in [l_emitir, l_calc, l_modal_ver, l_modal_edi]:
        print("❌ No se encontraron todos los marcadores. Abortando.")
        return
    
    # ── PASO 4: Insertar estados nuevos si no existen ─────────────────────
    print("\n[4] Verificando estados React...")
    states_exist = any("proposalData" in lines[i] for i in range(l_emitir, min(len(lines), l_emitir+15)))
    
    if not states_exist:
        new_states = [
            "  const [activeTab, setActiveTab] = React.useState(1);",
            "  const [proposalData, setProposalData] = React.useState(null);",
            "  const [loadingProp, setLoadingProp] = React.useState(false);",
        ]
        for j, s in enumerate(new_states):
            lines.insert(l_emitir + 1 + j, s)
        print(f"  ✅ Estados insertados después de línea {l_emitir+1}")
        l_calc      += 3
        l_modal_ver += 3
        l_modal_edi += 3
    else:
        print(f"  ✅ Estados ya existen, saltando.")
    
    # ── PASO 5: Insertar useEffect + cleanText + abrirWizardEdicion ────────
    print("\n[5] Verificando funciones de apoyo...")
    joined = "\n".join(lines)
    
    if "abrirWizardEdicion" not in joined:
        new_fns = """
  React.useEffect(function() {
    if (solSel) {
      setActiveTab(calcPaso(solSel));
      setProposalData(null);
      if (solSel.propuesta_id) {
        setLoadingProp(true);
        api('/propuestas/' + solSel.propuesta_id)
          .then(function(res) { setProposalData(res.data || res); })
          .catch(function(err) { console.error('propuesta err:', err); })
          .finally(function() { setLoadingProp(false); });
      }
    }
  }, [solSel]);

  var cleanText = function(str) {
    if (!str) return '';
    return String(str)
      .replace(/\u00e2\u0080\u0093/g, '-')
      .replace(/\u00e2\u0086\u0092/g, '\u2192')
      .replace(/\u00e2\u009c\u0093/g, '\u2713')
      .replace(/\u00c3\u0093/g, '\u00d3')
      .replace(/\u00c2\u00b7/g, '\u00b7')
      .replace(/\u00e2\u009c\u008e/g, '\u270e')
      .replace(/\u00c3\u009a/g, '\u00da')
      .replace(/\u00c3\u00ba/g, '\u00fa')
      .replace(/\u00c3\u00b3/g, '\u00f3')
      .replace(/\u00c3\u00a1/g, '\u00e1')
      .replace(/\u00c3\u00a9/g, '\u00e9')
      .replace(/\u00c3\u00ad/g, '\u00ed')
      .replace(/\u00c3\u00b1/g, '\u00f1');
  };

  const abrirWizardEdicion = function(item) {
    setEmitirLoading(true);
    var propId = item.propuesta_id;
    function doOpen(prefill) {
      localStorage.setItem('woll_prefill_cotizacion', JSON.stringify(prefill));
      localStorage.setItem('woll_open_wizard_prefill', 'true');
      toast('Abriendo wizard de cotizaciones...');
      setSolSel(null);
      setEmitirLoading(false);
      if (typeof setPage === 'function') setPage('cotizaciones');
    }
    function buildFallback() {
      var pNames = (item.nombres_pasajeros || item.pasajero_nombre || '').split(/,|\n/).map(function(n){ return n.trim(); }).filter(Boolean);
      var dateOnly = function(dt) { return String(dt||'').split('T')[0]; };
      doOpen({ cliente_id: item.cliente_id || '', b2b_solicitud_id: item.id,
        tipo_vuelo: item.tipo_vuelo || 'solo_ida', fecha_viaje_inicio: dateOnly(item.fecha_ida),
        fecha_viaje_fin: dateOnly(item.fecha_regreso), num_adultos: Math.max(1, pNames.length),
        num_ninos: 0, num_infantes: 0, notas_cliente: item.detalles || '', segs: [],
        viajeros: pNames.map(function(fn){ var pts = fn.split(/\s+/); var half = Math.ceil(pts.length/2);
          return { nombres: pts.slice(0,half).join(' '), apellidos: pts.slice(half).join(' '),
          categoria:'adulto', tipo_documento:'pasaporte', nacionalidad:'CO' }; }) });
    }
    if (!propId) { buildFallback(); return; }
    api('/propuestas/' + propId).then(function(res) {
      var proposal = res.data || res;
      var aprobDetails = null;
      try { aprobDetails = typeof proposal.aprobacion_detalles === 'string' ? JSON.parse(proposal.aprobacion_detalles) : proposal.aprobacion_detalles; } catch(e){}
      var idxAprob = aprobDetails ? (aprobDetails.opcion_index - 1) : 0;
      var opcionElegida = proposal.opciones && (proposal.opciones[idxAprob] || proposal.opciones[0]);
      if (!opcionElegida || !opcionElegida.detalles_json) { buildFallback(); return; }
      var details = {}; try { details = typeof opcionElegida.detalles_json === 'string' ? JSON.parse(opcionElegida.detalles_json) : opcionElegida.detalles_json; } catch(e){}
      var tramos = details.tramos || [];
      var pNames = (item.nombres_pasajeros || item.pasajero_nombre || '').split(/,|\n/).map(function(n){ return n.trim(); }).filter(Boolean);
      var dateOnly = function(dt) { return String(dt||'').split('T')[0]; };
      var fmtT = function(t) { if(!t) return '00:00'; var p=String(t).split(':'); return p[0].trim().padStart(2,'0')+':'+(p[1]||'00').trim().substring(0,2).padStart(2,'0'); };
      var precioTotal = aprobDetails ? (aprobDetails.precio || 0) : 0;
      var esBodega = aprobDetails && aprobDetails.equipaje === 'Bodega';
      var esEjecutiva = item.detalles && item.detalles.toLowerCase().includes('ejecutiva');
      var mapped = tramos.map(function(t, idx) {
        var fechaBase = idx === 0 ? dateOnly(item.fecha_ida) : dateOnly(item.fecha_regreso || item.fecha_ida);
        return { orden: idx+1, origen_iata: t.from || '', destino_iata: t.to || '',
          origen_nombre: t.fromCity || '', destino_nombre: t.toCity || '',
          aerolinea_codigo: t.airline || '', numero_vuelo: t.flightNum || '',
          fecha_salida: fechaBase + 'T' + fmtT(t.dep), fecha_llegada: fechaBase + 'T' + fmtT(t.arr),
          clase_cabina: esEjecutiva ? 'Business' : 'Economy',
          precio_adulto: Math.round(precioTotal / Math.max(tramos.length,1)),
          precio_nino: 0, precio_infante: 0, equipaje_mano_kg: 10,
          equipaje_bodega_kg: esBodega ? 23 : 0, equipaje_bodega_piezas: esBodega ? 1 : 0,
          tiene_escala: false, escalas_count: 0 };
      });
      var tipoVuelo = item.tipo_vuelo || (tramos.length >= 2 ? 'ida_vuelta' : 'solo_ida');
      if (tipoVuelo === 'ida_vuelta' && mapped.length === 1 && item.fecha_regreso) {
        var out = mapped[0];
        mapped.push({ orden:2, origen_iata:out.destino_iata, destino_iata:out.origen_iata,
          origen_nombre:out.destino_nombre, destino_nombre:out.origen_nombre,
          aerolinea_codigo:out.aerolinea_codigo, numero_vuelo:'',
          fecha_salida: dateOnly(item.fecha_regreso)+'T00:00', fecha_llegada: dateOnly(item.fecha_regreso)+'T00:00',
          clase_cabina: out.clase_cabina, precio_adulto: out.precio_adulto, precio_nino:0, precio_infante:0,
          equipaje_mano_kg:10, equipaje_bodega_kg:out.equipaje_bodega_kg, equipaje_bodega_piezas:out.equipaje_bodega_piezas,
          tiene_escala:false, escalas_count:0 });
      }
      doOpen({ cliente_id: item.cliente_id || proposal.cliente_id || '', b2b_solicitud_id: item.id,
        tipo_vuelo: tipoVuelo, fecha_viaje_inicio: dateOnly(item.fecha_ida),
        fecha_viaje_fin: dateOnly(item.fecha_regreso), num_adultos: Math.max(1, pNames.length),
        num_ninos: 0, num_infantes: 0, notas_cliente: item.detalles || '', segs: mapped,
        viajeros: pNames.map(function(fn){ var pts = fn.split(/\s+/); var half = Math.ceil(pts.length/2);
          return { nombres: pts.slice(0,half).join(' '), apellidos: pts.slice(half).join(' '),
          categoria:'adulto', tipo_documento:'pasaporte', nacionalidad:'CO' }; }) });
    }).catch(function(e) { console.error(e); buildFallback(); });
  };
"""
        fn_lines = new_fns.split("\n")
        for j, fl in enumerate(fn_lines):
            lines.insert(l_calc + j, fl)
        offset = len(fn_lines)
        l_modal_ver += offset
        l_modal_edi += offset
        print(f"  ✅ Funciones insertadas ({offset} líneas)")
    else:
        print(f"  ✅ abrirWizardEdicion ya existe, saltando inserción.")
        # Pero si cleanText no existe, lo insertamos solo
        if "cleanText =" not in "\n".join(lines):
            clean_block = """
  var cleanText = function(str) {
    if (!str) return '';
    return String(str)
      .replace(/\u00e2\u0080\u0093/g, '-')
      .replace(/\u00e2\u0086\u0092/g, '\u2192')
      .replace(/\u00e2\u009c\u0093/g, '\u2713')
      .replace(/\u00c3\u0093/g, '\u00d3')
      .replace(/\u00c2\u00b7/g, '\u00b7')
      .replace(/\u00c3\u009a/g, '\u00da')
      .replace(/\u00c3\u00ba/g, '\u00fa')
      .replace(/\u00c3\u00b3/g, '\u00f3')
      .replace(/\u00c3\u00a1/g, '\u00e1')
      .replace(/\u00c3\u00a9/g, '\u00e9')
      .replace(/\u00c3\u00ad/g, '\u00ed')
      .replace(/\u00c3\u00b1/g, '\u00f1');
  };
"""
            cl_lines = clean_block.split("\n")
            # Insertar justo antes de abrirWizardEdicion
            l_abrir = find_line(lines, "const abrirWizardEdicion = function")
            if l_abrir != -1:
                for j, cl in enumerate(cl_lines):
                    lines.insert(l_abrir + j, cl)
                l_modal_ver += len(cl_lines)
                l_modal_edi += len(cl_lines)
                print(f"  ✅ cleanText insertado antes de abrirWizardEdicion (línea {l_abrir+1})")

    # ── PASO 6: Reemplazar Modal VER ───────────────────────────────────────
    print(f"\n[6] Reemplazando Modal VER (líneas {l_modal_ver+1} a {l_modal_edi})...")
    
    new_modal = """      {/* Modal VER con pestañas */}
      {solSel && !editSol && (
        <div className="overlay" onClick={function(e){ if(e.target===e.currentTarget) setSolSel(null); }}>
          <div className="modal" style={{maxWidth:600, padding:24, borderRadius:16, border:'1px solid rgba(255,255,255,0.08)', background:'#0f172a', boxShadow:'0 20px 25px -5px rgba(0,0,0,0.5)'}}>

            {/* Cabecera */}
            <div className="flex ic g2" style={{marginBottom:18}}>
              <h3 style={{margin:0, fontSize:18, fontWeight:800, color:'#f8fafc', letterSpacing:'-0.025em'}}>{solSel.empresa || 'Solicitud B2B'}</h3>
              <div style={{flex:1}}/>
              <span style={{display:'inline-block',padding:'4px 12px',borderRadius:20,fontSize:10,fontWeight:800,textTransform:'uppercase',letterSpacing:'0.05em',
                color:PASO_COLORS[calcPaso(solSel)-1],background:PASO_BG[calcPaso(solSel)-1],
                border:'1px solid '+PASO_COLORS[calcPaso(solSel)-1]+'35'}}>
                {PASOS[calcPaso(solSel)-1]}
              </span>
              <button className="btn bo bsm" style={{borderRadius:'50%',width:28,height:28,padding:0,display:'flex',alignItems:'center',justifyContent:'center',color:'#94a3b8',borderColor:'rgba(255,255,255,0.1)'}} onClick={function(){ setSolSel(null); }}>{"\u00d7"}</button>
            </div>

            {/* Pestañas */}
            <div style={{display:'flex',gap:6,flexWrap:'wrap',marginBottom:18}}>
              {PASOS.map(function(p,i){
                var act = activeTab===i+1;
                var bc = PASO_COLORS[i];
                return (
                  <button key={i} onClick={function(){ setActiveTab(i+1); }}
                    style={{padding:'6px 14px',borderRadius:20,fontSize:11,fontWeight:700,cursor:'pointer',transition:'all 0.2s ease',
                      border: act ? '1px solid '+bc : '1px solid rgba(255,255,255,0.08)',
                      background: act ? bc : 'rgba(255,255,255,0.02)',
                      color: act ? '#0f172a' : bc,
                      boxShadow: act ? '0 0 12px '+bc+'50' : 'none'}}>
                    {(i+1)+'. '+(i===2?'Elecci\u00f3n':i===4?'Emisi\u00f3n':p)}
                  </button>
                );
              })}
            </div>

            {/* Contenido por pestaña */}
            <div style={{border:'1px solid rgba(255,255,255,0.08)',borderRadius:12,padding:20,background:'rgba(255,255,255,0.01)',marginBottom:20,minHeight:220}}>

              {/* 1. Solicitud */}
              {activeTab===1 && (
                <div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,fontSize:13,marginBottom:12}}>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>EMPRESA</b>{solSel.empresa||'—'}</div>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>VIAJERO</b>{solSel.pasajero_nombre||solSel.cliente_nombre_manual||'—'}</div>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>PASAJEROS</b>{solSel.nombres_pasajeros||'—'}</div>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>RUTA</b><span style={{fontFamily:'var(--mono)',fontWeight:700,color:'#f1f5f9'}}>{(solSel.origen||'').toUpperCase()} {"\u2192"} {(solSel.destino||solSel.ruta||'').toUpperCase()}</span></div>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>FECHA IDA</b>{fmtDate(solSel.fecha_ida)||'—'}</div>
                    <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>FECHA REGRESO</b>{fmtDate(solSel.fecha_regreso)||'—'}</div>
                  </div>
                  {solSel.detalles && <div style={{marginTop:14}}><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:5,letterSpacing:'0.05em'}}>DETALLES DEL VIAJERO</b>
                    <div style={{background:'rgba(0,0,0,0.2)',padding:12,borderRadius:6,fontSize:12,color:'#cbd5e1',border:'1px solid rgba(255,255,255,0.05)',whiteSpace:'pre-line',lineHeight:1.5}}>{solSel.detalles}</div>
                  </div>}
                </div>
              )}

              {/* 2. Propuesta */}
              {activeTab===2 && (
                <div>
                  {loadingProp
                    ? <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>Cargando propuesta...</div>
                    : proposalData
                      ? <div style={{display:'flex',flexDirection:'column',gap:16}}>
                          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,fontSize:13}}>
                            <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>C\u00d3DIGO</b><span style={{fontFamily:'var(--mono)',fontWeight:800,fontSize:15,color:'#f8fafc'}}>{proposalData.numero||'—'}</span></div>
                            <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>ESTADO</b>
                              <span style={{display:'inline-block',padding:'3px 10px',borderRadius:12,fontSize:10,fontWeight:700,letterSpacing:'0.05em',
                                color:proposalData.estado==='aceptada'?'#10b981':'#f59e0b',
                                background:proposalData.estado==='aceptada'?'rgba(16,185,129,0.1)':'rgba(245,158,11,0.1)'}}>
                                {(proposalData.estado||'').toUpperCase()}
                              </span>
                            </div>
                            <div style={{gridColumn:'1/-1'}}><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>T\u00cdTULO</b><span style={{color:'#cbd5e1'}}>{proposalData.titulo||'—'}</span></div>
                          </div>
                          <div style={{display:'flex',gap:10,marginTop:12}}>
                            <a className="btn bo bsm" href={'/propuesta.html?t='+(proposalData.portal_token||proposalData.id)} target="_blank" rel="noreferrer"
                              style={{textDecoration:'none',display:'inline-flex',alignItems:'center',gap:6,fontWeight:700,borderColor:'#38bdf8',color:'#38bdf8'}}>VER PROPUESTA P\u00dablica {"\u2197"}</a>
                            <button className="btn bp bsm" style={{fontWeight:700,background:'#38bdf8',borderColor:'#38bdf8',color:'#0f172a'}} onClick={function(){
                              setSolSel(null); if(typeof setPage==='function') setPage('propuestas');
                            }}>IR A PROPUESTAS</button>
                          </div>
                        </div>
                      : <div style={{textAlign:'center',padding:30}}>
                          <p style={{color:'#64748b',fontSize:13,marginBottom:18}}>No hay propuesta vinculada a\u00fan.</p>
                          <button className="btn bp" style={{fontWeight:700,background:'#38bdf8',borderColor:'#38bdf8',color:'#0f172a',padding:'8px 20px',borderRadius:20}} onClick={function(){
                            localStorage.setItem('woll_pending_propuesta', JSON.stringify({titulo:solSel.destino||solSel.ruta||'',cliente_id:solSel.cliente_id||'',solicitud_b2b_id:solSel.id}));
                            setSolSel(null); if(typeof setPage==='function') setPage('propuestas');
                          }}>CREAR PROPUESTA VINCULADA</button>
                        </div>
                  }
                </div>
              )}

              {/* 3. Elecci\u00f3n */}
              {activeTab===3 && (
                <div>
                  {loadingProp
                    ? <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>Cargando elecci\u00f3n...</div>
                    : proposalData ? (function(){
                        var ap=null;
                        try{ap=typeof proposalData.aprobacion_detalles==='string'?JSON.parse(proposalData.aprobacion_detalles):proposalData.aprobacion_detalles;}catch(e){}
                        if(!ap) return <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>El viajero a\u00fan no ha seleccionado ninguna opci\u00f3n.</div>;
                        var idx=ap.opcion_index-1;
                        var op=proposalData.opciones&&(proposalData.opciones[idx]||proposalData.opciones[0]);
                        if(!op) return <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>Opci\u00f3n no disponible.</div>;
                        var det={};try{det=typeof op.detalles_json==='string'?JSON.parse(op.detalles_json):op.detalles_json;}catch(e){}
                        var tramos=det.tramos||[];
                        return (
                          <div style={{display:'flex',flexDirection:'column',gap:14}}>
                            <div style={{background:'rgba(255,255,255,0.02)',padding:'14px 18px',borderRadius:8,border:'1px solid rgba(255,255,255,0.08)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                              <div>
                                <div style={{fontWeight:800,fontSize:14,color:'#14b8a6'}}>{op.titulo||ap.opcion_titulo||'Opci\u00f3n Elegida'}</div>
                                <div style={{fontSize:11,color:'#64748b',marginTop:3}}>Equipaje: {ap.equipaje||'Mano'}</div>
                              </div>
                              <span style={{fontSize:20,fontWeight:900,color:'#10b981'}}>${ap.precio||op.total||0} USD</span>
                            </div>
                            <div style={{fontSize:10,fontWeight:800,color:'#64748b',letterSpacing:'0.075em',marginTop:4}}>ITINERARIO SELECCIONADO</div>
                            {tramos.map(function(t,i){return(
                              <div key={i} style={{display:'flex',justifyContent:'space-between',alignItems:'center',background:'rgba(255,255,255,0.01)',padding:'10px 14px',borderRadius:6,border:'1px solid rgba(255,255,255,0.05)',fontSize:12}}>
                                <div>
                                  <span style={{fontWeight:700,color:'#f1f5f9'}}>{t.from} {"\u2192"} {t.to}</span>
                                  <span style={{marginLeft:8,color:'#64748b',fontSize:10}}>{t.airline} {"\u00b7"} {t.info||'Directo'}</span>
                                </div>
                                <div style={{fontFamily:'var(--mono)',fontSize:11,color:'#cbd5e1'}}>{t.dep} {"\u2192"} {t.arr} ({t.duration})</div>
                              </div>
                            );})}
                          </div>
                        );
                      })()
                    : <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>No hay propuesta vinculada.</div>
                  }
                </div>
              )}

              {/* 4. Firma */}
              {activeTab===4 && (
                <div>
                  {loadingProp
                    ? <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>Cargando firma...</div>
                    : proposalData ? (function(){
                        var ap=null;
                        try{ap=typeof proposalData.aprobacion_detalles==='string'?JSON.parse(proposalData.aprobacion_detalles):proposalData.aprobacion_detalles;}catch(e){}
                        if(!ap||!ap.firma_token) return <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>La propuesta a\u00fan no ha sido firmada.</div>;
                        return (
                          <div style={{display:'flex',flexDirection:'column',gap:16}}>
                            <div style={{background:'rgba(16,185,129,0.05)',border:'1px solid rgba(16,185,129,0.2)',padding:'12px 16px',borderRadius:8,display:'flex',alignItems:'center',gap:12}}>
                              <span style={{fontSize:22,color:'#10b981',fontWeight:'bold'}}>{"\u2713"}</span>
                              <div>
                                <div style={{fontWeight:800,color:'#10b981',fontSize:13}}>Propuesta Aprobada y Firmada Digitalmente</div>
                                <div style={{fontSize:11,color:'#64748b',marginTop:2}}>La identidad digital del autorizante fue validada correctamente.</div>
                              </div>
                            </div>
                            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,fontSize:13}}>
                              <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>AUTORIZADO POR</b><span style={{color:'#f1f5f9',fontWeight:600}}>{proposalData.aprobado_por||ap.nombre_firmante||'—'}</span></div>
                              <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>FECHA DE ACEPTACI\u00d3N</b><span style={{color:'#f1f5f9',fontWeight:600}}>{fmtDate(proposalData.aprobado_en)||fmtDate(ap.fecha)||'—'}</span></div>
                              <div style={{gridColumn:'1/-1'}}><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>HASH DE FIRMA DIGITAL</b>
                                <span style={{fontFamily:'var(--mono)',fontSize:11,color:'#3b82f6',wordBreak:'break-all',fontWeight:600}}>{ap.firma_token}</span>
                              </div>
                            </div>
                          </div>
                        );
                      })()
                    : <div style={{textAlign:'center',padding:40,color:'#64748b',fontSize:13}}>No hay propuesta vinculada.</div>
                  }
                </div>
              )}

              {/* 5. Emisi\u00f3n */}
              {activeTab===5 && (
                <div>
                  {solSel.cotizacion_numero
                    ? <div style={{display:'flex',flexDirection:'column',gap:16}}>
                        <div style={{background:'rgba(52,211,153,0.05)',border:'1px solid rgba(52,211,153,0.2)',padding:'12px 16px',borderRadius:8,display:'flex',alignItems:'center',gap:12}}>
                          <span style={{fontSize:22,color:'#34d399'}}>{"\u2708"}</span>
                          <div>
                            <div style={{fontWeight:800,color:'#34d399',fontSize:13}}>Cotizaci\u00f3n Emitida Exitosamente</div>
                            <div style={{fontSize:11,color:'#64748b',marginTop:2}}>La solicitud fue formalizada desde B2B.</div>
                          </div>
                        </div>
                        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,fontSize:13}}>
                          <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>C\u00d3DIGO</b>
                            <span style={{fontFamily:'var(--mono)',fontWeight:800,fontSize:16,color:'#34d399'}}>{solSel.cotizacion_numero}</span>
                          </div>
                          <div><b style={{color:'#64748b',fontSize:9,display:'block',marginBottom:4,letterSpacing:'0.05em'}}>PDF DE COMPRA</b>
                            <button className="btn bo bsm" style={{borderColor:'#34d399',color:'#34d399',fontWeight:700}} onClick={function(){ pdfDownload(solSel.cotizacion_id,'pdf'); }}>DESCARGAR PDF {"\u2913"}</button>
                          </div>
                        </div>
                      </div>
                    : <div style={{textAlign:'center',padding:30}}>
                        <p style={{fontSize:13,color:'#64748b',marginBottom:18}}>Lista para formalizar la venta del boleto.</p>
                        <button className="btn bp" style={{background:'#10b981',borderColor:'#10b981',color:'#0f172a',fontWeight:800,padding:'10px 24px',borderRadius:20,fontSize:12}}
                          disabled={emitirLoading}
                          onClick={function(){ formalizarVenta(solSel); }}>
                          {emitirLoading?'Formalizando...':'\u2192 EMITIR / FORMALIZAR VENTA'}
                        </button>
                      </div>
                  }
                </div>
              )}

            </div>

            {/* Pie */}
            <div style={{borderTop:'1px solid rgba(255,255,255,0.08)',paddingTop:14,display:'flex',justifyContent:'space-between',alignItems:'center'}}>
              <div className="flex g1" style={{alignItems:'center'}}>
                <span style={{fontSize:9,color:'#64748b',fontWeight:800,marginRight:8,letterSpacing:'0.05em'}}>PASO:</span>
                {PASOS.map(function(p,i){
                  var cur=calcPaso(solSel)===i+1;
                  var bc=PASO_COLORS[i];
                  return(
                    <button key={i} title={'Mover a '+p} onClick={function(){
                      if(confirm('\u00bfMover al paso '+(i+1)+' ('+p+')?')){
                        fetch('/api/v1/solicitudes_b2b/'+solSel.id,{method:'PUT',
                          headers:{'Content-Type':'application/json',Authorization:'Bearer '+localStorage.getItem('wt')},
                          body:JSON.stringify({estado:i+1>=5?'finalizada':'en_proceso',paso_actual:i+1})
                        }).then(function(){ toast('Paso actualizado'); load(); setSolSel(null); });
                      }
                    }} style={{width:26,height:26,borderRadius:'50%',border:'1px solid '+bc,fontSize:10,fontWeight:800,cursor:'pointer',transition:'all 0.2s ease',
                      background:cur?bc:'transparent',color:cur?'#0f172a':bc,boxShadow:cur?'0 0 8px '+bc+'40':'none'}}>
                      {i+1}
                    </button>
                  );
                })}
              </div>
              <div className="flex g2">
                <button className="btn br bsm" style={{borderRadius:20,fontWeight:700,fontSize:11}} onClick={function(){ deleteSol(solSel.id); }}>Eliminar</button>
                <button className="btn bo bsm" style={{borderColor:'#38bdf8',color:'#38bdf8',borderRadius:20,fontWeight:700,fontSize:11,display:'inline-flex',alignItems:'center',gap:4}}
                  disabled={emitirLoading}
                  onClick={function(){ abrirWizardEdicion(solSel); }}>
                  {emitirLoading?'Cargando...':'\u270e Editar (Wizard)'}
                </button>
                <button className="btn bp bsm" style={{background:'#475569',borderColor:'#475569',color:'#f8fafc',borderRadius:20,fontWeight:700,fontSize:11}} onClick={function(){ setSolSel(null); }}>Cerrar</button>
              </div>
            </div>

          </div>
        </div>
      )}
"""
    new_modal_lines = new_modal.split("\n")
    lines = lines[:l_modal_ver] + new_modal_lines + lines[l_modal_edi:]
    print(f"  ✅ Modal VER reemplazado — nuevo bloque: {len(new_modal_lines)} líneas")
    
    # ── PASO 7: Guardar y sincronizar ──────────────────────────────────────
    print(f"\n[7] Guardando... ({len(lines)} líneas totales)")
    result_content = "\n".join(lines)
    with open(INDEX, "w", encoding="utf-8") as f:
        f.write(result_content)
    print("  ✅ Archivo guardado")
    
    r = subprocess.run(
        ["docker", "cp", INDEX, "woll-crm-docker-frontend-1:/usr/share/nginx/html/index.html"],
        capture_output=True, text=True
    )
    if r.returncode == 0:
        print("  ✅ Sincronizado con contenedor Docker — ¡listo!")
    else:
        print(f"  ❌ Docker cp error: {r.stderr}")
    
    print("\n=== COMPLETADO. Haz Ctrl+F5 en el navegador. ===")

if __name__ == "__main__":
    run()