// Pantalla: Maquinaria — Inventario, horómetros y bitácora

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)'},
};

// ─── 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 setBool = k => e => setForm(f=>({...f,[k]:e.target.checked}));

  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="Inventario de maquinaria ALMACO" onClose={onClose} width={620}>
      {err && <ErrorBanner msg={err}/>}
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Código *</label>
            <input className="form-input" value={form.codigo} onChange={set('codigo')} placeholder="EJ: EXC-001"/>
          </div>
          <div className="form-row">
            <label className="form-label">Ítem</label>
            <input className="form-input" value={form.item||''} onChange={set('item')} placeholder="Excavadora, Retroexcavadora…"/>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Nombre</label>
            <input className="form-input" value={form.nombre||''} onChange={set('nombre')} placeholder="Nombre descriptivo"/>
          </div>
          <div className="form-row">
            <label className="form-label">Marca</label>
            <input className="form-input" value={form.marca||''} onChange={set('marca')} placeholder="Shantui, Caterpillar…"/>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Modelo</label>
            <input className="form-input" value={form.modelo||''} onChange={set('modelo')}/>
          </div>
          <div className="form-row">
            <label className="form-label">Número de serie</label>
            <input className="form-input" value={form.numero_serie||''} onChange={set('numero_serie')}/>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Número VIN</label>
          <input className="form-input" value={form.numero_vin||''} onChange={set('numero_vin')} placeholder="Vehicle Identification Number"/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Horómetro actual</label>
            <input className="form-input" type="number" step="0.1" value={form.horometro_actual||0} onChange={set('horometro_actual')}/>
          </div>
          <div className="form-row">
            <label className="form-label">Costo adquisición ($)</label>
            <input className="form-input" type="number" step="0.01" value={form.costo_adquisicion||''} onChange={set('costo_adquisicion')}/>
          </div>
          <div className="form-row">
            <label className="form-label">Fecha adquisición</label>
            <input className="form-input" type="date" value={form.fecha_adquisicion||''} onChange={set('fecha_adquisicion')}/>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Plantel asignado</label>
          <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>
        </div>
        <div className="form-row">
          <label className="form-label">Notas</label>
          <input className="form-input" value={form.notas||''} onChange={set('notas')} placeholder="Observaciones adicionales"/>
        </div>
        <label style={{display:'flex',alignItems:'center',gap:8,fontSize:13,cursor:'pointer'}}>
          <input type="checkbox" checked={!!form.para_venta_shantui} onChange={setBool('para_venta_shantui')}/>
          Para venta Shantui
        </label>
      </div>
      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:20}}>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" style={{width:'auto',padding:'10px 18px'}} 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 setBool = k => e => setForm(f=>({...f,[k]:e.target.checked}));

  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 de bitácora" sub="Falla, mantenimiento o reparación" onClose={onClose} width={580}>
      {err && <ErrorBanner msg={err}/>}
      <div style={{display:'flex',flexDirection:'column',gap:12}}>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Tipo *</label>
            <select className="form-input" value={form.tipo} onChange={set('tipo')}>
              <option value="falla">Falla</option>
              <option value="mantenimiento">Mantenimiento</option>
              <option value="reparacion">Reparación</option>
            </select>
          </div>
          <div className="form-row">
            <label className="form-label">Fecha evento</label>
            <input className="form-input" type="date" value={form.fecha_evento} onChange={set('fecha_evento')}/>
          </div>
        </div>
        <div className="form-row">
          <label className="form-label">Descripción de la falla</label>
          <input className="form-input" value={form.descripcion_falla} onChange={set('descripcion_falla')} placeholder="¿Qué pasó?"/>
        </div>
        <div className="form-row">
          <label className="form-label">¿Qué se arruinó?</label>
          <input className="form-input" value={form.que_se_arruno} onChange={set('que_se_arruno')}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Repuesto</label>
            <input className="form-input" value={form.repuesto} onChange={set('repuesto')} placeholder="Nombre del repuesto"/>
          </div>
          <div className="form-row">
            <label className="form-label">Costo repuesto ($)</label>
            <input className="form-input" type="number" step="0.01" value={form.costo_repuesto} onChange={set('costo_repuesto')}/>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Mano de obra ($)</label>
            <input className="form-input" type="number" step="0.01" value={form.es_mecanico_interno ? 0 : form.mano_obra} onChange={set('mano_obra')} disabled={form.es_mecanico_interno}/>
          </div>
          <div style={{paddingTop:22}}>
            <label style={{display:'flex',alignItems:'center',gap:8,fontSize:13,cursor:'pointer'}}>
              <input type="checkbox" checked={form.es_mecanico_interno} onChange={setBool('es_mecanico_interno')}/>
              Mecánico interno (M.O. = $0)
            </label>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:12}}>
          <div className="form-row">
            <label className="form-label">Otros costos ($)</label>
            <input className="form-input" type="number" step="0.01" value={form.otros_costos} onChange={set('otros_costos')}/>
          </div>
          <div className="form-row">
            <label className="form-label">Especificar otros costos</label>
            <input className="form-input" value={form.descripcion_otros} onChange={set('descripcion_otros')}/>
          </div>
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'flex-end',gap:10,marginTop:20}}>
        <button className="btn-secondary" onClick={onClose}>Cancelar</button>
        <button className="btn-primary" style={{width:'auto',padding:'10px 18px'}} 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 = () => window.API.maquinaria.get(maquinaId).then(setData).catch(()=>{});
  useEffect(()=>{ load(); }, [maquinaId]);

  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}>
      {/* Estado badges */}
      <div style={{display:'flex',gap:8,marginBottom:16,flexWrap:'wrap',alignItems:'center'}}>
        <span style={{padding:'4px 12px',borderRadius:20,background:es.color+'20',color:es.color,fontSize:12,fontWeight:600}}>{es.label}</span>
        {ss && <span style={{padding:'4px 12px',borderRadius:20,background:ss.color+'20',color:ss.color,fontSize:12}}>{ss.label}</span>}
        {data.plantel && <span style={{fontSize:12,color:'var(--text-3)'}}><Icon name="location" size={11}/> {data.plantel}</span>}
        <span style={{fontSize:12,color:'var(--text-3)',marginLeft:'auto'}}>Horómetro actual: <strong>{data.horometro_actual} h</strong></span>
      </div>

      {/* Sub-estado rápido (solo alquilada + admin) */}
      {data.estado==='alquilada' && isAdmin && (
        <div style={{display:'flex',gap:6,marginBottom:16,flexWrap:'wrap'}}>
          {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',
                background:data.sub_estado===k?v.color+'30':'var(--bg-2)',
                borderColor:data.sub_estado===k?v.color:'var(--border)',
                color:data.sub_estado===k?v.color:'var(--text-2)'}}>
              {v.label}
            </button>
          ))}
        </div>
      )}

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

      {/* Tab: Información */}
      {tab==='info' && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:10,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}}>
              <div style={{fontSize:10,color:'var(--text-3)',marginBottom:2}}>{k}</div>
              <div style={{fontWeight:500}}>{v||'—'}</div>
            </div>
          ))}
          {data.notas && <div style={{gridColumn:'1/-1',background:'var(--bg-3)',padding:'8px 12px',borderRadius:8}}>
            <div style={{fontSize:10,color:'var(--text-3)',marginBottom:2}}>Notas</div>
            <div>{data.notas}</div>
          </div>}
        </div>
      )}

      {/* Tab: Horómetros */}
      {tab==='horos' && (
        <div>
          <div style={{background:'var(--bg-3)',borderRadius:10,padding:14,marginBottom:16}}>
            <div style={{fontWeight:600,fontSize:13,marginBottom:10}}>Reportar horómetro inicial</div>
            {errHoro && <ErrorBanner msg={errHoro}/>}
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:10}}>
              <div className="form-row">
                <label className="form-label">Fecha</label>
                <input className="form-input" type="date" value={horoForm.fecha} onChange={e=>setHoroForm(f=>({...f,fecha:e.target.value}))}/>
              </div>
              <div className="form-row">
                <label className="form-label">Horómetro inicial (h)</label>
                <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"/>
              </div>
              <div className="form-row">
                <label className="form-label">Notas</label>
                <input className="form-input" value={horoForm.notas} onChange={e=>setHoroForm(f=>({...f,notas:e.target.value}))} placeholder="Opcional"/>
              </div>
            </div>
            <button className="btn-primary" style={{width:'auto',padding:'8px 16px',marginTop:10}} 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 inicial</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 strong">{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 ALMACO':'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:'20px',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)',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:600}}>{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>
                  <span style={{marginLeft:'auto',fontSize:12,fontWeight:700}}>Total: ${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)'}}><Icon name="check" size={11}/> Resuelto</span>}
                </div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))',gap:6,fontSize:12}}>
                  {b.descripcion_falla && <div><span style={{color:'var(--text-3)'}}>Falla: </span>{b.descripcion_falla}</div>}
                  {b.que_se_arruno && <div><span style={{color:'var(--text-3)'}}>Arruinado: </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)'}}>C. 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)':`$${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)}{b.descripcion_otros?` (${b.descripcion_otros})`:''}</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 = async () => {
    setLoading(true); setError('');
    try { setMaquinas(await window.API.maquinaria.list()); }
    catch(e) { setError(e.message); }
    finally { setLoading(false); }
  };
  useEffect(()=>{ load(); }, []);

  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:60}}></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 strong">{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:600,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;