// Materials library view + bulk import modal

function downloadMaterialsTemplate() {
  const content =
    "SKU,Descripción,Unidad,Precio,Margen,Categoría\n" +
    "ILU-PAN-30,Panel LED 30x120 40W 4000K,un,24900,22,Iluminación\n" +
    "CON-EVA-2x1,Cable EVA 2x1.5mm² flexible,m,720,20,Conductores\n" +
    "AUT-PLC-S7,PLC Siemens S7-1200,un,485000,18,Automatización\n" +
    ",,,,,\n" +
    ",,,,,\n";
  const blob = new Blob(["\uFEFF" + content], { type: "text/csv;charset=utf-8" });
  const a = document.createElement("a");
  a.href = URL.createObjectURL(blob);
  a.download = "MAB-plantilla-materiales.csv";
  document.body.appendChild(a); a.click();
  setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 0);
}

function MaterialsView({ state, setState }) {
  const [q, setQ] = React.useState("");
  const [cat, setCat] = React.useState("Todas");
  const [importOpen, setImportOpen] = React.useState(false);
  const [editing, setEditing] = React.useState(null);
  const [selected, setSelected] = React.useState(new Set());
  const cats = ["Todas", ...Array.from(new Set(state.materials.map(m => m.cat))).sort()];

  const filtered = state.materials.filter(m => {
    if (cat !== "Todas" && m.cat !== cat) return false;
    if (!q) return true;
    const t = (m.sku + " " + m.desc + " " + m.cat).toLowerCase();
    return t.includes(q.toLowerCase());
  });

  const toggleOne = (id) => setSelected(s => {
    const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n;
  });
  const allFilteredSelected = filtered.length > 0 && filtered.every(m => selected.has(m.id));
  const toggleAll = () => setSelected(s => {
    const n = new Set(s);
    if (allFilteredSelected) filtered.forEach(m => n.delete(m.id));
    else filtered.forEach(m => n.add(m.id));
    return n;
  });
  const clearSel = () => setSelected(new Set());
  const removeSelected = () => {
    if (selected.size === 0) return;
    if (!confirm(`¿Eliminar ${selected.size} material(es) seleccionados? Esta acción no se puede deshacer.`)) return;
    setState(s => ({ ...s, materials: s.materials.filter(m => !selected.has(m.id)) }));
    clearSel();
  };

  const update = (id, patch) => setState(s => ({
    ...s,
    materials: s.materials.map(m => m.id === id ? { ...m, ...patch } : m),
  }));
  const remove = (id) => setState(s => ({ ...s, materials: s.materials.filter(m => m.id !== id) }));
  const openNew = () => setEditing({
    id: null, sku: "", desc: "", unit: "un", price: 0, margin: 20,
    cat: cat === "Todas" ? "Iluminación" : cat,
  });
  const saveMaterial = (data) => {
    if (data.id) {
      update(data.id, data);
    } else {
      const m = { ...data, id: uid("m") };
      setState(s => ({ ...s, materials: [m, ...s.materials] }));
    }
    setEditing(null);
  };

  return (
    <>
      <Topbar
        title="Biblioteca de materiales"
        crumb="Catálogo"
        actions={
          <>
            <button className="btn" onClick={downloadMaterialsTemplate} title="Descargar archivo de plantilla CSV">
              <Icon.download /> Plantilla CSV
            </button>
            <button className="btn" onClick={() => setImportOpen(true)}>
              <Icon.upload /> Importar masivo
            </button>
            <button className="btn primary" onClick={openNew}>
              <Icon.plus /> Nuevo material
            </button>
          </>
        }
      />
      <div className="content narrow">
        <div className="card">
          <div className="card-head">
            <div className="row" style={{flex:1, gap: 10}}>
              <div className="row" style={{flex:1, maxWidth: 360, gap: 8, padding: "6px 10px", border:"1px solid var(--line-strong)", borderRadius: 8}}>
                <Icon.search size={16} />
                <input value={q} onChange={e => setQ(e.target.value)}
                       placeholder="Buscar por SKU, descripción o categoría…"
                       style={{border:0, background:"transparent", flex:1, outline:"none"}} />
              </div>
              <select className="btn" value={cat} onChange={e => setCat(e.target.value)}
                      style={{appearance:"auto"}}>
                {cats.map(c => <option key={c}>{c}</option>)}
              </select>
              <span className="muted" style={{fontSize:12}}>{filtered.length} de {state.materials.length}</span>
              {selected.size > 0 && (
                <>
                  <span style={{flex:1}}></span>
                  <span className="badge brand">{selected.size} seleccionados</span>
                  <button className="btn" onClick={clearSel}>Cancelar</button>
                  <button className="btn danger" onClick={removeSelected}>
                    <Icon.trash /> Eliminar selección
                  </button>
                </>
              )}
            </div>
          </div>
          <div className="card-body flush" style={{maxHeight:"calc(100vh - 280px)", overflow:"auto"}}>
            <table className="data">
              <thead>
                <tr>
                  <th style={{width: 36}}>
                    <input type="checkbox" checked={allFilteredSelected}
                           onChange={toggleAll} title="Seleccionar todos" />
                  </th>
                  <th style={{width: 130}}>SKU</th>
                  <th>Descripción</th>
                  <th style={{width: 150}}>Categoría</th>
                  <th style={{width: 70}}>Unidad</th>
                  <th style={{width: 130}} className="num">Precio neto</th>
                  <th style={{width: 80}} className="num">Margen %</th>
                  <th style={{width: 70}}></th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0 ? (
                  <tr><td colSpan={8}>
                    <div className="empty">
                      <div className="ico">∅</div>
                      Sin resultados — ajusta el filtro o agrega un nuevo material.
                    </div>
                  </td></tr>
                ) : filtered.map(m => (
                  <tr key={m.id} style={selected.has(m.id) ? {background:"var(--accent-soft)"} : null}>
                    <td>
                      <input type="checkbox" checked={selected.has(m.id)}
                             onChange={() => toggleOne(m.id)} />
                    </td>
                    <td className="mono">
                      <input value={m.sku} onChange={e => update(m.id, { sku: e.target.value })} />
                    </td>
                    <td>
                      <input value={m.desc} onChange={e => update(m.id, { desc: e.target.value })} />
                    </td>
                    <td>
                      <input value={m.cat} onChange={e => update(m.id, { cat: e.target.value })} />
                    </td>
                    <td>
                      <input value={m.unit} onChange={e => update(m.id, { unit: e.target.value })} />
                    </td>
                    <td className="num">
                      <input className="num" type="number" value={m.price}
                             onChange={e => update(m.id, { price: +e.target.value })} />
                    </td>
                    <td className="num">
                      <input className="num" type="number" value={m.margin}
                             onChange={e => update(m.id, { margin: +e.target.value })} />
                    </td>
                    <td>
                      <div className="row" style={{gap:4,justifyContent:"flex-end"}}>
                        <button className="btn icon" onClick={() => setEditing(m)} title="Editar en formulario">
                          <Icon.edit />
                        </button>
                        <button className="btn danger icon" onClick={() => remove(m.id)} title="Eliminar">
                          <Icon.trash />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {importOpen && <ImportModal onClose={() => setImportOpen(false)}
                                  onConfirm={(rows) => {
                                    setState(s => ({ ...s, materials: [...rows, ...s.materials] }));
                                    setImportOpen(false);
                                  }} />}
      {editing && <MaterialModal initial={editing} onClose={() => setEditing(null)} onSave={saveMaterial} />}
    </>
  );
}

function MaterialModal({ initial, onClose, onSave }) {
  const [m, setM] = React.useState(initial);
  const set = (patch) => setM(s => ({ ...s, ...patch }));
  const valid = m.desc.trim() && +m.price >= 0;

  function submit(e) {
    e.preventDefault();
    if (!valid) return;
    onSave({ ...m, price: +m.price || 0, margin: +m.margin || 0 });
  }

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{maxWidth:560}}>
        <div className="modal-head">
          <h2>{m.id ? "Editar material" : "Nuevo material"}</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <form onSubmit={submit}>
          <div className="modal-body stack" style={{gap:14}}>
            <div className="grid-2">
              <div className="field">
                <label>SKU</label>
                <input value={m.sku} onChange={e => set({ sku: e.target.value })}
                       placeholder="Ej. ILU-PAN-30" autoFocus />
              </div>
              <div className="field">
                <label>Categoría</label>
                <input value={m.cat} onChange={e => set({ cat: e.target.value })}
                       placeholder="Ej. Iluminación" />
              </div>
            </div>
            <div className="field">
              <label>Descripción <span style={{color:"var(--danger)"}}>*</span></label>
              <input value={m.desc} onChange={e => set({ desc: e.target.value })}
                     placeholder="Ej. Panel LED 30x120 40W 4000K" required />
            </div>
            <div className="grid-3">
              <div className="field">
                <label>Unidad</label>
                <input value={m.unit} onChange={e => set({ unit: e.target.value })} placeholder="un / m / kg" />
              </div>
              <div className="field">
                <label>Precio neto (CLP) <span style={{color:"var(--danger)"}}>*</span></label>
                <input type="number" min="0" value={m.price}
                       onChange={e => set({ price: e.target.value })} required />
              </div>
              <div className="field">
                <label>Margen (%)</label>
                <input type="number" min="0" value={m.margin}
                       onChange={e => set({ margin: e.target.value })} />
              </div>
            </div>
          </div>
          <div className="modal-foot row" style={{justifyContent:"flex-end",padding:"12px 18px",borderTop:"1px solid var(--line)"}}>
            <button type="button" className="btn" onClick={onClose}>Cancelar</button>
            <button type="submit" className="btn primary" disabled={!valid}>
              <Icon.check /> Guardar material
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

function ImportModal({ onClose, onConfirm }) {
  const [raw, setRaw] = React.useState(
    "ILU-PAN-30\tPanel LED 30x120 40W 4000K\tun\t24900\t22\tIluminación\n" +
    "CON-EVA-2x1\tCable EVA 2x1.5mm² flexible\tm\t720\t20\tConductores"
  );
  const [sep, setSep] = React.useState("auto");
  const fileRef = React.useRef(null);
  const [fileName, setFileName] = React.useState(null);

  function handleFile(file) {
    if (!file) return;
    const r = new FileReader();
    r.onload = () => {
      let text = String(r.result || "");
      // strip BOM
      if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1);
      // skip header row if it contains "SKU" / "Descripci"
      const lines = text.split(/\r?\n/).filter(l => l.trim().length);
      if (lines.length && /sku|descrip/i.test(lines[0])) lines.shift();
      setRaw(lines.join("\n"));
      setFileName(file.name);
    };
    r.readAsText(file, "utf-8");
  }

  const parsed = React.useMemo(() => {
    if (!raw.trim()) return [];
    const splitter = sep === "auto"
      ? (raw.includes("\t") ? "\t" : (raw.includes(";") ? ";" : ","))
      : sep;
    return raw.trim().split("\n").map((line, i) => {
      const cells = line.split(splitter).map(c => c.trim());
      const [sku, desc, unit, price, margin, cat] = cells;
      return {
        id: uid("m"),
        sku: sku || "",
        desc: desc || "(sin descripción)",
        unit: unit || "un",
        price: +(price || 0),
        margin: +(margin || 20),
        cat: cat || "Sin categoría",
        _ok: !!desc && !isNaN(+price),
      };
    });
  }, [raw, sep]);
  const okCount = parsed.filter(r => r._ok).length;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h2>Importar materiales masivamente</h2>
          <button className="btn ghost" onClick={onClose}>✕</button>
        </div>
        <div className="modal-body stack" style={{gap:16}}>
          <div className="muted" style={{fontSize:12.5, lineHeight:1.5}}>
            <b>Columnas en orden:</b> <span className="mono">SKU · Descripción · Unidad · Precio · Margen % · Categoría</span>.
            El separador se detecta automáticamente (Tab, «;» o «,»).
          </div>

          <div className="row" style={{gap:10,flexWrap:"wrap",alignItems:"center"}}>
            <input ref={fileRef} type="file" accept=".csv,text/csv,.txt"
                   style={{display:"none"}}
                   onChange={e => handleFile(e.target.files?.[0])} />
            <button className="btn primary" onClick={() => fileRef.current?.click()}>
              <Icon.upload /> Subir archivo CSV
            </button>
            <button className="btn" onClick={() => downloadMaterialsTemplate()}>
              <Icon.download /> Descargar plantilla
            </button>
            {fileName && <span className="muted" style={{fontSize:12}}>📄 {fileName}</span>}
            <span className="muted" style={{fontSize:12,marginLeft:"auto"}}>o pega abajo desde Excel ↓</span>
          </div>
          <div className="row">
            <label className="muted" style={{fontSize:11.5,fontWeight:600,textTransform:"uppercase",letterSpacing:".08em"}}>Separador</label>
            <select className="btn sm" value={sep} onChange={e => setSep(e.target.value)}>
              <option value="auto">Auto</option>
              <option value="\t">Tab</option>
              <option value=",">Coma</option>
              <option value=";">Punto y coma</option>
            </select>
          </div>
          <textarea value={raw} onChange={e => setRaw(e.target.value)}
                    style={{width:"100%", minHeight:160, fontFamily:"var(--mono)", fontSize:12, padding:10, border:"1px solid var(--line-strong)", borderRadius:8}} />

          {parsed.length > 0 && (
            <div className="card">
              <div className="card-head">
                <div className="row" style={{gap:10}}>
                  <b style={{fontSize:13}}>Vista previa</b>
                  <span className="badge ok">{okCount} válidos</span>
                  {parsed.length - okCount > 0 && <span className="badge">{parsed.length - okCount} con errores</span>}
                </div>
              </div>
              <div className="card-body flush" style={{maxHeight:220, overflow:"auto"}}>
                <table className="data">
                  <thead><tr>
                    <th>SKU</th><th>Descripción</th><th>Unidad</th>
                    <th className="num">Precio</th><th className="num">Margen %</th><th>Categoría</th>
                  </tr></thead>
                  <tbody>
                    {parsed.map(r => (
                      <tr key={r.id} style={{opacity: r._ok ? 1 : .5}}>
                        <td className="mono">{r.sku}</td>
                        <td>{r.desc}</td>
                        <td>{r.unit}</td>
                        <td className="num">{clp(r.price)}</td>
                        <td className="num">{r.margin}%</td>
                        <td>{r.cat}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          <div className="row" style={{justifyContent:"flex-end"}}>
            <button className="btn" onClick={onClose}>Cancelar</button>
            <button className="btn primary" disabled={okCount === 0}
                    onClick={() => onConfirm(parsed.filter(r => r._ok).map(({_ok, ...r}) => r))}>
              <Icon.check /> Importar {okCount} materiales
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MaterialsView, ImportModal, MaterialModal, downloadMaterialsTemplate });