Empresa

Estado

Cliente

Maquinaria

Contrato

Período

Cantidad

Precio negociado (sin IVA) * {form.precio_negociado>0 &&

Con IVA 13%: {fmtP(precioIva)} / {form.tipo_contrato==='hora'?'hr':'día'}

}

setForm(f=>({...f,incluye_flete:e.target.checked}))}/> Incluye flete {form.incluye_flete && }

Notas

</div>
          <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:4}}>
            <button className="btn-ghost" onClick={onClose}>Cancelar</button>
            <button className="btn-primary" style={{width:'auto',padding:'9px 20px'}} onClick={submit} disabled={saving}>{saving?'Guardando…':'Guardar'}</button>
          </div>
        </div>
      </Modal>
    );
  };

// ─── Pantalla Principal ───────────────────────────────────────────────────
  const Cotizaciones = ({user}) => {
    const isAdmin = ['admin','gerencia'].includes(user?.rol);
    const [cotizaciones, setCotizaciones] = useState([]);
    const [clientes, setClientes]         = useState([]);
    const [maquinaria, setMaquinaria]     = useState([]);
    const [loading, setLoading]           = useState(true);
    const [error, setError]               = useState('');
    const [filtroEstado, setFiltroEstado]     = useState('');
    const [filtroEmpresa, setFiltroEmpresa]   = useState('');
    const [modalForm, setModalForm]           = useState(null);
    const [modalVer, setModalVer]             = useState(null);

useEffect(()=>{ load(); },[load]);

const filtradas = cotizaciones.filter(c=>
      (!filtroEstado  || c.estado  === filtroEstado) &&
      (!filtroEmpresa || c.empresa === filtroEmpresa)
    );

const stats = {
      total:    cotizaciones.length,
      espera:   cotizaciones.filter(c=>c.estado==='espera_cliente').length,
      aceptadas: cotizaciones.filter(c=>c.estado==='aceptada').length,
      rechazadas:cotizaciones.filter(c=>c.estado==='rechazada').length,
    };

return (
      <div className="content">
        <div className="page-title-row">
          <div>
            <div className="page-title">Cotizaciones</div>
            <div className="page-sub">Propuestas de alquiler · ALMACO SA DE CV / AMEC</div>
          </div>
          <div className="page-actions">
            <button className="btn-secondary" onClick={load}><Icon name="refresh" size={14}/></button>
            {isAdmin && <button className="btn-primary" style={{width:'auto',padding:'10px 14px'}} onClick={()=>setModalForm({})}><Icon name="plus" size={14}/> Nueva cotización</button>}
          </div>
        </div>

{error && <ErrorBanner msg={error} onRetry={load}/>}

{/* Filtros */}
        <div className="filters" style={{marginBottom:14,flexWrap:'wrap',gap:8}}>
          <select className="filter-chip" value={filtroEstado} onChange={e=>setFiltroEstado(e.target.value)} style={{appearance:'none'}}>
            <option value="">Todos los estados</option>
            <option value="espera_cliente">Espera Cliente</option>
            <option value="aceptada">Aceptadas</option>
            <option value="rechazada">Rechazadas</option>
          </select>
          <select className="filter-chip" value={filtroEmpresa} onChange={e=>setFiltroEmpresa(e.target.value)} style={{appearance:'none'}}>
            <option value="">Todas las empresas</option>
            <option value="almaco">ALMACO</option>
            <option value="amec">AMEC</option>
          </select>
        </div>

<div className="card" style={{padding:0}}>
          {loading
            ? <div style={{display:'flex',justifyContent:'center',padding:40}}><Spinner size={24}/></div>
            : filtradas.length===0
              ? <EmptyState icon="file" title="Sin cotizaciones" sub="Crea la primera propuesta de alquiler."/>
              : (
                <div style={{overflowX:'auto'}}>
                  <table className="table">
                    <thead>
                      <tr><th>Número</th><th>Empresa</th><th>Cliente</th><th>Máquina</th><th>Tipo</th><th style={{textAlign:'right'}}>Precio s/IVA</th><th style={{textAlign:'right'}}>Precio c/IVA</th><th>Estado</th><th>Fecha</th><th></th></tr>
                    </thead>
                    <tbody>
                      {filtradas.map(c=>(
                        <tr key={c.id}>
                          <td style={{fontFamily:'var(--font-mono)',fontWeight:700,fontSize:12}}>{c.numero}</td>
                          <td>
                            <span style={{fontSize:11,fontWeight:700,padding:'2px 6px',borderRadius:4,background:c.empresa==='almaco'?'var(--yellow)20':'var(--purple)20',color:c.empresa==='almaco'?'var(--yellow)':'var(--purple)'}}>
                              {c.empresa.toUpperCase()}
                            </span>
                          </td>
                          <td style={{fontSize:12}}>{c.cliente_nombre||'—'}</td>
                          <td style={{fontSize:12,fontFamily:'var(--font-mono)'}}>{c.maquina_codigo||'—'}</td>
                          <td style={{fontSize:12}}>{c.tipo_contrato==='hora'?'Hora':'Día'}</td>
                          <td className="num">{fmtP(c.precio_negociado)}</td>
                          <td className="num strong">{fmtP(c.precio_negociado?c.precio_negociado*1.13:0)}</td>
                          <td><BadgeCot estado={c.estado}/></td>
                          <td style={{fontSize:12,color:'var(--text-3)'}}>{fmtD(c.created_at)}</td>
                          <td>
                            <div style={{display:'flex',gap:6}}>
                              <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px'}} onClick={()=>setModalVer(c)}><Icon name="eye" size={13}/> Ver</button>
                              {isAdmin && <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px'}} onClick={()=>setModalForm(c)}><Icon name="pencil" size={13}/></button>}
                            </div>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              )
          }
        </div>

{modalForm && <ModalFormCotizacion item={modalForm.id?modalForm:null} clientes={clientes} maquinaria={maquinaria} onClose={()=>setModalForm(null)} onSaved={()=>{setModalForm(null);load();}}/>}
        {modalVer  && <ModalVerCotizacion  cot={modalVer} onClose={()=>setModalVer(null)}/>}
      </div>
    );
  };

window.Cotizaciones = Cotizaciones;
})();