// portal/screens/alquileres.jsx — Módulo de Alquileres

(function () {
  const { useState, useEffect, useCallback } = React;

  function fmtD(d) { return d ? d.slice(0,10) : '—'; }
  function fmtP(v) { return v != null ? '$' + Number(v).toLocaleString('es-SV',{minimumFractionDigits:2,maximumFractionDigits:2}) : '—'; }

  // ─── Badge genérico ───────────────────────────────────────────────────────
  function Badge({label, color}) {
    return <span style={{padding:'2px 8px',borderRadius:20,background:color+'20',color,fontSize:11,fontWeight:600}}>{label}</span>;
  }
  function badgeAlquiler(estado) {
    const cfg = {activo:{label:'Activo',c:'var(--green)'},finalizado:{label:'Finalizado',c:'var(--text-3)'},cancelado:{label:'Cancelado',c:'var(--red)'}};
    const s = cfg[estado]||cfg.activo;
    return <Badge label={s.label} color={s.c}/>;
  }
  function badgeProyecto(estado) {
    const cfg = {activo:{label:'Activo',c:'var(--green)'},finalizado:{label:'Finalizado',c:'var(--blue)'},cancelado:{label:'Cancelado',c:'var(--red)'}};
    const s = cfg[estado]||cfg.activo;
    return <Badge label={s.label} color={s.c}/>;
  }

  // ─── Modal: Cliente ───────────────────────────────────────────────────────
  const ModalCliente = ({item, onClose, onSaved}) => {
    const [form, setForm] = useState({nombre:item?.nombre||'',nit:item?.nit||'',direccion:item?.direccion||'',contacto:item?.contacto||'',telefono:item?.telefono||'',email:item?.email||''});
    const [saving, setSaving] = useState(false);
    const [err, setErr] = useState('');
    const set = k => e => setForm(f=>({...f,[k]:e.target.value}));

    const submit = async () => {
      if (!form.nombre.trim()) { setErr('Nombre requerido'); return; }
      setSaving(true); setErr('');
      try {
        item ? await window.API.clientes_alquiler.update(item.id, form) : await window.API.clientes_alquiler.create(form);
        onSaved();
      } catch(e) { setErr(e.message); } finally { setSaving(false); }
    };

    return (
      <Modal title={item ? 'Editar Cliente' : 'Nuevo Cliente'} onClose={onClose} width={460}>
        {err && <ErrorBanner msg={err}/>}
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div className="form-row"><label className="form-label">Nombre *</label><input className="form-input" value={form.nombre} onChange={set('nombre')}/></div>
          <div className="form-row"><label className="form-label">NIT</label><input className="form-input" value={form.nit} onChange={set('nit')}/></div>
          <div className="form-row"><label className="form-label">Dirección</label><textarea className="form-input" rows={2} value={form.direccion} onChange={set('direccion')}/></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="form-row"><label className="form-label">Contacto</label><input className="form-input" value={form.contacto} onChange={set('contacto')}/></div>
            <div className="form-row"><label className="form-label">Teléfono</label><input className="form-input" value={form.telefono} onChange={set('telefono')}/></div>
          </div>
          <div className="form-row"><label className="form-label">Email</label><input className="form-input" type="email" value={form.email} onChange={set('email')}/></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>
    );
  };

  // ─── Modal: Proyecto de Alquiler ──────────────────────────────────────────
  const ModalProyectoAlquiler = ({item, clientes, onClose, onSaved}) => {
    const [form, setForm] = useState({nombre:item?.nombre||'',cliente_id:item?.cliente_id||'',ubicacion:item?.ubicacion||'',descripcion:item?.descripcion||'',encargado:item?.encargado||'',estado:item?.estado||'activo',inicio:item?.inicio?item.inicio.slice(0,10):'',fin:item?.fin?item.fin.slice(0,10):''});
    const [saving, setSaving] = useState(false);
    const [err, setErr] = useState('');
    const set = k => e => setForm(f=>({...f,[k]:e.target.value}));

    const submit = async () => {
      if (!form.nombre.trim()) { setErr('Nombre requerido'); return; }
      setSaving(true); setErr('');
      try {
        const data = {...form, cliente_id: form.cliente_id||null};
        item ? await window.API.proyectos_alquiler.update(item.id, data) : await window.API.proyectos_alquiler.create(data);
        onSaved();
      } catch(e) { setErr(e.message); } finally { setSaving(false); }
    };

    return (
      <Modal title={item ? 'Editar Proyecto' : 'Nuevo Proyecto'} onClose={onClose} width={500}>
        {err && <ErrorBanner msg={err}/>}
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div className="form-row"><label className="form-label">Nombre *</label><input className="form-input" value={form.nombre} onChange={set('nombre')}/></div>
          <div className="form-row">
            <label className="form-label">Cliente</label>
            <select className="form-input" value={form.cliente_id} onChange={set('cliente_id')}>
              <option value="">— Sin cliente —</option>
              {clientes.map(c=><option key={c.id} value={c.id}>{c.nombre}</option>)}
            </select>
          </div>
          <div className="form-row"><label className="form-label">Ubicación</label><input className="form-input" value={form.ubicacion} onChange={set('ubicacion')}/></div>
          <div className="form-row"><label className="form-label">Encargado</label><input className="form-input" value={form.encargado} onChange={set('encargado')}/></div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="form-row"><label className="form-label">Inicio</label><input className="form-input" type="date" value={form.inicio} onChange={set('inicio')}/></div>
            <div className="form-row"><label className="form-label">Fin</label><input className="form-input" type="date" value={form.fin} onChange={set('fin')}/></div>
          </div>
          {item && <div className="form-row"><label className="form-label">Estado</label><select className="form-input" value={form.estado} onChange={set('estado')}><option value="activo">Activo</option><option value="finalizado">Finalizado</option><option value="cancelado">Cancelado</option></select></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>
    );
  };

  // ─── Modal: Alquiler ──────────────────────────────────────────────────────
  const ModalAlquiler = ({item, maquinaria, proyectos, onClose, onSaved}) => {
    const [form, setForm] = useState({
      empresa: item?.empresa||'almaco',
      maquina_id: item?.maquina_id||'',
      proyecto_alquiler_id: item?.proyecto_alquiler_id||'',
      tipo_contratacion: item?.tipo_contratacion||'hora',
      incluye_combustible: item?.incluye_combustible||false,
      precio_sin_iva: item?.precio_sin_iva||'',
      horas_minimas_dia: item?.horas_minimas_dia??4,
      fecha_inicio: item?.fecha_inicio?item.fecha_inicio.slice(0,10):new Date().toISOString().slice(0,10),
      fecha_fin: item?.fecha_fin?item.fecha_fin.slice(0,10):'',
      encargado_proyecto: item?.encargado_proyecto||'',
    });
    const [saving, setSaving] = useState(false);
    const [err, setErr] = useState('');
    const set = k => e => setForm(f=>({...f,[k]:e.target.value}));

    const maqDisp = maquinaria.filter(m => m.estado==='parqueada' || (item && m.id===item.maquina_id));

    const submit = async () => {
      if (!form.maquina_id) { setErr('Seleccione una máquina'); return; }
      if (!form.proyecto_alquiler_id) { setErr('Seleccione un proyecto'); return; }
      if (!form.precio_sin_iva) { setErr('Precio requerido'); return; }
      setSaving(true); setErr('');
      try {
        const data = {...form, maquina_id:Number(form.maquina_id), proyecto_alquiler_id:Number(form.proyecto_alquiler_id), precio_sin_iva:Number(form.precio_sin_iva), horas_minimas_dia:Number(form.horas_minimas_dia), fecha_fin:form.fecha_fin||null};
        item ? await window.API.alquileres.update(item.id, data) : await window.API.alquileres.create(data);
        onSaved();
      } catch(e) { setErr(e.message); } finally { setSaving(false); }
    };

    return (
      <Modal title={item ? 'Editar Alquiler' : 'Nuevo Alquiler'} onClose={onClose} width={520}>
        {err && <ErrorBanner msg={err}/>}
        <div style={{display:'flex',flexDirection:'column',gap:10}}>
          <div className="form-row">
            <label className="form-label">Empresa</label>
            <select className="form-input" value={form.empresa} onChange={set('empresa')}>
              <option value="almaco">ALMACO SA DE CV</option>
              <option value="amec">AMEC</option>
            </select>
          </div>
          <div className="form-row">
            <label className="form-label">Máquina * {!item && maqDisp.length===0 && <span style={{color:'var(--orange)',fontSize:11}}>(no hay disponibles)</span>}</label>
            <select className="form-input" value={form.maquina_id} onChange={set('maquina_id')} disabled={!!item}>
              <option value="">— Seleccionar —</option>
              {maqDisp.map(m=><option key={m.id} value={m.id}>{m.codigo} — {m.nombre}</option>)}
            </select>
          </div>
          <div className="form-row">
            <label className="form-label">Proyecto *</label>
            <select className="form-input" value={form.proyecto_alquiler_id} onChange={set('proyecto_alquiler_id')}>
              <option value="">— Seleccionar —</option>
              {proyectos.filter(p=>p.estado==='activo').map(p=><option key={p.id} value={p.id}>{p.nombre}{p.cliente_nombre?` (${p.cliente_nombre})`:''}</option>)}
            </select>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="form-row"><label className="form-label">Tipo</label><select className="form-input" value={form.tipo_contratacion} onChange={set('tipo_contratacion')}><option value="hora">Por Hora</option><option value="dia">Por Día</option></select></div>
            <div className="form-row"><label className="form-label">Precio sin IVA *</label><input className="form-input" type="number" step="0.01" min="0" value={form.precio_sin_iva} onChange={set('precio_sin_iva')}/></div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="form-row"><label className="form-label">Horas mínimas/día</label><input className="form-input" type="number" min="1" max="24" value={form.horas_minimas_dia} onChange={set('horas_minimas_dia')}/></div>
            <div className="form-row" style={{justifyContent:'center',paddingTop:22}}>
              <label style={{display:'flex',alignItems:'center',gap:8,cursor:'pointer',fontSize:13,color:'var(--text-2)'}}>
                <input type="checkbox" checked={form.incluye_combustible} onChange={e=>{setForm(f=>({...f,incluye_combustible:e.target.checked}));}} /> Incluye combustible
              </label>
            </div>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10}}>
            <div className="form-row"><label className="form-label">Fecha Inicio *</label><input className="form-input" type="date" value={form.fecha_inicio} onChange={set('fecha_inicio')}/></div>
            <div className="form-row"><label className="form-label">Fecha Fin</label><input className="form-input" type="date" value={form.fecha_fin} onChange={set('fecha_fin')}/></div>
          </div>
          <div className="form-row"><label className="form-label">Encargado (cliente)</label><input className="form-input" value={form.encargado_proyecto} onChange={set('encargado_proyecto')}/></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>
    );
  };

  // ─── Modal: Confirmar finalizar/cancelar ──────────────────────────────────
  const ModalConfirm = ({accion, maquina, onClose, onConfirm}) => (
    <Modal title={accion==='cancelado'?'Cancelar Alquiler':'Finalizar Alquiler'} onClose={onClose} width={360}>
      <p style={{color:'var(--text-2)',fontSize:14}}>{accion==='cancelado'?'¿Cancelar':'¿Finalizar'} el alquiler de <strong style={{color:'var(--text)'}}>{maquina}</strong>?</p>
      <p style={{fontSize:12,color:'var(--text-3)'}}>La máquina volverá al estado "parqueada".</p>
      <div style={{display:'flex',justifyContent:'flex-end',gap:8,marginTop:16}}>
        <button className="btn-ghost" onClick={onClose}>No</button>
        <button className="btn-primary" style={{width:'auto',padding:'9px 20px',background:accion==='cancelado'?'var(--red)':'var(--yellow)'}} onClick={onConfirm}>
          Sí, {accion==='cancelado'?'cancelar':'finalizar'}
        </button>
      </div>
    </Modal>
  );

  // ─── Pantalla Principal ───────────────────────────────────────────────────
  const Alquileres = ({user}) => {
    const isAdmin = ['admin','gerencia'].includes(user?.rol);
    const [tab, setTab] = useState('alquileres');
    const [alquileres, setAlquileres] = useState([]);
    const [clientes, setClientes]     = useState([]);
    const [proyectos, setProyectos]   = useState([]);
    const [maquinaria, setMaquinaria] = useState([]);
    const [loading, setLoading]       = useState(true);
    const [error, setError]           = useState('');
    const [modalAlquiler, setModalAlquiler] = useState(null);
    const [modalCliente, setModalCliente]   = useState(null);
    const [modalProyecto, setModalProyecto] = useState(null);
    const [confirmFin, setConfirmFin]       = useState(null);

    const load = useCallback(async () => {
      setLoading(true); setError('');
      try {
        const [a,c,p,m] = await Promise.all([window.API.alquileres.list(),window.API.clientes_alquiler.list(),window.API.proyectos_alquiler.list(),window.API.maquinaria.list()]);
        setAlquileres(a); setClientes(c); setProyectos(p); setMaquinaria(m);
      } catch(e) { setError(e.message); } finally { setLoading(false); }
    }, []);

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

    const activos    = alquileres.filter(a=>a.estado==='activo');
    const historicos = alquileres.filter(a=>a.estado!=='activo');

    const stats = {
      activos: activos.length,
      clientes: clientes.filter(c=>c.activo).length,
      proyActivos: proyectos.filter(p=>p.estado==='activo').length,
      maqAlquiladas: maquinaria.filter(m=>m.estado==='alquilada').length,
    };

    const finalizarAlquiler = async (id, nuevoEstado) => {
      try { await window.API.alquileres.update(id, {estado:nuevoEstado}); setConfirmFin(null); load(); }
      catch(e) { alert(e.message); }
    };

    const TABS = [['alquileres','Contratos'],['clientes','Clientes'],['proyectos','Proyectos']];

    return (
      <div className="content">
        <div className="page-title-row">
          <div>
            <div className="page-title">Alquileres</div>
            <div className="page-sub">Contratos · Clientes · Proyectos de alquiler</div>
          </div>
          <div className="page-actions">
            <button className="btn-secondary" onClick={load}><Icon name="refresh" size={14}/></button>
            {isAdmin && tab==='alquileres' && <button className="btn-primary" style={{width:'auto',padding:'10px 14px'}} onClick={()=>setModalAlquiler({})}><Icon name="plus" size={14}/> Nuevo alquiler</button>}
            {isAdmin && tab==='clientes'   && <button className="btn-primary" style={{width:'auto',padding:'10px 14px'}} onClick={()=>setModalCliente({})}><Icon name="plus" size={14}/> Nuevo cliente</button>}
            {isAdmin && tab==='proyectos'  && <button className="btn-primary" style={{width:'auto',padding:'10px 14px'}} onClick={()=>setModalProyecto({})}><Icon name="plus" size={14}/> Nuevo proyecto</button>}
          </div>
        </div>

        <div className="kpi-grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:20}}>
          <KpiCard label="Alquileres activos"  value={stats.activos}      icon="flow"     meta="contratos vigentes"/>
          <KpiCard label="Clientes"            value={stats.clientes}     icon="users"    meta="clientes activos"/>
          <KpiCard label="Proyectos activos"   value={stats.proyActivos}  icon="building" meta="proyectos en curso"/>
          <KpiCard label="Máquinas alquiladas" value={stats.maqAlquiladas} icon="cpu"     meta="fuera de plantel"/>
        </div>

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

        {/* Tabs */}
        <div style={{display:'flex',gap:2,borderBottom:'2px solid var(--border)',marginBottom:16}}>
          {TABS.map(([key,label])=>(
            <button key={key} onClick={()=>setTab(key)} style={{padding:'8px 18px',border:'none',background:'none',cursor:'pointer',fontWeight:600,fontSize:13,borderBottom:tab===key?'2px solid var(--yellow)':'2px solid transparent',color:tab===key?'var(--yellow)':'var(--text-2)',marginBottom:-2,transition:'all .15s'}}>
              {label}
            </button>
          ))}
        </div>

        {loading ? <div style={{display:'flex',justifyContent:'center',padding:40}}><Spinner size={24}/></div> : (
          <>
            {/* Tab: Contratos */}
            {tab==='alquileres' && (
              <div>
                {activos.length > 0 && (
                  <div style={{marginBottom:24}}>
                    <div style={{fontSize:12,fontWeight:700,color:'var(--green)',textTransform:'uppercase',letterSpacing:'.06em',marginBottom:10}}>Activos ({activos.length})</div>
                    <div className="card" style={{padding:0}}>
                      <div style={{overflowX:'auto'}}>
                        <table className="table">
                          <thead><tr><th>Empresa</th><th>Máquina</th><th>Proyecto / Cliente</th><th>Tipo</th><th style={{textAlign:'right'}}>Precio s/IVA</th><th>Combustible</th><th>Inicio</th><th>Encargado</th>{isAdmin&&<th>Acciones</th>}</tr></thead>
                          <tbody>
                            {activos.map(a=>(
                              <tr key={a.id}>
                                <td><span style={{fontSize:11,fontWeight:700,padding:'2px 6px',borderRadius:4,background:a.empresa==='amec'?'var(--purple)20':'var(--yellow)20',color:a.empresa==='amec'?'var(--purple)':'var(--yellow)'}}>{(a.empresa||'almaco').toUpperCase()}</span></td>
                                <td><div style={{fontWeight:700,fontSize:12,fontFamily:'var(--font-mono)'}}>{a.maquina_codigo}</div><div style={{fontSize:11,color:'var(--text-3)'}}>{a.maquina_nombre}</div></td>
                                <td><div style={{fontSize:12}}>{a.proyecto_nombre}</div><div style={{fontSize:11,color:'var(--text-3)'}}>{a.cliente_nombre||'—'}</div></td>
                                <td style={{fontSize:12}}>{a.tipo_contratacion==='hora'?'Por hora':'Por día'}</td>
                                <td className="num">{fmtP(a.precio_sin_iva)}</td>
                                <td style={{fontSize:12}}>{a.incluye_combustible?<span style={{color:'var(--green)'}}>✓ Sí</span>:'No'}</td>
                                <td style={{fontSize:12}}>{fmtD(a.fecha_inicio)}</td>
                                <td style={{fontSize:12,color:'var(--text-3)'}}>{a.encargado_proyecto||'—'}</td>
                                {isAdmin&&<td>
                                  <div style={{display:'flex',gap:6}}>
                                    <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px'}} onClick={()=>setModalAlquiler(a)}>Editar</button>
                                    <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px',color:'var(--blue)'}} onClick={()=>setConfirmFin({id:a.id,accion:'finalizado',maquina:a.maquina_codigo})}>Finalizar</button>
                                    <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px',color:'var(--red)'}} onClick={()=>setConfirmFin({id:a.id,accion:'cancelado',maquina:a.maquina_codigo})}>Cancelar</button>
                                  </div>
                                </td>}
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                )}
                {historicos.length > 0 && (
                  <div>
                    <div style={{fontSize:12,fontWeight:700,color:'var(--text-3)',textTransform:'uppercase',letterSpacing:'.06em',marginBottom:10}}>Histórico ({historicos.length})</div>
                    <div className="card" style={{padding:0}}>
                      <div style={{overflowX:'auto'}}>
                        <table className="table">
                          <thead><tr><th>Empresa</th><th>Máquina</th><th>Proyecto</th><th>Tipo</th><th style={{textAlign:'right'}}>Precio</th><th>Inicio</th><th>Fin</th><th>Estado</th></tr></thead>
                          <tbody>
                            {historicos.map(a=>(
                              <tr key={a.id}>
                                <td><span style={{fontSize:11,fontWeight:700,padding:'2px 6px',borderRadius:4,background:a.empresa==='amec'?'var(--purple)20':'var(--yellow)20',color:a.empresa==='amec'?'var(--purple)':'var(--yellow)'}}>{(a.empresa||'almaco').toUpperCase()}</span></td>
                                <td style={{fontSize:12,fontWeight:600,fontFamily:'var(--font-mono)'}}>{a.maquina_codigo}</td>
                                <td style={{fontSize:12}}>{a.proyecto_nombre}</td>
                                <td style={{fontSize:12}}>{a.tipo_contratacion==='hora'?'Hora':'Día'}</td>
                                <td className="num">{fmtP(a.precio_sin_iva)}</td>
                                <td style={{fontSize:12}}>{fmtD(a.fecha_inicio)}</td>
                                <td style={{fontSize:12}}>{fmtD(a.fecha_fin)}</td>
                                <td>{badgeAlquiler(a.estado)}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                )}
                {alquileres.length===0 && <EmptyState icon="flow" title="Sin alquileres" sub="Registra el primer contrato de alquiler."/>}
              </div>
            )}

            {/* Tab: Clientes */}
            {tab==='clientes' && (
              <div className="card" style={{padding:0}}>
                <div style={{overflowX:'auto'}}>
                  <table className="table">
                    <thead><tr><th>Nombre</th><th>NIT</th><th>Contacto</th><th>Teléfono</th><th>Email</th>{isAdmin&&<th></th>}</tr></thead>
                    <tbody>
                      {clientes.map(c=>(
                        <tr key={c.id}>
                          <td style={{fontWeight:600}}>{c.nombre}</td>
                          <td style={{fontSize:12,fontFamily:'var(--font-mono)'}}>{c.nit||'—'}</td>
                          <td style={{fontSize:12}}>{c.contacto||'—'}</td>
                          <td style={{fontSize:12}}>{c.telefono||'—'}</td>
                          <td style={{fontSize:12}}>{c.email||'—'}</td>
                          {isAdmin&&<td><button className="btn-ghost" style={{fontSize:11,padding:'3px 8px'}} onClick={()=>setModalCliente(c)}><Icon name="pencil" size={13}/></button></td>}
                        </tr>
                      ))}
                      {clientes.length===0&&<tr><td colSpan={isAdmin?6:5}><EmptyState icon="users" title="Sin clientes" sub="Agrega el primer cliente."/></td></tr>}
                    </tbody>
                  </table>
                </div>
              </div>
            )}

            {/* Tab: Proyectos */}
            {tab==='proyectos' && (
              <div className="card" style={{padding:0}}>
                <div style={{overflowX:'auto'}}>
                  <table className="table">
                    <thead><tr><th>Proyecto</th><th>Cliente</th><th>Ubicación</th><th>Encargado</th><th>Inicio</th><th>Estado</th>{isAdmin&&<th></th>}</tr></thead>
                    <tbody>
                      {proyectos.map(p=>(
                        <tr key={p.id}>
                          <td style={{fontWeight:600}}>{p.nombre}</td>
                          <td style={{fontSize:12}}>{p.cliente_nombre||'—'}</td>
                          <td style={{fontSize:12,color:'var(--text-3)'}}>{p.ubicacion||'—'}</td>
                          <td style={{fontSize:12}}>{p.encargado||'—'}</td>
                          <td style={{fontSize:12}}>{fmtD(p.inicio)}</td>
                          <td>{badgeProyecto(p.estado)}</td>
                          {isAdmin&&<td><button className="btn-ghost" style={{fontSize:11,padding:'3px 8px'}} onClick={()=>setModalProyecto(p)}><Icon name="pencil" size={13}/></button></td>}
                        </tr>
                      ))}
                      {proyectos.length===0&&<tr><td colSpan={isAdmin?7:6}><EmptyState icon="building" title="Sin proyectos" sub="Agrega el primer proyecto de alquiler."/></td></tr>}
                    </tbody>
                  </table>
                </div>
              </div>
            )}
          </>
        )}

        {/* Modals */}
        {modalAlquiler && <ModalAlquiler item={modalAlquiler.id?modalAlquiler:null} maquinaria={maquinaria} proyectos={proyectos} onClose={()=>setModalAlquiler(null)} onSaved={()=>{setModalAlquiler(null);load();}}/>}
        {modalCliente  && <ModalCliente  item={modalCliente.id?modalCliente:null}  onClose={()=>setModalCliente(null)}  onSaved={()=>{setModalCliente(null);load();}}/>}
        {modalProyecto && <ModalProyectoAlquiler item={modalProyecto.id?modalProyecto:null} clientes={clientes} onClose={()=>setModalProyecto(null)} onSaved={()=>{setModalProyecto(null);load();}}/>}
        {confirmFin && <ModalConfirm accion={confirmFin.accion} maquina={confirmFin.maquina} onClose={()=>setConfirmFin(null)} onConfirm={()=>finalizarAlquiler(confirmFin.id,confirmFin.accion)}/>}
      </div>
    );
  };

  window.Alquileres = Alquileres;
})();