// ─────────────────────────────────────────────────────
// COMPRAS form modal — create/edit pedido.
// Fields mirror src/routes/compras.js POST/PUT contracts.
// Uses window.dmyToInput / window.inputToDmy from leads-form.jsx.
// ─────────────────────────────────────────────────────

const ComprasForm = ({ pedidoId, onClose, onSaved, onToast }) => {
  const isEdit = pedidoId != null;
  const [loading, setLoading] = React.useState(isEdit);
  const [saving,  setSaving]  = React.useState(false);
  const [data, setData]       = React.useState({
    numero_compra: '', num_cliente: '', nombre_cliente: '',
    fecha_pedido: '', fecha_instalacion: '',
    estado_general: 'PROCESANDO',
    producto_1: '', producto_2: '', producto_3: '', producto_4: '',
  });

  React.useEffect(() => {
    let alive = true;
    if (isEdit) {
      API.get(`/api/compras/${pedidoId}`).then(d => {
        if (!alive) return;
        const dmy = window.dmyToInput || (s => s);
        setData({
          numero_compra:     d.numero_compra    || '',
          num_cliente:       d.num_cliente      || '',
          nombre_cliente:    d.nombre_cliente   || '',
          fecha_pedido:      dmy(d.fecha_pedido),
          fecha_instalacion: dmy(d.fecha_instalacion),
          estado_general:    d.estado_general   || 'PROCESANDO',
          producto_1: d.producto_1 || '',
          producto_2: d.producto_2 || '',
          producto_3: d.producto_3 || '',
          producto_4: d.producto_4 || '',
        });
        setLoading(false);
      }).catch(e => { onToast && onToast(e.message, true); onClose(); });
    } else {
      API.get('/api/compras/next-num').then(r => {
        if (!alive) return;
        setData(d => ({ ...d, numero_compra: r.numero_compra || '' }));
      }).catch(() => {});
    }
    return () => { alive = false; };
  }, [pedidoId]);

  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const submit = async (ev) => {
    ev.preventDefault();
    if (!data.nombre_cliente.trim()) {
      onToast && onToast('El nombre de cliente es obligatorio', true);
      return;
    }
    setSaving(true);
    const itd = window.inputToDmy || (s => s);
    const payload = {
      numero_compra:     data.numero_compra,
      num_cliente:       data.num_cliente    || null,
      nombre_cliente:    data.nombre_cliente,
      fecha_pedido:      itd(data.fecha_pedido),
      fecha_instalacion: itd(data.fecha_instalacion),
      estado_general:    data.estado_general,
      producto_1: data.producto_1 || null,
      producto_2: data.producto_2 || null,
      producto_3: data.producto_3 || null,
      producto_4: data.producto_4 || null,
    };
    try {
      if (isEdit) {
        await API.put(`/api/compras/${pedidoId}`, payload);
        onToast && onToast('Pedido actualizado ✓');
      } else {
        const r = await API.post('/api/compras', payload);
        onToast && onToast(`Pedido creado · Nº ${r.numero_compra} ✓`);
      }
      onSaved && onSaved();
      onClose();
    } catch (e) {
      onToast && onToast(e.message || 'Error al guardar', true);
    } finally {
      setSaving(false);
    }
  };

  const CF = ({ label, children, full }) => (
    <div className={`field${full ? ' full' : ''}`}>
      <label>{label}</label>
      {React.cloneElement(children, {
        style: {
          width: '100%', padding: '6px 8px',
          border: '1px solid var(--line)', borderRadius: 4,
          background: 'var(--surface)', fontSize: 12.5,
          ...(children.props.style || {}),
        },
      })}
    </div>
  );

  return (
    <div className="modal-bg open"
      onClick={e => { if (e.target.classList.contains('modal-bg')) onClose(); }}
      style={{position:'fixed',inset:0,background:'rgba(0,0,0,.35)',zIndex:200,display:'flex',alignItems:'flex-start',justifyContent:'center',padding:'40px 20px',overflow:'auto'}}
    >
      <div className="modal"
        style={{background:'var(--surface)',border:'1px solid var(--line)',borderRadius:8,width:'min(720px,100%)',boxShadow:'0 20px 60px rgba(0,0,0,.18)'}}
        onClick={e => e.stopPropagation()}
      >
        <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',padding:'14px 18px',borderBottom:'1px solid var(--line)'}}>
          <h3 style={{margin:0,fontSize:15}}>{isEdit ? `Editar pedido · ${data.numero_compra}` : 'Nuevo pedido'}</h3>
          <button className="icon-btn" onClick={onClose}><Icon name="x"/></button>
        </div>

        {loading ? (
          <div style={{padding:40,textAlign:'center',color:'var(--ink-3)'}}>Cargando…</div>
        ) : (
          <form onSubmit={submit} autoComplete="off">
            <div style={{padding:18,display:'grid',gridTemplateColumns:'1fr 1fr',gap:16}}>
              <div>
                <div className="section-title">Identificación</div>
                <div className="fields-grid">
                  <CF label="Nº Pedido">
                    <input value={data.numero_compra} onChange={e=>set('numero_compra',e.target.value)} disabled={isEdit}/>
                  </CF>
                  <CF label="Nº Cliente">
                    <input value={data.num_cliente} onChange={e=>set('num_cliente',e.target.value)} placeholder="ej. CLI-042"/>
                  </CF>
                  <CF label="Nombre cliente" full>
                    <input value={data.nombre_cliente} onChange={e=>set('nombre_cliente',e.target.value)} required placeholder="Nombre o empresa"/>
                  </CF>
                  <CF label="Estado">
                    <select value={data.estado_general} onChange={e=>set('estado_general',e.target.value)}>
                      <option value="PROCESANDO">En producción</option>
                      <option value="PARCIAL">Parcial</option>
                      <option value="LISTO_PARA_PRODUCCION">Listo para producción</option>
                      <option value="COMPLETADO">Completado</option>
                    </select>
                  </CF>
                  <CF label="F. pedido">
                    <input type="date" value={data.fecha_pedido} onChange={e=>set('fecha_pedido',e.target.value)}/>
                  </CF>
                  <CF label="F. instalación">
                    <input type="date" value={data.fecha_instalacion} onChange={e=>set('fecha_instalacion',e.target.value)}/>
                  </CF>
                </div>
              </div>
              <div>
                <div className="section-title">Productos contratados</div>
                <div className="fields-grid">
                  <CF label="Producto 1" full>
                    <input value={data.producto_1} onChange={e=>set('producto_1',e.target.value)} placeholder="ej. Cortina de cristal"/>
                  </CF>
                  <CF label="Producto 2" full>
                    <input value={data.producto_2} onChange={e=>set('producto_2',e.target.value)} placeholder="ej. Techo fijo"/>
                  </CF>
                  <CF label="Producto 3" full>
                    <input value={data.producto_3} onChange={e=>set('producto_3',e.target.value)}/>
                  </CF>
                  <CF label="Producto 4" full>
                    <input value={data.producto_4} onChange={e=>set('producto_4',e.target.value)}/>
                  </CF>
                </div>
              </div>
            </div>
            <div style={{display:'flex',justifyContent:'flex-end',padding:'12px 18px',borderTop:'1px solid var(--line)',gap:8}}>
              <button type="button" className="btn ghost" onClick={onClose}>Cancelar</button>
              <button type="submit" className="btn primary" disabled={saving}>
                {saving ? 'Guardando…' : (isEdit ? 'Guardar cambios' : 'Crear pedido')}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

window.ComprasForm = ComprasForm;