// Pantalla: Maquinaria — Inventario, horómetros y bitácora
(function(){
const { useState, useEffect, useCallback } = React;

const fmtDate = (s) => { if(!s) return '—'; const d=new Date(s); return isNaN(d)?s:d.toLocaleDateString('es-SV',{day:'2-digit',month:'short',year:'numeric'}); };

const PLANTELES = [
  'Plantel Troncal del Norte','Plantel Candelaria de la Frontera',
  'Plantel Zaragoza','Plantel Comalapa','Plantel La Unión',
];
const ESTADO_MAQ = {
  parqueada: {label:'Parqueada', color:'var(--blue)'},
  alquilada: {label:'Alquilada', color:'var(--green)'},
};
const SUB_ESTADO = {
  esperando_ordenes: {label:'Esperando órdenes', color:'var(--text-3)'},
  falla:             {label:'Falla',              color:'var(--red)'},
  mantenimiento:     {label:'Mantenimiento',      color:'var(--orange)'},
  en_reparacion:     {label:'En reparación',      color:'var(--purple)'},
  trabajando:        {label:'Trabajando',          color:'var(--green)'},
};
const TIPO_BITACORA = {
  falla:         {label:'Falla',         color:'var(--red)'},
  mantenimiento: {label:'Mantenimiento', color:'var(--orange)'},
  reparacion:    {label:'Reparación',    color:'var(--purple)'},
};

// ─── Helpers de UI ────────────────────────────────────────────────────────────
const SectionLabel = ({children}) => (
  <div style={{fontSize:10,fontWeight:700,textTransform:'uppercase',letterSpacing:'.08em',
    color:'var(--text-3)',marginBottom:10,marginTop:4,paddingBottom:6,
    borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',gap:6}}>
    {children}
  </div>
);

const FieldGroup = ({children, cols=2}) => (
  <div style={{display:'grid',gridTemplateColumns:`repeat(${cols},1fr)`,gap:10}}>
    {children}
  </div>
);

const Field = ({label, required, children}) => (
  <div style={{display:'flex',flexDirection:'column',gap:5}}>
    <label style={{fontSize:11,fontWeight:600,color:'var(--text-2)',letterSpacing:'.03em'}}>
      {label}{required && <span style={{color:'var(--red)',marginLeft:3}}>*</span>}
    </label>
    {children}
  </div>
);

const MoneyInput = ({value, onChange, disabled}) => (
  <div style={{position:'relative'}}>
    <span style={{position:'absolute',left:10,top:'50%',transform:'translateY(-50%)',
      color:'var(--text-3)',fontSize:13,fontFamily:'var(--font-mono,monospace)',pointerEvents:'none'}}>$</span>
    <input className="form-input" type="number" step="0.01" value={value} onChange={onChange} disabled={disabled}
      style={{paddingLeft:22,fontFamily:'var(--font-mono,monospace)'}}/>
  </div>
);

const Toggle = ({checked, onChange, label}) => (
  <label style={{display:'flex',alignItems:'center',gap:10,cursor:'pointer',padding:'10px 14px',
    borderRadius:8,border:'1px solid',borderColor:checked?'var(--yellow)30':'var(--border)',
    background:checked?'var(--yellow)08':'var(--bg-4)',transition:'all .15s',userSelect:'none'}}>
    <div style={{width:34,height:18,borderRadius:99,background:checked?'var(--yellow)':'var(--bg-2)',
      border:'1px solid',borderColor:checked?'var(--yellow)':'var(--border-2)',
      position:'relative',transition:'background .2s',flexShrink:0}}>
      <div style={{position:'absolute',top:2,left:checked?16:2,width:12,height:12,borderRadius:'50%',
        background:checked?'#0B0E13':'var(--text-3)',transition:'left .2s'}}/>
    </div>
    <span style={{fontSize:13,color:checked?'var(--yellow)':'var(--text-2)',fontWeight:checked?600:400}}>{label}</span>
    <input type="checkbox" checked={checked} onChange={onChange} style={{display:'none'}}/>
  </label>
);

// ─── Modal formulario máquina ─────────────────────────────────────────────────
const ModalFormMaquina = ({maquina, onClose, onSave}) => {
  const [form, setForm] = useState(maquina ? {...maquina} : {
    codigo:'', nombre:'', item:'', marca:'', modelo:'',
    numero_serie:'', numero_vin:'', horometro_actual:0,
    para_venta_shantui:false, plantel:'',
    costo_adquisicion:'', fecha_adquisicion:'', notas:''
  });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  const set = k => e => setForm(f=>({...f,[k]:e.target.value}));

  const handleSave = async () => {
    if (!form.codigo.trim()) { setErr('El código es obligatorio.'); return; }
    setSaving(true); setErr('');
    try {
      const data = {...form,
        horometro_actual: parseFloat(form.horometro_actual)||0,
        costo_adquisicion: form.costo_adquisicion ? parseFloat(form.costo_adquisicion) : null
      };
      const r = maquina
        ? await window.API.maquinaria.update(maquina.id, data)
        : await window.API.maquinaria.create(data);
      onSave(r); onClose();
    } catch(e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <Modal title={maquina ? 'Editar máquina' : 'Nueva máquina'}
      sub={maquina ? `Editando ${maquina.codigo}` : 'Registro en inventario ALMACO'}
      onClose={onClose} width={640}>
      {err && <ErrorBanner msg={err}/>}

      <div style={{display:'flex',flexDirection:'column',gap:16}}>

        {/* Identificación */}
        <div>
          <SectionLabel>🔖 Identificación</SectionLabel>
          <FieldGroup cols={2}>
            <Field label="Código" required>
              <input className="form-input" value={form.codigo} onChange={set('codigo')}
                placeholder="EXC-001" style={{fontFamily:'var(--font-mono,monospace)',fontWeight:700,letterSpacing:'.05em'}}/>
            </Field>
            <Field label="Tipo de equipo">
              <input className="form-input" value={form.item||''} onChange={set('item')} placeholder="Excavadora, Retroexcavadora…"/>
            </Field>
          </FieldGroup>
          <div style={{marginTop:10}}>
            <Field label="Nombre descriptivo">
              <input className="form-input" value={form.nombre||''} onChange={set('nombre')} placeholder="Nombre completo del equipo"/>
            </Field>
          </div>
        </div>

        {/* Datos técnicos */}
        <div>
          <SectionLabel>⚙️ Datos técnicos</SectionLabel>
          <FieldGroup cols={2}>
            <Field label="Marca">
              <input className="form-input" value={form.marca||''} onChange={set('marca')} placeholder="Shantui, Caterpillar, Komatsu…"/>
            </Field>
            <Field label="Modelo">
              <input className="form-input" value={form.modelo||''} onChange={set('modelo')}/>
            </Field>
          </FieldGroup>
          <FieldGroup cols={2} >
            <Field label="Número de serie">
              <input className="form-input" value={form.numero_serie||''} onChange={set('numero_serie')}
                style={{fontFamily:'var(--font-mono,monospace)'}}/>
            </Field>
            <Field label="Número VIN">
              <input className="form-input" value={form.numero_vin||''} onChange={set('numero_vin')}
                placeholder="17 caracteres" style={{fontFamily:'var(--font-mono,monospace)'}}/>
            </Field>
          </FieldGroup>
          <div style={{marginTop:10}}>
            <FieldGroup cols={2}>
              <Field label="Horómetro actual (horas)">
                <input className="form-input" type="number" step="0.1" value={form.horometro_actual||0} onChange={set('horometro_actual')}
                  style={{fontFamily:'var(--font-mono,monospace)'}}/>
              </Field>
              <Field label="Plantel asignado">
                <select className="form-input" value={form.plantel||''} onChange={set('plantel')}>
                  <option value="">— Sin asignar —</option>
                  {PLANTELES.map(p=><option key={p} value={p}>{p}</option>)}
                </select>
              </Field>
            </FieldGroup>
          </div>
        </div>

        {/* Adquisición */}
        <div>
          <SectionLabel>💰 Adquisición</SectionLabel>
          <FieldGroup cols={2}>
            <Field label="Costo de adquisición">
              <MoneyInput value={form.costo_adquisicion||''} onChange={set('costo_adquisicion')}/>
            </Field>
            <Field label="Fecha de adquisición">
              <input className="form-input" type="date" value={form.fecha_adquisicion||''} onChange={set('fecha_adquisicion')}/>
            </Field>
          </FieldGroup>
        </div>

        {/* Notas y opciones */}
        <div>
          <SectionLabel>📝 Notas y opciones</SectionLabel>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <Field label="Observaciones">
              <input className="form-input" value={form.notas||''} onChange={set('notas')} placeholder="Información adicional relevante"/>
            </Field>
            <Toggle
              checked={!!form.para_venta_shantui}
              onChange={e=>setForm(f=>({...f,para_venta_shantui:e.target.checked}))}
              label="Incluir en inventario de venta Shantui"
            />
          </div>
        </div>
      </div>

      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:22,paddingTop:16,borderTop:'1px solid var(--border)'}}>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" style={{width:'auto',padding:'10px 20px'}} onClick={handleSave} disabled={saving}>
          {saving ? <Spinner size={14} color="#0A0A0A"/> : <><Icon name="check" size={14}/> {maquina?'Guardar cambios':'Registrar máquina'}</>}
        </button>
      </div>
    </Modal>
  );
};

// ─── Modal bitácora: nuevo evento ─────────────────────────────────────────────
const ModalBitacora = ({maquinaId, onClose, onSave}) => {
  const [form, setForm] = useState({
    tipo:'falla', fecha_evento:new Date().toISOString().split('T')[0],
    descripcion_falla:'', que_se_arruno:'', repuesto:'', costo_repuesto:0,
    mano_obra:0, es_mecanico_interno:false, otros_costos:0, descripcion_otros:''
  });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  const set = k => e => setForm(f=>({...f,[k]:e.target.value}));

  const total = parseFloat(form.costo_repuesto||0)
    + (form.es_mecanico_interno ? 0 : parseFloat(form.mano_obra||0))
    + parseFloat(form.otros_costos||0);

  const tipoColor = TIPO_BITACORA[form.tipo]?.color || 'var(--text-2)';

  const handleSave = async () => {
    setSaving(true); setErr('');
    try {
      const r = await window.API.bitacora.create({...form, maquina_id:maquinaId});
      onSave(r); onClose();
    } catch(e) { setErr(e.message); }
    finally { setSaving(false); }
  };

  return (
    <Modal title="Registrar evento" sub="Falla, mantenimiento o reparación" onClose={onClose} width={580}>
      {err && <ErrorBanner msg={err}/>}

      <div style={{display:'flex',flexDirection:'column',gap:16}}>

        {/* Tipo y fecha */}
        <div>
          <SectionLabel>📋 Evento</SectionLabel>
          <FieldGroup cols={2}>
            <Field label="Tipo de evento" required>
              <select className="form-input" value={form.tipo} onChange={set('tipo')}
                style={{borderColor:tipoColor+'60',color:tipoColor,fontWeight:600}}>
                <option value="falla">⚠ Falla</option>
                <option value="mantenimiento">🔧 Mantenimiento</option>
                <option value="reparacion">🔩 Reparación</option>
              </select>
            </Field>
            <Field label="Fecha del evento">
              <input className="form-input" type="date" value={form.fecha_evento} onChange={set('fecha_evento')}/>
            </Field>
          </FieldGroup>
          <div style={{marginTop:10,display:'flex',flexDirection:'column',gap:10}}>
            <Field label="¿Qué pasó? (descripción)">
              <input className="form-input" value={form.descripcion_falla} onChange={set('descripcion_falla')}
                placeholder="Describe el problema o trabajo realizado"/>
            </Field>
            <Field label="¿Qué se arruinó / componente afectado?">
              <input className="form-input" value={form.que_se_arruno} onChange={set('que_se_arruno')}
                placeholder="Pieza o sistema dañado"/>
            </Field>
          </div>
        </div>

        {/* Costos */}
        <div>
          <SectionLabel>💲 Costos</SectionLabel>
          <FieldGroup cols={2}>
            <Field label="Repuesto utilizado">
              <input className="form-input" value={form.repuesto} onChange={set('repuesto')} placeholder="Nombre del repuesto"/>
            </Field>
            <Field label="Costo del repuesto">
              <MoneyInput value={form.costo_repuesto} onChange={set('costo_repuesto')}/>
            </Field>
          </FieldGroup>
          <div style={{marginTop:10}}>
            <Toggle
              checked={form.es_mecanico_interno}
              onChange={e=>setForm(f=>({...f,es_mecanico_interno:e.target.checked,mano_obra:e.target.checked?0:f.mano_obra}))}
              label="Mecánico interno ALMACO (mano de obra = $0.00)"
            />
          </div>
          {!form.es_mecanico_interno && (
            <div style={{marginTop:10}}>
              <Field label="Mano de obra">
                <MoneyInput value={form.mano_obra} onChange={set('mano_obra')}/>
              </Field>
            </div>
          )}
          <FieldGroup cols={2} >
            <Field label="Otros costos">
              <MoneyInput value={form.otros_costos} onChange={set('otros_costos')}/>
            </Field>
            <Field label="Detalle otros costos">
              <input className="form-input" value={form.descripcion_otros} onChange={set('descripcion_otros')} placeholder="Transporte, varios…"/>
            </Field>
          </FieldGroup>

          {/* Total dinámico */}
          <div style={{marginTop:12,padding:'12px 16px',borderRadius:10,
            background:'var(--yellow)08',border:'1px solid var(--yellow)25',
            display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{fontSize:13,color:'var(--text-2)'}}>Costo total estimado</span>
            <span style={{fontSize:18,fontWeight:800,color:'var(--yellow)',fontFamily:'var(--font-mono,monospace)'}}>
              ${total.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:22,paddingTop:16,borderTop:'1px solid var(--border)'}}>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" style={{width:'auto',padding:'10px 20px'}} onClick={handleSave} disabled={saving}>
          {saving ? <Spinner size={14} color="#0A0A0A"/> : <><Icon name="check" size={14}/> Registrar evento</>}
        </button>
      </div>
    </Modal>
  );
};

// ─── Modal detalle de máquina ─────────────────────────────────────────────────
const ModalDetalle = ({maquinaId, user, onClose, onUpdate}) => {
  const [data, setData]     = useState(null);
  const [tab, setTab]       = useState('info');
  const [showBitacora, setShowBitacora] = useState(false);
  const [savingHoro, setSavingHoro]     = useState(false);
  const [horoForm, setHoroForm] = useState({horometro_inicial:'', notas:'', fecha:new Date().toISOString().split('T')[0]});
  const [errHoro, setErrHoro]   = useState('');
  const [savingSub, setSavingSub] = useState(false);

  const isAdmin = ['admin','gerencia'].includes(user.rol);

  const load = useCallback(() => window.API.maquinaria.get(maquinaId).then(setData).catch(()=>{}), [maquinaId]);
  useEffect(()=>{ load(); }, [load]);

  const handleHoroSave = async () => {
    if (!horoForm.horometro_inicial) { setErrHoro('Ingresa el horómetro.'); return; }
    setSavingHoro(true); setErrHoro('');
    try {
      await window.API.horometros.create({maquina_id:maquinaId, ...horoForm, horometro_inicial:parseFloat(horoForm.horometro_inicial)});
      setHoroForm(f=>({...f, horometro_inicial:'', notas:''}));
      load();
    } catch(e) { setErrHoro(e.message); }
    finally { setSavingHoro(false); }
  };

  const handleSubEstado = async (sub) => {
    setSavingSub(true);
    try { await window.API.maquinaria.update(maquinaId, {...data, sub_estado:sub}); onUpdate(); load(); }
    catch(e) { alert(e.message); }
    finally { setSavingSub(false); }
  };

  const handleResolverBitacora = async (id) => {
    try { await window.API.bitacora.update(id, {resuelto:true}); load(); } catch(e) { alert(e.message); }
  };

  if (!data) return <Modal title="Cargando..." onClose={onClose}><div style={{display:'flex',justifyContent:'center',padding:40}}><Spinner size={24}/></div></Modal>;

  const es = ESTADO_MAQ[data.estado] || {label:data.estado, color:'var(--text-3)'};
  const ss = data.sub_estado ? SUB_ESTADO[data.sub_estado] : null;
  const costoTotal = (b) => parseFloat(b.costo_repuesto||0)+parseFloat(b.mano_obra||0)+parseFloat(b.otros_costos||0);

  return (
    <Modal title={`${data.codigo} — ${data.item||data.nombre||''}`}
      sub={`${data.marca||''} ${data.modelo||''}`.trim()} onClose={onClose} width={700}>

      {/* Header de estado */}
      <div style={{display:'flex',gap:8,marginBottom:14,flexWrap:'wrap',alignItems:'center',
        padding:'10px 14px',background:'var(--bg-4)',borderRadius:10,border:'1px solid var(--border)'}}>
        <span style={{padding:'4px 12px',borderRadius:20,background:es.color+'20',color:es.color,fontSize:12,fontWeight:700}}>{es.label}</span>
        {ss && <span style={{padding:'4px 12px',borderRadius:20,background:ss.color+'20',color:ss.color,fontSize:12,fontWeight:600}}>{ss.label}</span>}
        {data.plantel && <span style={{fontSize:12,color:'var(--text-3)'}}><Icon name="location" size={11}/> {data.plantel}</span>}
        <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:6}}>
          <Icon name="clock" size={13}/>
          <span style={{fontSize:13,fontFamily:'var(--font-mono,monospace)',fontWeight:700,color:'var(--yellow)'}}>{data.horometro_actual} h</span>
        </div>
      </div>

      {/* Sub-estado rápido */}
      {data.estado==='alquilada' && isAdmin && (
        <div style={{display:'flex',gap:6,marginBottom:14,flexWrap:'wrap',
          padding:'8px 10px',background:'var(--bg-3)',borderRadius:8}}>
          <span style={{fontSize:11,color:'var(--text-3)',alignSelf:'center',marginRight:4}}>Estado operativo:</span>
          {Object.entries(SUB_ESTADO).map(([k,v])=>(
            <button key={k} disabled={savingSub} onClick={()=>handleSubEstado(k)}
              style={{padding:'5px 10px',borderRadius:6,border:'1px solid',fontSize:11,cursor:'pointer',transition:'all .12s',
                background:data.sub_estado===k?v.color+'25':'var(--bg-2)',
                borderColor:data.sub_estado===k?v.color:'var(--border)',
                color:data.sub_estado===k?v.color:'var(--text-2)',
                fontWeight:data.sub_estado===k?700:400}}>
              {v.label}
            </button>
          ))}
        </div>
      )}

      {/* Tabs */}
      <div style={{display:'flex',gap:2,marginBottom:16,borderBottom:'1px solid var(--border)',paddingBottom:0}}>
        {[['info','Info','sliders'],['horos','Horómetros','clock'],['bitacora','Bitácora','zap'],['alquileres','Alquileres','key']].map(([id,label,icon])=>(
          <button key={id} onClick={()=>setTab(id)} style={{
            padding:'8px 14px',borderRadius:'6px 6px 0 0',border:'1px solid transparent',
            borderBottom:'none',fontSize:12.5,fontWeight:tab===id?600:400,cursor:'pointer',
            background:tab===id?'var(--bg-2)':'none',
            color:tab===id?'var(--yellow)':'var(--text-2)',
            borderColor:tab===id?'var(--border)':'transparent',
            marginBottom:-1,display:'inline-flex',alignItems:'center',gap:5,transition:'all .12s'}}>
            <Icon name={icon} size={12}/> {label}
          </button>
        ))}
      </div>

      {/* Tab: Información */}
      {tab==='info' && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:8,fontSize:13}}>
          {[['Código',data.codigo],['Ítem',data.item],['Nombre',data.nombre],['Marca',data.marca],
            ['Modelo',data.modelo],['N° Serie',data.numero_serie],['N° VIN',data.numero_vin],
            ['Plantel',data.plantel],
            ['Costo adquisición',data.costo_adquisicion?`$${parseFloat(data.costo_adquisicion).toFixed(2)}`:'—'],
            ['Fecha adquisición',data.fecha_adquisicion?fmtDate(data.fecha_adquisicion):'—'],
            ['Para venta Shantui',data.para_venta_shantui?'Sí':'No'],
          ].map(([k,v])=>(
            <div key={k} style={{background:'var(--bg-3)',padding:'8px 12px',borderRadius:8,border:'1px solid var(--border)'}}>
              <div style={{fontSize:10,color:'var(--text-3)',marginBottom:3,textTransform:'uppercase',letterSpacing:'.05em'}}>{k}</div>
              <div style={{fontWeight:500,fontFamily:k==='Código'||k==='N° Serie'||k==='N° VIN'?'var(--font-mono,monospace)':'inherit'}}>{v||'—'}</div>
            </div>
          ))}
          {data.notas && <div style={{gridColumn:'1/-1',background:'var(--bg-3)',padding:'8px 12px',borderRadius:8,border:'1px solid var(--border)'}}>
            <div style={{fontSize:10,color:'var(--text-3)',marginBottom:3,textTransform:'uppercase',letterSpacing:'.05em'}}>Notas</div>
            <div style={{color:'var(--text-2)'}}>{data.notas}</div>
          </div>}
        </div>
      )}

      {/* Tab: Horómetros */}
      {tab==='horos' && (
        <div>
          <div style={{background:'var(--bg-3)',borderRadius:10,padding:16,marginBottom:16,border:'1px solid var(--border)'}}>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:12}}>
              <Icon name="clock" size={14}/>
              <span style={{fontWeight:600,fontSize:13}}>Reportar horómetro del día</span>
            </div>
            {errHoro && <ErrorBanner msg={errHoro}/>}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10,marginBottom:12}}>
              <Field label="Fecha">
                <input className="form-input" type="date" value={horoForm.fecha} onChange={e=>setHoroForm(f=>({...f,fecha:e.target.value}))}/>
              </Field>
              <Field label="Horómetro inicial (h)">
                <input className="form-input" type="number" step="0.1" value={horoForm.horometro_inicial}
                  onChange={e=>setHoroForm(f=>({...f,horometro_inicial:e.target.value}))} placeholder="0.0"
                  style={{fontFamily:'var(--font-mono,monospace)'}}/>
              </Field>
              <Field label="Notas">
                <input className="form-input" value={horoForm.notas} onChange={e=>setHoroForm(f=>({...f,notas:e.target.value}))} placeholder="Opcional"/>
              </Field>
            </div>
            <button className="btn-primary" style={{width:'auto',padding:'8px 16px'}} onClick={handleHoroSave} disabled={savingHoro}>
              {savingHoro?<Spinner size={13} color="#0A0A0A"/>:<><Icon name="check" size={13}/> Registrar</>}
            </button>
          </div>
          <div style={{overflowX:'auto'}}>
            <table className="table">
              <thead><tr><th>Fecha</th><th>Horómetro</th><th>Fuente</th><th>Operador</th><th>Notas</th></tr></thead>
              <tbody>
                {(data.horometros||[]).map(h=>(
                  <tr key={h.id}>
                    <td className="mono" style={{fontSize:12}}>{fmtDate(h.fecha)}</td>
                    <td className="num" style={{fontWeight:700}}>{h.horometro_inicial} h</td>
                    <td><span style={{fontSize:11,padding:'2px 8px',borderRadius:20,background:h.fuente==='interno'?'var(--orange)20':'var(--green)20',color:h.fuente==='interno'?'var(--orange)':'var(--green)'}}>{h.fuente==='interno'?'Interno':'Operador'}</span></td>
                    <td style={{fontSize:12}}>{h.operador_nombre||'—'}</td>
                    <td style={{fontSize:12,color:'var(--text-3)'}}>{h.notas||'—'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            {!data.horometros?.length && <div style={{padding:'24px',textAlign:'center',color:'var(--text-3)',fontSize:13}}>Sin registros de horómetro</div>}
          </div>
        </div>
      )}

      {/* Tab: Bitácora */}
      {tab==='bitacora' && (
        <div>
          {isAdmin && <button className="btn-primary" style={{width:'auto',padding:'8px 14px',marginBottom:14}} onClick={()=>setShowBitacora(true)}>
            <Icon name="plus" size={13}/> Nuevo evento
          </button>}
          {(data.bitacora||[]).map(b=>{
            const tb = TIPO_BITACORA[b.tipo]||{label:b.tipo,color:'var(--text-3)'};
            return (
              <div key={b.id} style={{border:'1px solid var(--border)',borderLeft:`3px solid ${tb.color}`,borderRadius:10,padding:14,marginBottom:10}}>
                <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8,flexWrap:'wrap'}}>
                  <span style={{padding:'3px 10px',borderRadius:20,background:tb.color+'20',color:tb.color,fontSize:11,fontWeight:700}}>{tb.label}</span>
                  <span style={{fontSize:12,color:'var(--text-3)'}}>{fmtDate(b.fecha_evento)}</span>
                  <span style={{fontSize:12,color:'var(--text-3)'}}>{b.creado_por_nombre}</span>
                  <div style={{marginLeft:'auto',display:'flex',alignItems:'center',gap:8}}>
                    <span style={{fontFamily:'var(--font-mono,monospace)',fontSize:13,fontWeight:700,color:'var(--yellow)'}}>
                      ${costoTotal(b).toFixed(2)}
                    </span>
                    {!b.resuelto && isAdmin && (
                      <button className="btn-ghost" style={{fontSize:11,padding:'3px 8px',color:'var(--green)'}} onClick={()=>handleResolverBitacora(b.id)}>
                        <Icon name="check" size={11}/> Resolver
                      </button>
                    )}
                    {b.resuelto && <span style={{fontSize:11,color:'var(--green)',fontWeight:600}}><Icon name="check" size={11}/> Resuelto</span>}
                  </div>
                </div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:6,fontSize:12,color:'var(--text-2)'}}>
                  {b.descripcion_falla && <div><span style={{color:'var(--text-3)'}}>Descripción: </span>{b.descripcion_falla}</div>}
                  {b.que_se_arruno && <div><span style={{color:'var(--text-3)'}}>Componente: </span>{b.que_se_arruno}</div>}
                  {b.repuesto && <div><span style={{color:'var(--text-3)'}}>Repuesto: </span>{b.repuesto}</div>}
                  {parseFloat(b.costo_repuesto||0)>0 && <div><span style={{color:'var(--text-3)'}}>Repuesto: </span>${parseFloat(b.costo_repuesto).toFixed(2)}</div>}
                  <div><span style={{color:'var(--text-3)'}}>M. Obra: </span>{b.es_mecanico_interno?'Interno ($0.00)':`$${parseFloat(b.mano_obra||0).toFixed(2)}`}</div>
                  {parseFloat(b.otros_costos||0)>0 && <div><span style={{color:'var(--text-3)'}}>Otros: </span>${parseFloat(b.otros_costos).toFixed(2)}</div>}
                </div>
              </div>
            );
          })}
          {!data.bitacora?.length && <div style={{padding:'30px',textAlign:'center',color:'var(--text-3)',fontSize:13}}>Sin eventos en bitácora</div>}
          {showBitacora && <ModalBitacora maquinaId={maquinaId} onClose={()=>setShowBitacora(false)} onSave={()=>load()}/>}
        </div>
      )}

      {/* Tab: Alquileres */}
      {tab==='alquileres' && (
        <div style={{overflowX:'auto'}}>
          <table className="table">
            <thead><tr><th>Proyecto</th><th>Cliente</th><th>Tipo</th><th style={{textAlign:'right'}}>Precio</th><th>Inicio</th><th>Fin</th><th>Estado</th></tr></thead>
            <tbody>
              {(data.alquileres||[]).map(a=>(
                <tr key={a.id}>
                  <td style={{fontSize:12}}>{a.proyecto_nombre||'—'}</td>
                  <td style={{fontSize:12,color:'var(--text-3)'}}>{a.cliente_nombre||'—'}</td>
                  <td style={{fontSize:11}}>{a.tipo_contratacion==='hora'?'Por hora':'Por día'}{a.incluye_combustible?' + diesel':''}</td>
                  <td className="num">${parseFloat(a.precio_sin_iva||0).toFixed(2)}</td>
                  <td style={{fontSize:12}}>{fmtDate(a.fecha_inicio)}</td>
                  <td style={{fontSize:12}}>{a.fecha_fin?fmtDate(a.fecha_fin):'—'}</td>
                  <td><span style={{fontSize:11,padding:'2px 8px',borderRadius:20,background:a.estado==='activo'?'var(--green)20':'var(--bg-3)',color:a.estado==='activo'?'var(--green)':'var(--text-3)'}}>{a.estado}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
          {!data.alquileres?.length && <div style={{padding:'20px',textAlign:'center',color:'var(--text-3)',fontSize:13}}>Sin alquileres registrados</div>}
        </div>
      )}
    </Modal>
  );
};

// ─── Pantalla principal: Maquinaria ───────────────────────────────────────────
const Maquinaria = ({user}) => {
  const [maquinas, setMaquinas]           = useState([]);
  const [loading, setLoading]             = useState(true);
  const [error, setError]                 = useState('');
  const [showForm, setShowForm]           = useState(false);
  const [editMaq, setEditMaq]             = useState(null);
  const [detalle, setDetalle]             = useState(null);
  const [filterPlantel, setFilterPlantel] = useState('todos');
  const [filterEstado, setFilterEstado]   = useState('todos');

  const isAdmin = ['admin','gerencia'].includes(user.rol);

  const load = useCallback(async () => {
    setLoading(true); setError('');
    try { setMaquinas(await window.API.maquinaria.list()); }
    catch(e) { setError(e.message); }
    finally { setLoading(false); }
  }, []);

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

  useEffect(()=>{
    const handler = () => { setShowForm(false); setEditMaq(null); setDetalle(null); };
    window.addEventListener('almaco:route', handler);
    return () => window.removeEventListener('almaco:route', handler);
  },[]);

  const filtered = maquinas.filter(m=>
    (filterPlantel==='todos'||m.plantel===filterPlantel) &&
    (filterEstado==='todos'||m.estado===filterEstado)
  );

  const stats = {
    total:      maquinas.length,
    alquiladas: maquinas.filter(m=>m.estado==='alquilada').length,
    parqueadas: maquinas.filter(m=>m.estado==='parqueada').length,
    fallas:     maquinas.filter(m=>['falla','en_reparacion'].includes(m.sub_estado)).length,
  };

  return (
    <div className="content">
      <div className="page-title-row">
        <div>
          <div className="page-title">Maquinaria</div>
          <div className="page-sub">Inventario · Horómetros · Bitácora · Estado en tiempo real</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={()=>{setEditMaq(null);setShowForm(true);}}>
            <Icon name="plus" size={14}/> Nueva máquina
          </button>}
        </div>
      </div>

      <div className="kpi-grid" style={{gridTemplateColumns:'repeat(4,1fr)',marginBottom:20}}>
        <KpiCard label="Total inventario"  value={stats.total}      icon="cpu"      meta="máquinas registradas"/>
        <KpiCard label="Alquiladas"        value={stats.alquiladas} icon="key"      meta="con contrato activo"/>
        <KpiCard label="Parqueadas"        value={stats.parqueadas} icon="building" meta="disponibles"/>
        <KpiCard label="Con fallas"        value={stats.fallas}     icon="zap"      meta="falla o reparación"/>
      </div>

      <div className="filters" style={{marginBottom:14,flexWrap:'wrap',gap:8}}>
        <select className="filter-chip" value={filterPlantel} onChange={e=>setFilterPlantel(e.target.value)} style={{appearance:'none'}}>
          <option value="todos">Todos los planteles</option>
          {PLANTELES.map(p=><option key={p} value={p}>{p}</option>)}
          <option value="">Sin plantel</option>
        </select>
        <select className="filter-chip" value={filterEstado} onChange={e=>setFilterEstado(e.target.value)} style={{appearance:'none'}}>
          <option value="todos">Todos los estados</option>
          <option value="parqueada">Parqueada</option>
          <option value="alquilada">Alquilada</option>
        </select>
      </div>

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

      <div className="card">
        {loading
          ? <div style={{display:'flex',justifyContent:'center',padding:40}}><Spinner size={24}/></div>
          : filtered.length===0
            ? <EmptyState icon="cpu" title="Sin máquinas" sub="Registra la primera máquina del inventario."
                action={isAdmin&&<button className="btn-primary" style={{width:'auto',padding:'10px 18px'}}
                  onClick={()=>setShowForm(true)}><Icon name="plus" size={14}/> Nueva máquina</button>}/>
            : (
              <div style={{overflowX:'auto'}}>
                <table className="table">
                  <thead>
                    <tr>
                      <th>Código</th><th>Ítem / Nombre</th><th>Marca / Modelo</th>
                      <th>Plantel</th><th style={{textAlign:'right'}}>Horómetro</th>
                      <th>Estado</th><th style={{textAlign:'center'}}>Ficha</th>
                      {isAdmin&&<th style={{textAlign:'center',width:50}}></th>}
                    </tr>
                  </thead>
                  <tbody>
                    {filtered.map(m=>{
                      const es = ESTADO_MAQ[m.estado]||{label:m.estado,color:'var(--text-3)'};
                      const ss = m.sub_estado ? SUB_ESTADO[m.sub_estado] : null;
                      return (
                        <tr key={m.id}>
                          <td className="mono" style={{fontWeight:700,fontSize:12}}>{m.codigo}</td>
                          <td style={{fontSize:12}}>
                            <div style={{fontWeight:500}}>{m.item||'—'}</div>
                            <div style={{color:'var(--text-3)',fontSize:11}}>{m.nombre||''}</div>
                          </td>
                          <td style={{fontSize:12}}>
                            <div>{m.marca||'—'}</div>
                            <div style={{color:'var(--text-3)',fontSize:11}}>{m.modelo||''}</div>
                          </td>
                          <td style={{fontSize:11,color:'var(--text-3)'}}>{m.plantel||'—'}</td>
                          <td className="num" style={{fontWeight:700}}>{m.horometro_actual||0} h</td>
                          <td>
                            <div style={{display:'flex',flexDirection:'column',gap:3}}>
                              <span style={{padding:'2px 8px',borderRadius:20,background:es.color+'20',color:es.color,fontSize:11,fontWeight:700,width:'fit-content'}}>{es.label}</span>
                              {ss&&<span style={{padding:'1px 6px',borderRadius:20,background:ss.color+'15',color:ss.color,fontSize:10,width:'fit-content'}}>{ss.label}</span>}
                            </div>
                          </td>
                          <td style={{textAlign:'center'}}>
                            <button className="btn-ghost" style={{padding:'4px 10px',fontSize:11}} onClick={()=>setDetalle(m.id)}>
                              <Icon name="eye" size={13}/> Ver
                            </button>
                          </td>
                          {isAdmin&&<td style={{textAlign:'center'}}>
                            <button className="btn-ghost" style={{padding:'4px 8px'}} onClick={()=>{setEditMaq(m);setShowForm(true);}}>
                              <Icon name="pencil" size={13}/>
                            </button>
                          </td>}
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )
        }
      </div>

      {showForm && <ModalFormMaquina maquina={editMaq} onClose={()=>{setShowForm(false);setEditMaq(null);}} onSave={()=>load()}/>}
      {detalle && <ModalDetalle maquinaId={detalle} user={user} onClose={()=>setDetalle(null)} onUpdate={load}/>}
    </div>
  );
};

window.Maquinaria = Maquinaria;
})();