/* ============================================
   Admin Modules — Empleados, Cheques
   ============================================ */

/* ============================================
   EMPLEADOS
   ============================================ */
function Empleados() {
  const D = window.DATA;

  const [empleados, setEmpleados] = useState([]);
  const [sel, setSel] = useState(null);
  const [maquinariaOptions, setMaquinariaOptions] = useState(["—"]);
  const [loteOptions,       setLoteOptions]       = useState(["—", "Galpón A", "Galpón B", "Galpón C", "Galpón D", "Taller propio", "Oficina", "Ruta — entregas"]);

  useEffect(() => {
    window.API.get("/empleados").then(r => {
      if (r.data && r.data.length > 0) {
        const mapped = r.data.map(window.API_MAP.empleado);
        setEmpleados(mapped);
        setSel(mapped[0].id);
      }
    });
    window.API.get("/maquinas").then(r => {
      if (r.data) setMaquinariaOptions(["—", ...r.data.map(m => m.nombre)]);
    });
    window.API.get("/lotes").then(r => {
      if (r.data) setLoteOptions(["—", ...r.data.map(l => "Lote " + l.nombre), "Galpón A", "Galpón B", "Galpón C", "Galpón D", "Taller propio", "Oficina", "Ruta — entregas"]);
    });
  }, []);
  const [payFor, setPayFor] = useState(null);
  const [addTaskFor, setAddTaskFor] = useState(null);
  const [editTask, setEditTask] = useState(null);
  const [showNuevo, setShowNuevo] = useState(false);

  const cur = empleados.find(e => e.id === sel) || null;
  const ultimoPagoTotal = empleados.reduce((s, e) => s + (e.ultimoPago || 0), 0);

  // maquinariaOptions y loteOptions se cargan desde la API en useEffect

  /* Acciones */
  const registrarPago = (empId, monto, fecha, concepto) => {
    setEmpleados(emps => emps.map(e => e.id === empId
      ? { ...e, ultimoPago: monto, ultimoPagoFecha: fecha, ultimoConcepto: concepto }
      : e
    ));
  };

  const agregarTarea = (empId, tarea) => {
    setEmpleados(emps => emps.map(e => e.id === empId
      ? { ...e, tareas: [...e.tareas, tarea] }
      : e
    ));
  };

  const editarTarea = (empId, idx, tarea) => {
    setEmpleados(emps => emps.map(e => e.id === empId
      ? { ...e, tareas: e.tareas.map((t, i) => i === idx ? tarea : t) }
      : e
    ));
  };

  const eliminarTarea = (empId, idx) => {
    setEmpleados(emps => emps.map(e => e.id === empId
      ? { ...e, tareas: e.tareas.filter((_, i) => i !== idx) }
      : e
    ));
  };

  if (empleados.length === 0 && sel === null) {
    return (
      <div className="page" data-screen-label="Empleados">
        <div className="page__header">
          <div>
            <div className="page__title">Empleados</div>
            <div className="page__sub">Sin empleados cargados</div>
          </div>
          <div className="page__actions">
            <button className="btn btn-primary btn-sm" onClick={() => setShowNuevo(true)}><I name="UserPlus" size={14} /> Agregar primer empleado</button>
          </div>
        </div>
        <div className="panel" style={{ padding: 40, textAlign: "center", color: "var(--admin-mute)" }}>
          <I name="Users" size={40} style={{ opacity: 0.2, display: "block", margin: "0 auto 16px" }} />
          No hay empleados cargados. Usá "Agregar primer empleado" para comenzar.
        </div>
        {showNuevo && <NuevoEmpleadoModal onClose={() => setShowNuevo(false)} onSave={(emp) => { setEmpleados(emps => [...emps, emp]); setSel(emp.id); setShowNuevo(false); }} />}
      </div>
    );
  }

  return (
    <div className="page" data-screen-label="Empleados">
      <div className="page__header">
        <div>
          <div className="page__title">Empleados</div>
          <div className="page__sub">{empleados.length} empleados activos · pagos según modalidad de cada uno</div>
        </div>
        <div className="page__actions">
          <button className="btn btn-secondary btn-sm" onClick={() => window.toast("Generando recibos de sueldo del último período...")}><I name="FileText" size={14} /> Recibos</button>
          <button className="btn btn-secondary btn-sm" onClick={() => cur && setPayFor(cur)}>
            <I name="Wallet" size={14} /> Registrar pago
          </button>
          <button className="btn btn-primary btn-sm" onClick={() => setShowNuevo(true)}>
            <I name="UserPlus" size={14} /> Agregar empleado
          </button>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi icon="Users"        label="Empleados activos"   value={String(empleados.length)} delta="estable" deltaDir="flat" hint="sin altas/bajas" />
        <Kpi icon="Wallet"       label="Último pago total"   value={D.fmtARS(ultimoPagoTotal)} delta="suma últimas liq." deltaDir="info" hint={`${empleados.length} empleados`} />
        <Kpi icon="ListChecks"   label="Tareas asignadas"    value={String(empleados.reduce((s, e) => s + e.tareas.length, 0))} delta="esta semana" deltaDir="info" hint="distribuidas entre los 3" />
        <Kpi icon="Calendar"     label="Próxima quincena"    value="15/05/2026" delta="en 3 días" deltaDir="info" hint="cierre de mayo" />
      </div>

      <div className="grid-2" style={{ alignItems: "start" }}>
        {/* Lista de empleados */}
        <div className="panel" style={{ padding: 0, overflow: "hidden" }}>
          <div className="panel__head" style={{ padding: "18px 20px 0" }}>
            <div>
              <div className="panel__title">Plantilla</div>
              <div className="panel__sub">Tocá un empleado para ver detalle</div>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", padding: 12, gap: 6 }}>
            {empleados.map(e => (
              <button key={e.id}
                onClick={() => setSel(e.id)}
                style={{
                  display: "flex", gap: 12, alignItems: "center", textAlign: "left",
                  padding: 12, borderRadius: 10,
                  background: sel === e.id ? "var(--green-50)" : "transparent",
                  border: sel === e.id ? "1px solid var(--green-400)" : "1px solid transparent",
                  width: "100%", cursor: "pointer",
                  transition: "background 140ms",
                }}>
                <div style={{
                  width: 42, height: 42, borderRadius: "50%",
                  background: sel === e.id ? "var(--green-800)" : "var(--admin-bg)",
                  color: sel === e.id ? "#fff" : "var(--admin-ink)",
                  display: "grid", placeItems: "center",
                  fontWeight: 600, fontSize: 14,
                }}>{e.avatar}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 14, color: "var(--admin-ink)" }}>{e.nombre}</div>
                  <div style={{ fontSize: 12, color: "var(--admin-mute)" }}>{e.rol}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <div style={{ fontSize: 11, color: "var(--admin-mute)" }}>último pago</div>
                  <div style={{ fontWeight: 600, fontSize: 13, color: "var(--admin-ink)", fontVariantNumeric: "tabular-nums" }}>{D.fmtARS(e.ultimoPago || 0)}</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Detalle */}
        <div className="panel">
          <div style={{ display: "flex", alignItems: "flex-start", gap: 16, marginBottom: 18 }}>
            <div style={{
              width: 64, height: 64, borderRadius: "50%",
              background: "var(--green-800)", color: "#fff",
              display: "grid", placeItems: "center",
              fontWeight: 600, fontSize: 22,
              flexShrink: 0,
            }}>{cur.avatar}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 24, fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.1 }}>{cur.nombre}</div>
              <div style={{ color: "var(--admin-mute)", fontSize: 14, marginTop: 2 }}>{cur.rol}</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 10 }}>
                <span className="b b-green"><I name="Calendar" size={11} /> Ingreso {cur.ingreso}</span>
                <span className="b b-mute"><I name="MapPin" size={11} /> {cur.ciudad}</span>
                <span className="b b-mute">{cur.edad} años</span>
              </div>
            </div>
          </div>

          <div className="divider"></div>

          {/* Pago block — sólo último pago + modalidad */}
          <div style={{ background: "var(--green-900)", color: "#fff", borderRadius: 12, padding: 18, marginBottom: 16 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10 }}>
              <div>
                <div style={{ fontSize: 11, color: "var(--gold-300)", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600 }}>Último pago registrado</div>
                <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 36, fontWeight: 500, letterSpacing: "-0.02em", marginTop: 4 }}>{D.fmtARS(cur.ultimoPago || 0)}</div>
              </div>
              <button className="btn btn-sm" onClick={() => setPayFor(cur)} style={{ background: "rgba(255,255,255,0.14)", color: "#fff", flexShrink: 0 }}>
                <I name="Plus" size={13} /> Registrar pago
              </button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14, paddingTop: 14, borderTop: "1px solid rgba(255,255,255,0.12)" }}>
              <div>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.6)" }}>Modalidad</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{cur.modalidadPago}</div>
              </div>
              <div>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.6)" }}>Fecha último pago</div>
                <div style={{ fontSize: 14, fontWeight: 600, marginTop: 2 }}>{cur.ultimoPagoFecha}</div>
              </div>
              <div style={{ gridColumn: "1 / -1" }}>
                <div style={{ fontSize: 11, color: "rgba(255,255,255,0.6)" }}>Cuenta de depósito</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{cur.cuenta}</div>
              </div>
            </div>
          </div>

          {/* Tareas + add */}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>
              Tareas asignadas · {cur.tareas.length}
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => setAddTaskFor(cur)}>
              <I name="Plus" size={13} /> Agregar tarea
            </button>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {cur.tareas.map((t, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "auto 1fr auto",
                gap: 12, alignItems: "center",
                padding: 12,
                background: "var(--admin-bg)",
                borderRadius: 10,
                border: "1px solid var(--admin-line)",
              }}>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: "var(--green-50)", color: "var(--green-800)",
                  display: "grid", placeItems: "center", flexShrink: 0,
                }}>
                  <I name="Check" size={14} strokeWidth={2.4} />
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5, lineHeight: 1.3 }}>{t.descripcion}</div>
                  <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginTop: 6 }}>
                    {t.maquinaria && t.maquinaria !== "—" && (
                      <span className="b b-gold" style={{ fontSize: 11 }}>
                        <I name="Wrench" size={11} /> {t.maquinaria}
                      </span>
                    )}
                    {t.lote && t.lote !== "—" && (
                      <span className="b b-info" style={{ fontSize: 11 }}>
                        <I name="MapPin" size={11} /> {t.lote}
                      </span>
                    )}
                  </div>
                </div>
                <div style={{ display: "flex", gap: 4 }}>
                  <button className="icon-btn" style={{ width: 32, height: 32 }} onClick={() => setEditTask({ empId: cur.id, taskIdx: i })} title="Editar">
                    <I name="Pencil" size={14} />
                  </button>
                  <button className="icon-btn" style={{ width: 32, height: 32, color: "var(--bad)" }} onClick={() => eliminarTarea(cur.id, i)} title="Eliminar">
                    <I name="Trash2" size={14} />
                  </button>
                </div>
              </div>
            ))}
            {cur.tareas.length === 0 && (
              <div style={{ padding: 24, textAlign: "center", color: "var(--admin-mute)", fontSize: 13 }}>
                Sin tareas asignadas. Tocá "Agregar tarea" para crear una.
              </div>
            )}
          </div>

          <div className="divider"></div>
          <div style={{ display: "flex", gap: 18, flexWrap: "wrap", fontSize: 13, color: "var(--admin-mute)" }}>
            <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
              <I name="Phone" size={14} /> {cur.telefono}
            </div>
          </div>
        </div>
      </div>

      {payFor && (
        <PagoModal
          empleado={payFor}
          onClose={() => setPayFor(null)}
          onSave={(monto, fecha, concepto) => {
            registrarPago(payFor.id, monto, fecha, concepto);
            setPayFor(null);
          }}
        />
      )}

      {addTaskFor && (
        <TareaModal
          empleado={addTaskFor}
          maquinariaOptions={maquinariaOptions}
          loteOptions={loteOptions}
          onClose={() => setAddTaskFor(null)}
          onSave={(tarea) => {
            agregarTarea(addTaskFor.id, tarea);
            setAddTaskFor(null);
          }}
        />
      )}

      {editTask && (
        <TareaModal
          empleado={empleados.find(e => e.id === editTask.empId)}
          tarea={empleados.find(e => e.id === editTask.empId).tareas[editTask.taskIdx]}
          maquinariaOptions={maquinariaOptions}
          loteOptions={loteOptions}
          onClose={() => setEditTask(null)}
          onSave={(tarea) => {
            editarTarea(editTask.empId, editTask.taskIdx, tarea);
            setEditTask(null);
          }}
        />
      )}

      {showNuevo && (
        <NuevoEmpleadoModal
          onClose={() => setShowNuevo(false)}
          onSave={(emp) => {
            setEmpleados(emps => [...emps, emp]);
            setSel(emp.id);
            setShowNuevo(false);
          }}
        />
      )}
    </div>
  );
}

/* Modal: registrar pago — abierto, sin "sueldo fijo" */
function PagoModal({ empleado, onClose, onSave }) {
  const D = window.DATA;
  const [monto, setMonto] = useState(empleado.ultimoPago || 0);
  const [fecha, setFecha] = useState("15/05/2026");
  const [concepto, setConcepto] = useState("");
  const [done, setDone] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    onSave(+monto, fecha, concepto);
    setDone(true);
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>Registrar pago</div>
            <div className="modal__title">{empleado.nombre}</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>

        <div style={{ background: "var(--admin-bg)", borderRadius: 10, padding: 12, marginBottom: 16, fontSize: 12.5 }}>
          <div style={{ color: "var(--admin-mute)" }}>Modalidad de pago acordada</div>
          <div style={{ fontWeight: 600, color: "var(--admin-ink)", marginTop: 2 }}>{empleado.modalidadPago}</div>
        </div>

        <form className="form" onSubmit={submit}>
          <div className="form__field">
            <label>Monto a pagar</label>
            <div style={{ position: "relative" }}>
              <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--admin-mute)", fontWeight: 600 }}>$</span>
              <input className="form__input" type="number" value={monto} onChange={e => setMonto(e.target.value)} required style={{ paddingLeft: 28, fontSize: 18, fontWeight: 600 }} />
            </div>
            <div style={{ fontSize: 11, color: "var(--admin-mute)", marginTop: 4 }}>
              Ingresá el monto exacto que le pagás este período (fijo, porcentaje, comisión o lo que corresponda).
            </div>
          </div>
          <div className="form__row">
            <div className="form__field">
              <label>Fecha</label>
              <input className="form__input" value={fecha} onChange={e => setFecha(e.target.value)} />
            </div>
            <div className="form__field">
              <label>Método</label>
              <select className="form__select">
                <option>Transferencia</option>
                <option>Efectivo</option>
                <option>Cheque</option>
              </select>
            </div>
          </div>
          <div className="form__field">
            <label>Concepto / observación</label>
            <input className="form__input" value={concepto} onChange={e => setConcepto(e.target.value)} placeholder="Ej: Quincena mayo · porcentaje sobre 8 lotes" />
          </div>
          {done && (
            <div className="form-toast">
              <I name="CheckCircle2" size={18} /> Pago registrado. {D.fmtARS(+monto)} a {empleado.nombre}.
            </div>
          )}
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
            <button className="btn btn-secondary btn-sm" onClick={onClose} type="button">Cerrar</button>
            <button className="btn btn-primary btn-sm" type="submit">Confirmar pago</button>
          </div>
        </form>
      </div>
    </div>
  );
}

/* Modal: agregar / editar tarea */
function TareaModal({ empleado, tarea, maquinariaOptions, loteOptions, onClose, onSave }) {
  const [descripcion, setDescripcion] = useState(tarea?.descripcion || "");
  const [maquinaria, setMaquinaria] = useState(tarea?.maquinaria || "—");
  const [lote, setLote] = useState(tarea?.lote || "—");

  const submit = (e) => {
    e.preventDefault();
    if (!descripcion.trim()) return;
    onSave({ descripcion: descripcion.trim(), maquinaria, lote });
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>
              {tarea ? "Editar tarea" : "Nueva tarea"}
            </div>
            <div className="modal__title">{empleado.nombre}</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>

        <form className="form" onSubmit={submit}>
          <div className="form__field">
            <label>Descripción de la tarea</label>
            <textarea className="form__textarea" value={descripcion} onChange={e => setDescripcion(e.target.value)} required placeholder="Ej: Enfardado redondo del 2° corte" autoFocus />
          </div>
          <div className="form__row">
            <div className="form__field">
              <label>Maquinaria a usar</label>
              <select className="form__select" value={maquinaria} onChange={e => setMaquinaria(e.target.value)}>
                {maquinariaOptions.map(m => <option key={m}>{m}</option>)}
              </select>
            </div>
            <div className="form__field">
              <label>Lote / campo</label>
              <select className="form__select" value={lote} onChange={e => setLote(e.target.value)}>
                {loteOptions.map(l => <option key={l}>{l}</option>)}
              </select>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
            <button className="btn btn-secondary btn-sm" onClick={onClose} type="button">Cancelar</button>
            <button className="btn btn-primary btn-sm" type="submit">{tarea ? "Guardar cambios" : "Agregar tarea"}</button>
          </div>
        </form>
      </div>
    </div>
  );
}

/* Modal: agregar nuevo empleado */
function NuevoEmpleadoModal({ onClose, onSave }) {
  const [nombre,    setNombre]    = useState("");
  const [rol,       setRol]       = useState("");
  const [telefono,  setTelefono]  = useState("");
  const [ciudad,    setCiudad]    = useState("");
  const [edad,      setEdad]      = useState("");
  const [ingreso,   setIngreso]   = useState("20/05/2026");
  const [modalidad, setModalidad] = useState("Mensual fijo");
  const [cuenta,    setCuenta]    = useState("");
  const [done,      setDone]      = useState(false);

  const submit = (e) => {
    e.preventDefault();
    const avatar = nombre.trim().split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
    const emp = {
      id: "e" + Date.now(),
      nombre: nombre.trim(),
      rol: rol.trim(),
      avatar,
      ingreso,
      ciudad: ciudad.trim() || "—",
      edad: +edad || 0,
      ultimoPago: 0,
      ultimoPagoFecha: "—",
      ultimoConcepto: "",
      cuenta: cuenta.trim() || "Sin cuenta registrada",
      modalidadPago: modalidad,
      telefono: telefono.trim() || "—",
      tareas: [],
    };
    setDone(true);
    setTimeout(() => onSave(emp), 800);
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>Nuevo empleado</div>
            <div className="modal__title">Agregar a la plantilla</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>

        {done ? (
          <div className="form-toast"><I name="CheckCircle2" size={18} /> Empleado agregado correctamente.</div>
        ) : (
          <form className="form" onSubmit={submit}>
            <div className="form__row">
              <div className="form__field">
                <label>Nombre completo</label>
                <input className="form__input" required value={nombre} onChange={e => setNombre(e.target.value)} placeholder="Ej: Juan García" autoFocus />
              </div>
              <div className="form__field">
                <label>Rol / Cargo</label>
                <input className="form__input" required value={rol} onChange={e => setRol(e.target.value)} placeholder="Ej: Tractorista" />
              </div>
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Teléfono</label>
                <input className="form__input" value={telefono} onChange={e => setTelefono(e.target.value)} placeholder="+54 9 356 XXX-XXXX" />
              </div>
              <div className="form__field">
                <label>Ciudad</label>
                <input className="form__input" value={ciudad} onChange={e => setCiudad(e.target.value)} placeholder="Ej: Sacanta" />
              </div>
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Edad</label>
                <input className="form__input" type="number" min="18" max="80" value={edad} onChange={e => setEdad(e.target.value)} placeholder="Ej: 32" />
              </div>
              <div className="form__field">
                <label>Fecha de ingreso</label>
                <input className="form__input" value={ingreso} onChange={e => setIngreso(e.target.value)} />
              </div>
            </div>
            <div className="form__field">
              <label>Modalidad de pago</label>
              <select className="form__select" value={modalidad} onChange={e => setModalidad(e.target.value)}>
                <option>Mensual fijo</option>
                <option>Quincenal fijo</option>
                <option>Por porcentaje de producción</option>
                <option>Por día trabajado</option>
                <option>Por tarea / comisión</option>
              </select>
            </div>
            <div className="form__field">
              <label>Cuenta de depósito</label>
              <input className="form__input" value={cuenta} onChange={e => setCuenta(e.target.value)} placeholder="Ej: CVU Mercado Pago · 000-XXX" />
            </div>
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
              <button className="btn btn-secondary btn-sm" onClick={onClose} type="button">Cancelar</button>
              <button className="btn btn-primary btn-sm" type="submit">
                <I name="UserPlus" size={14} /> Agregar empleado
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

/* ============================================
   CHEQUES
   ============================================ */
function Cheques() {
  const D = window.DATA;
  const [tab,     setTab]     = useState("recibidos");
  const [filter,  setFilter]  = useState("todos");
  const [showNew, setShowNew] = useState(false);
  const [detail,  setDetail]  = useState(null);
  const [cheques, setCheques] = useState([]);

  const recargar = () => {
    window.API.get("/cheques").then(r => {
      if (r.data) setCheques(r.data);
    });
  };

  useEffect(() => { recargar(); }, []);

  const recibidos = cheques.filter(c => c.tipo === "recibido");
  const emitidos  = cheques.filter(c => c.tipo === "emitido");

  // Stats
  const totalRecibidos     = recibidos.filter(c => c.monto).reduce((s, c) => s + c.monto, 0);
  const enCarteraRecibidos = recibidos.filter(c => c.estado === "en_cartera" && c.monto).reduce((s, c) => s + c.monto, 0);
  const totalEmitidos      = emitidos.filter(c => c.monto).reduce((s, c) => s + c.monto, 0);
  const pendientesEmitidos = emitidos.filter(c => c.estado === "pendiente" && c.monto).reduce((s, c) => s + c.monto, 0);

  const dataCur  = tab === "recibidos" ? recibidos : emitidos;
  const filtered = dataCur.filter(c => filter === "todos" ? true : c.estado === filter);

  // Próximos vencimientos ordenados por fecha de cobro
  const proximos = [...emitidos.filter(e => e.estado === "pendiente"), ...recibidos.filter(r => r.estado === "en_cartera")]
    .filter(c => c.fecha_cobro)
    .sort((a, b) => a.fecha_cobro.split("/").reverse().join("").localeCompare(b.fecha_cobro.split("/").reverse().join("")))
    .slice(0, 5);

  return (
    <div className="page" data-screen-label="Cheques">
      <div className="page__header">
        <div>
          <div className="page__title">Cheques</div>
          <div className="page__sub">Gestión de cheques emitidos y recibidos</div>
        </div>
        <div className="page__actions">
          <button className="btn btn-secondary btn-sm" onClick={() => window.toast("Listado de cheques exportado")}><I name="Download" size={14} /> Exportar</button>
          <button className="btn btn-primary btn-sm" onClick={() => setShowNew(true)}>
            <I name="Plus" size={14} /> {tab === "recibidos" ? "Registrar cheque recibido" : "Emitir cheque"}
          </button>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi icon="ArrowDownLeft" label="Recibidos · total"  value={D.fmtARS(totalRecibidos)}     delta={`${recibidos.length} cheques`}                                     deltaDir="info" hint="total acumulado" />
        <Kpi icon="Wallet"        label="En cartera"          value={D.fmtARS(enCarteraRecibidos)} delta={`${recibidos.filter(c=>c.estado==='en_cartera').length} sin depositar`} deltaDir="info" hint="cobro pendiente" />
        <Kpi icon="ArrowUpRight"  label="Emitidos · total"    value={D.fmtARS(totalEmitidos)}      delta={`${emitidos.length} cheques`}                                     deltaDir="info" hint="total acumulado" />
        <Kpi icon="Clock"         label="Pagos pendientes"    value={D.fmtARS(pendientesEmitidos)} delta={`${emitidos.filter(c=>c.estado==='pendiente').length} sin cobrar`}  deltaDir="flat" hint="próx. vencimientos" />
      </div>

      <div className="grid-2">
        <div className="panel" style={{ overflow: "hidden", padding: 0 }}>
          {/* Tabs */}
          <div style={{ display: "flex", borderBottom: "1px solid var(--admin-line)", padding: "0 20px" }}>
            <ChequeTab active={tab === "recibidos"} onClick={() => { setTab("recibidos"); setFilter("todos"); }} label="Recibidos" count={recibidos.length} />
            <ChequeTab active={tab === "emitidos"}  onClick={() => { setTab("emitidos");  setFilter("todos"); }} label="Emitidos"  count={emitidos.length} />

            <div style={{ marginLeft: "auto", display: "flex", gap: 6, alignItems: "center", paddingBottom: 12, paddingTop: 12, flexWrap: "wrap" }}>
              {(tab === "recibidos"
                ? [["todos","Todos"], ["en cartera","En cartera"], ["depositado","Depositado"]]
                : [["todos","Todos"], ["pendiente","Pendientes"], ["cobrado","Cobrados"]]
              ).map(([k, l]) => (
                <button key={k} className={`chip ${filter === k ? "is-active" : ""}`} onClick={() => setFilter(k)}>{l}</button>
              ))}
            </div>
          </div>

          <div className="table-wrap" style={{ maxHeight: 540, overflow: "auto" }}>
            <table className="table">
              <thead>
                <tr>
                  <th>Nº</th>
                  <th>Banco / Sucursal</th>
                  <th>{tab === "recibidos" ? "Librador" : "Beneficiario"}</th>
                  <th>CUIT</th>
                  <th>Concepto</th>
                  <th className="num">Monto</th>
                  <th>Cobro / Vto.</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody>
                {filtered.length === 0 && (
                  <tr><td colSpan="8" style={{ textAlign: "center", padding: 30, color: "var(--admin-mute)" }}>
                    Sin cheques. Usá el botón para registrar uno.
                  </td></tr>
                )}
                {filtered.map(c => {
                  const estadoCls =
                    c.estado === "cobrado" || c.estado === "depositado" ? "b-ok" :
                    c.estado === "en_cartera" ? "b-info" :
                    c.estado === "endosado"   ? "b-gold" :
                    "b-warn";
                  const estadoLabel = {
                    en_cartera: "En cartera", depositado: "Depositado",
                    endosado: "Endosado", cobrado: "Cobrado",
                    pendiente: "Pendiente", rechazado: "Rechazado",
                  }[c.estado] || c.estado;
                  return (
                    <tr key={c.id} style={{ cursor: "pointer" }}
                      onClick={() => setDetail({ ...c, _tipo: tab })}
                      onMouseEnter={e => e.currentTarget.style.background = "var(--green-50)"}
                      onMouseLeave={e => e.currentTarget.style.background = ""}>
                      <td style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, fontWeight: 600 }}>
                        {c.numero ? `#${c.numero}` : "—"}
                      </td>
                      <td>
                        {c.banco && <span className="b b-mute" style={{ fontSize: 11 }}>{c.banco}</span>}
                        {c.sucursal && <div style={{ fontSize: 11, color: "var(--admin-mute)", marginTop: 2 }}>{c.sucursal}</div>}
                        {!c.banco && "—"}
                      </td>
                      <td><strong>{tab === "recibidos" ? (c.origen || "—") : (c.destino || "—")}</strong></td>
                      <td style={{ fontSize: 12, color: "var(--admin-mute)", fontFamily: "'JetBrains Mono', monospace" }}>{c.cuit || "—"}</td>
                      <td style={{ fontSize: 12.5, color: "var(--admin-mute)" }}>{c.concepto || "—"}</td>
                      <td className="num money">{c.monto != null ? D.fmtARS(c.monto) : "—"}</td>
                      <td className="num"><strong>{c.fecha_cobro || "—"}</strong></td>
                      <td><span className={`b ${estadoCls}`}>{estadoLabel}</span></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div className="panel">
            <div className="panel__head">
              <div>
                <div className="panel__title">Próximos vencimientos</div>
                <div className="panel__sub">Cobros y pagos por orden de fecha</div>
              </div>
              <span className="b b-warn">{proximos.length}</span>
            </div>
            {proximos.length === 0 && (
              <div style={{ padding: "12px 0", color: "var(--admin-mute)", fontSize: 13 }}>Sin vencimientos próximos.</div>
            )}
            {proximos.map((c, i) => {
              const isEmitido = c.tipo === "emitido";
              return (
                <div key={i} className="alert" style={{ cursor: "pointer" }} onClick={() => setDetail({ ...c, _tipo: isEmitido ? "emitidos" : "recibidos" })}>
                  <div className={`alert__icon ${isEmitido ? "bad" : "info"}`}>
                    <I name={isEmitido ? "ArrowUpRight" : "ArrowDownLeft"} size={16} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div className="alert__title">
                      {isEmitido ? "Pago a " + (c.destino || "—") : "Cobro de " + (c.origen || "—")}
                    </div>
                    <div className="alert__meta">
                      {c.numero ? `#${c.numero}` : "S/N"} · {c.banco || "—"} · vence <strong>{c.fecha_cobro}</strong>
                    </div>
                  </div>
                  <div style={{ textAlign: "right", fontWeight: 600, fontSize: 13.5, color: isEmitido ? "var(--bad)" : "var(--ok)" }}>
                    {c.monto != null ? `${isEmitido ? "−" : "+"}${D.fmtARS(c.monto)}` : "—"}
                  </div>
                </div>
              );
            })}
          </div>

          <div className="panel" style={{ background: "var(--green-900)", color: "#fff" }}>
            <div style={{ fontSize: 12, color: "var(--gold-300)", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600 }}>Balance proyectado</div>
            <div className="bignum" style={{ color: "#fff", marginTop: 6 }}>
              {D.fmtARS(enCarteraRecibidos - pendientesEmitidos)}
              <small style={{ color: (enCarteraRecibidos - pendientesEmitidos) >= 0 ? "var(--green-400)" : "var(--bad)" }}>
                Cobros en cartera − Pagos pendientes
              </small>
            </div>
          </div>
        </div>
      </div>

      {detail && <ChequeDetail cheque={detail} onClose={() => setDetail(null)} onSuccess={recargar} />}
      {showNew && <ChequeForm tipo={tab} onClose={() => setShowNew(false)} onSuccess={recargar} />}
    </div>
  );
}

function ChequeTab({ active, onClick, label, count }) {
  return (
    <button onClick={onClick} style={{
      padding: "16px 14px",
      borderBottom: active ? "2px solid var(--green-800)" : "2px solid transparent",
      color: active ? "var(--admin-ink)" : "var(--admin-mute)",
      fontWeight: active ? 600 : 500,
      fontSize: 14,
      display: "flex", gap: 8, alignItems: "center",
      transition: "color 140ms",
    }}>
      {label}
      <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: active ? "var(--green-50)" : "var(--admin-bg)", color: active ? "var(--green-800)" : "var(--admin-mute)" }}>{count}</span>
    </button>
  );
}

function ChequeDetail({ cheque, onClose }) {
  const D = window.DATA;
  const isEmitido = cheque._tipo === "emitidos";
  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>
              Cheque {isEmitido ? "emitido" : "recibido"}
            </div>
            <div className="modal__title" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 18 }}>#{cheque.numero}</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>

        <div style={{ background: "var(--bg-cream)", border: "1px solid var(--line)", borderRadius: 12, padding: 22, marginBottom: 16 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Banco</div>
              <div style={{ fontWeight: 600, fontSize: 15 }}>{cheque.banco}</div>
            </div>
            <div style={{ fontSize: 11, color: "var(--ink-mute)", fontFamily: "'JetBrains Mono', monospace" }}>Nº {cheque.numero}</div>
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Páguese a la orden de</div>
          <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 2, marginBottom: 12 }}>
            {isEmitido ? cheque.destino : cheque.origen}
          </div>
          <div style={{ fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Monto</div>
          <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 36, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--green-800)" }}>
            {D.fmtARS(cheque.monto)}
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 16 }}>
          <DetailField label={isEmitido ? "Fecha de emisión" : "Fecha de recepción"} value={isEmitido ? cheque.emision : cheque.recepcion} />
          <DetailField label="Fecha de cobro" value={cheque.cobro} highlight />
          <DetailField label="Concepto" value={cheque.concepto} full />
          <DetailField label="Estado" value={<span className={`b ${cheque.estado === "cobrado" || cheque.estado === "depositado" ? "b-ok" : cheque.estado === "en cartera" ? "b-info" : "b-warn"}`}>{cheque.estado}</span>} />
        </div>

        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
          <button className="btn btn-secondary btn-sm" onClick={() => window.toast(`Imprimiendo cheque #${cheque.numero}`)}><I name="Printer" size={14} /> Imprimir</button>
          {!isEmitido && cheque.estado === "en cartera" && (
            <button className="btn btn-primary btn-sm" onClick={() => { window.toast(`Cheque #${cheque.numero} marcado como depositado`); }}><I name="CheckCircle2" size={14} /> Depositar</button>
          )}
          {isEmitido && cheque.estado === "pendiente" && (
            <button className="btn btn-primary btn-sm" onClick={() => { window.toast(`Cheque #${cheque.numero} marcado como cobrado`); }}><I name="CheckCircle2" size={14} /> Marcar cobrado</button>
          )}
        </div>
      </div>
    </div>
  );
}

function DetailField({ label, value, highlight, full }) {
  return (
    <div style={{ gridColumn: full ? "1 / -1" : "auto" }}>
      <div style={{ fontSize: 11, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 14, fontWeight: 600, color: highlight ? "var(--green-800)" : "var(--admin-ink)" }}>{value}</div>
    </div>
  );
}

function ChequeForm({ tipo, onClose, onSuccess }) {
  const isRec = tipo === "recibidos";
  const D = window.DATA;

  const [numero,    setNumero]    = useState("");
  const [banco,     setBanco]     = useState("");
  const [sucursal,  setSucursal]  = useState("");
  const [cuit,      setCuit]      = useState("");
  const [origen,    setOrigen]    = useState("");   // librador (recibido) o destino (emitido)
  const [monto,     setMonto]     = useState("");
  const [fechaCobro,setFechaCobro]= useState(new Date().toLocaleDateString("es-AR"));
  const [concepto,  setConcepto]  = useState("");
  const [loading,   setLoading]   = useState(false);
  const [done,      setDone]      = useState(false);
  const [err,       setErr]       = useState("");

  const toISO = (str) => {
    const [d, m, y] = (str || "").split("/");
    return y ? `${y}-${m}-${d}` : null;
  };

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true); setErr("");
    const res = await window.API.post("/cheques", {
      tipo:            isRec ? "recibido" : "emitido",
      numero:          numero    || null,
      banco:           banco     || null,
      sucursal:        sucursal  || null,
      cuit:            cuit      || null,
      origen:          isRec ? (origen || null) : null,
      destino:         isRec ? null : (origen || null),
      concepto:        concepto  || null,
      monto:           monto ? parseFloat(monto) : null,
      fecha_cobro:     toISO(fechaCobro) || null,
      estado:          isRec ? "en_cartera" : "pendiente",
    });
    setLoading(false);
    if (res.id) {
      setDone(true);
      onSuccess && onSuccess();
      setTimeout(onClose, 1400);
    } else {
      const msgs = res.errors ? Object.values(res.errors).flat().join(" ") : res.message;
      setErr(msgs || "Error al guardar.");
    }
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div className="modal__title">{isRec ? "Registrar cheque recibido" : "Emitir nuevo cheque"}</div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>
        {done ? (
          <div className="form-toast"><I name="CheckCircle2" size={18} /> Cheque guardado correctamente.</div>
        ) : (
          <form className="form" onSubmit={submit}>

            {/* Fila 1: N° cheque + Banco */}
            <div className="form__row">
              <div className="form__field">
                <label>Nº de cheque</label>
                <input className="form__input" value={numero} onChange={e => setNumero(e.target.value)}
                  placeholder="Ej: 00045821" autoFocus />
              </div>
              <div className="form__field">
                <label>Banco</label>
                <select className="form__select" value={banco} onChange={e => setBanco(e.target.value)}>
                  <option value="">— banco —</option>
                  <option>Banco Galicia</option>
                  <option>Banco Macro</option>
                  <option>Banco Nación</option>
                  <option>Banco Santander</option>
                  <option>Banco Provincia</option>
                  <option>Banco BBVA</option>
                  <option>Banco ICBC</option>
                  <option>Banco Credicoop</option>
                  <option>Otro</option>
                </select>
              </div>
            </div>

            {/* Fila 2: Sucursal + CUIT */}
            <div className="form__row">
              <div className="form__field">
                <label>Sucursal</label>
                <input className="form__input" value={sucursal} onChange={e => setSucursal(e.target.value)}
                  placeholder="Ej: Córdoba Centro" />
              </div>
              <div className="form__field">
                <label>CUIT del {isRec ? "librador" : "beneficiario"}</label>
                <input className="form__input" value={cuit} onChange={e => setCuit(e.target.value)}
                  placeholder="Ej: 30-71456823-4" />
              </div>
            </div>

            {/* Librador / Beneficiario */}
            <div className="form__field">
              <label>{isRec ? "Librador (quién lo emitió)" : "Beneficiario (a quién va)"}</label>
              <input className="form__input" value={origen} onChange={e => setOrigen(e.target.value)}
                placeholder={isRec ? "Ej: Tambo La Esperanza" : "Ej: YPF Sacanta"} />
            </div>

            {/* Monto + Fecha de cobro */}
            <div className="form__row">
              <div className="form__field">
                <label>Monto</label>
                <div style={{ position: "relative" }}>
                  <span style={{ position: "absolute", left: 14, top: "50%", transform: "translateY(-50%)", color: "var(--admin-mute)", fontWeight: 600 }}>$</span>
                  <input className="form__input" type="number" min="0" step="0.01"
                    value={monto} onChange={e => setMonto(e.target.value)}
                    style={{ paddingLeft: 28, fontWeight: 700 }} placeholder="0" />
                </div>
              </div>
              <div className="form__field">
                <label>Fecha de cobro</label>
                <input className="form__input" value={fechaCobro} onChange={e => setFechaCobro(e.target.value)}
                  placeholder="dd/mm/aaaa" required />
              </div>
            </div>

            {/* Concepto */}
            <div className="form__field">
              <label>Concepto</label>
              <input className="form__input" value={concepto} onChange={e => setConcepto(e.target.value)}
                placeholder="Ej: Venta fardos mayo, pago combustible..." />
            </div>

            {err && <div style={{ color: "var(--bad)", fontSize: 13 }}>{err}</div>}

            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
              <button type="button" className="btn btn-secondary btn-sm" onClick={onClose}>Cancelar</button>
              <button type="submit" className="btn btn-primary btn-sm" disabled={loading}>
                {loading ? "Guardando..." : <><I name="ScrollText" size={13} /> Guardar cheque</>}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Empleados, Cheques });

/* ============================================
   ASOCIACIÓN — lotes en sociedad, fardos compartidos y contabilidad
   ============================================ */
function Asociacion() {
  const D = window.DATA;

  // ── datos desde API ──────────────────────────────────────────────
  const [lotesSociedad, setLotesSociedad] = useState([]);
  const [fardos,        setFardos]        = useState([]);
  const [sociosDB,      setSociosDB]      = useState([]); // empresas socias registradas en /api/proveedores
  const [socioSel,      setSocioSel]      = useState(null);
  const [showNuevoSocio,setShowNuevoSocio]= useState(false);

  // movimientos locales hasta que se defina el módulo de precios
  const [compras,       setCompras]   = useState([]);
  const [ventas,        setVentas]    = useState([]);
  const [showCompra,    setShowCompra]= useState(false);
  const [showVenta,     setShowVenta] = useState(false);
  const [tabMov,        setTabMov]    = useState("compras");

  const recargar = () => {
    window.API.get("/lotes").then(r => {
      if (r.data) {
        const soc = r.data.filter(l => l.tenencia === "sociedad").map(window.API_MAP.lote);
        setLotesSociedad(soc);
        if (!socioSel && soc.length > 0) setSocioSel(soc[0].socio);
      }
    });
    window.API.get("/proveedores").then(r => {
      if (r.data) setSociosDB(r.data.map(window.API_MAP.proveedor));
    });
    window.API.get("/fardos").then(r => {
      if (r.data) setFardos(r.data.map(window.API_MAP.fardo));
    });
  };

  useEffect(() => { recargar(); }, []);

  // socios = unión de los registrados en DB + los que aparecen en lotes
  const nombresDB      = sociosDB.map(s => s.nombre);
  const nombresLotes   = lotesSociedad.map(l => l.socio).filter(Boolean);
  const todosNombres   = [...new Set([...nombresDB, ...nombresLotes])];
  const socioActual    = socioSel || todosNombres[0] || null;
  const lotesSocio   = lotesSociedad.filter(l => l.socio === socioActual);
  const hasSocio     = lotesSocio.reduce((s, l) => s + l.hectareas, 0);

  // fardos cuyo origen coincide con algún lote de sociedad
  const nombresSoc   = lotesSociedad.map(l => l.nombre);
  const fardosSoc    = fardos.filter(f => nombresSoc.some(n => (f.origen || "").includes(n)));
  const totalFardosSoc = fardosSoc.reduce((s, f) => s + f.stock, 0);

  // movimientos del socio actual
  const comprasSocio = compras.filter(c => c.socio === socioActual);
  const ventasSocio  = ventas.filter(v => v.socio === socioActual);

  return (
    <div className="page" data-screen-label="Asociacion">
      <div className="page__header">
        <div>
          <div className="page__title">Asociación</div>
          <div className="page__sub">
            {todosNombres.length} {todosNombres.length === 1 ? "empresa socia" : "empresas socias"} ·
            {lotesSociedad.length} lotes en sociedad ·
            {lotesSociedad.reduce((s, l) => s + l.hectareas, 0).toFixed(0)} ha compartidas
          </div>
        </div>
        <div className="page__actions">
          <button className="btn btn-secondary btn-sm" onClick={() => window.toast("Historial de asociación exportado")}><I name="Download" size={14} /> Exportar</button>
          <button className="btn btn-secondary btn-sm" onClick={() => setShowNuevoSocio(true)}><I name="Plus" size={14} /> Nuevo socio</button>
          <button className="btn btn-secondary btn-sm" onClick={() => setShowVenta(true)}><I name="ArrowUpRight" size={14} /> Registrar venta</button>
          <button className="btn btn-primary btn-sm" onClick={() => setShowCompra(true)}><I name="ArrowDownLeft" size={14} /> Compra a socio</button>
        </div>
      </div>

      {/* KPIs */}
      <div className="kpi-grid">
        <Kpi icon="Handshake"  label="Empresas socias"      value={String(todosNombres.length)} delta="" deltaDir="flat" hint="registradas en el sistema" />
        <Kpi icon="Map"        label="Lotes en sociedad"    value={String(lotesSociedad.length)} delta={lotesSociedad.reduce((s,l)=>s+l.hectareas,0).toFixed(0)+" ha"} deltaDir="info" hint="superficie total compartida" />
        <Kpi icon="Package"    label="Fardos de esos lotes" value={D.fmtNum(totalFardosSoc)} delta="" deltaDir="flat" hint="en stock actual" />
        <Kpi icon="ArrowDownLeft" label="Compras registradas" value={String(compras.length)} delta="" deltaDir="flat" hint="a empresas socias" />
      </div>

      {/* ── Selector de socio ── */}
      {todosNombres.length > 0 && (
        <div style={{ display: "flex", gap: 8, marginBottom: 4, flexWrap: "wrap" }}>
          {todosNombres.map(s => {
            const tieneLotes = lotesSociedad.some(l => l.socio === s);
            return (
              <button key={s}
                className={`chip ${socioActual === s ? "is-active" : ""}`}
                onClick={() => setSocioSel(s)}>
                <I name="Handshake" size={12} /> {s}
                {!tieneLotes && <span style={{ fontSize: 10, opacity: 0.7, marginLeft: 4 }}>sin lotes</span>}
              </button>
            );
          })}
        </div>
      )}

      <div className="grid-2" style={{ alignItems: "start" }}>

        {/* ── Lotes del socio seleccionado ── */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div className="panel" style={{ padding: 0, overflow: "hidden" }}>
            <div className="panel__head" style={{ padding: "18px 20px 14px" }}>
              <div>
                <div className="panel__title">{socioActual || "Sin socios"}</div>
                <div className="panel__sub">{lotesSocio.length} lotes · {hasSocio.toFixed(0)} ha totales</div>
              </div>
              <span className="b b-info"><I name="Handshake" size={11} /> Sociedad</span>
            </div>
            {/* Datos de contacto del socio si está registrado en DB */}
            {(() => {
              const info = sociosDB.find(s => s.nombre === socioActual);
              if (!info) return null;
              return (
                <div style={{ padding: "0 20px 16px", display: "flex", gap: 20, flexWrap: "wrap", fontSize: 12.5, color: "var(--admin-mute)", borderBottom: "1px solid var(--admin-line)", marginBottom: 0 }}>
                  {info.contacto && <span><I name="User" size={12} /> {info.contacto}</span>}
                  {info.telefono && <span><I name="Phone" size={12} /> {info.telefono}</span>}
                  {info.email    && <span><I name="Mail" size={12} /> {info.email}</span>}
                  {info.ciudad   && <span><I name="MapPin" size={12} /> {info.ciudad}</span>}
                  {info.cuit     && <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>CUIT {info.cuit}</span>}
                </div>
              );
            })()}

            {lotesSocio.length === 0 ? (
              <div style={{ padding: "20px 20px 24px", color: "var(--admin-mute)", fontSize: 13 }}>
                Sin lotes en sociedad cargados. Agregá lotes con tenencia "Sociedad" en la sección Producción.
              </div>
            ) : (
              <div className="table-wrap">
                <table className="table">
                  <thead>
                    <tr><th>Lote</th><th className="num">Has</th><th>Participación</th><th>Estado</th></tr>
                  </thead>
                  <tbody>
                    {lotesSocio.map((l, i) => (
                      <tr key={i}>
                        <td>
                          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                            <div style={{ width: 30, height: 30, borderRadius: 8, background: "var(--earth-500)22", color: "var(--earth-500)", display: "grid", placeItems: "center" }}>
                              <I name="MapPin" size={14} />
                            </div>
                            <strong>{l.nombre}</strong>
                          </div>
                        </td>
                        <td className="num">{l.hectareas}</td>
                        <td>
                          {l.participacion
                            ? <span className="b b-info">{l.participacion}</span>
                            : <span style={{ color: "var(--admin-mute)" }}>—</span>}
                        </td>
                        <td><EstadoBadge estado={l.estado} /></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          {/* Fardos de esos lotes */}
          <div className="panel">
            <div className="panel__head">
              <div className="panel__title">Fardos de lotes en sociedad</div>
              <span className="b b-mute">{fardosSoc.length} tipos · {D.fmtNum(totalFardosSoc)} unidades</span>
            </div>
            {fardosSoc.length === 0 ? (
              <div style={{ padding: 20, color: "var(--admin-mute)", fontSize: 13 }}>
                No hay fardos cargados con origen en lotes de sociedad.
              </div>
            ) : (
              <div className="table-wrap">
                <table className="table">
                  <thead><tr><th>Fardo</th><th>Tipo</th><th>Origen</th><th className="num">Stock</th></tr></thead>
                  <tbody>
                    {fardosSoc.map(f => (
                      <tr key={f.id}>
                        <td><strong>{f.nombre}</strong></td>
                        <td><span className="b b-mute">{f.tipo}</span></td>
                        <td style={{ fontSize: 12.5, color: "var(--admin-mute)" }}>{f.origen}</td>
                        <td className="num"><strong>{D.fmtNum(f.stock)}</strong></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>
        </div>

        {/* ── Movimientos (compras y ventas) ── */}
        <div className="panel" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ display: "flex", borderBottom: "1px solid var(--admin-line)", padding: "0 20px" }}>
            {[["compras", "Compras al socio", comprasSocio.length], ["ventas", "Ventas a terceros", ventasSocio.length]].map(([k, l, cnt]) => (
              <button key={k} onClick={() => setTabMov(k)} style={{
                padding: "16px 14px",
                borderBottom: tabMov === k ? "2px solid var(--green-800)" : "2px solid transparent",
                color: tabMov === k ? "var(--admin-ink)" : "var(--admin-mute)",
                fontWeight: tabMov === k ? 600 : 500,
                fontSize: 14,
                display: "flex", gap: 8, alignItems: "center",
              }}>
                {l}
                <span style={{ fontSize: 11, padding: "2px 8px", borderRadius: 999, background: tabMov === k ? "var(--green-50)" : "var(--admin-bg)", color: tabMov === k ? "var(--green-800)" : "var(--admin-mute)" }}>{cnt}</span>
              </button>
            ))}
          </div>

          <div style={{ padding: 20 }}>
            {tabMov === "compras" && (
              <>
                <div style={{ fontSize: 12, color: "var(--admin-mute)", marginBottom: 14 }}>
                  Fardos comprados al socio para reventa. Los precios se cargarán cuando se defina el módulo de costos.
                </div>
                {comprasSocio.length === 0 ? (
                  <div style={{ textAlign: "center", padding: "30px 0", color: "var(--admin-mute)" }}>
                    <I name="ArrowDownLeft" size={32} style={{ opacity: 0.3, display: "block", margin: "0 auto 10px" }} />
                    Sin compras registradas al socio.<br />
                    <button className="btn btn-primary btn-sm" style={{ marginTop: 12 }} onClick={() => setShowCompra(true)}>
                      <I name="Plus" size={13} /> Registrar primera compra
                    </button>
                  </div>
                ) : (
                  <div className="table-wrap">
                    <table className="table">
                      <thead><tr><th>Fecha</th><th>Producto</th><th className="num">Cantidad</th><th>Pago</th><th>Estado</th></tr></thead>
                      <tbody>
                        {comprasSocio.map((c, i) => (
                          <tr key={i}>
                            <td className="num">{c.fecha}</td>
                            <td><strong>{c.producto}</strong></td>
                            <td className="num">{c.cantidad}</td>
                            <td style={{ fontSize: 12.5 }}>{c.formaPago}</td>
                            <td><span className={`b ${c.estado === "pagado" ? "b-ok" : "b-warn"}`}>{c.estado}</span></td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </>
            )}

            {tabMov === "ventas" && (
              <>
                <div style={{ fontSize: 12, color: "var(--admin-mute)", marginBottom: 14 }}>
                  Fardos de lotes en sociedad vendidos a terceros. Se agregarán los precios en el módulo de ventas.
                </div>
                {ventasSocio.length === 0 ? (
                  <div style={{ textAlign: "center", padding: "30px 0", color: "var(--admin-mute)" }}>
                    <I name="ArrowUpRight" size={32} style={{ opacity: 0.3, display: "block", margin: "0 auto 10px" }} />
                    Sin ventas registradas de lotes asociados.<br />
                    <button className="btn btn-primary btn-sm" style={{ marginTop: 12 }} onClick={() => setShowVenta(true)}>
                      <I name="Plus" size={13} /> Registrar venta
                    </button>
                  </div>
                ) : (
                  <div className="table-wrap">
                    <table className="table">
                      <thead><tr><th>Fecha</th><th>Comprador</th><th>Producto</th><th className="num">Cantidad</th><th>Estado</th></tr></thead>
                      <tbody>
                        {ventasSocio.map((v, i) => (
                          <tr key={i}>
                            <td className="num">{v.fecha}</td>
                            <td><strong>{v.comprador}</strong></td>
                            <td style={{ fontSize: 12.5 }}>{v.producto}</td>
                            <td className="num">{v.cantidad}</td>
                            <td><span className={`b ${v.estado === "cobrado" ? "b-ok" : "b-warn"}`}>{v.estado}</span></td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )}
              </>
            )}
          </div>
        </div>
      </div>

      {showNuevoSocio && <ModalNuevoSocio onClose={() => setShowNuevoSocio(false)} onSuccess={(nombre) => { recargar(); setSocioSel(nombre); }} />}

      {/* Modal: compra a socio */}
      {showCompra && (
        <div className="modal-back" onClick={() => setShowCompra(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal__head">
              <div className="modal__title">Compra de fardos al socio</div>
              <button className="modal__close" onClick={() => setShowCompra(false)}><I name="X" size={18} /></button>
            </div>
            <form className="form" onSubmit={e => {
              e.preventDefault();
              const fd = new FormData(e.target);
              setCompras(prev => [...prev, {
                socio:     fd.get("socio"),
                fecha:     fd.get("fecha"),
                producto:  fd.get("producto"),
                cantidad:  fd.get("cantidad"),
                formaPago: fd.get("formaPago"),
                estado:    "pendiente",
              }]);
              setTabMov("compras");
              setSocioSel(fd.get("socio"));
              setShowCompra(false);
              window.toast("Compra registrada correctamente");
            }}>
              <div className="form__field">
                <label>Empresa socia</label>
                <select className="form__select" name="socio" defaultValue={socioActual || ""}>
                  {todosNombres.map(s => <option key={s} value={s}>{s}</option>)}
                  {todosNombres.length === 0 && <option value="">Sin socios — registrá uno con "Nuevo socio"</option>}
                </select>
              </div>
              <div className="form__field">
                <label>Producto / tipo de fardo</label>
                <input className="form__input" name="producto" required placeholder="Ej: Fardo redondo 350 kg · 2° corte" />
              </div>
              <div className="form__row">
                <div className="form__field">
                  <label>Cantidad</label>
                  <input className="form__input" name="cantidad" type="number" min="1" required placeholder="0" />
                </div>
                <div className="form__field">
                  <label>Fecha</label>
                  <input className="form__input" name="fecha" defaultValue={new Date().toLocaleDateString("es-AR")} required />
                </div>
              </div>
              <div className="form__field">
                <label>Forma de pago</label>
                <select className="form__select" name="formaPago">
                  <option>Transferencia</option><option>Cheque diferido</option><option>Efectivo</option><option>Cuenta corriente</option>
                </select>
              </div>
              <div style={{ background: "var(--admin-bg)", borderRadius: 8, padding: 10, fontSize: 12.5, color: "var(--admin-mute)" }}>
                El precio se completará cuando se defina la contabilidad de costos del módulo de asociación.
              </div>
              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
                <button className="btn btn-secondary btn-sm" type="button" onClick={() => setShowCompra(false)}>Cancelar</button>
                <button className="btn btn-primary btn-sm" type="submit"><I name="ArrowDownLeft" size={13} /> Guardar compra</button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal: venta de fardos de lotes asociados */}
      {showVenta && (
        <div className="modal-back" onClick={() => setShowVenta(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal__head">
              <div className="modal__title">Venta de fardos asociados</div>
              <button className="modal__close" onClick={() => setShowVenta(false)}><I name="X" size={18} /></button>
            </div>
            <form className="form" onSubmit={e => {
              e.preventDefault();
              const fd = new FormData(e.target);
              setVentas(prev => [...prev, {
                socio:     socioActual,
                fecha:     fd.get("fecha"),
                comprador: fd.get("comprador"),
                producto:  fd.get("producto"),
                cantidad:  fd.get("cantidad"),
                estado:    "pendiente",
              }]);
              setTabMov("ventas");
              setShowVenta(false);
              window.toast("Venta registrada correctamente");
            }}>
              <div className="form__field">
                <label>Lote / origen de los fardos</label>
                <select className="form__select" name="lote">
                  {lotesSocio.map(l => <option key={l.nombre}>{l.nombre} · {l.socio}</option>)}
                  {lotesSocio.length === 0 && <option>Sin lotes — seleccioná un socio</option>}
                </select>
              </div>
              <div className="form__field">
                <label>Tipo de fardo</label>
                <input className="form__input" name="producto" required placeholder="Ej: Fardo redondo 350 kg · 2° corte" />
              </div>
              <div className="form__field">
                <label>Comprador / empresa destino</label>
                <input className="form__input" name="comprador" required placeholder="Ej: Tambo La Esperanza" />
              </div>
              <div className="form__row">
                <div className="form__field">
                  <label>Cantidad</label>
                  <input className="form__input" name="cantidad" type="number" min="1" required placeholder="0" />
                </div>
                <div className="form__field">
                  <label>Fecha</label>
                  <input className="form__input" name="fecha" defaultValue={new Date().toLocaleDateString("es-AR")} required />
                </div>
              </div>
              <div style={{ background: "var(--admin-bg)", borderRadius: 8, padding: 10, fontSize: 12.5, color: "var(--admin-mute)" }}>
                El precio de venta se completará en el módulo de contabilidad de asociación.
              </div>
              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
                <button className="btn btn-secondary btn-sm" type="button" onClick={() => setShowVenta(false)}>Cancelar</button>
                <button className="btn btn-primary btn-sm" type="submit"><I name="ArrowUpRight" size={13} /> Guardar venta</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

function ModalNuevoSocio({ onClose, onSuccess }) {
  const [nombre,      setNombre]      = useState("");
  const [ciudad,      setCiudad]      = useState("");
  const [contacto,    setContacto]    = useState("");
  const [telefono,    setTelefono]    = useState("");
  const [email,       setEmail]       = useState("");
  const [cuit,        setCuit]        = useState("");
  const [desde,       setDesde]       = useState(new Date().getFullYear().toString());
  const [producto,    setProducto]    = useState("");
  const [condicion,   setCondicion]   = useState("");
  const [obs,         setObs]         = useState("");
  const [loading, setLoading] = useState(false);
  const [done,    setDone]    = useState(false);
  const [err,     setErr]     = useState("");

  const submit = async (e) => {
    e.preventDefault();
    setLoading(true); setErr("");
    const res = await window.API.post("/proveedores", {
      nombre,
      ciudad:          ciudad    || null,
      contacto:        contacto  || null,
      telefono:        telefono  || null,
      email:           email     || null,
      cuit:            cuit      || null,
      desde:           desde ? parseInt(desde) : null,
      producto_tipico: producto  || null,
      condicion_pago:  condicion || null,
      estado:          "activo",
      observaciones:   obs       || null,
    });
    setLoading(false);
    if (res.id) {
      setDone(true);
      onSuccess && onSuccess(nombre);
      setTimeout(onClose, 1400);
    } else {
      const msgs = res.errors ? Object.values(res.errors).flat().join(" ") : res.message;
      setErr(msgs || "Error al guardar.");
    }
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>Nueva empresa socia</div>
            <div className="modal__title">Registrar socio</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>
        {done ? (
          <div className="form-toast"><I name="CheckCircle2" size={18} /> Empresa socia "{nombre}" registrada correctamente.</div>
        ) : (
          <form className="form" onSubmit={submit}>
            <div className="form__field">
              <label>Nombre de la empresa</label>
              <input className="form__input" value={nombre} onChange={e => setNombre(e.target.value)} required placeholder="Ej: La Pampita SA" autoFocus />
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Ciudad / Localidad</label>
                <input className="form__input" value={ciudad} onChange={e => setCiudad(e.target.value)} placeholder="Ej: Devoto, Córdoba" />
              </div>
              <div className="form__field">
                <label>Socio desde (año)</label>
                <input className="form__input" type="number" min="1990" max="2099" value={desde} onChange={e => setDesde(e.target.value)} />
              </div>
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Persona de contacto</label>
                <input className="form__input" value={contacto} onChange={e => setContacto(e.target.value)} placeholder="Ej: Juan García" />
              </div>
              <div className="form__field">
                <label>Teléfono</label>
                <input className="form__input" value={telefono} onChange={e => setTelefono(e.target.value)} placeholder="Ej: (03562) 15-302-1840" />
              </div>
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Email</label>
                <input className="form__input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="contacto@empresa.com.ar" />
              </div>
              <div className="form__field">
                <label>CUIT</label>
                <input className="form__input" value={cuit} onChange={e => setCuit(e.target.value)} placeholder="Ej: 30-71456823-4" />
              </div>
            </div>
            <div className="form__row">
              <div className="form__field">
                <label>Producto que trabajan</label>
                <input className="form__input" value={producto} onChange={e => setProducto(e.target.value)} placeholder="Ej: Fardo redondo 350 kg" />
              </div>
              <div className="form__field">
                <label>Condición de pago habitual</label>
                <input className="form__input" value={condicion} onChange={e => setCondicion(e.target.value)} placeholder="Ej: 30 días · cheque diferido" />
              </div>
            </div>
            <div className="form__field">
              <label>Observaciones</label>
              <textarea className="form__textarea" value={obs} onChange={e => setObs(e.target.value)} placeholder="Acuerdos, porcentajes, notas..." />
            </div>
            {err && <div style={{ color: "var(--bad)", fontSize: 13 }}>{err}</div>}
            <div style={{ display: "flex", gap: 10, justifyContent: "flex-end", marginTop: 6 }}>
              <button className="btn btn-secondary btn-sm" type="button" onClick={onClose}>Cancelar</button>
              <button className="btn btn-primary btn-sm" type="submit" disabled={loading}>
                {loading ? "Guardando..." : <><I name="Handshake" size={13} /> Registrar socio</>}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Asociacion });

/* ============================================
   LOGÍSTICA — viajes de entrega y retiro (sin precios)
   ============================================ */
function Logistica() {
  const D = window.DATA;
  const [filtroTipo, setFiltroTipo]   = useState("todos");
  const [filtroEstado, setFiltroEstado] = useState("todos");
  const [showNew, setShowNew] = useState(false);
  const [detail, setDetail] = useState(null);
  const [VIAJES, setVIAJES] = useState([]);

  const recargar = () => {
    window.API.get("/viajes").then(r => {
      if (r.data) setVIAJES(r.data.map(window.API_MAP.viaje));
    });
  };

  useEffect(() => { recargar(); }, []);

  const filtrados = VIAJES
    .filter(v => filtroTipo === "todos" ? true : v.tipo === filtroTipo)
    .filter(v => filtroEstado === "todos" ? true : v.estado === filtroEstado)
    .sort((a, b) => {
      const ad = a.fecha.split("/").reverse().join("");
      const bd = b.fecha.split("/").reverse().join("");
      return bd.localeCompare(ad);
    });

  // KPIs
  const isMayo = (f) => f.endsWith("/05/2026");
  const viajesMes = VIAJES.filter(v => isMayo(v.fecha));
  const rollosEntregados = viajesMes.filter(v => v.tipo === "entrega" && v.estado === "completado").reduce((s, v) => s + v.rollos, 0);
  const rollosRetirados  = viajesMes.filter(v => v.tipo === "retiro"  && v.estado === "completado").reduce((s, v) => s + v.rollos, 0);
  const programados = VIAJES.filter(v => v.estado === "programado" || v.estado === "en curso").length;

  return (
    <div className="page" data-screen-label="Logistica">
      <div className="page__header">
        <div>
          <div className="page__title">Logística</div>
          <div className="page__sub">Viajes para entregar y retirar rollos · sin movimientos de dinero</div>
        </div>
        <div className="page__actions">
          <button className="btn btn-secondary btn-sm" onClick={() => window.toast("3 viajes planificados para los próximos 7 días", "info")}><I name="Calendar" size={14} /> Planificación</button>
          <button className="btn btn-primary btn-sm" onClick={() => setShowNew(true)}>
            <I name="Plus" size={14} /> Nuevo viaje
          </button>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi icon="Truck"          label="Viajes del mes"      value={String(viajesMes.length)}  delta="+3" deltaDir="up" hint="vs. abril" />
        <Kpi icon="ArrowUpRight"   label="Rollos entregados"   value={D.fmtNum(rollosEntregados)} delta="a clientes" deltaDir="info" hint="completados este mes" />
        <Kpi icon="ArrowDownLeft"  label="Rollos retirados"    value={D.fmtNum(rollosRetirados)}  delta="de proveedores" deltaDir="info" hint="completados este mes" />
        <Kpi icon="Clock"          label="Próximos / en curso" value={String(programados)}        delta="agendados" deltaDir="info" hint="ver listado" />
      </div>

      <div className="panel">
        <div className="panel__head" style={{ flexWrap: "wrap" }}>
          <div>
            <div className="panel__title">{filtrados.length} viajes</div>
            <div className="panel__sub">Tocá una fila para ver el detalle</div>
          </div>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <div style={{ display: "flex", gap: 6 }}>
              <span style={{ alignSelf: "center", fontSize: 11, color: "var(--admin-mute)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", marginRight: 4 }}>Tipo</span>
              {[["todos","Todos"],["entrega","Entregas"],["retiro","Retiros"]].map(([k,l]) => (
                <button key={k} className={`chip ${filtroTipo===k?"is-active":""}`} onClick={() => setFiltroTipo(k)}>{l}</button>
              ))}
            </div>
            <div style={{ display: "flex", gap: 6 }}>
              <span style={{ alignSelf: "center", fontSize: 11, color: "var(--admin-mute)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em", marginRight: 4 }}>Estado</span>
              {[["todos","Todos"],["programado","Programados"],["en curso","En curso"],["completado","Completados"]].map(([k,l]) => (
                <button key={k} className={`chip ${filtroEstado===k?"is-active":""}`} onClick={() => setFiltroEstado(k)}>{l}</button>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {filtrados.map(v => (
            <ViajeRow key={v.id} viaje={v} onClick={() => setDetail(v)} />
          ))}
          {filtrados.length === 0 && (
            <div style={{ padding: 40, textAlign: "center", color: "var(--admin-mute)" }}>
              No hay viajes con esos filtros.
            </div>
          )}
        </div>
      </div>

      {detail && <ViajeDetail viaje={detail} onClose={() => setDetail(null)} />}
      {showNew && <ViajeForm onClose={() => setShowNew(false)} onSuccess={recargar} />}
    </div>
  );
}

/* Una fila/tarjeta de viaje */
function ViajeRow({ viaje, onClick }) {
  const D = window.DATA;
  const isEntrega = viaje.tipo === "entrega";
  const estadoCls = viaje.estado === "completado" ? "b-ok"
                  : viaje.estado === "en curso"   ? "b-info"
                  : "b-warn";

  return (
    <div onClick={onClick} style={{
      display: "grid",
      gridTemplateColumns: "70px 44px 1fr 110px",
      gap: 14, alignItems: "center",
      padding: 14, borderRadius: 12,
      background: "var(--admin-bg)",
      border: "1px solid var(--admin-line)",
      cursor: "pointer",
      transition: "background 140ms, border 140ms",
    }}
    onMouseEnter={e => e.currentTarget.style.borderColor = "var(--green-400)"}
    onMouseLeave={e => e.currentTarget.style.borderColor = "var(--admin-line)"}
    >
      {/* Fecha */}
      <div>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, fontWeight: 600 }}>{viaje.fecha}</div>
        <div style={{ fontSize: 10.5, color: "var(--admin-mute)", marginTop: 2 }}>#{viaje.id.toUpperCase()}</div>
      </div>

      {/* Icono de tipo */}
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: isEntrega ? "var(--green-50)" : "var(--gold-100)",
        color:      isEntrega ? "var(--green-800)" : "var(--gold-700)",
        display: "grid", placeItems: "center",
      }}>
        <I name={isEntrega ? "ArrowUpRight" : "ArrowDownLeft"} size={20} strokeWidth={2.2} />
      </div>

      {/* Origen → destino */}
      <div style={{ minWidth: 0 }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
          <span className={`b ${isEntrega ? "b-green" : "b-gold"}`} style={{ fontSize: 10.5 }}>
            {isEntrega ? "Entrega" : "Retiro"}
          </span>
          <span className={`b ${estadoCls}`} style={{ fontSize: 10.5 }}>{viaje.estado}</span>
          <span className="b b-mute" style={{ fontSize: 10.5 }}>
            <I name="User" size={10} /> {viaje.chofer}
          </span>
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center", marginTop: 8, fontSize: 14, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 6, alignItems: "center", minWidth: 0 }}>
            <I name="MapPin" size={14} style={{ color: "var(--admin-mute)", flexShrink: 0 }} />
            <strong style={{ fontSize: 13.5, color: "var(--admin-ink)" }}>{viaje.origen}</strong>
          </div>
          <I name="ArrowRight" size={14} style={{ color: "var(--admin-mute)", flexShrink: 0 }} />
          <div style={{ display: "flex", gap: 6, alignItems: "center", minWidth: 0 }}>
            <I name="MapPin" size={14} style={{ color: isEntrega ? "var(--green-800)" : "var(--gold-700)", flexShrink: 0 }} />
            <strong style={{ fontSize: 13.5, color: "var(--admin-ink)" }}>{viaje.destino}</strong>
          </div>
        </div>
      </div>

      {/* Rollos */}
      <div style={{ textAlign: "right" }}>
        <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--green-800)", lineHeight: 1 }}>
          {D.fmtNum(viaje.rollos)}
        </div>
        <div style={{ fontSize: 10.5, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600, marginTop: 4 }}>
          {viaje.tipoRollo}
        </div>
      </div>
    </div>
  );
}

/* Modal de detalle */
function ViajeDetail({ viaje, onClose }) {
  const D = window.DATA;
  const isEntrega = viaje.tipo === "entrega";

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 560 }}>
        <div className="modal__head">
          <div>
            <div style={{ fontSize: 12, color: "var(--admin-mute)", textTransform: "uppercase", letterSpacing: "0.1em", fontWeight: 600 }}>
              Viaje #{viaje.id.toUpperCase()}
            </div>
            <div className="modal__title">{isEntrega ? "Entrega de rollos" : "Retiro de rollos"}</div>
          </div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>

        {/* Ruta */}
        <div style={{ background: "var(--bg-cream)", border: "1px solid var(--line)", borderRadius: 12, padding: 22, marginBottom: 16 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <div style={{ display: "flex", gap: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: "50%",
                background: "var(--admin-bg)", color: "var(--admin-ink)",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}><I name="MapPin" size={16} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Sale de</div>
                <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{viaje.origen}</div>
              </div>
            </div>
            <div style={{ marginLeft: 17, borderLeft: "2px dashed var(--line)", height: 22 }}></div>
            <div style={{ display: "flex", gap: 12 }}>
              <div style={{
                width: 36, height: 36, borderRadius: "50%",
                background: isEntrega ? "var(--green-800)" : "var(--gold-700)",
                color: "#fff",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}><I name="MapPin" size={16} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, color: "var(--ink-mute)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 600 }}>Va hacia</div>
                <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{viaje.destino}</div>
              </div>
            </div>
          </div>
        </div>

        {/* Cantidad de rollos */}
        <div style={{ background: "var(--green-900)", color: "#fff", borderRadius: 12, padding: 18, marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 11, color: "var(--gold-300)", textTransform: "uppercase", letterSpacing: "0.12em", fontWeight: 600 }}>Cantidad de rollos</div>
            <div style={{ fontFamily: "'Fraunces', Georgia, serif", fontSize: 44, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1, marginTop: 4 }}>{D.fmtNum(viaje.rollos)}</div>
            <div style={{ fontSize: 13, marginTop: 6, color: "rgba(255,255,255,0.7)" }}>{viaje.tipoRollo}</div>
          </div>
          <div style={{
            width: 64, height: 64, borderRadius: 16,
            background: "rgba(255,255,255,0.1)",
            display: "grid", placeItems: "center",
          }}>
            <I name="Package" size={32} strokeWidth={1.6} />
          </div>
        </div>

        {/* Datos extra */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 16 }}>
          <DetailField label="Fecha"       value={viaje.fecha} />
          <DetailField label="Chofer"      value={viaje.chofer} />
          <DetailField label="Camión"      value={viaje.camion} />
          <DetailField label="Estado"      value={<span className={`b ${viaje.estado === "completado" ? "b-ok" : viaje.estado === "en curso" ? "b-info" : "b-warn"}`}>{viaje.estado}</span>} />
          {viaje.obs && viaje.obs !== "—" && <DetailField label="Observaciones" value={viaje.obs} full />}
        </div>

        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
          <button className="btn btn-secondary btn-sm" onClick={onClose}>Cerrar</button>
          {viaje.estado === "programado" && (
            <button className="btn btn-primary btn-sm" onClick={() => { window.toast(`Viaje #${viaje.id.toUpperCase()} marcado en curso`); onClose(); }}><I name="Play" size={14} /> Marcar en curso</button>
          )}
          {viaje.estado === "en curso" && (
            <button className="btn btn-primary btn-sm" onClick={() => { window.toast(`Viaje #${viaje.id.toUpperCase()} completado`); onClose(); }}><I name="CheckCircle2" size={14} /> Marcar completado</button>
          )}
        </div>
      </div>
    </div>
  );
}

/* Modal: nuevo viaje */
function ViajeForm({ onClose, onSuccess }) {
  const [tipo,      setTipo]      = useState("entrega");
  const [fecha,     setFecha]     = useState(new Date().toISOString().slice(0,10));
  const [origen,    setOrigen]    = useState("");
  const [destino,   setDestino]   = useState("");
  const [rollos,    setRollos]    = useState("");
  const [tipoRollo, setTipoRollo] = useState("");
  const [camion,    setCamion]    = useState("");
  const [estado,    setEstado]    = useState("programado");
  const [obs,       setObs]       = useState("");
  const [empleadoId,setEmpleadoId]= useState("");
  const [empleados, setEmpleados] = useState([]);
  const [fardos,    setFardos]    = useState([]);
  const [err,       setErr]       = useState("");
  const [loading,   setLoading]   = useState(false);

  useEffect(() => {
    window.API.get("/empleados").then(r => { if (r.data) setEmpleados(r.data); });
    window.API.get("/fardos").then(r => { if (r.data) setFardos(r.data); });
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setErr(""); setLoading(true);
    const res = await window.API.post("/viajes", {
      empleado_id:    empleadoId || null,
      fecha,
      tipo,
      camion:         camion     || null,
      origen,
      destino,
      cantidad_rollos:rollos     ? parseInt(rollos) : null,
      tipo_rollo:     tipoRollo  || null,
      estado,
      observaciones:  obs        || null,
    });
    setLoading(false);
    if (res.data?.id || res.id) {
      window.toast("Viaje guardado correctamente");
      onSuccess && onSuccess();
      onClose();
    } else {
      const msgs = res.errors ? Object.values(res.errors).flat().join(" · ") : (res.message || "Error al guardar.");
      setErr(msgs);
    }
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__head">
          <div className="modal__title">Nuevo viaje</div>
          <button className="modal__close" onClick={onClose}><I name="X" size={18} /></button>
        </div>
        <form className="form" onSubmit={submit}>
          <div className="form__row">
            <div className="form__field">
              <label>Tipo de viaje</label>
              <select className="form__select" value={tipo} onChange={e => setTipo(e.target.value)}>
                <option value="entrega">Entrega (dejar rollos)</option>
                <option value="retiro">Retiro (ir a buscar rollos)</option>
              </select>
            </div>
            <div className="form__field">
              <label>Fecha</label>
              <input className="form__input" type="date" value={fecha} onChange={e => setFecha(e.target.value)} required />
            </div>
          </div>
          <div className="form__field">
            <label>Origen — de dónde sale</label>
            <input className="form__input" value={origen} onChange={e => setOrigen(e.target.value)} placeholder="Ej: Galpón C · Sacanta" required />
          </div>
          <div className="form__field">
            <label>Destino — hacia dónde va</label>
            <input className="form__input" value={destino} onChange={e => setDestino(e.target.value)} placeholder="Ej: Tambo La Esperanza · Las Varillas" required />
          </div>
          <div className="form__row">
            <div className="form__field">
              <label>Cantidad de rollos</label>
              <input className="form__input" type="number" min="1" value={rollos} onChange={e => setRollos(e.target.value)} placeholder="0" />
            </div>
            <div className="form__field">
              <label>Tipo de rollo</label>
              <select className="form__select" value={tipoRollo} onChange={e => setTipoRollo(e.target.value)}>
                <option value="">Sin especificar</option>
                {fardos.map(f => <option key={f.id} value={f.nombre}>{f.nombre}</option>)}
              </select>
            </div>
          </div>
          <div className="form__row">
            <div className="form__field">
              <label>Chofer</label>
              <select className="form__select" value={empleadoId} onChange={e => setEmpleadoId(e.target.value)}>
                <option value="">Sin asignar</option>
                {empleados.map(e => <option key={e.id} value={e.id}>{e.nombre}</option>)}
              </select>
            </div>
            <div className="form__field">
              <label>Estado</label>
              <select className="form__select" value={estado} onChange={e => setEstado(e.target.value)}>
                <option value="programado">Programado</option>
                <option value="en_curso">En curso</option>
                <option value="completado">Completado</option>
                <option value="cancelado">Cancelado</option>
              </select>
            </div>
          </div>
          <div className="form__field">
            <label>Camión</label>
            <input className="form__input" value={camion} onChange={e => setCamion(e.target.value)} placeholder="Ej: Volvo FH 460" />
          </div>
          <div className="form__field">
            <label>Observaciones</label>
            <textarea className="form__textarea" value={obs} onChange={e => setObs(e.target.value)} placeholder="Horario de salida, contacto en destino, etc." />
          </div>
          {err && <div style={{ fontSize:13, color:"var(--bad)", display:"flex", gap:6 }}><I name="AlertCircle" size={14} />{err}</div>}
          <button className="btn btn-primary btn-sm" type="submit" style={{ alignSelf:"flex-end" }} disabled={loading}>
            {loading ? "Guardando..." : <><I name="Truck" size={14} /> Guardar viaje</>}
          </button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { Logistica });
