/* ============================================================
   Vista: Proveedores (CRUD + productos asociados)
   ============================================================ */
function SupplierModal({ initial, onSave, onClose }) {
  const blank = { id: "", name: "", addr: "", phone: "", whatsapp: "", email: "", notes: "", img: "" };
  const [f, setF] = useState(initial ? { ...initial } : blank);
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const valid = f.name.trim();
  return (
    <Modal title={initial ? "Editar proveedor" : "Nuevo proveedor"}
      subtitle={initial ? initial.id : "Datos de contacto y observaciones"}
      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" : "Crear proveedor"}
        </button>
      </>}>
      <div className="form-grid">
        <ImagePicker label="Logo o foto del proveedor" hint="opcional"
          shape="rounded" value={f.img} onChange={(url) => setF((s) => ({ ...s, img: url }))} />
        <Field label="Nombre / razón social" full>
          <input className="input" value={f.name} onChange={set("name")} placeholder="Distribuidora Patitas SRL" />
        </Field>
        <Field label="Dirección" full>
          <input className="input" value={f.addr} onChange={set("addr")} placeholder="Av. Rivadavia 4820, CABA" />
        </Field>
        <Field label="Teléfono">
          <input className="input" value={f.phone} onChange={set("phone")} placeholder="011 4902-1187" />
        </Field>
        <Field label="WhatsApp">
          <input className="input" value={f.whatsapp} onChange={set("whatsapp")} placeholder="11 5512-8841" />
        </Field>
        <Field label="Email" full>
          <input className="input" value={f.email} onChange={set("email")} placeholder="ventas@proveedor.com.ar" />
        </Field>
        <Field label="Observaciones" full>
          <textarea className="textarea" value={f.notes} onChange={set("notes")} placeholder="Condiciones de pago, mínimos de compra, tiempos de entrega…" />
        </Field>
      </div>
    </Modal>
  );
}

function Proveedores({ products, suppliers, onChange, toast }) {
  const [editing, setEditing] = useState(null);
  const [confirm, setConfirm] = useState(null);

  const save = (data) => {
    if (editing && editing.id) {
      onChange((st) => ({ ...st, suppliers: st.suppliers.map((s) => s.id === editing.id ? { ...data } : s) }));
      toast("Proveedor actualizado");
    } else {
      onChange((st) => {
        const n = st.suppliers.length + 1;
        const id = "P-" + String(n).padStart(2, "0");
        return { ...st, suppliers: [...st.suppliers, { ...data, id }] };
      });
      toast("Proveedor creado");
    }
    setEditing(null);
  };
  const del = (s) => {
    onChange((st) => ({ ...st, suppliers: st.suppliers.filter((x) => x.id !== s.id) }));
    toast("Proveedor eliminado"); setConfirm(null);
  };

  return (
    <div>
      <div className="toolbar">
        <span className="muted" style={{ fontSize: 13.5 }}>{suppliers.length} proveedores activos</span>
        <span className="spacer"></span>
        <button className="btn btn-primary" onClick={() => setEditing({})}><Icon name="plus" size={17} />Nuevo proveedor</button>
      </div>

      <div className="grid-2" style={{ gridTemplateColumns: "repeat(2,1fr)", alignItems: "start" }}>
        {suppliers.map((s) => {
          const assoc = products.filter((p) => p.supplier === s.id);
          return (
            <div className="card card-pad" key={s.id}>
              <div className="flex between aic" style={{ marginBottom: 14 }}>
                <div className="flex aic gap12">
                  <div className="avatar sup-avatar" style={{ borderRadius: 12, background: s.img ? "none" : "linear-gradient(135deg,var(--pine),var(--moss))" }}>
                    {s.img ? <img src={s.img} alt={s.name} /> : <Icon name="truck" size={20} />}
                  </div>
                  <div>
                    <div className="td-strong" style={{ fontSize: 15.5 }}>{s.name}</div>
                    <div className="muted" style={{ fontSize: 12.5 }}>{s.id} · {assoc.length} productos</div>
                  </div>
                </div>
                <div className="row-actions">
                  <button className="icon-btn" onClick={() => setEditing(s)}><Icon name="edit" /></button>
                  <button className="icon-btn danger" onClick={() => setConfirm(s)}><Icon name="trash" /></button>
                </div>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 9, fontSize: 13.5, color: "var(--ink-2)" }}>
                <div className="flex aic gap8"><Icon name="pin" size={15} style={{ color: "var(--sage)", flex: "0 0 auto" }} /><span>{s.addr || "—"}</span></div>
                <div className="flex aic gap8"><Icon name="phone" size={15} style={{ color: "var(--sage)", flex: "0 0 auto" }} /><span>{s.phone || "—"}</span></div>
                <div className="flex aic gap8"><Icon name="whatsapp" size={15} style={{ color: "#3C7657", flex: "0 0 auto" }} /><span>{s.whatsapp || "—"}</span></div>
                <div className="flex aic gap8"><Icon name="mail" size={15} style={{ color: "var(--sage)", flex: "0 0 auto" }} /><span>{s.email || "—"}</span></div>
              </div>

              {s.notes && <div style={{ marginTop: 12, padding: "10px 12px", background: "var(--linen)", borderRadius: "var(--r-sm)", fontSize: 12.5, color: "var(--ink-2)", border: "1px solid var(--line)" }}>{s.notes}</div>}

              {assoc.length > 0 && (
                <div style={{ marginTop: 12, display: "flex", flexWrap: "wrap", gap: 6 }}>
                  {assoc.slice(0, 4).map((p) => <span className="tag" key={p.id}>{p.name.length > 22 ? p.name.slice(0, 22) + "…" : p.name}</span>)}
                  {assoc.length > 4 && <span className="tag">+{assoc.length - 4}</span>}
                </div>
              )}

              <div className="flex gap8" style={{ marginTop: 14 }}>
                <a className="btn btn-ghost btn-sm" href={"https://wa.me/" + (s.whatsapp || "").replace(/\D/g, "")} target="_blank" rel="noopener" style={{ flex: 1 }}>
                  <Icon name="whatsapp" size={15} />WhatsApp
                </a>
                <a className="btn btn-ghost btn-sm" href={"mailto:" + s.email} style={{ flex: 1 }}>
                  <Icon name="mail" size={15} />Email
                </a>
              </div>
            </div>
          );
        })}
      </div>

      {editing && <SupplierModal initial={editing.id ? editing : null} onSave={save} onClose={() => setEditing(null)} />}
      {confirm && (
        <Modal title="Eliminar proveedor" 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 }}>¿Eliminar <strong>{confirm.name}</strong>? Los productos asociados quedarán sin proveedor.</p>
        </Modal>
      )}
    </div>
  );
}

Object.assign(window, { Proveedores });