/* ============================================================
   Vista: Productos (CRUD)
   ============================================================ */
function ProductModal({ initial, suppliers, onSave, onClose }) {
  const blank = {
    id: "", name: "", cat: "Juguetes", desc: "", sku: "", img: "",
    buyPrice: 0, buyPrevPrice: 0, sellPrice: 0, stock: 0, stockMin: 1,
    supplier: suppliers[0]?.id || "", lastBuy: new Date().toISOString().slice(0, 10),
  };
  const [f, setF] = useState(initial ? { ...initial } : blank);
  const set = (k) => (e) => {
    const v = e.target.value;
    const numKeys = ["buyPrice", "buyPrevPrice", "sellPrice", "stock", "stockMin"];
    setF((s) => ({ ...s, [k]: numKeys.includes(k) ? Number(v) : v }));
  };

  const inf = RB.inflationPct(f);
  const mg = RB.margin(f);
  const suggested = RB.suggestedSell(f);
  const valid = f.name.trim() && f.sellPrice > 0;

  return (
    <Modal wide
      title={initial ? "Editar producto" : "Nuevo producto"}
      subtitle={initial ? initial.id : "Completá los datos del producto y su proveedor"}
      onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Cancelar</button>
        <button className="btn btn-primary" disabled={!valid}
          onClick={() => onSave(f)}>
          <Icon name="check" size={16} />{initial ? "Guardar cambios" : "Crear producto"}
        </button>
      </>}>
      <div className="form-grid">
        <ImagePicker label="Imagen del producto" hint="para identificarlo rápido"
          shape="rect" value={f.img} onChange={(url) => setF((s) => ({ ...s, img: url }))} />
        <Field label="Nombre del producto" full>
          <input className="input" value={f.name} onChange={set("name")} placeholder="Ej: Bebedero Fuente Cascada 2L" />
        </Field>
        <Field label="Categoría">
          <select className="select" style={{ width: "100%" }} value={f.cat} onChange={set("cat")}>
            {RB.CATEGORIES.map((c) => <option key={c}>{c}</option>)}
          </select>
        </Field>
        <Field label="SKU / código">
          <input className="input" value={f.sku} onChange={set("sku")} placeholder="BEB-FNT-2L" />
        </Field>
        <Field label="Descripción" full>
          <textarea className="textarea" value={f.desc} onChange={set("desc")} placeholder="Descripción comercial del producto…" />
        </Field>

        <Field label="Precio de compra (actual)" hint="costo unitario">
          <div className="input-prefix"><span className="pfx">$</span>
            <input className="input num" type="number" value={f.buyPrice} onChange={set("buyPrice")} /></div>
        </Field>
        <Field label="Precio de compra anterior" hint="para calcular inflación">
          <div className="input-prefix"><span className="pfx">$</span>
            <input className="input num" type="number" value={f.buyPrevPrice} onChange={set("buyPrevPrice")} /></div>
        </Field>
        <Field label="Precio de venta">
          <div className="input-prefix"><span className="pfx">$</span>
            <input className="input num" type="number" value={f.sellPrice} onChange={set("sellPrice")} /></div>
        </Field>
        <Field label="Proveedor">
          <select className="select" style={{ width: "100%" }} value={f.supplier} onChange={set("supplier")}>
            {suppliers.map((s) => <option key={s.id} value={s.id}>{s.name}</option>)}
          </select>
        </Field>

        <Field label="Stock actual">
          <input className="input num" type="number" value={f.stock} onChange={set("stock")} />
        </Field>
        <Field label="Stock mínimo" hint="ideal = mínimo × 2">
          <input className="input num" type="number" value={f.stockMin} onChange={set("stockMin")} />
        </Field>
        <Field label="Fecha última compra">
          <input className="input" type="date" value={f.lastBuy} onChange={set("lastBuy")} />
        </Field>
        <Field label="Stock ideal (auto)">
          <input className="input num" value={RB.stockIdeal(f)} disabled style={{ opacity: .7 }} />
        </Field>
      </div>

      {/* Panel de cálculo en vivo */}
      <div className="card-pad" style={{ marginTop: 18, background: "var(--linen)", borderRadius: "var(--r-md)", border: "1px solid var(--line)" }}>
        <div className="flex aic gap8" style={{ marginBottom: 12 }}>
          <Icon name="trending" size={17} style={{ color: "var(--pine)" }} />
          <strong style={{ fontSize: 14 }}>Análisis automático</strong>
        </div>
        <div className="grid-3">
          <div>
            <div className="muted" style={{ fontSize: 12.5 }}>Inflación en costo</div>
            <div className="num" style={{ fontSize: 22, fontWeight: 700, color: inf > 0 ? "var(--crit)" : "var(--ok)", fontFamily: "var(--font-display)" }}>{RB.pct(inf)}</div>
            <div className="muted" style={{ fontSize: 11.5 }}>{RB.fmtARS(f.buyPrevPrice)} → {RB.fmtARS(f.buyPrice)}</div>
          </div>
          <div>
            <div className="muted" style={{ fontSize: 12.5 }}>Margen actual</div>
            <div className="num" style={{ fontSize: 22, fontWeight: 700, color: mg < 30 ? "var(--warn)" : "var(--pine)", fontFamily: "var(--font-display)" }}>{Math.round(mg)}%</div>
            <div className="muted" style={{ fontSize: 11.5 }}>recomendado {Math.round(RB.TARGET_MARGIN * 100)}%</div>
          </div>
          <div>
            <div className="muted" style={{ fontSize: 12.5 }}>Precio sugerido</div>
            <div className="num" style={{ fontSize: 22, fontWeight: 700, color: "var(--clay)", fontFamily: "var(--font-display)" }}>{RB.fmtARS(suggested)}</div>
            <button className="btn btn-ghost btn-sm" style={{ marginTop: 4 }}
              onClick={() => setF((s) => ({ ...s, sellPrice: Math.round(suggested / 100) * 100 }))}>Aplicar sugerido</button>
          </div>
        </div>
      </div>
    </Modal>
  );
}

function PriceListModal({ products, onClose }) {
  const [q, setQ] = useState("");
  const list = products
    .filter((p) => !q || (p.name + p.sku + p.cat).toLowerCase().includes(q.toLowerCase()))
    .sort((a, b) => a.name.localeCompare(b.name));
  return (
    <Modal wide
      title="Lista de precios · cliente"
      subtitle="Precios de venta al público — mostrá o imprimí esta lista"
      onClose={onClose}
      footer={<>
        <button className="btn btn-ghost" onClick={onClose}>Cerrar</button>
        <button className="btn btn-primary" onClick={() => window.print()}>
          <Icon name="download" size={16} />Imprimir / PDF
        </button>
      </>}>
      <div className="search" style={{ width: "100%", marginBottom: 14 }}>
        <Icon name="search" />
        <input placeholder="Buscar producto…" value={q} onChange={(e) => setQ(e.target.value)} autoFocus />
      </div>
      <div className="pricelist" id="rb-pricelist">
        {list.map((p) => (
          <div className="pl-row" key={p.id}>
            <div className="pl-info">
              <ProdThumb product={p} />
              <div>
                <div className="pl-name">{p.name}</div>
                <div className="muted" style={{ fontSize: 12 }}>{p.cat} · {p.sku}</div>
              </div>
            </div>
            <div className="pl-price">{RB.fmtARS(p.sellPrice)}</div>
          </div>
        ))}
        {list.length === 0 && (
          <div className="empty"><Icon name="search" size={40} /><div>Sin resultados</div></div>
        )}
      </div>
    </Modal>
  );
}

function Productos({ products, suppliers, onChange, toast }) {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("Todas");
  const [editing, setEditing] = useState(null); // product or {} for new
  const [confirm, setConfirm] = useState(null);
  const [priceList, setPriceList] = useState(false);

  const filtered = products.filter((p) => {
    const okCat = cat === "Todas" || p.cat === cat;
    const okQ = !q || (p.name + p.sku + p.id).toLowerCase().includes(q.toLowerCase());
    return okCat && okQ;
  });

  const save = (data) => {
    if (editing && editing.id) {
      onChange((st) => ({ ...st, products: st.products.map((p) => p.id === editing.id ? { ...data } : p) }));
      toast("Producto actualizado");
    } else {
      onChange((st) => {
        const seq = (st.seq || 1013) + 1;
        return { ...st, seq, products: [{ ...data, id: "RB-" + seq }, ...st.products] };
      });
      toast("Producto creado");
    }
    setEditing(null);
  };
  const del = (p) => {
    onChange((st) => ({ ...st, products: st.products.filter((x) => x.id !== p.id) }));
    toast("Producto eliminado");
    setConfirm(null);
  };

  return (
    <div>
      <div className="toolbar">
        {["Todas", ...RB.CATEGORIES].map((c) => (
          <button key={c} className={"chip" + (cat === c ? " active" : "")} onClick={() => setCat(c)}>{c}</button>
        ))}
      </div>
      <div className="toolbar">
        <div className="search" style={{ width: 320 }}>
          <Icon name="search" />
          <input placeholder="Buscar por nombre, SKU o ID…" value={q} onChange={(e) => setQ(e.target.value)} />
        </div>
        <span className="spacer"></span>
        <span className="muted" style={{ fontSize: 13.5 }}>{filtered.length} de {products.length}</span>
        <button className="btn btn-ghost" onClick={() => setPriceList(true)}>
          <Icon name="tag" size={16} />Lista de precios
        </button>
        <button className="btn btn-primary" onClick={() => setEditing({})}>
          <Icon name="plus" size={17} />Nuevo producto
        </button>
      </div>

      <div className="table-wrap">
        <table className="tbl">
          <thead>
            <tr>
              <th>Producto</th><th>Categoría</th><th className="right">Compra</th>
              <th className="right">Venta</th><th className="center">Margen</th>
              <th className="center">Stock</th><th>Estado</th><th className="right">Acciones</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((p) => (
              <tr key={p.id}>
                <td>
                  <div className="prod-cell">
                    <ProdThumb product={p} />
                    <div>
                      <div className="td-strong">{p.name}</div>
                      <div className="muted" style={{ fontSize: 12 }}>{p.id} · {p.sku}</div>
                    </div>
                  </div>
                </td>
                <td data-label="Categoría"><span className="tag">{p.cat}</span></td>
                <td className="right num" data-label="Compra">{RB.fmtARS(p.buyPrice)}</td>
                <td className="right num td-strong" data-label="Venta">{RB.fmtARS(p.sellPrice)}</td>
                <td className="center num" data-label="Margen">{Math.round(RB.margin(p))}%</td>
                <td className="center num td-strong" data-label="Stock">{p.stock}</td>
                <td data-label="Estado"><StockBadge product={p} /></td>
                <td data-label="Acciones">
                  <div className="row-actions">
                    <button className="icon-btn" title="Editar" onClick={() => setEditing(p)}><Icon name="edit" /></button>
                    <button className="icon-btn danger" title="Eliminar" onClick={() => setConfirm(p)}><Icon name="trash" /></button>
                  </div>
                </td>
              </tr>
            ))}
            {filtered.length === 0 && (
              <tr><td colSpan="8"><div className="empty"><Icon name="search" size={40} /><div>No se encontraron productos</div></div></td></tr>
            )}
          </tbody>
        </table>
      </div>

      {editing && (
        <ProductModal initial={editing.id ? editing : null} suppliers={suppliers}
          onSave={save} onClose={() => setEditing(null)} />
      )}
      {priceList && <PriceListModal products={products} onClose={() => setPriceList(false)} />}
      {confirm && (
        <Modal title="Eliminar producto" subtitle={confirm.name} onClose={() => setConfirm(null)}
          footer={<>
            <button className="btn btn-ghost" onClick={() => setConfirm(null)}>Cancelar</button>
            <button className="btn btn-clay" onClick={() => del(confirm)}><Icon name="trash" size={16} />Eliminar</button>
          </>}>
          <p style={{ fontSize: 14.5, color: "var(--ink-2)", margin: 0 }}>
            ¿Seguro que querés eliminar <strong>{confirm.name}</strong> ({confirm.id})? Esta acción no se puede deshacer.
          </p>
        </Modal>
      )}
    </div>
  );
}

Object.assign(window, { Productos, ProductModal });