// ─────────────────────────────────────────────────────
// GUT-64 (F3.2) — Catálogo de artículos con referencias reales.
// Vista dedicada (View + Form) sobre /api/materiales:
//   - Lista de artículos (leaf) con su `referencia` canónica interna,
//     denominación, unidad, categoría (familia) y proveedores.
//   - Buscador por referencia (p.ej. "6078" → "Hoja" + proveedores).
//   - Alta/edición de artículo con N proveedores (precio, plazo y
//     `referencia_proveedor` distintos por proveedor).
// Reutiliza los endpoints existentes de materiales; no duplica API.
// Expuesto como window.CatalogoView.
// ─────────────────────────────────────────────────────

const CAT_UNIDADES = ['ud', 'barra', 'mt', 'm²'];

// Editor de proveedores de un artículo (precio / plazo / ref. proveedor).
const CatProveedorRow = ({ row, proveedoresList, onChange, onRemove }) => (
  <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 0.8fr 1.2fr 28px', gap: 8, alignItems: 'center' }}>
    <div className="field">
      <select value={row.proveedor_id} onChange={e => onChange({ ...row, proveedor_id: e.target.value })}>
        <option value="">Proveedor…</option>
        {proveedoresList.map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
      </select>
    </div>
    <div className="field">
      <input type="number" step="0.0001" min="0" placeholder="Precio €" value={row.precio_referencia}
        onChange={e => onChange({ ...row, precio_referencia: e.target.value })} />
    </div>
    <div className="field">
      <input type="number" step="1" min="0" placeholder="Plazo d." value={row.plazo_dias}
        onChange={e => onChange({ ...row, plazo_dias: e.target.value })} />
    </div>
    <div className="field">
      <input placeholder="Ref. proveedor" value={row.referencia_proveedor}
        onChange={e => onChange({ ...row, referencia_proveedor: e.target.value })} />
    </div>
    <button type="button" className="btn ghost" style={{ color: 'var(--err)', padding: '2px 6px' }} onClick={onRemove}>×</button>
  </div>
);

const CatArticuloModal = ({ articulo, categorias, proveedoresList, onClose, onSaved, onToast }) => {
  const isEdit = !!articulo;
  const [form, setForm] = React.useState({
    referencia: articulo?.referencia || '',
    nombre: articulo?.nombre || '',
    familia: articulo?.familia || (categorias[0]?.familia || ''),
    unidad_medida: articulo?.unidad_medida || 'ud',
    parent_id: articulo?.parent_id != null ? String(articulo.parent_id) : '',
  });
  // Filas de proveedor (solo en alta se guardan en bloque; en edición se
  // gestionan contra el artículo existente).
  const [provRows, setProvRows] = React.useState(
    (articulo?.proveedores || []).map(p => ({
      proveedor_id: String(p.proveedor_id),
      precio_referencia: p.precio_referencia != null ? String(p.precio_referencia) : '',
      plazo_dias: p.plazo_dias != null ? String(p.plazo_dias) : '',
      referencia_proveedor: p.referencia_proveedor || '',
    }))
  );
  const [saving, setSaving] = React.useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  // Al elegir categoría padre, hereda su familia.
  const onPickCategoria = (catId) => {
    const cat = categorias.find(c => String(c.id) === String(catId));
    setForm(f => ({ ...f, parent_id: catId, familia: cat ? cat.familia || f.familia : f.familia }));
  };

  const addRow = () => setProvRows(rs => [...rs, { proveedor_id: '', precio_referencia: '', plazo_dias: '', referencia_proveedor: '' }]);
  const updRow = (i, v) => setProvRows(rs => rs.map((r, idx) => idx === i ? v : r));
  const rmRow = (i) => setProvRows(rs => rs.filter((_, idx) => idx !== i));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.nombre.trim()) return onToast('Denominación requerida', true);
    setSaving(true);
    const payload = {
      referencia: form.referencia.trim() || null,
      nombre: form.nombre.trim(),
      familia: form.familia.trim() || null,
      unidad_medida: form.unidad_medida || 'ud',
      parent_id: form.parent_id ? Number(form.parent_id) : null,
    };
    try {
      const saved = isEdit
        ? await API.put(`/api/materiales/${articulo.id}`, payload)
        : await API.post('/api/materiales', payload);
      const matId = saved.id;
      // Vincula/actualiza proveedores con su precio/plazo/ref propia.
      const rows = provRows.filter(r => r.proveedor_id);
      for (const r of rows) {
        await API.post(`/api/materiales/${matId}/proveedores`, {
          proveedor_id: Number(r.proveedor_id),
          precio_referencia: r.precio_referencia !== '' ? Number(r.precio_referencia) : null,
          plazo_dias: r.plazo_dias !== '' ? Number(r.plazo_dias) : null,
          referencia_proveedor: r.referencia_proveedor.trim() || null,
        });
      }
      // En edición, desvincula proveedores que el usuario quitó de la lista.
      if (isEdit) {
        const keep = new Set(rows.map(r => String(r.proveedor_id)));
        for (const p of (articulo.proveedores || [])) {
          if (!keep.has(String(p.proveedor_id))) {
            await API.del(`/api/materiales/${matId}/proveedores/${p.proveedor_id}`);
          }
        }
      }
      onToast(isEdit ? 'Artículo actualizado ✓' : 'Artículo creado ✓');
      onSaved();
      onClose();
    } catch (e) {
      onToast(e.message || 'Error al guardar', true);
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="modal-bg open" {...sysOverlay(() => onClose())}>
      <div className="modal" {...sysModal(620)}>
        <SysModalHeader title={isEdit ? 'Editar artículo' : 'Nuevo artículo'} onClose={onClose} />
        <form onSubmit={submit} autoComplete="off">
          <div className="fields-grid" style={{ padding: '16px 18px' }}>
            <div className="field">
              <label>Referencia interna</label>
              <input value={form.referencia} onChange={e => set('referencia', e.target.value)} placeholder="6078, CC-01, V-LAM-44…" />
            </div>
            <div className="field">
              <label>Unidad</label>
              <select value={form.unidad_medida} onChange={e => set('unidad_medida', e.target.value)}>
                {CAT_UNIDADES.map(u => <option key={u} value={u}>{u}</option>)}
              </select>
            </div>
            <div className="field full">
              <label>Denominación *</label>
              <input value={form.nombre} onChange={e => set('nombre', e.target.value)} required autoFocus placeholder="Hoja, Marco, Junquillo…" />
            </div>
            <div className="field">
              <label>Categoría</label>
              <select value={form.parent_id} onChange={e => onPickCategoria(e.target.value)}>
                <option value="">— Sin categoría —</option>
                {categorias.map(c => <option key={c.id} value={c.id}>{c.nombre}</option>)}
              </select>
            </div>
            <div className="field">
              <label>Familia</label>
              <input value={form.familia} onChange={e => set('familia', e.target.value)} placeholder="perfiles, vidrios…" />
            </div>

            <div style={{ gridColumn: '1/-1', borderTop: '1px solid var(--line)', paddingTop: 10, marginTop: 2 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.05em' }}>Proveedores</span>
                <button type="button" className="btn ghost" style={{ fontSize: 12 }} onClick={addRow}>+ Añadir proveedor</button>
              </div>
            </div>
            <div style={{ gridColumn: '1/-1', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {provRows.length === 0 && (
                <div className="muted" style={{ fontSize: 12 }}>Sin proveedores. Un mismo artículo puede comprarse a varios (p.ej. perfil en bruto a GALISUR y lacado a SERVIGROUP/IDH).</div>
              )}
              {provRows.map((r, i) => (
                <CatProveedorRow key={i} row={r} proveedoresList={proveedoresList}
                  onChange={v => updRow(i, v)} onRemove={() => rmRow(i)} />
              ))}
            </div>
          </div>
          <SysModalFooter onClose={onClose} saving={saving} label={isEdit ? 'Guardar' : 'Crear artículo'} />
        </form>
      </div>
    </div>
  );
};

const CatalogoView = ({ onToast }) => {
  const [articulos, setArticulos] = React.useState([]);
  const [categorias, setCategorias] = React.useState([]);
  const [proveedoresList, setProveedoresList] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [search, setSearch] = React.useState('');
  const [familiaF, setFamiliaF] = React.useState('');
  const [modal, setModal] = React.useState(null); // null | 'new' | articulo
  const searchTimer = React.useRef(null);

  const load = async (q) => {
    setLoading(true);
    try {
      // Buscador por referencia/nombre vía param `search` (server-side).
      // `with_proveedores` agrega los proveedores por artículo (sin N+1).
      const params = { solo_hijos: 'true', with_proveedores: 'true' };
      if (q) params.search = q;
      const [arts, all, provs] = await Promise.all([
        API.get('/api/materiales', params),
        API.get('/api/materiales', { solo_categorias: 'true' }),
        API.get('/api/proveedores'),
      ]);
      setArticulos(arts);
      setCategorias(all);
      setProveedoresList(provs);
    } catch (e) {
      onToast(e.message || 'Error', true);
    } finally {
      setLoading(false);
    }
  };
  React.useEffect(() => { load(); }, []);

  const onSearch = (v) => {
    setSearch(v);
    clearTimeout(searchTimer.current);
    searchTimer.current = setTimeout(() => load(v), 300);
  };

  // Abre el artículo en el modal. La fila ya trae `proveedores`
  // agregados por el listado (with_proveedores), así que no hace
  // falta un GET extra.
  const openEdit = (art) => setModal(art);

  const del = async (art) => {
    if (!confirm(`¿Eliminar artículo "${art.nombre}"?`)) return;
    try { await API.del(`/api/materiales/${art.id}`); onToast('Eliminado'); load(search); }
    catch (e) { onToast(e.message || 'Error al eliminar', true); }
  };

  const familias = Array.from(new Set(articulos.map(a => a.familia).filter(Boolean))).sort();
  const visible = familiaF ? articulos.filter(a => a.familia === familiaF) : articulos;

  return (
    <div style={{ padding: '16px 24px 24px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <h2 style={{ margin: 0, fontSize: 18 }}>Catálogo de artículos</h2>
        <span className="muted" style={{ fontSize: 12 }}>{visible.length} artículos</span>
        <div style={{ flex: 1 }} />
        <div className="tb-search">
          <Icon name="search" />
          <input placeholder="Buscar por referencia o nombre…" value={search}
            onChange={e => onSearch(e.target.value)} />
        </div>
        <select className="cfg-select" value={familiaF} onChange={e => setFamiliaF(e.target.value)} style={{ width: 150 }}>
          <option value="">Todas las familias</option>
          {familias.map(f => <option key={f} value={f}>{f}</option>)}
        </select>
        <button className="btn primary" onClick={() => setModal('new')}><Icon name="plus" /> Nuevo artículo</button>
      </div>

      <div className="tbl-wrap">
        <div className="tbl-scroll">
          <table className="tbl">
            <thead>
              <tr>
                <th style={{ width: 120 }}>Referencia</th>
                <th>Denominación</th>
                <th style={{ width: 120 }}>Categoría</th>
                <th style={{ width: 64 }}>Unidad</th>
                <th>Proveedores</th>
                <th style={{ width: 130 }}></th>
              </tr>
            </thead>
            <tbody>
              {loading && <tr><td colSpan="6" style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--ink-3)' }}>Cargando…</td></tr>}
              {!loading && visible.map(a => (
                <tr key={a.id} onClick={e => { if (!e.target.closest('button')) openEdit(a); }}>
                  <td><code style={{ fontSize: 12 }}>{a.referencia || '—'}</code></td>
                  <td className="strong">{a.nombre}</td>
                  <td className="muted">{a.categoria_nombre || a.familia || '—'}</td>
                  <td className="muted">{a.unidad_medida || 'ud'}</td>
                  <td><CatProvBadges proveedores={a.proveedores} /></td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="btn ghost" style={{ marginRight: 4 }} onClick={() => openEdit(a)}>Editar</button>
                    <button className="btn ghost" style={{ color: 'var(--err)' }} onClick={() => del(a)}>Eliminar</button>
                  </td>
                </tr>
              ))}
              {!loading && !visible.length && (
                <tr><td colSpan="6" style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--ink-3)' }}>Sin artículos.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>

      {modal && (
        <CatArticuloModal
          articulo={modal === 'new' ? null : modal}
          categorias={categorias}
          proveedoresList={proveedoresList}
          onClose={() => setModal(null)}
          onSaved={() => load(search)}
          onToast={onToast}
        />
      )}
    </div>
  );
};

// Badges de proveedores de un artículo (nombre + ref. proveedor).
// Los datos vienen ya agregados en el listado (with_proveedores).
const CatProvBadges = ({ proveedores }) => {
  const provs = proveedores || [];
  if (!provs.length) return <span className="muted" style={{ fontSize: 11 }}>—</span>;
  return (
    <span style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
      {provs.map(p => (
        <span key={p.proveedor_id} className="pill glass" style={{ fontSize: 11 }}
          title={[p.referencia_proveedor && `Ref: ${p.referencia_proveedor}`, p.precio_referencia != null && `${p.precio_referencia} €`].filter(Boolean).join(' · ')}>
          {p.nombre}{p.referencia_proveedor ? ` · ${p.referencia_proveedor}` : ''}
        </span>
      ))}
    </span>
  );
};

window.CatalogoView = CatalogoView;