// ─────────────────────────────────────────────────────
// COMPRAS drawer — detail, líneas, materiales editor.
// Wired to /api/compras/:id, /api/compras/:id/lineas.
// ─────────────────────────────────────────────────────

const ComprasDrawer = ({ pedido, onClose, onEdit, onDeleted, onToast }) => {
  const [tab, setTab]         = React.useState('detalle');
  const [detail, setDetail]   = React.useState(null);
  const [lineas, setLineas]   = React.useState([]);
  const [matNeeds, setMatNeeds] = React.useState([]);
  const [needsLoading, setNeedsLoading] = React.useState(false);
  const [creatingOrders, setCreatingOrders] = React.useState(false);
  const [busyNeed, setBusyNeed] = React.useState(null);
  const [addingLinea, setAddingLinea] = React.useState(false);
  const [newLinea, setNewLinea] = React.useState({ descripcion:'', unidades:1, precio_unitario:'', precio_linea:'' });

  const loadNeeds = React.useCallback((pedidoId) => {
    if (!pedidoId) return;
    setNeedsLoading(true);
    API.get(`/api/compras/${pedidoId}/materiales-necesarios`)
      .then(r => setMatNeeds(Array.isArray(r.needs) ? r.needs : []))
      .catch(() => setMatNeeds([]))
      .finally(() => setNeedsLoading(false));
  }, []);

  React.useEffect(() => {
    if (!pedido) { setDetail(null); setLineas([]); setMatNeeds([]); return; }
    let alive = true;
    setTab('detalle');
    setDetail(null);
    API.get(`/api/compras/${pedido.id}`).then(d => {
      if (!alive) return;
      setDetail(d);
    }).catch(() => {});
    API.get(`/api/compras/${pedido.id}/lineas`).then(ls => {
      if (!alive) return;
      setLineas(ls);
    }).catch(() => {});
    loadNeeds(pedido.id);
    return () => { alive = false; };
  }, [pedido && pedido.id]);

  const groupedNeeds = React.useMemo(() => {
    const map = new Map();
    matNeeds.forEach((n, idx) => {
      const key = n.linea_pedido_id || `sin-linea-${idx}`;
      if (!map.has(key)) {
        map.set(key, {
          linea_pedido_id: n.linea_pedido_id,
          descripcion: n.descripcion || n.producto_nombre || 'Sin línea',
          producto_codigo: n.producto_codigo,
          items: [],
        });
      }
      map.get(key).items.push({ need: n, idx });
    });
    return Array.from(map.values());
  }, [matNeeds]);

  if (!pedido) return null;
  const d = detail || pedido;

  const exportFile = (ext) => {
    const fname = `pedido_${d.numero_compra || d.id}.${ext === 'excel' ? 'xlsx' : 'pdf'}`;
    API.download(`/api/compras/export/${d.id}/${ext}`, fname)
      .catch(e => onToast && onToast(e.message || 'Error al exportar', true));
  };

  const createOrders = async () => {
    setCreatingOrders(true);
    try {
      const result = await API.post(`/api/compras/${d.id}/generar-ordenes`, {});
      const n = (result.created || []).length;
      const items = (result.created || []).reduce((s, o) => s + (o.items || 0), 0);
      onToast && onToast(n ? `Órdenes generadas: ${n} · ${items} materiales` : 'No hay materiales pendientes sin orden');
      loadNeeds(d.id);
    } catch (e) {
      onToast && onToast(e.message || 'Error al generar órdenes', true);
    } finally {
      setCreatingOrders(false);
    }
  };

  const needKey = (n, idx) => `${n.field}-${n.material_id || 'x'}-${n.linea_pedido_id || idx}`;

  const createOrderForNeed = async (need, idx) => {
    if (!need.material_id) {
      onToast && onToast('Sin material de catálogo asociado', true);
      return;
    }
    setBusyNeed(needKey(need, idx));
    try {
      await API.post(`/api/compras/${d.id}/generar-orden-material`, {
        material_id: need.material_id,
        linea_pedido_id: need.linea_pedido_id || null,
        field: need.field,
      });
      onToast && onToast('Orden creada ✓');
      loadNeeds(d.id);
    } catch (e) {
      onToast && onToast(e.message || 'Error al crear orden', true);
    } finally {
      setBusyNeed(null);
    }
  };

  const toggleStock = async (need, idx) => {
    const orden = (need.ordenes || []).find(o => o.compras_material_id);
    if (!orden) {
      onToast && onToast('Crea una orden primero', true);
      return;
    }
    setBusyNeed(needKey(need, idx));
    try {
      await API.post(`/api/compras-materiales/${orden.compras_material_id}/toggle-stock`, {});
      loadNeeds(d.id);
    } catch (e) {
      onToast && onToast(e.message || 'Error al actualizar stock', true);
    } finally {
      setBusyNeed(null);
    }
  };

  const isInStock = (need) => (need.ordenes || []).some(o => String(o.material_estado || '').toUpperCase() === 'RECIBIDA');
  const hasOrden  = (need) => (need.ordenes || []).length > 0;

  const deletePedido = async () => {
    if (!confirm(`¿Eliminar pedido ${d.numero_compra}? No se puede deshacer.`)) return;
    try {
      await API.del(`/api/compras/${d.id}`);
      onToast && onToast('Pedido eliminado');
      onClose();
      onDeleted && onDeleted();
    } catch (e) {
      onToast && onToast(e.message || 'Error al eliminar', true);
    }
  };

  const addLinea = async () => {
    try {
      const payload = {
        descripcion:     newLinea.descripcion || null,
        unidades:        parseInt(newLinea.unidades, 10) || 1,
        precio_unitario: newLinea.precio_unitario !== '' ? parseFloat(newLinea.precio_unitario) : null,
        precio_linea:    newLinea.precio_linea   !== '' ? parseFloat(newLinea.precio_linea)   : null,
      };
      const r = await API.post(`/api/compras/${d.id}/lineas`, payload);
      setLineas(ls => [...ls, r]);
      setNewLinea({ descripcion:'', unidades:1, precio_unitario:'', precio_linea:'' });
      setAddingLinea(false);
      onToast && onToast('Línea añadida ✓');
    } catch (e) {
      onToast && onToast(e.message || 'Error al añadir', true);
    }
  };

  const deleteLinea = async (lineaId) => {
    try {
      await API.del(`/api/compras/${d.id}/lineas/${lineaId}`);
      setLineas(ls => ls.filter(l => l.id !== lineaId));
      onToast && onToast('Línea eliminada');
    } catch (e) {
      onToast && onToast(e.message || 'Error al eliminar', true);
    }
  };

  return (
    <>
      <div className={`drawer-bg ${pedido ? 'open' : ''}`} onClick={onClose}/>
      <div className={`drawer ${pedido ? 'open' : ''}`}>
        <div className="dr-head">
          <span className="id mono">{d.numero_compra}</span>
          <h2>{d.nombre_cliente || d.num_cliente || '—'}</h2>
          {d.estado_general && (() => {
            const k = (d.estado_general||'').toUpperCase();
            const cls = k==='COMPLETADO'||k==='LISTO_PARA_PRODUCCION' ? 'ok' : k==='PARCIAL' ? 'warn' : 'info';
            return <span className={`pill ${cls}`} style={{marginLeft:8}}><span className="d"/>{d.estado_general}</span>;
          })()}
          <div className="actions">
            <button className="btn ghost sm tip" data-tip="Editar" onClick={() => onEdit && onEdit(d.id)}>
              <Icon name="edit" size={13}/>
            </button>
            <button className="btn ghost sm tip" data-tip="Exportar Excel" onClick={() => exportFile('excel')}>
              <Icon name="download" size={13}/>
            </button>
            <button className="btn ghost sm tip" data-tip="Exportar PDF" onClick={() => exportFile('pdf')}>
              <Icon name="print" size={13}/>
            </button>
            <button className="btn ghost sm tip" data-tip="Eliminar" onClick={deletePedido} style={{color:'var(--err)'}}>
              <Icon name="trash" size={13}/>
            </button>
            <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
          </div>
        </div>

        <div className="dr-tabs">
          <button className={tab==='detalle'?'on':''}    onClick={()=>setTab('detalle')}>Detalle</button>
          <button className={tab==='lineas'?'on':''}     onClick={()=>setTab('lineas')}>Líneas ({lineas.length})</button>
          <button className={tab==='materiales'?'on':''} onClick={()=>setTab('materiales')}>Materiales</button>
          <button className={tab==='archivos'?'on':''}   onClick={()=>setTab('archivos')}>Archivos</button>
        </div>

        <div className="dr-body">
          {tab === 'detalle' && (
            <div className="dr-grid">
              <div>
                <div className="section-title">Identificación</div>
                <div className="fields-grid">
                  <div className="field"><label>Nº Pedido</label><div className="v mono">{d.numero_compra || '—'}</div></div>
                  <div className="field"><label>Nº Cliente</label><div className="v">{d.num_cliente || '—'}</div></div>
                  <div className="field full"><label>Nombre cliente</label><div className="v">{d.nombre_cliente || '—'}</div></div>
                  <div className="field"><label>F. pedido</label><div className="v">{d.fecha_pedido || '—'}</div></div>
                  <div className="field"><label>F. instalación</label><div className="v">{d.fecha_instalacion || '—'}</div></div>
                  <div className="field"><label>Estado</label><div className="v">
                    {(() => {
                      const k = (d.estado_general||'').toUpperCase();
                      const cls = k==='COMPLETADO'||k==='LISTO_PARA_PRODUCCION' ? 'ok' : k==='PARCIAL' ? 'warn' : 'info';
                      return <span className={`pill ${cls}`}><span className="d"/>{d.estado_general || '—'}</span>;
                    })()}
                  </div></div>
                </div>
                <div className="section-title">Productos contratados</div>
                {[d.producto_1,d.producto_2,d.producto_3,d.producto_4].filter(Boolean).length > 0 ? (
                  <div className="fields-grid">
                    {[d.producto_1,d.producto_2,d.producto_3,d.producto_4].filter(Boolean).map((p,i) => (
                      <div key={i} className="field"><label>Producto {i+1}</label><div className="v">{p}</div></div>
                    ))}
                  </div>
                ) : (
                  <div className="muted" style={{fontSize:12}}>Sin productos registrados.</div>
                )}
              </div>
            </div>
          )}

          {tab === 'lineas' && (
            <div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:10}}>
                <div className="section-title" style={{margin:0}}>Líneas del pedido</div>
                <button className="btn primary" style={{fontSize:12}} onClick={()=>setAddingLinea(true)}>
                  <Icon name="plus" size={12}/> Añadir línea
                </button>
              </div>
              {addingLinea && (
                <div style={{padding:12,border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)',marginBottom:12}}>
                  <div className="fields-grid">
                    <div className="field full">
                      <label>Descripción</label>
                      <input value={newLinea.descripcion} onChange={e=>setNewLinea(l=>({...l,descripcion:e.target.value}))}
                        style={{width:'100%',padding:'6px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
                    </div>
                    <div className="field">
                      <label>Uds.</label>
                      <input type="number" min="1" value={newLinea.unidades} onChange={e=>setNewLinea(l=>({...l,unidades:e.target.value}))}
                        style={{width:'100%',padding:'6px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
                    </div>
                    <div className="field">
                      <label>P. unitario (€)</label>
                      <input type="number" step="0.01" value={newLinea.precio_unitario} onChange={e=>setNewLinea(l=>({...l,precio_unitario:e.target.value}))}
                        style={{width:'100%',padding:'6px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
                    </div>
                    <div className="field">
                      <label>P. línea (€)</label>
                      <input type="number" step="0.01" value={newLinea.precio_linea} onChange={e=>setNewLinea(l=>({...l,precio_linea:e.target.value}))}
                        style={{width:'100%',padding:'6px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
                    </div>
                  </div>
                  <div style={{display:'flex',gap:8,marginTop:8}}>
                    <button className="btn primary" style={{fontSize:12}} onClick={addLinea}>Guardar</button>
                    <button className="btn ghost"   style={{fontSize:12}} onClick={()=>setAddingLinea(false)}>Cancelar</button>
                  </div>
                </div>
              )}
              {!addingLinea && lineas.length === 0 && (
                <div className="muted" style={{fontSize:12,padding:'16px 0'}}>Sin líneas registradas. Añade la primera.</div>
              )}
              {lineas.length > 0 && (
                <table className="tbl" style={{fontSize:12.5}}>
                  <thead>
                    <tr>
                      <th>Descripción</th>
                      <th style={{textAlign:'right'}}>Uds.</th>
                      <th style={{textAlign:'right'}}>P. unit.</th>
                      <th style={{textAlign:'right'}}>P. línea</th>
                      <th style={{width:28}}></th>
                    </tr>
                  </thead>
                  <tbody>
                    {lineas.map(l => (
                      <tr key={l.id}>
                        <td>{l.descripcion || l.producto_nombre || <span className="muted">—</span>}</td>
                        <td className="num right">{l.unidades || 1}</td>
                        <td className="num right">{l.precio_unitario != null ? `${parseFloat(l.precio_unitario).toFixed(2)} €` : <span className="muted">—</span>}</td>
                        <td className="num right strong">{l.precio_linea != null ? `${parseFloat(l.precio_linea).toFixed(2)} €` : <span className="muted">—</span>}</td>
                        <td>
                          <button className="icon-btn" style={{color:'var(--err)'}} onClick={()=>deleteLinea(l.id)} title="Eliminar">
                            <Icon name="trash" size={12}/>
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              )}
            </div>
          )}

          {tab === 'materiales' && (
            <div>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:12}}>
                <div className="section-title" style={{margin:0}}>Materiales del pedido</div>
                <button className="btn primary" style={{fontSize:12}} onClick={createOrders} disabled={creatingOrders || needsLoading}>
                  {creatingOrders ? 'Generando…' : 'Crear todas las órdenes'}
                </button>
              </div>
              {needsLoading && <div className="muted" style={{fontSize:12}}>Calculando escandallo…</div>}
              {!needsLoading && matNeeds.length === 0 && (
                <div className="muted" style={{fontSize:12,padding:'16px 0'}}>Sin escandallo asociado. Revisa líneas del pedido.</div>
              )}
              {!needsLoading && groupedNeeds.length > 0 && (
                <div style={{display:'flex',flexDirection:'column',gap:14}}>
                  {groupedNeeds.map(group => (
                    <div key={group.linea_pedido_id || group.descripcion}
                      style={{border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)',overflow:'hidden'}}>
                      <div style={{padding:'8px 12px',background:'var(--surface-2)',borderBottom:'1px solid var(--line)',display:'flex',gap:8,alignItems:'baseline'}}>
                        {group.producto_codigo && <span className="mono" style={{fontSize:11,color:'var(--ink-3)'}}>{group.producto_codigo}</span>}
                        <span style={{fontSize:12.5,fontWeight:600}}>{group.descripcion}</span>
                      </div>
                      <div style={{display:'flex',flexDirection:'column'}}>
                        {group.items.map(({ need, idx }) => {
                          const inStock = isInStock(need);
                          const ordered = hasOrden(need);
                          const busy = busyNeed === needKey(need, idx);
                          return (
                            <div key={needKey(need, idx)}
                              style={{display:'grid',gridTemplateColumns:'1fr 110px 120px 120px',gap:10,alignItems:'center',padding:'10px 12px',borderTop:'1px solid var(--line)',fontSize:12.5}}>
                              <div style={{minWidth:0}}>
                                <div style={{fontWeight:600,whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}>
                                  {need.material_nombre || <span className="muted">Sin material mapeado</span>}
                                </div>
                                <div className="muted" style={{fontSize:11}}>
                                  {need.field_label}{need.preferred_provider?.proveedor_nombre ? ` · ${need.preferred_provider.proveedor_nombre}` : ''}
                                </div>
                              </div>
                              <span className="mono" style={{fontSize:11,color:'var(--ink-3)'}}>
                                {Number(need.cantidad || 0).toLocaleString('es-ES', { maximumFractionDigits: 2 })} {need.unidad_medida || ''}
                              </span>
                              <button type="button" disabled={busy || !ordered}
                                onClick={() => toggleStock(need, idx)}
                                title={ordered ? 'Marcar entrada/salida de stock' : 'Crea una orden primero'}
                                style={{
                                  padding:'5px 8px',fontSize:11,borderRadius:4,border:'1px solid var(--line)',
                                  cursor: ordered && !busy ? 'pointer' : 'not-allowed',
                                  background: inStock ? 'var(--ok-bg)' : 'var(--warn-bg)',
                                  color:      inStock ? 'var(--ok)'    : 'var(--warn)',
                                  fontWeight: 600,
                                  opacity: ordered ? 1 : 0.6,
                                }}>
                                {inStock ? 'IN STOCK' : 'OUT OF STOCK'}
                              </button>
                              {ordered ? (
                                <span className="mono" style={{fontSize:11,color:'var(--ink-3)',textAlign:'right',whiteSpace:'nowrap',overflow:'hidden',textOverflow:'ellipsis'}}
                                  title={need.ordenes.map(o => `OC ${o.numero}`).join(', ')}>
                                  {need.ordenes.map(o => `OC ${o.numero}`).join(', ')}
                                </span>
                              ) : (
                                <button className="btn" style={{fontSize:11}} disabled={busy || !need.material_id}
                                  onClick={() => createOrderForNeed(need, idx)}>
                                  {busy ? '…' : 'Crear orden'}
                                </button>
                              )}
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {tab === 'archivos' && (
            <ArchivosPanel entityType="compras" entityId={d.id} presupuestoId={d.presupuesto_id} title="Archivos del pedido" onToast={onToast}/>
          )}
        </div>
      </div>
    </>
  );
};

window.ComprasDrawer = ComprasDrawer;